chore(common): analytics on spotlight (#3727)

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>

packages/hoppscotch-common/src/components/app/Header.vue

@@ -23,7 +23,7 @@
       <div class="col-span-1 flex items-center justify-between space-x-2">
         <button
           class="flex h-full flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
-          @click="invokeAction('modals.search.toggle')"
+          @click="invokeAction('modals.search.toggle', undefined, 'mouseclick')"
         >
           <span class="inline-flex flex-1 items-center">
             <icon-lucide-search class="svg-icons mr-2" />

packages/hoppscotch-common/src/components/app/spotlight/index.vue

@@ -3,7 +3,7 @@
     v-if="show"
     styles="sm:max-w-lg"
     full-width
-    @close="emit('hide-modal')"
+    @close="closeSpotlightModal"
   >
     <template #body>
       <div class="flex flex-col border-b border-divider transition">
@@ -86,35 +86,36 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue"
-import { useService } from "dioc/vue"
 import { useI18n } from "@composables/i18n"
+import { useService } from "dioc/vue"
+import { isEqual } from "lodash-es"
+import { computed, ref, watch } from "vue"
+import { platform } from "~/platform"
+import { HoppSpotlightSessionEventData } from "~/platform/analytics"
 import {
-  SpotlightService,
   SpotlightSearchState,
   SpotlightSearcherResult,
+  SpotlightService,
 } from "~/services/spotlight"
-import { isEqual } from "lodash-es"
-import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
-import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
-import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
-import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
 import { CollectionsSpotlightSearcherService } from "~/services/spotlight/searchers/collections.searcher"
-import { MiscellaneousSpotlightSearcherService } from "~/services/spotlight/searchers/miscellaneous.searcher"
-import { TabSpotlightSearcherService } from "~/services/spotlight/searchers/tab.searcher"
-import { GeneralSpotlightSearcherService } from "~/services/spotlight/searchers/general.searcher"
-import { ResponseSpotlightSearcherService } from "~/services/spotlight/searchers/response.searcher"
-import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/request.searcher"
 import {
   EnvironmentsSpotlightSearcherService,
   SwitchEnvSpotlightSearcherService,
 } from "~/services/spotlight/searchers/environment.searcher"
+import { GeneralSpotlightSearcherService } from "~/services/spotlight/searchers/general.searcher"
+import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
+import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
+import { MiscellaneousSpotlightSearcherService } from "~/services/spotlight/searchers/miscellaneous.searcher"
+import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
+import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/request.searcher"
+import { ResponseSpotlightSearcherService } from "~/services/spotlight/searchers/response.searcher"
+import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
+import { TabSpotlightSearcherService } from "~/services/spotlight/searchers/tab.searcher"
+import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
 import {
   SwitchWorkspaceSpotlightSearcherService,
   WorkspaceSpotlightSearcherService,
 } from "~/services/spotlight/searchers/workspace.searcher"
-import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
-import { platform } from "~/platform"
 
 const t = useI18n()
 
@@ -290,4 +291,17 @@ function newUseArrowKeysForNavigation() {
 
   return { selectedEntry }
 }
+
+function closeSpotlightModal() {
+  const analyticsData: HoppSpotlightSessionEventData = {
+    action: "close",
+    searcherID: null,
+    rank: null,
+  }
+
+  // Sets the action indicating `close` and rank as `null` in the state for analytics event logging
+  spotlightService.setAnalyticsData(analyticsData)
+
+  emit("hide-modal")
+}
 </script>

packages/hoppscotch-common/src/components/history/index.vue

@@ -331,7 +331,8 @@ const deleteHistory = (entry: HistoryEntry) => {
 const addToCollection = (entry: HistoryEntry) => {
   if (props.page === "rest") {
     invokeAction("request.save-as", {
-      request: entry.request,
+      requestType: "rest",
+      request: entry.request as HoppRESTRequest,
     })
   }
 }

packages/hoppscotch-common/src/components/http/Request.vue

@@ -255,7 +255,7 @@ import IconShare2 from "~icons/lucide/share-2"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
-import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
+import { HoppRESTRequest } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
 import { InspectionService } from "~/services/inspection"
 import { InterceptorService } from "~/services/interceptor.service"
@@ -577,25 +577,12 @@ defineActionHandler("request.share-request", shareRequest)
 defineActionHandler("request.method.next", cycleDownMethod)
 defineActionHandler("request.method.prev", cycleUpMethod)
 defineActionHandler("request.save", saveRequest)
-defineActionHandler(
-  "request.save-as",
-  (
-    req:
-      | {
-          requestType: "rest"
-          request: HoppRESTRequest
-        }
-      | {
-          requestType: "gql"
-          request: HoppGQLRequest
-        }
-  ) => {
-    showSaveRequestModal.value = true
-    if (req && req.requestType === "rest") {
-      request.value = req.request
-    }
+defineActionHandler("request.save-as", (req) => {
+  showSaveRequestModal.value = true
+  if (req?.requestType === "rest") {
+    request.value = req.request
   }
-)
+})
 defineActionHandler("request.method.get", () => updateMethod("GET"))
 defineActionHandler("request.method.post", () => updateMethod("POST"))
 defineActionHandler("request.method.put", () => updateMethod("PUT"))