fix: corrections for spotlight searchers (#3275)

packages/hoppscotch-common/locales/en.json

@@ -606,7 +606,7 @@
       "delete_method": "Select DELETE method",
       "get_method": "Select GET method",
       "head_method": "Select HEAD method",
-      "rename": "Rename Current Request",
+      "rename": "Rename Request",
       "import_curl": "Import cURL",
       "show_code": "Generate code snippet",
       "method": "Method",
@@ -649,11 +649,11 @@
   },
   "spotlight": {
     "general": {
-      "help_menu": "Open help and support menu",
+      "help_menu": "Help and support",
       "chat": "Chat with support",
       "open_docs": "Read Documentation",
-      "open_keybindings": "Open keyboard shortcuts",
-      "social": "Social links and GitHub",
+      "open_keybindings": "Keyboard shortcuts",
+      "social": "Social",
       "title": "General"
     },
     "miscellaneous": {
@@ -661,15 +661,18 @@
       "title": "Miscellaneous"
     },
     "request": {
-      "tab_parameters": "Open parameters tab",
-      "tab_body": "Open body tab",
-      "tab_headers": "Open headers tab",
-      "tab_authorization": "Open authorization tab",
-      "tab_pre_request_script": "Open pre-request script tab",
-      "tab_tests": "Open tests tab"
+      "switch_to": "Switch to",
+      "select_method": "Select method",
+      "save_as_new": "Save as new request",
+      "tab_parameters": "Parameters tab",
+      "tab_body": "Body tab",
+      "tab_headers": "Headers tab",
+      "tab_authorization": "Authorization tab",
+      "tab_pre_request_script": "Pre-request script tab",
+      "tab_tests": "Tests tab"
     },
     "response": {
-      "copy": "Copy response as JSON",
+      "copy": "Copy response",
       "download": "Download response as file",
       "title": "Response"
     },
@@ -692,6 +695,7 @@
       "title": "Teams"
     },
     "tab": {
+      "duplicate": "Duplicate tab",
       "close_current": "Close current tab",
       "close_others": "Close other tabs",
       "new_tab": "Open a new tab",
@@ -703,9 +707,7 @@
       "interface": "Interface",
       "interceptor": "Interceptor"
     },
-    "change_interceptor": "Change Interceptor",
     "change_language": "Change Language",
-    "install_extension": "Install Browser Extension",
     "settings": {
       "theme": {
         "black": "Black Mode",
@@ -719,8 +721,7 @@
         "size_lg": "Change to Large"
       },
       "change_interceptor": "Change Interceptor",
-      "change_language": "Change Language",
-      "install_extension": "Install Browser Extension"
+      "change_language": "Change Language"
     }
   },
   "sse": {

packages/hoppscotch-common/src/components.d.ts

@@ -29,6 +29,7 @@ declare module 'vue' {
     AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
     AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
     AppSpotlightEntryGQLRequest: typeof import('./components/app/spotlight/entry/GQLRequest.vue')['default']
+    AppSpotlightEntryIconSelected: typeof import('./components/app/spotlight/entry/IconSelected.vue')['default']
     AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
     AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']

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

@@ -1,7 +1,6 @@
 <template>
   <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   <AppShare :show="showShare" @hide-modal="showShare = false" />
-  <AppSocial :show="showSocial" @hide-modal="showSocial = false" />
   <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
 
   <HoppSmartConfirmModal
@@ -27,7 +26,6 @@ const t = useI18n()
 
 const showShortcuts = ref(false)
 const showShare = ref(false)
-const showSocial = ref(false)
 const showLogin = ref(false)
 
 const confirmRemove = ref(false)
@@ -60,10 +58,6 @@ defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
 })
 
-defineActionHandler("modals.social.toggle", () => {
-  showSocial.value = !showSocial.value
-})
-
 defineActionHandler("modals.login.toggle", () => {
   showLogin.value = !showLogin.value
 })

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

