From 43a151e6c001cfd3e8662a5f93c32d74c595d6e0 Mon Sep 17 00:00:00 2001
From: amk-dev <akash.k.mohan98@gmail.com>
Date: Fri, 15 Mar 2024 05:35:44 +0530
Subject: [PATCH 01/11] feat: team search in workspace search and spotlight

---
 packages/hoppscotch-common/locales/en.json    |   5 +-
 .../spotlight/entry/RESTTeamRequestEntry.vue  |  32 ++
 .../src/components/app/spotlight/index.vue    |   2 +
 .../collections/TeamCollections.vue           |  15 +-
 .../src/components/collections/index.vue      |  59 ++-
 .../src/helpers/teams/TeamsSearch.service.ts  | 469 ++++++++++++++++++
 .../searchers/teamRequest.searcher.ts         | 140 ++++++
 7 files changed, 708 insertions(+), 14 deletions(-)
 create mode 100644 packages/hoppscotch-common/src/components/app/spotlight/entry/RESTTeamRequestEntry.vue
 create mode 100644 packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
 create mode 100644 packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 8017fdadfa..6ac98710a4 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -281,7 +281,7 @@
     "updated": "Environment updated",
     "value": "Value",
     "variable": "Variable",
-    "variables":"Variables",
+    "variables": "Variables",
     "variable_list": "Variable List"
   },
   "error": {
@@ -961,7 +961,8 @@
     "success_invites": "Success invites",
     "title": "Workspaces",
     "we_sent_invite_link": "We sent an invite link to all invitees!",
-    "we_sent_invite_link_description": "Ask all invitees to check their inbox. Click on the link to join the workspace."
+    "we_sent_invite_link_description": "Ask all invitees to check their inbox. Click on the link to join the workspace.",
+    "search_title": "Team Requests"
   },
   "team_environment": {
     "deleted": "Environment Deleted",
diff --git a/packages/hoppscotch-common/src/components/app/spotlight/entry/RESTTeamRequestEntry.vue b/packages/hoppscotch-common/src/components/app/spotlight/entry/RESTTeamRequestEntry.vue
new file mode 100644
index 0000000000..109367c6df
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/app/spotlight/entry/RESTTeamRequestEntry.vue
@@ -0,0 +1,32 @@
+<template>
+  <span class="flex flex-1 items-center space-x-2">
+    <template v-for="(title, index) in collectionTitles" :key="index">
+      <span class="block" :class="{ truncate: index !== 0 }">
+        {{ title }}
+      </span>
+      <icon-lucide-chevron-right class="flex flex-shrink-0" />
+    </template>
+    <span
+      v-if="request"
+      class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
+      :style="{ color: getMethodLabelColor(request.method) }"
+    >
+      {{ request.method.toUpperCase() }}
+    </span>
+    <span v-if="request" class="block">
+      {{ request.name }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { getMethodLabelColor } from "~/helpers/rest/labelColoring"
+
+defineProps<{
+  collectionTitles: string[]
+  request: {
+    name: string
+    method: string
+  }
+}>()
+</script>
diff --git a/packages/hoppscotch-common/src/components/app/spotlight/index.vue b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
index 5081bfad13..7da96ea783 100644
--- a/packages/hoppscotch-common/src/components/app/spotlight/index.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
@@ -111,6 +111,7 @@ import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/
 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 { TeamsSpotlightSearcherService } from "~/services/spotlight/searchers/teamRequest.searcher"
 import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
 import {
   SwitchWorkspaceSpotlightSearcherService,
@@ -144,6 +145,7 @@ useService(SwitchEnvSpotlightSearcherService)
 useService(WorkspaceSpotlightSearcherService)
 useService(SwitchWorkspaceSpotlightSearcherService)
 useService(InterceptorSpotlightSearcherService)
+useService(TeamsSpotlightSearcherService)
 
 platform.spotlight?.additionalSearchers?.forEach((searcher) =>
   useService(searcher)
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index fa8f71cb4e..0a99acad73 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -283,7 +283,15 @@
         </template>
         <template #emptyNode="{ node }">
           <HoppSmartPlaceholder
-            v-if="node === null"
+            v-if="filterText.length !== 0 && teamCollectionList.length === 0"
+            :text="`${t('state.nothing_found')} ‟${filterText}”`"
+          >
+            <template #icon>
+              <icon-lucide-search class="svg-icons opacity-75" />
+            </template>
+          </HoppSmartPlaceholder>
+          <HoppSmartPlaceholder
+            v-else-if="node === null"
             :src="`/images/states/${colorMode.value}/pack.svg`"
             :alt="`${t('empty.collections')}`"
             :text="t('empty.collections')"
@@ -394,6 +402,11 @@ const props = defineProps({
     default: () => ({ type: "my-collections", selectedTeam: undefined }),
     required: true,
   },
+  filterText: {
+    type: String as PropType<string>,
+    default: "",
+    required: true,
+  },
   teamCollectionList: {
     type: Array as PropType<TeamCollection[]>,
     default: () => [],
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index a22f99895b..52a37b0b7f 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -24,7 +24,6 @@
         autocomplete="off"
         class="flex w-full bg-transparent px-4 py-2 h-8"
         :placeholder="t('action.search')"
-        :disabled="collectionsType.type === 'team-collections'"
       />
     </div>
     <CollectionsMyCollections
@@ -58,8 +57,13 @@
     <CollectionsTeamCollections
       v-else
       :collections-type="collectionsType"
-      :team-collection-list="teamCollectionList"
-      :team-loading-collections="teamLoadingCollections"
+      :team-collection-list="
+        filterTexts.length > 0 ? teamsSearchResults : teamCollectionList
+      "
+      :team-loading-collections="
+        teamLoadingCollections || teamsSearchResultsLoading
+      "
+      :filter-text="filterTexts"
       :export-loading="exportLoading"
       :duplicate-loading="duplicateLoading"
       :save-request="saveRequest"
@@ -199,7 +203,7 @@ import {
   HoppRESTRequest,
   makeCollection,
 } from "@hoppscotch/data"
-import { cloneDeep, isEqual } from "lodash-es"
+import { cloneDeep, debounce, isEqual } from "lodash-es"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import {
   createNewRootCollection,
@@ -240,6 +244,7 @@ import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { TeamSearchService } from "~/helpers/teams/TeamsSearch.service"
 
 const t = useI18n()
 const toast = useToast()
@@ -336,6 +341,29 @@ const teamLoadingCollections = useReadonlyStream(
   []
 )
 
+const {
+  cascadeParentCollectionForHeaderAuthForSearchResults,
+  searchTeams,
+  teamsSearchResults,
+  teamsSearchResultsLoading,
+} = useService(TeamSearchService)
+
+watch(
+  filterTexts,
+  (newFilterText) => {
+    if (collectionsType.value.type === "team-collections") {
+      const selectedTeamID = collectionsType.value.selectedTeam?.id
+      const debouncedSearch = debounce(searchTeams, 400)
+
+      selectedTeamID &&
+        debouncedSearch(newFilterText, selectedTeamID)?.catch((_) => {})
+    }
+  },
+  {
+    immediate: true,
+  }
+)
+
 watch(
   () => myTeams.value,
   (newTeams) => {
@@ -1330,13 +1358,25 @@ const selectRequest = (selectedRequest: {
   let possibleTab = null
 
   if (collectionsType.value.type === "team-collections") {
-    const { auth, headers } =
-      teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(folderPath)
+    let inheritedProperties: HoppInheritedProperty | undefined = undefined
 
-    possibleTab = tabs.getTabRefWithSaveContext({
+    if (filterTexts.value.length > 0) {
+      const collectionID = folderPath.split("/").at(-1)
+
+      if (!collectionID) return
+
+      inheritedProperties =
+        cascadeParentCollectionForHeaderAuthForSearchResults(collectionID)
+    } else {
+      inheritedProperties =
+        teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(folderPath)
+    }
+
+    const possibleTab = tabs.getTabRefWithSaveContext({
       originLocation: "team-collection",
       requestID: requestIndex,
     })
+
     if (possibleTab) {
       tabs.setActiveTab(possibleTab.value.id)
     } else {
@@ -1348,10 +1388,7 @@ const selectRequest = (selectedRequest: {
           requestID: requestIndex,
           collectionID: folderPath,
         },
-        inheritedProperties: {
-          auth,
-          headers,
-        },
+        inheritedProperties: inheritedProperties,
       })
     }
   } else {
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
new file mode 100644
index 0000000000..e97e77fd6a
--- /dev/null
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -0,0 +1,469 @@
+import { ref } from "vue"
+import { runGQLQuery } from "../backend/GQLClient"
+import {
+  GetSingleCollectionDocument,
+  GetSingleRequestDocument,
+} from "../backend/graphql"
+import { TeamCollection } from "./TeamCollection"
+import { HoppRESTAuth, HoppRESTHeader } from "@hoppscotch/data"
+
+import * as E from "fp-ts/Either"
+import { HoppInheritedProperty } from "../types/HoppInheritedProperties"
+import { TeamRequest } from "./TeamRequest"
+import { Service } from "dioc"
+import axios from "axios"
+
+type CollectionSearchNode =
+  | {
+      type: "request"
+      title: string
+      method: string
+      id: string
+      // parent collections
+      path: CollectionSearchNode[]
+    }
+  | {
+      type: "collection"
+      title: string
+      id: string
+      // parent collections
+      path: CollectionSearchNode[]
+    }
+
+function convertToTeamCollection(
+  node: CollectionSearchNode,
+  existingCollections: Record<
+    string,
+    TeamCollection & { parentID: string | null }
+  >,
+  existingRequests: Record<
+    string,
+    {
+      id: string
+      collectionID: string
+      title: string
+      request: {
+        name: string
+        method: string
+      }
+    }
+  >
+) {
+  if (node.type === "request") {
+    existingRequests[node.id] = {
+      id: node.id,
+      collectionID: node.path[0].id,
+      title: node.title,
+      request: {
+        name: node.title,
+        method: node.method,
+      },
+    }
+
+    if (node.path[0]) {
+      // add parent collections to the collections array recursively
+      convertToTeamCollection(
+        node.path[0],
+        existingCollections,
+        existingRequests
+      )
+    }
+  } else {
+    existingCollections[node.id] = {
+      id: node.id,
+      title: node.title,
+      children: [],
+      requests: [],
+      data: null,
+      parentID: node.path[0]?.id,
+    }
+
+    if (node.path[0]) {
+      // add parent collections to the collections array recursively
+      convertToTeamCollection(
+        node.path[0],
+        existingCollections,
+        existingRequests
+      )
+    }
+  }
+
+  return {
+    existingCollections,
+    existingRequests,
+  }
+}
+
+function convertToTeamTree(
+  collections: (TeamCollection & { parentID: string | null })[],
+  requests: TeamRequest[]
+) {
+  const collectionTree: TeamCollection[] = []
+
+  collections.forEach((collection) => {
+    const parentCollection = collection.parentID
+      ? collections.find((c) => c.id === collection.parentID)
+      : null
+
+    if (parentCollection) {
+      parentCollection.children = parentCollection.children || []
+      parentCollection.children.push(collection)
+    } else {
+      collectionTree.push(collection)
+    }
+  })
+
+  requests.forEach((request) => {
+    const parentCollection = collections.find(
+      (c) => c.id === request.collectionID
+    )
+
+    if (parentCollection) {
+      parentCollection.requests = parentCollection.requests || []
+      parentCollection.requests.push({
+        id: request.id,
+        collectionID: request.collectionID,
+        title: request.title,
+        request: request.request,
+      })
+    }
+  })
+
+  return collectionTree
+}
+
+export class TeamSearchService extends Service {
+  public static readonly ID = "TeamSearchService"
+
+  public endpoint = import.meta.env.VITE_BACKEND_API_URL
+
+  public teamsSearchResultsLoading = ref(false)
+  public teamsSearchResults = ref<TeamCollection[]>([])
+  public teamsSearchResultsFormattedForSpotlight = ref<
+    {
+      collectionTitles: string[]
+      request: {
+        id: string
+        name: string
+        method: string
+      }
+    }[]
+  >([])
+
+  searchResultsCollections: Record<
+    string,
+    TeamCollection & { parentID: string | null }
+  > = {}
+
+  searchResultsRequests: Record<
+    string,
+    {
+      id: string
+      collectionID: string
+      title: string
+      request: {
+        name: string
+        method: string
+      }
+    }
+  > = {}
+
+  // FUTURE-TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
+  // eg: do the spotlight formatting in the spotlight searcher and not here
+  searchTeams = async (query: string, teamID: string) => {
+    this.teamsSearchResultsLoading.value = true
+
+    this.searchResultsCollections = {}
+    this.searchResultsRequests = {}
+
+    try {
+      const searchResponse = await axios.get(
+        `${this.endpoint}/team-collection/search/${teamID}/${query}`,
+        {
+          withCredentials: true,
+        }
+      )
+
+      if (searchResponse.status !== 200) {
+        return
+      }
+
+      const searchResults = searchResponse.data.data as CollectionSearchNode[]
+
+      searchResults
+        .map((node) => {
+          const { existingCollections, existingRequests } =
+            convertToTeamCollection(node, {}, {})
+
+          return {
+            collections: existingCollections,
+            requests: existingRequests,
+          }
+        })
+        .forEach(({ collections, requests }) => {
+          this.searchResultsCollections = {
+            ...this.searchResultsCollections,
+            ...collections,
+          }
+          this.searchResultsRequests = {
+            ...this.searchResultsRequests,
+            ...requests,
+          }
+        })
+
+      const collectionFetchingPromises = Object.values(
+        this.searchResultsCollections
+      ).map((col) => {
+        return getSingleCollection(col.id)
+      })
+
+      const requestFetchingPromises = Object.values(
+        this.searchResultsRequests
+      ).map((req) => {
+        return getSingleRequest(req.id)
+      })
+
+      const collectionResponses = await Promise.all(collectionFetchingPromises)
+      const requestResponses = await Promise.all(requestFetchingPromises)
+
+      requestResponses.map((res) => {
+        if (E.isLeft(res)) {
+          return
+        }
+
+        const request = res.right.request
+
+        if (!request) return
+
+        this.searchResultsRequests[request.id] = {
+          id: request.id,
+          title: request.title,
+          request: JSON.parse(request.request) as TeamRequest["request"],
+          collectionID: request.collectionID,
+        }
+      })
+
+      collectionResponses.map((res) => {
+        if (E.isLeft(res)) {
+          return
+        }
+
+        const collection = res.right.collection
+
+        if (!collection) return
+
+        this.searchResultsCollections[collection.id].data =
+          collection.data ?? null
+      })
+
+      const collectionTree = convertToTeamTree(
+        Object.values(this.searchResultsCollections),
+        // asserting because we've already added the missing properties after fetching the full details
+        Object.values(this.searchResultsRequests) as TeamRequest[]
+      )
+
+      this.teamsSearchResults.value = collectionTree
+
+      this.teamsSearchResultsFormattedForSpotlight.value = Object.values(
+        this.searchResultsRequests
+      ).map((request) => {
+        return formatTeamsSearchResultsForSpotlight(
+          {
+            collectionID: request.collectionID,
+            name: request.title,
+            method: request.request.method,
+            id: request.id,
+          },
+          Object.values(this.searchResultsCollections)
+        )
+      })
+    } catch (error) {
+      console.error(error)
+    }
+
+    this.teamsSearchResultsLoading.value = false
+  }
+
+  cascadeParentCollectionForHeaderAuthForSearchResults = (
+    collectionID: string
+  ): HoppInheritedProperty => {
+    const defaultInheritedAuth: HoppInheritedProperty["auth"] = {
+      parentID: "",
+      parentName: "",
+      inheritedAuth: {
+        authType: "none",
+        authActive: true,
+      },
+    }
+
+    const defaultInheritedHeaders: HoppInheritedProperty["headers"] = []
+
+    const collection = Object.values(this.searchResultsCollections).find(
+      (col) => col.id === collectionID
+    )
+
+    if (!collection)
+      return { auth: defaultInheritedAuth, headers: defaultInheritedHeaders }
+
+    const inheritedAuthData = this.findInheritableParentAuth(collectionID)
+    const inheritedHeadersData = this.findInheritableParentHeaders(collectionID)
+
+    return {
+      auth: E.isRight(inheritedAuthData)
+        ? inheritedAuthData.right
+        : defaultInheritedAuth,
+      headers: E.isRight(inheritedHeadersData)
+        ? Object.values(inheritedHeadersData.right)
+        : defaultInheritedHeaders,
+    }
+  }
+
+  findInheritableParentAuth = (
+    collectionID: string
+  ): E.Either<
+    string,
+    {
+      parentID: string
+      parentName: string
+      inheritedAuth: HoppRESTAuth
+    }
+  > => {
+    const collection = Object.values(this.searchResultsCollections).find(
+      (col) => col.id === collectionID
+    )
+
+    if (!collection) {
+      return E.left("PARENT_NOT_FOUND" as const)
+    }
+
+    // has inherited data
+    if (collection.data) {
+      const parentInheritedData = JSON.parse(collection.data) as {
+        auth: HoppRESTAuth
+        headers: HoppRESTHeader[]
+      }
+
+      const inheritedAuth = parentInheritedData.auth
+
+      if (inheritedAuth.authType !== "inherit") {
+        return E.right({
+          parentID: collectionID,
+          parentName: collection.title,
+          inheritedAuth: inheritedAuth,
+        })
+      }
+    }
+
+    if (!collection.parentID) {
+      return E.left("PARENT_INHERITED_DATA_NOT_FOUND")
+    }
+
+    return this.findInheritableParentAuth(collection.parentID)
+  }
+
+  findInheritableParentHeaders = (
+    collectionID: string,
+    existingHeaders: Record<
+      string,
+      HoppInheritedProperty["headers"][number]
+    > = {}
+  ): E.Either<
+    string,
+    Record<string, HoppInheritedProperty["headers"][number]>
+  > => {
+    const collection = Object.values(this.searchResultsCollections).find(
+      (col) => col.id === collectionID
+    )
+
+    if (!collection) {
+      return E.left("PARENT_NOT_FOUND" as const)
+    }
+
+    // see if it has headers to inherit, if yes, add it to the existing headers
+    if (collection.data) {
+      const parentInheritedData = JSON.parse(collection.data) as {
+        auth: HoppRESTAuth
+        headers: HoppRESTHeader[]
+      }
+
+      const inheritedHeaders = parentInheritedData.headers
+
+      if (inheritedHeaders) {
+        inheritedHeaders.forEach((header) => {
+          if (!existingHeaders[header.key]) {
+            existingHeaders[header.key] = {
+              parentID: collection.id,
+              parentName: collection.title,
+              inheritedHeader: header,
+            }
+          }
+        })
+      }
+    }
+
+    if (collection.parentID) {
+      return this.findInheritableParentHeaders(
+        collection.parentID,
+        existingHeaders
+      )
+    }
+
+    return E.right(existingHeaders)
+  }
+}
+
+const getSingleCollection = (collectionID: string) =>
+  runGQLQuery({
+    query: GetSingleCollectionDocument,
+    variables: {
+      collectionID,
+    },
+  })
+
+const getSingleRequest = (requestID: string) =>
+  runGQLQuery({
+    query: GetSingleRequestDocument,
+    variables: {
+      requestID,
+    },
+  })
+
+const formatTeamsSearchResultsForSpotlight = (
+  request: {
+    collectionID: string
+    name: string
+    method: string
+    id: string
+  },
+  parentCollections: (TeamCollection & { parentID: string | null })[]
+) => {
+  let collectionTitles: string[] = []
+
+  let parentCollectionID: string | null = request.collectionID
+
+  while (true) {
+    if (!parentCollectionID) {
+      break
+    }
+
+    const parentCollection = parentCollections.find(
+      (col) => col.id === parentCollectionID
+    )
+
+    if (!parentCollection) {
+      break
+    }
+
+    collectionTitles = [parentCollection.title, ...collectionTitles]
+    parentCollectionID = parentCollection.parentID
+  }
+
+  return {
+    collectionTitles,
+    request: {
+      name: request.name,
+      method: request.method,
+      id: request.id,
+    },
+  }
+}
diff --git a/packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts b/packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts
new file mode 100644
index 0000000000..fa108a4758
--- /dev/null
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts
@@ -0,0 +1,140 @@
+import { Service } from "dioc"
+import {
+  SpotlightSearcher,
+  SpotlightSearcherResult,
+  SpotlightSearcherSessionState,
+  SpotlightService,
+} from ".."
+import { getI18n } from "~/modules/i18n"
+import { Ref, computed, effectScope, markRaw, watch } from "vue"
+import { TeamSearchService } from "~/helpers/teams/TeamsSearch.service"
+import { cloneDeep, debounce } from "lodash-es"
+import IconFolder from "~icons/lucide/folder"
+import { WorkspaceService } from "~/services/workspace.service"
+import RESTTeamRequestEntry from "~/components/app/spotlight/entry/RESTTeamRequestEntry.vue"
+import { RESTTabService } from "~/services/tab/rest"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { HoppRESTRequest } from "@hoppscotch/data"
+
+export class TeamsSpotlightSearcherService
+  extends Service
+  implements SpotlightSearcher
+{
+  public static readonly ID = "TEAMS_SPOTLIGHT_SEARCHER_SERVICE"
+
+  private t = getI18n()
+
+  public searcherID = "teams"
+  public searcherSectionTitle = this.t("team.search_title")
+
+  private readonly spotlight = this.bind(SpotlightService)
+
+  private readonly teamsSearch = this.bind(TeamSearchService)
+
+  private readonly workspaceService = this.bind(WorkspaceService)
+
+  private readonly tabs = this.bind(RESTTabService)
+
+  constructor() {
+    super()
+
+    this.spotlight.registerSearcher(this)
+  }
+
+  createSearchSession(
+    query: Readonly<Ref<string>>
+  ): [Ref<SpotlightSearcherSessionState>, () => void] {
+    const isTeamWorkspace = computed(
+      () => this.workspaceService.currentWorkspace.value.type === "team"
+    )
+
+    const scopeHandle = effectScope()
+
+    scopeHandle.run(() => {
+      watch(
+        query,
+        (query) => {
+          const debouncedSearch = debounce(this.teamsSearch.searchTeams, 400)
+
+          if (this.workspaceService.currentWorkspace.value.type === "team") {
+            const teamID = this.workspaceService.currentWorkspace.value.teamID
+            debouncedSearch(query, teamID)?.catch((_) => {})
+          }
+        },
+        {
+          immediate: true,
+        }
+      )
+    })
+
+    const onSessionEnd = () => {
+      scopeHandle.stop()
+    }
+
+    const resultObj = computed<SpotlightSearcherSessionState>(() => {
+      return isTeamWorkspace.value
+        ? {
+            loading: this.teamsSearch.teamsSearchResultsLoading.value,
+            results:
+              this.teamsSearch.teamsSearchResultsFormattedForSpotlight.value.map(
+                (result) => ({
+                  id: result.request.id,
+                  icon: markRaw(IconFolder),
+                  score: 1, // make a better scoring system for this
+                  text: {
+                    type: "custom",
+                    component: markRaw(RESTTeamRequestEntry),
+                    componentProps: {
+                      collectionTitles: result.collectionTitles,
+                      request: result.request,
+                    },
+                  },
+                })
+              ),
+          }
+        : {
+            loading: false,
+            results: [],
+          }
+    })
+
+    return [resultObj, onSessionEnd]
+  }
+
+  onResultSelect(result: SpotlightSearcherResult): void {
+    let inheritedProperties: HoppInheritedProperty | undefined = undefined
+
+    const selectedRequest = this.teamsSearch.searchResultsRequests[result.id]
+
+    if (!selectedRequest) return
+
+    const collectionID = result.id
+
+    if (!collectionID) return
+
+    inheritedProperties =
+      this.teamsSearch.cascadeParentCollectionForHeaderAuthForSearchResults(
+        collectionID
+      )
+
+    const possibleTab = this.tabs.getTabRefWithSaveContext({
+      originLocation: "team-collection",
+      requestID: result.id,
+    })
+
+    if (possibleTab) {
+      this.tabs.setActiveTab(possibleTab.value.id)
+    } else {
+      this.tabs.createNewTab({
+        request: cloneDeep(selectedRequest.request as HoppRESTRequest),
+        isDirty: false,
+        saveContext: {
+          originLocation: "team-collection",
+          requestID: selectedRequest.id,
+          collectionID: selectedRequest.collectionID,
+        },
+        inheritedProperties: inheritedProperties,
+      })
+    }
+  }
+}

From 76dd2b528bb505b9bbf394fc08ab0d1ae29c119e Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Fri, 15 Mar 2024 17:58:48 +0530
Subject: [PATCH 02/11] fix: show loading state while fetching search results

---
 .../collections/TeamCollections.vue           | 22 ++++++++++++++++---
 .../src/components/collections/index.vue      |  5 ++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 0a99acad73..0ce4a5b1e1 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -283,7 +283,11 @@
         </template>
         <template #emptyNode="{ node }">
           <HoppSmartPlaceholder
-            v-if="filterText.length !== 0 && teamCollectionList.length === 0"
+            v-if="
+              !teamSearchResultsLoading &&
+              filterText.length !== 0 &&
+              teamCollectionList.length === 0
+            "
             :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
             <template #icon>
@@ -417,6 +421,11 @@ const props = defineProps({
     default: () => [],
     required: true,
   },
+  teamSearchResultsLoading: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
   saveRequest: {
     type: Boolean,
     default: false,
@@ -767,7 +776,10 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
   getChildren(id: string | null): Ref<ChildrenResult<TeamCollectionNode>> {
     return computed(() => {
       if (id === null) {
-        if (props.teamLoadingCollections.includes("root")) {
+        if (
+          props.teamLoadingCollections.includes("root") ||
+          props.teamSearchResultsLoading
+        ) {
           return {
             status: "loading",
           }
@@ -791,9 +803,13 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
       const parsedID = id.split("/")[id.split("/").length - 1]
 
       !props.teamLoadingCollections.includes(parsedID) &&
+        !props.teamSearchResultsLoading &&
         emit("expand-team-collection", parsedID)
 
-      if (props.teamLoadingCollections.includes(parsedID)) {
+      if (
+        props.teamLoadingCollections.includes(parsedID) ||
+        props.teamSearchResultsLoading
+      ) {
         return {
           status: "loading",
         }
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index 52a37b0b7f..e30a16cf29 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -60,9 +60,8 @@
       :team-collection-list="
         filterTexts.length > 0 ? teamsSearchResults : teamCollectionList
       "
-      :team-loading-collections="
-        teamLoadingCollections || teamsSearchResultsLoading
-      "
+      :team-search-results-loading="teamsSearchResultsLoading"
+      :team-loading-collections="teamLoadingCollections"
       :filter-text="filterTexts"
       :export-loading="exportLoading"
       :duplicate-loading="duplicateLoading"

From 691e00ba29923b73e650ca8f1c30eacdc933328b Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Fri, 15 Mar 2024 17:59:16 +0530
Subject: [PATCH 03/11] fix: debounce behavior

---
 .../hoppscotch-common/src/components/collections/index.vue     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index e30a16cf29..250b29f998 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -347,12 +347,13 @@ const {
   teamsSearchResultsLoading,
 } = useService(TeamSearchService)
 
+const debouncedSearch = debounce(searchTeams, 400)
+
 watch(
   filterTexts,
   (newFilterText) => {
     if (collectionsType.value.type === "team-collections") {
       const selectedTeamID = collectionsType.value.selectedTeam?.id
-      const debouncedSearch = debounce(searchTeams, 400)
 
       selectedTeamID &&
         debouncedSearch(newFilterText, selectedTeamID)?.catch((_) => {})

From b925f79f7b6ba01871a3fe357a1d83d62c94c35f Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Fri, 15 Mar 2024 18:01:30 +0530
Subject: [PATCH 04/11] fix: prevent network calls for an empty search query

The search query being part of the endpoint, a network call with an empty search query results in a 404.
---
 .../src/helpers/teams/TeamsSearch.service.ts                  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
index e97e77fd6a..41dc6db362 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -171,6 +171,10 @@ export class TeamSearchService extends Service {
   // FUTURE-TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
   // eg: do the spotlight formatting in the spotlight searcher and not here
   searchTeams = async (query: string, teamID: string) => {
+    if (!query.length) {
+      return
+    }
+
     this.teamsSearchResultsLoading.value = true
 
     this.searchResultsCollections = {}

From d8fbeeaeab86775d1d57ecd76cde6ce344110ba0 Mon Sep 17 00:00:00 2001
From: amk-dev <akash.k.mohan98@gmail.com>
Date: Sat, 16 Mar 2024 22:11:47 +0530
Subject: [PATCH 05/11] fix: disable collection operations for search results
 tree

---
 .../components/collections/TeamCollections.vue    | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 0ce4a5b1e1..7c66bbe7f5 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -9,7 +9,7 @@
       "
     >
       <HoppButtonSecondary
-        v-if="hasNoTeamAccess"
+        v-if="hasNoTeamAccess || isShowingSearchResults"
         v-tippy="{ theme: 'tooltip' }"
         disabled
         class="!rounded-none"
@@ -36,8 +36,9 @@
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :disabled="
-            collectionsType.type === 'team-collections' &&
-            collectionsType.selectedTeam === undefined
+            (collectionsType.type === 'team-collections' &&
+              collectionsType.selectedTeam === undefined) ||
+            isShowingSearchResults
           "
           :icon="IconImport"
           :title="t('modal.import_export')"
@@ -58,7 +59,7 @@
             :collections-type="collectionsType.type"
             :is-open="isOpen"
             :export-loading="exportLoading"
-            :has-no-team-access="hasNoTeamAccess"
+            :has-no-team-access="hasNoTeamAccess || isShowingSearchResults"
             :collection-move-loading="collectionMoveLoading"
             :is-last-item="node.data.isLastItem"
             :is-selected="
@@ -137,7 +138,7 @@
             :collections-type="collectionsType.type"
             :is-open="isOpen"
             :export-loading="exportLoading"
-            :has-no-team-access="hasNoTeamAccess"
+            :has-no-team-access="hasNoTeamAccess || isShowingSearchResults"
             :collection-move-loading="collectionMoveLoading"
             :is-last-item="node.data.isLastItem"
             :is-selected="
@@ -218,7 +219,7 @@
             :collections-type="collectionsType.type"
             :duplicate-loading="duplicateLoading"
             :is-active="isActiveRequest(node.data.data.data.id)"
-            :has-no-team-access="hasNoTeamAccess"
+            :has-no-team-access="hasNoTeamAccess || isShowingSearchResults"
             :request-move-loading="requestMoveLoading"
             :is-last-item="node.data.isLastItem"
             :is-selected="
@@ -458,6 +459,8 @@ const props = defineProps({
   },
 })
 
+const isShowingSearchResults = computed(() => props.filterText.length > 0)
+
 const emit = defineEmits<{
   (
     event: "add-request",

From 68d27b612980c433a4926949b5ce89c0a6150c93 Mon Sep 17 00:00:00 2001
From: amk-dev <akash.k.mohan98@gmail.com>
Date: Sat, 16 Mar 2024 23:22:12 +0530
Subject: [PATCH 06/11] wip: expand collection results

---
 .../src/components/collections/index.vue      |  9 ++++
 .../src/helpers/teams/TeamsSearch.service.ts  | 50 +++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index 250b29f998..91ef44e307 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -393,6 +393,15 @@ const switchToMyCollections = () => {
 }
 
 const expandTeamCollection = (collectionID: string) => {
+  if (filterTexts.value.length > 0 && teamsSearchResults.value) {
+    console.group("expandTeamCollection")
+    console.log(collectionID)
+
+    console.groupEnd()
+    // expandCollection(collectionID)
+    return
+  }
+
   teamCollectionAdapter.expandCollection(collectionID)
 }
 
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
index 41dc6db362..13c1fe663f 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -414,6 +414,56 @@ export class TeamSearchService extends Service {
 
     return E.right(existingHeaders)
   }
+
+  expandCollection = async (collectionID: string) => {
+    const childCollectionsPromise = getCollectionChildCollections(collectionID)
+    const childRequestsPromise = getCollectionChildRequests(collectionID)
+
+    const [childCollections, childRequests] = await Promise.all([
+      childCollectionsPromise,
+      childRequestsPromise,
+    ])
+
+    if (E.isLeft(childCollections)) {
+      return
+    }
+
+    if (E.isLeft(childRequests)) {
+      return
+    }
+
+    childCollections.right.collection?.children
+      .map((child) => ({
+        id: child.id,
+        title: child.title,
+        data: child.data ?? null,
+        children: [],
+        requests: [],
+      }))
+      .forEach((child) => {
+        this.searchResultsCollections[child.id] = {
+          ...child,
+          parentID: collectionID,
+        }
+      })
+
+    childRequests.right.requestsInCollection
+      .map((request) => ({
+        id: request.id,
+        collectionID: collectionID,
+        title: request.title,
+        request: JSON.parse(request.request) as TeamRequest["request"],
+      }))
+      .forEach((request) => {
+        this.searchResultsRequests[request.id] = request
+      })
+
+    this.teamsSearchResults.value = convertToTeamTree(
+      Object.values(this.searchResultsCollections),
+      // asserting because we've already added the missing properties after fetching the full details
+      Object.values(this.searchResultsRequests) as TeamRequest[]
+    )
+  }
 }
 
 const getSingleCollection = (collectionID: string) =>

From 79595f09135c2844994209909430cb78a0994488 Mon Sep 17 00:00:00 2001
From: amk-dev <akash.k.mohan98@gmail.com>
Date: Sat, 16 Mar 2024 23:22:12 +0530
Subject: [PATCH 07/11] feat: expand collections, that are search results

---
 .../collections/TeamCollections.vue           | 35 ++++++++++
 .../src/components/collections/index.vue      | 19 ++++++
 .../src/helpers/teams/TeamsSearch.service.ts  | 66 +++++++++++++++++--
 3 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 7c66bbe7f5..f715c17bcd 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -129,6 +129,14 @@
                     })
               }
             "
+            @click="
+              () => {
+                collectionClicked({
+                  collectionID: node.id,
+                  isOpen: isOpen,
+                })
+              }
+            "
           />
           <CollectionsCollection
             v-if="node.data.type === 'folders'"
@@ -210,6 +218,15 @@
                     })
               }
             "
+            @click="
+              () => {
+                collectionClicked({
+                  // for the folders, we get a path, so we need to get the last part of the path which is the folder id
+                  collectionID: node.id.split('/').pop() as string,
+                  isOpen: isOpen,
+                })
+              }
+            "
           />
           <CollectionsRequest
             v-if="node.data.type === 'requests'"
@@ -568,6 +585,14 @@ const emit = defineEmits<{
       }
     }
   ): void
+  (
+    event: "collection-clicked",
+    payload: {
+      // if the collection is open or not in the tree
+      isOpen: boolean
+      collectionID: string
+    }
+  ): void
   (event: "select", payload: Picked | null): void
   (event: "expand-team-collection", payload: string): void
   (event: "display-modal-add"): void
@@ -580,6 +605,16 @@ const getPath = (path: string) => {
   return pathArray.join("/")
 }
 
+const collectionClicked = (payload: {
+  collectionID: string
+  isOpen: boolean
+}) => {
+  emit("collection-clicked", {
+    collectionID: payload.collectionID,
+    isOpen: payload.isOpen,
+  })
+}
+
 const teamCollectionsList = toRef(props, "teamCollectionList")
 
 const hasNoTeamAccess = computed(
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index 91ef44e307..f805b35acf 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -90,6 +90,7 @@
       @expand-team-collection="expandTeamCollection"
       @display-modal-add="displayModalAdd(true)"
       @display-modal-import-export="displayModalImportExport(true)"
+      @collection-clicked="handleCollectionClick"
     />
     <div
       class="py-15 hidden flex-1 flex-col items-center justify-center bg-primaryDark px-4 text-secondaryLight"
@@ -345,6 +346,7 @@ const {
   searchTeams,
   teamsSearchResults,
   teamsSearchResultsLoading,
+  expandCollection,
 } = useService(TeamSearchService)
 
 const debouncedSearch = debounce(searchTeams, 400)
@@ -392,6 +394,23 @@ const switchToMyCollections = () => {
   teamCollectionAdapter.changeTeamID(null)
 }
 
+/**
+ * right now, for search results, we rely on collection click + isOpen to expand the collection
+ */
+const handleCollectionClick = (payload: {
+  collectionID: string
+  isOpen: boolean
+}) => {
+  if (
+    filterTexts.value.length > 0 &&
+    teamsSearchResults.value &&
+    payload.isOpen
+  ) {
+    expandCollection(payload.collectionID)
+    return
+  }
+}
+
 const expandTeamCollection = (collectionID: string) => {
   if (filterTexts.value.length > 0 && teamsSearchResults.value) {
     console.group("expandTeamCollection")
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
index 13c1fe663f..8fe673a2cb 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -1,6 +1,8 @@
 import { ref } from "vue"
 import { runGQLQuery } from "../backend/GQLClient"
 import {
+  GetCollectionChildrenDocument,
+  GetCollectionRequestsDocument,
   GetSingleCollectionDocument,
   GetSingleRequestDocument,
 } from "../backend/graphql"
@@ -31,10 +33,10 @@ type CollectionSearchNode =
     }
 
 function convertToTeamCollection(
-  node: CollectionSearchNode,
+  node: CollectionSearchNode & { isSearchResult?: boolean },
   existingCollections: Record<
     string,
-    TeamCollection & { parentID: string | null }
+    TeamCollection & { parentID: string | null; isSearchResult?: boolean }
   >,
   existingRequests: Record<
     string,
@@ -46,6 +48,7 @@ function convertToTeamCollection(
         name: string
         method: string
       }
+      isSearchResult?: boolean
     }
   >
 ) {
@@ -58,6 +61,7 @@ function convertToTeamCollection(
         name: node.title,
         method: node.method,
       },
+      isSearchResult: node.isSearchResult,
     }
 
     if (node.path[0]) {
@@ -76,6 +80,7 @@ function convertToTeamCollection(
       requests: [],
       data: null,
       parentID: node.path[0]?.id,
+      isSearchResult: node.isSearchResult,
     }
 
     if (node.path[0]) {
@@ -105,6 +110,12 @@ function convertToTeamTree(
       ? collections.find((c) => c.id === collection.parentID)
       : null
 
+    const isAlreadyInserted = parentCollection?.children?.find(
+      (c) => c.id === collection.id
+    )
+
+    if (isAlreadyInserted) return
+
     if (parentCollection) {
       parentCollection.children = parentCollection.children || []
       parentCollection.children.push(collection)
@@ -118,6 +129,12 @@ function convertToTeamTree(
       (c) => c.id === request.collectionID
     )
 
+    const isAlreadyInserted = parentCollection?.requests?.find(
+      (r) => r.id === request.id
+    )
+
+    if (isAlreadyInserted) return
+
     if (parentCollection) {
       parentCollection.requests = parentCollection.requests || []
       parentCollection.requests.push({
@@ -152,7 +169,7 @@ export class TeamSearchService extends Service {
 
   searchResultsCollections: Record<
     string,
-    TeamCollection & { parentID: string | null }
+    TeamCollection & { parentID: string | null; isSearchResult?: boolean }
   > = {}
 
   searchResultsRequests: Record<
@@ -168,6 +185,8 @@ export class TeamSearchService extends Service {
     }
   > = {}
 
+  private expandingCollections: string[] = []
+
   // FUTURE-TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
   // eg: do the spotlight formatting in the spotlight searcher and not here
   searchTeams = async (query: string, teamID: string) => {
@@ -197,7 +216,14 @@ export class TeamSearchService extends Service {
       searchResults
         .map((node) => {
           const { existingCollections, existingRequests } =
-            convertToTeamCollection(node, {}, {})
+            convertToTeamCollection(
+              {
+                ...node,
+                isSearchResult: true,
+              },
+              {},
+              {}
+            )
 
           return {
             collections: existingCollections,
@@ -416,6 +442,17 @@ export class TeamSearchService extends Service {
   }
 
   expandCollection = async (collectionID: string) => {
+    if (this.expandingCollections.includes(collectionID)) return
+
+    const collectionToExpand = Object.values(
+      this.searchResultsCollections
+    ).find((col) => col.id === collectionID)
+
+    // only allow search result collections to be expanded
+    if (!collectionToExpand || !collectionToExpand.isSearchResult) return
+
+    this.expandingCollections.push(collectionID)
+
     const childCollectionsPromise = getCollectionChildCollections(collectionID)
     const childRequestsPromise = getCollectionChildRequests(collectionID)
 
@@ -463,6 +500,11 @@ export class TeamSearchService extends Service {
       // asserting because we've already added the missing properties after fetching the full details
       Object.values(this.searchResultsRequests) as TeamRequest[]
     )
+
+    // remove the collection after expanding
+    this.expandingCollections = this.expandingCollections.filter(
+      (colID) => colID !== collectionID
+    )
   }
 }
 
@@ -482,6 +524,22 @@ const getSingleRequest = (requestID: string) =>
     },
   })
 
+const getCollectionChildCollections = (collectionID: string) =>
+  runGQLQuery({
+    query: GetCollectionChildrenDocument,
+    variables: {
+      collectionID,
+    },
+  })
+
+const getCollectionChildRequests = (collectionID: string) =>
+  runGQLQuery({
+    query: GetCollectionRequestsDocument,
+    variables: {
+      collectionID,
+    },
+  })
+
 const formatTeamsSearchResultsForSpotlight = (
   request: {
     collectionID: string

From ee2a30c2c642dba3a721b755b0bc530a40ad3ab3 Mon Sep 17 00:00:00 2001
From: amk-dev <akash.k.mohan98@gmail.com>
Date: Tue, 19 Mar 2024 01:21:55 +0530
Subject: [PATCH 08/11] fix: expand collections + loading spinners

---
 .../collections/TeamCollections.vue           |  22 +---
 .../src/components/collections/index.vue      |  31 +++--
 .../src/helpers/teams/TeamsSearch.service.ts  | 113 +++++++++++-------
 3 files changed, 96 insertions(+), 70 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index f715c17bcd..211c7e872b 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -301,11 +301,7 @@
         </template>
         <template #emptyNode="{ node }">
           <HoppSmartPlaceholder
-            v-if="
-              !teamSearchResultsLoading &&
-              filterText.length !== 0 &&
-              teamCollectionList.length === 0
-            "
+            v-if="filterText.length !== 0 && teamCollectionList.length === 0"
             :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
             <template #icon>
@@ -439,11 +435,6 @@ const props = defineProps({
     default: () => [],
     required: true,
   },
-  teamSearchResultsLoading: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
   saveRequest: {
     type: Boolean,
     default: false,
@@ -814,10 +805,7 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
   getChildren(id: string | null): Ref<ChildrenResult<TeamCollectionNode>> {
     return computed(() => {
       if (id === null) {
-        if (
-          props.teamLoadingCollections.includes("root") ||
-          props.teamSearchResultsLoading
-        ) {
+        if (props.teamLoadingCollections.includes("root")) {
           return {
             status: "loading",
           }
@@ -841,13 +829,9 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
       const parsedID = id.split("/")[id.split("/").length - 1]
 
       !props.teamLoadingCollections.includes(parsedID) &&
-        !props.teamSearchResultsLoading &&
         emit("expand-team-collection", parsedID)
 
-      if (
-        props.teamLoadingCollections.includes(parsedID) ||
-        props.teamSearchResultsLoading
-      ) {
+      if (props.teamLoadingCollections.includes(parsedID)) {
         return {
           status: "loading",
         }
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index f805b35acf..1fc568b93c 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -60,8 +60,11 @@
       :team-collection-list="
         filterTexts.length > 0 ? teamsSearchResults : teamCollectionList
       "
-      :team-search-results-loading="teamsSearchResultsLoading"
-      :team-loading-collections="teamLoadingCollections"
+      :team-loading-collections="
+        filterTexts.length > 0
+          ? collectionsBeingLoadedFromSearch
+          : teamLoadingCollections
+      "
       :filter-text="filterTexts"
       :export-loading="exportLoading"
       :duplicate-loading="duplicateLoading"
@@ -347,10 +350,29 @@ const {
   teamsSearchResults,
   teamsSearchResultsLoading,
   expandCollection,
+  expandingCollections,
 } = useService(TeamSearchService)
 
+watch(teamsSearchResults, (newSearchResults) => {
+  if (newSearchResults.length === 1 && filterTexts.value.length > 0) {
+    expandCollection(newSearchResults[0].id)
+  }
+})
+
 const debouncedSearch = debounce(searchTeams, 400)
 
+const collectionsBeingLoadedFromSearch = computed(() => {
+  const collections = []
+
+  if (teamsSearchResultsLoading.value) {
+    collections.push("root")
+  }
+
+  collections.push(...expandingCollections.value)
+
+  return collections
+})
+
 watch(
   filterTexts,
   (newFilterText) => {
@@ -413,11 +435,6 @@ const handleCollectionClick = (payload: {
 
 const expandTeamCollection = (collectionID: string) => {
   if (filterTexts.value.length > 0 && teamsSearchResults.value) {
-    console.group("expandTeamCollection")
-    console.log(collectionID)
-
-    console.groupEnd()
-    // expandCollection(collectionID)
     return
   }
 
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
index 8fe673a2cb..d2fda52fe0 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -14,6 +14,12 @@ import { HoppInheritedProperty } from "../types/HoppInheritedProperties"
 import { TeamRequest } from "./TeamRequest"
 import { Service } from "dioc"
 import axios from "axios"
+import { Ref } from "vue"
+
+type CollectionSearchMeta = {
+  isSearchResult?: boolean
+  insertedWhileExpanding?: boolean
+}
 
 type CollectionSearchNode =
   | {
@@ -32,25 +38,28 @@ type CollectionSearchNode =
       path: CollectionSearchNode[]
     }
 
+type _SearchCollection = TeamCollection & {
+  parentID: string | null
+  meta?: CollectionSearchMeta
+}
+
+type _SearchRequest = {
+  id: string
+  collectionID: string
+  title: string
+  request: {
+    name: string
+    method: string
+  }
+  meta?: CollectionSearchMeta
+}
+
 function convertToTeamCollection(
-  node: CollectionSearchNode & { isSearchResult?: boolean },
-  existingCollections: Record<
-    string,
-    TeamCollection & { parentID: string | null; isSearchResult?: boolean }
-  >,
-  existingRequests: Record<
-    string,
-    {
-      id: string
-      collectionID: string
-      title: string
-      request: {
-        name: string
-        method: string
-      }
-      isSearchResult?: boolean
-    }
-  >
+  node: CollectionSearchNode & {
+    meta?: CollectionSearchMeta
+  },
+  existingCollections: Record<string, _SearchCollection>,
+  existingRequests: Record<string, _SearchRequest>
 ) {
   if (node.type === "request") {
     existingRequests[node.id] = {
@@ -61,7 +70,9 @@ function convertToTeamCollection(
         name: node.title,
         method: node.method,
       },
-      isSearchResult: node.isSearchResult,
+      meta: {
+        isSearchResult: node.meta?.isSearchResult || false,
+      },
     }
 
     if (node.path[0]) {
@@ -80,7 +91,9 @@ function convertToTeamCollection(
       requests: [],
       data: null,
       parentID: node.path[0]?.id,
-      isSearchResult: node.isSearchResult,
+      meta: {
+        isSearchResult: node.meta?.isSearchResult || false,
+      },
     }
 
     if (node.path[0]) {
@@ -167,25 +180,11 @@ export class TeamSearchService extends Service {
     }[]
   >([])
 
-  searchResultsCollections: Record<
-    string,
-    TeamCollection & { parentID: string | null; isSearchResult?: boolean }
-  > = {}
+  searchResultsCollections: Record<string, _SearchCollection> = {}
+  searchResultsRequests: Record<string, _SearchRequest> = {}
 
-  searchResultsRequests: Record<
-    string,
-    {
-      id: string
-      collectionID: string
-      title: string
-      request: {
-        name: string
-        method: string
-      }
-    }
-  > = {}
-
-  private expandingCollections: string[] = []
+  expandingCollections: Ref<string[]> = ref([])
+  expandedCollections: Ref<string[]> = ref([])
 
   // FUTURE-TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
   // eg: do the spotlight formatting in the spotlight searcher and not here
@@ -198,6 +197,7 @@ export class TeamSearchService extends Service {
 
     this.searchResultsCollections = {}
     this.searchResultsRequests = {}
+    this.expandedCollections.value = []
 
     try {
       const searchResponse = await axios.get(
@@ -219,7 +219,9 @@ export class TeamSearchService extends Service {
             convertToTeamCollection(
               {
                 ...node,
-                isSearchResult: true,
+                meta: {
+                  isSearchResult: true,
+                },
               },
               {},
               {}
@@ -442,16 +444,27 @@ export class TeamSearchService extends Service {
   }
 
   expandCollection = async (collectionID: string) => {
-    if (this.expandingCollections.includes(collectionID)) return
+    if (this.expandingCollections.value.includes(collectionID)) return
 
     const collectionToExpand = Object.values(
       this.searchResultsCollections
     ).find((col) => col.id === collectionID)
 
+    const isAlreadyExpanded =
+      this.expandedCollections.value.includes(collectionID)
+
     // only allow search result collections to be expanded
-    if (!collectionToExpand || !collectionToExpand.isSearchResult) return
+    if (
+      isAlreadyExpanded ||
+      !collectionToExpand ||
+      !(
+        collectionToExpand.meta?.isSearchResult ||
+        collectionToExpand.meta?.insertedWhileExpanding
+      )
+    )
+      return
 
-    this.expandingCollections.push(collectionID)
+    this.expandingCollections.value.push(collectionID)
 
     const childCollectionsPromise = getCollectionChildCollections(collectionID)
     const childRequestsPromise = getCollectionChildRequests(collectionID)
@@ -481,6 +494,10 @@ export class TeamSearchService extends Service {
         this.searchResultsCollections[child.id] = {
           ...child,
           parentID: collectionID,
+          meta: {
+            isSearchResult: false,
+            insertedWhileExpanding: true,
+          },
         }
       })
 
@@ -492,7 +509,13 @@ export class TeamSearchService extends Service {
         request: JSON.parse(request.request) as TeamRequest["request"],
       }))
       .forEach((request) => {
-        this.searchResultsRequests[request.id] = request
+        this.searchResultsRequests[request.id] = {
+          ...request,
+          meta: {
+            isSearchResult: false,
+            insertedWhileExpanding: true,
+          },
+        }
       })
 
     this.teamsSearchResults.value = convertToTeamTree(
@@ -502,9 +525,11 @@ export class TeamSearchService extends Service {
     )
 
     // remove the collection after expanding
-    this.expandingCollections = this.expandingCollections.filter(
+    this.expandingCollections.value = this.expandingCollections.value.filter(
       (colID) => colID !== collectionID
     )
+
+    this.expandedCollections.value.push(collectionID)
   }
 }
 

From 2d50825f84a582d3596c4e62523edf444acf02af Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Tue, 19 Mar 2024 11:08:58 +0530
Subject: [PATCH 09/11] chore: cleanup

---
 .../collections/TeamCollections.vue           | 20 ++++++++++---------
 .../src/components/collections/index.vue      |  4 ++--
 .../searchers/teamRequest.searcher.ts         |  4 ++--
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 211c7e872b..d07fbd9234 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -131,9 +131,9 @@
             "
             @click="
               () => {
-                collectionClicked({
+                handleCollectionClick({
                   collectionID: node.id,
-                  isOpen: isOpen,
+                  isOpen,
                 })
               }
             "
@@ -220,10 +220,10 @@
             "
             @click="
               () => {
-                collectionClicked({
+                handleCollectionClick({
                   // for the folders, we get a path, so we need to get the last part of the path which is the folder id
                   collectionID: node.id.split('/').pop() as string,
-                  isOpen: isOpen,
+                  isOpen,
                 })
               }
             "
@@ -577,7 +577,7 @@ const emit = defineEmits<{
     }
   ): void
   (
-    event: "collection-clicked",
+    event: "collection-click",
     payload: {
       // if the collection is open or not in the tree
       isOpen: boolean
@@ -596,13 +596,15 @@ const getPath = (path: string) => {
   return pathArray.join("/")
 }
 
-const collectionClicked = (payload: {
+const handleCollectionClick = (payload: {
   collectionID: string
   isOpen: boolean
 }) => {
-  emit("collection-clicked", {
-    collectionID: payload.collectionID,
-    isOpen: payload.isOpen,
+  const { collectionID, isOpen } = payload
+
+  emit("collection-click", {
+    collectionID,
+    isOpen,
   })
 }
 
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index 1fc568b93c..9a53a69542 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -93,7 +93,7 @@
       @expand-team-collection="expandTeamCollection"
       @display-modal-add="displayModalAdd(true)"
       @display-modal-import-export="displayModalImportExport(true)"
-      @collection-clicked="handleCollectionClick"
+      @collection-click="handleCollectionClick"
     />
     <div
       class="py-15 hidden flex-1 flex-col items-center justify-center bg-primaryDark px-4 text-secondaryLight"
@@ -425,7 +425,7 @@ const handleCollectionClick = (payload: {
 }) => {
   if (
     filterTexts.value.length > 0 &&
-    teamsSearchResults.value &&
+    teamsSearchResults.value.length &&
     payload.isOpen
   ) {
     expandCollection(payload.collectionID)
diff --git a/packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts b/packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts
index fa108a4758..8513bb83d3 100644
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/teamRequest.searcher.ts
@@ -51,11 +51,11 @@ export class TeamsSpotlightSearcherService
     const scopeHandle = effectScope()
 
     scopeHandle.run(() => {
+      const debouncedSearch = debounce(this.teamsSearch.searchTeams, 400)
+
       watch(
         query,
         (query) => {
-          const debouncedSearch = debounce(this.teamsSearch.searchTeams, 400)
-
           if (this.workspaceService.currentWorkspace.value.type === "team") {
             const teamID = this.workspaceService.currentWorkspace.value.teamID
             debouncedSearch(query, teamID)?.catch((_) => {})

From 639d174bbaf8f6bbf2683e4cafec479532e37b3c Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Tue, 19 Mar 2024 12:53:15 +0530
Subject: [PATCH 10/11] refactor: escape characters in search query

---
 .../src/helpers/teams/TeamsSearch.service.ts                  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
index d2fda52fe0..c14d67495c 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -201,7 +201,9 @@ export class TeamSearchService extends Service {
 
     try {
       const searchResponse = await axios.get(
-        `${this.endpoint}/team-collection/search/${teamID}/${query}`,
+        `${this.endpoint}/team-collection/search/${teamID}/${encodeURIComponent(
+          query
+        )}}`,
         {
           withCredentials: true,
         }

From 6d99fddbc631538724c1a8229019098084ba11ac Mon Sep 17 00:00:00 2001
From: amk-dev <akash.k.mohan98@gmail.com>
Date: Tue, 19 Mar 2024 18:19:14 +0530
Subject: [PATCH 11/11] chore: update backend endpoint with query params

---
 .../src/helpers/teams/TeamsSearch.service.ts                  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
index c14d67495c..6776231a26 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -201,7 +201,9 @@ export class TeamSearchService extends Service {
 
     try {
       const searchResponse = await axios.get(
-        `${this.endpoint}/team-collection/search/${teamID}/${encodeURIComponent(
+        `${
+          this.endpoint
+        }/team-collection/search/${teamID}?searchQuery=${encodeURIComponent(
           query
         )}}`,
         {