@@ -1,135 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    dialog
-    :title="t('app.social_links')"
-    @close="hideModal"
-  >
-    <template #body>
-      <div class="flex flex-col space-y-2">
-        <div class="grid grid-cols-3 gap-4">
-          <a
-            v-for="(platform, index) in platforms"
-            :key="`platform-${index}`"
-            :href="platform.link"
-            target="_blank"
-            class="social-link"
-            tabindex="0"
-          >
-            <component :is="platform.icon" class="w-6 h-6" />
-            <span class="mt-3">
-              {{ platform.name }}
-            </span>
-          </a>
-          <button class="social-link" @click="copyAppLink">
-            <component :is="copyIcon" class="w-6 h-6 text-xl" />
-            <span class="mt-3">
-              {{ t("app.copy") }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <p class="text-secondaryLight">
-        {{ t("app.social_description") }}
-      </p>
-    </template>
-  </HoppSmartModal>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-import { refAutoReset } from "@vueuse/core"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
-import IconFacebook from "~icons/brands/facebook"
-import IconLinkedIn from "~icons/brands/linkedin"
-import IconReddit from "~icons/brands/reddit"
-import IconTwitter from "~icons/brands/twitter"
-import IconCheck from "~icons/lucide/check"
-import IconCopy from "~icons/lucide/copy"
-import IconGitHub from "~icons/lucide/github"
-
-const t = useI18n()
-
-const toast = useToast()
-
-defineProps<{
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const url = "https://hoppscotch.io"
-
-const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
-  IconCopy,
-  1000
-)
-
-const platforms = [
-  {
-    name: "GitHub",
-    icon: IconGitHub,
-    link: `https://hoppscotch.io/github`,
-  },
-  {
-    name: "Twitter",
-    icon: IconTwitter,
-    link: `https://twitter.com/hoppscotch_io`,
-  },
-  {
-    name: "Facebook",
-    icon: IconFacebook,
-    link: `https://www.facebook.com/hoppscotch.io`,
-  },
-  {
-    name: "Reddit",
-    icon: IconReddit,
-    link: `https://www.reddit.com/r/hoppscotch`,
-  },
-  {
-    name: "LinkedIn",
-    icon: IconLinkedIn,
-    link: `https://www.linkedin.com/company/hoppscotch/`,
-  },
-]
-
-const copyAppLink = () => {
-  copyToClipboard(url)
-  copyIcon.value = IconCheck
-  toast.success(`${t("state.copied_to_clipboard")}`)
-}
-
-const hideModal = () => {
-  emit("hide-modal")
-}
-</script>
-
-<style lang="scss" scoped>
-.social-link {
-  @apply border border-dividerLight;
-  @apply rounded;
-  @apply flex-col flex;
-  @apply p-4;
-  @apply items-center;
-  @apply justify-center;
-  @apply font-semibold;
-  @apply hover: (bg-primaryLight text-secondaryDark);
-  @apply focus: outline-none;
-  @apply focus-visible: border-divider;
-
-  svg {
-    @apply opacity-80;
-  }
-
-  &:hover {
-    svg {
-      @apply opacity-100;
-    }
-  }
-}
-</style>

packages/hoppscotch-common/src/components/app/spotlight/entry/IconSelected.vue

@@ -0,0 +1,3 @@
+<template>
+  <IconLucideCheckCircle class="text-accent" />
+</template>

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

@@ -111,6 +111,7 @@ import {
   SwitchWorkspaceSpotlightSearcherService,
   WorkspaceSpotlightSearcherService,
 } from "~/services/spotlight/searchers/workspace.searcher"
+import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
 
 const t = useI18n()
 
@@ -138,6 +139,7 @@ useService(EnvironmentsSpotlightSearcherService)
 useService(SwitchEnvSpotlightSearcherService)
 useService(WorkspaceSpotlightSearcherService)
 useService(SwitchWorkspaceSpotlightSearcherService)
+useService(InterceptorSpotlightSearcherService)
 
 const search = ref("")
 
@@ -264,4 +266,3 @@ function newUseArrowKeysForNavigation() {
   return { selectedEntry }
 }
 </script>
-~/services/spotlight/searchers/workspace.searcher

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

@@ -239,6 +239,7 @@ import {
   resetTeamRequestsContext,
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
+import { defineActionHandler } from "~/helpers/actions"
 
 const t = useI18n()
 const toast = useToast()
@@ -2067,4 +2068,8 @@ const getErrorMessage = (err: GQLError<string>) => {
     }
   }
 }
+
+defineActionHandler("collection.new", () => {
+  displayModalAdd(true)
+})
 </script>

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

@@ -34,6 +34,13 @@
       @hide-modal="displayModalNew(false)"
     />
   </div>
+
+  <HoppSmartConfirmModal
+    :show="showConfirmRemoveEnvModal"
+    :title="t('confirm.remove_team')"
+    @hide-modal="showConfirmRemoveEnvModal = false"
+    @resolve="removeSelectedEnvironment()"
+  />
 </template>
 
 <script setup lang="ts">
@@ -44,6 +51,7 @@ import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
 import {
+  getSelectedEnvironmentIndex,
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
@@ -54,8 +62,15 @@ import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useLocalState } from "~/newstore/localstate"
 import { onLoggedIn } from "~/composables/auth"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { deleteEnvironment } from "~/newstore/environments"
+import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import { useToast } from "~/composables/toast"
 
 const t = useI18n()
+const toast = useToast()
 
 type EnvironmentType = "my-environments" | "team-environments"
 
@@ -168,6 +183,7 @@ watch(
   }
 )
 
+const showConfirmRemoveEnvModal = ref(false)
 const showModalNew = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
@@ -194,6 +210,30 @@ const editEnvironment = (environmentIndex: "Global") => {
   displayModalEdit(true)
 }
 
+const removeSelectedEnvironment = () => {
+  const selectedEnvIndex = getSelectedEnvironmentIndex()
+  if (selectedEnvIndex?.type === "NO_ENV_SELECTED") return
+
+  if (selectedEnvIndex?.type === "MY_ENV") {
+    deleteEnvironment(selectedEnvIndex.index)
+    toast.success(`${t("state.deleted")}`)
+  }
+
+  if (selectedEnvIndex?.type === "TEAM_ENV") {
+    pipe(
+      deleteTeamEnvironment(selectedEnvIndex.teamEnvID),
+      TE.match(
+        (err: GQLError<string>) => {
+          console.error(err)
+        },
+        () => {
+          toast.success(`${t("team_environment.deleted")}`)
+        }
+      )
+    )()
+  }
+}
+
 const resetSelectedData = () => {
   editingEnvironmentIndex.value = null
 }
@@ -203,6 +243,10 @@ defineActionHandler("modals.environment.new", () => {
   showModalDetails.value = true
 })
 
+defineActionHandler("modals.environment.delete-selected", () => {
+  showConfirmRemoveEnvModal.value = true
+})
+
 defineActionHandler(
   "modals.my.environment.edit",
   ({ envName, variableName }) => {

packages/hoppscotch-common/src/components/graphql/Response.vue

@@ -129,9 +129,7 @@ const downloadResponse = (str: string) => {
 }
 
 defineActionHandler("response.file.download", () =>
-  downloadResponse.bind(responseString.value)
-)
-defineActionHandler("response.copy", () =>
-  copyResponse.bind(responseString.value)
+  downloadResponse(responseString.value)
 )
+defineActionHandler("response.copy", () => copyResponse(responseString.value))
 </script>

packages/hoppscotch-common/src/helpers/actions.ts

@@ -26,14 +26,15 @@ export type HoppAction =
   | "request.method.delete" // Select DELETE Method
   | "request.import-curl" // Import cURL
   | "request.show-code" // Show generated code
+  | "collection.new" // Create root collection
   | "flyouts.chat.open" // Shows the keybinds flyout
   | "flyouts.keybinds.toggle" // Shows the keybinds flyout
   | "modals.search.toggle" // Shows the search modal
   | "modals.support.toggle" // Shows the support modal
   | "modals.share.toggle" // Shows the share modal
-  | "modals.social.toggle" // Shows the social links modal
   | "modals.environment.add" // Show add environment modal via context menu
   | "modals.environment.new" // Add new environment
+  | "modals.environment.delete-selected" // Delete Selected Environment
   | "modals.my.environment.edit" // Edit current personal environment
   | "modals.team.environment.edit" // Edit current team environment
   | "modals.team.new" // Add new team
@@ -108,6 +109,10 @@ type HoppActionArgsMap = {
     tab: RequestOptionTabs
   }
 
+  "request.duplicate-tab": {
+    tabID: string
+  }
+
   "gql.request.open": {
     request: HoppGQLRequest
     saveContext?: HoppGQLSaveContext
@@ -177,7 +182,7 @@ type InvokeActionFunc = {
  * @param args The argument passed to the action handler. Optional if action has no args required
  */
 export const invokeAction: InvokeActionFunc = <
-  A extends HoppAction | HoppActionWithArgs,
+  A extends HoppAction | HoppActionWithArgs
 >(
   action: A,
   args: ArgOfHoppAction<A>