fix: close context menu when typing

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

@@ -70,11 +70,7 @@
       v-model:option-tab="selectedOptionTab"
       :properties="properties"
     />
-    <HttpResponse
+    <HttpResponse :document="tab.document" :is-embed="true" />
-      v-if="tab.document.response"
-      :document="tab.document"
-      :is-embed="true"
-    />
   </div>
 </template>
 
@@ -92,19 +88,18 @@ import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 import IconSave from "~icons/lucide/save"
-import { RESTOptionTabs } from "../http/RequestOptions.vue"
 const t = useI18n()
 const toast = useToast()
 
 const props = defineProps<{
   modelTab: HoppTab<HoppRESTDocument>
-  properties: RESTOptionTabs[]
+  properties: string[]
   sharedRequestID: string
 }>()
 
 const tab = useModel(props, "modelTab")
 
-const selectedOptionTab = ref<RESTOptionTabs>(props.properties[0])
+const selectedOptionTab = ref(props.properties[0])
 
 const requestCancelFunc: Ref<(() => void) | null> = ref(null)
 

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

@@ -237,7 +237,7 @@ import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
-import { Ref, computed, ref, onUnmounted } from "vue"
+import { Ref, computed, onBeforeUnmount, ref } from "vue"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
@@ -322,10 +322,6 @@ const userHistories = computed(() => {
   return history.value.map((history) => history.request.endpoint).slice(0, 10)
 })
 
-const inspectionService = useService(InspectionService)
-
-const tabs = useService(RESTTabService)
-
 const newSendRequest = async () => {
   if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)
@@ -426,17 +422,6 @@ function isCURL(curl: string) {
   return curl.includes("curl ")
 }
 
-const currentTabID = tabs.currentTabID.value
-
-onUnmounted(() => {
-  //check if current tab id exist in the current tab id lists
-  const isCurrentTabRemoved = !tabs
-    .getActiveTabs()
-    .value.some((tab) => tab.id === currentTabID)
-
-  if (isCurrentTabRemoved) cancelRequest()
-})
-
 const cancelRequest = () => {
   loading.value = false
   requestCancelFunc.value?.()
@@ -568,6 +553,10 @@ const saveRequest = () => {
 
 const request = ref<HoppRESTRequest | null>(null)
 
+onBeforeUnmount(() => {
+  if (loading.value) cancelRequest()
+})
+
 defineActionHandler("request.send-cancel", () => {
   if (!loading.value) newSendRequest()
   else cancelRequest()
@@ -618,5 +607,8 @@ const isCustomMethod = computed(() => {
 
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
 
+const inspectionService = useService(InspectionService)
+
+const tabs = useService(RESTTabService)
 const tabResults = inspectionService.getResultViewFor(tabs.currentTabID.value)
 </script>

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

@@ -5,7 +5,7 @@
     render-inactive-tabs
   >
     <HoppSmartTab
-      v-if="properties ? properties.includes('params') : true"
+      v-if="properties ? properties.includes('parameters') : true"
       :id="'params'"
       :label="`${t('tab.parameters')}`"
       :info="`${newActiveParamsCount$}`"
@@ -13,7 +13,7 @@
       <HttpParameters v-model="request.params" />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="properties ? properties.includes('bodyParams') : true"
+      v-if="properties ? properties.includes('body') : true"
       :id="'bodyParams'"
       :label="`${t('tab.body')}`"
     >

packages/hoppscotch-common/src/components/share/CreateModal.vue

@@ -103,7 +103,7 @@ const widgets: Widget[] = [
   },
 ]
 
-type Tabs = "params" | "bodyParams" | "headers" | "authorization"
+type Tabs = "parameters" | "body" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: Tabs
@@ -116,15 +116,15 @@ type EmbedOption = {
 }
 
 const embedOption = ref<EmbedOption>({
-  selectedTab: "params",
+  selectedTab: "parameters",
   tabs: [
     {
-      value: "params",
+      value: "parameters",
       label: t("tab.parameters"),
       enabled: true,
     },
     {
-      value: "bodyParams",
+      value: "body",
       label: t("tab.body"),
       enabled: true,
     },

packages/hoppscotch-common/src/components/share/CustomizeModal.vue

@@ -225,10 +225,10 @@ const props = defineProps({
   embedOptions: {
     type: Object as PropType<EmbedOption>,
     default: () => ({
-      selectedTab: "params",
+      selectedTab: "parameters",
       tabs: [
         {
-          value: "params",
+          value: "parameters",
           label: "shared_requests.parameters",
           enabled: true,
         },
@@ -290,7 +290,7 @@ const widgets: Widget[] = [
   },
 ]
 
-type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
+type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: EmbedTabs

packages/hoppscotch-common/src/components/share/Modal.vue

@@ -56,7 +56,7 @@ import { useI18n } from "~/composables/i18n"
 
 const t = useI18n()
 
-type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
+type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: EmbedTabs
@@ -93,15 +93,15 @@ const props = defineProps({
   embedOptions: {
     type: Object as PropType<EmbedOption>,
     default: () => ({
-      selectedTab: "params",
+      selectedTab: "parameters",
       tabs: [
         {
-          value: "params",
+          value: "parameters",
           label: "shared_requests.parameters",
           enabled: true,
         },
         {
-          value: "bodyParams",
+          value: "body",
           label: "shared_requests.body",
           enabled: true,
         },

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

@@ -21,7 +21,7 @@
       />
     </div>
     <div class="flex flex-col">
-      <div v-if="loading" class="flex flex-col items-center justify-center p-4">
+      <div v-if="loading" class="flex flex-col items-center justify-center">
         <HoppSmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
@@ -136,15 +136,15 @@ const shareRequestCreatingLoading = ref(false)
 const requestToShare = ref<HoppRESTRequest | null>(null)
 
 const embedOptions = ref<EmbedOption>({
-  selectedTab: "params",
+  selectedTab: "parameters",
   tabs: [
     {
-      value: "params",
+      value: "parameters",
       label: t("tab.parameters"),
       enabled: false,
     },
     {
-      value: "bodyParams",
+      value: "body",
       label: t("tab.body"),
       enabled: false,
     },
@@ -208,7 +208,7 @@ const currentUser = useReadonlyStream(
 
 const step = ref(1)
 
-type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
+type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: EmbedTabs
@@ -249,15 +249,7 @@ const loading = computed(
 
 onLoggedIn(() => {
   try {
-    // wait for a bit to let the auth token to be set
-    // because in some race conditions, the token is not set this fixes that
-    const initLoadTimeout = setTimeout(() => {
     adapter.initialize()
-    }, 10)
-
-    return () => {
-      clearTimeout(initLoadTimeout)
-    }
   } catch (e) {
     console.error(e)
   }
@@ -321,15 +313,15 @@ const displayCustomizeRequestModal = (
       info: t("shared_requests.button_info"),
     }
     embedOptions.value = {
-      selectedTab: "params",
+      selectedTab: "parameters",
       tabs: [
         {
-          value: "params",
+          value: "parameters",
           label: t("tab.parameters"),
           enabled: false,
         },
         {
-          value: "bodyParams",
+          value: "body",
           label: t("tab.body"),
           enabled: false,
         },
@@ -459,7 +451,7 @@ const getErrorMessage = (err: GQLError<string>) => {
   }
   switch (err.error) {
     case "shortcode/not_found":
-      return t("shared_requests.not_found")
+      return t("shared_request.not_found")
     default:
       return t("error.something_went_wrong")
   }

packages/hoppscotch-common/src/components/share/templates/Embeds.vue

@@ -57,7 +57,7 @@ import { computed } from "vue"
 
 import { useI18n } from "~/composables/i18n"
 
-type Tabs = "params" | "bodyParams" | "headers" | "authorization"
+type Tabs = "parameters" | "body" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: Tabs

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -37,7 +37,7 @@
           v-if="currentSuggestionIndex === index"
           class="hidden items-center text-secondary md:flex"
         >
-          <kbd class="shortcut-key">Enter</kbd>
+          <kbd class="shortcut-key">TAB</kbd>
           <span class="ml-2 truncate">to select</span>
         </div>
       </li>
@@ -169,18 +169,22 @@ watch(
 )
 
 const handleKeystroke = (ev: KeyboardEvent) => {
-  if (!props.autoCompleteSource) return
+  if (["ArrowDown", "ArrowUp", "Enter", "Tab", "Escape"].includes(ev.key)) {
-
-  if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(ev.key)) {
     ev.preventDefault()
   }
 
-  if (["Escape", "Tab", "Shift"].includes(ev.key)) {
+  if (ev.shiftKey) {
     showSuggestionPopover.value = false
+    return
   }
 
-  if (ev.key === "Enter") {
+  showSuggestionPopover.value = true
-    if (suggestions.value.length > 0 && currentSuggestionIndex.value > -1) {
+
+  if (
+    ["Enter", "Tab"].includes(ev.key) &&
+    suggestions.value.length > 0 &&
+    currentSuggestionIndex.value > -1
+  ) {
     updateModelValue(suggestions.value[currentSuggestionIndex.value])
     currentSuggestionIndex.value = -1
 
@@ -197,15 +201,6 @@ const handleKeystroke = (ev: KeyboardEvent) => {
     })
   }
 
-    if (showSuggestionPopover.value) {
-      showSuggestionPopover.value = false
-    } else {
-      emit("enter", ev)
-    }
-  } else {
-    showSuggestionPopover.value = true
-  }
-
   if (ev.key === "ArrowDown") {
     scrollActiveElIntoView()
 
@@ -228,6 +223,15 @@ const handleKeystroke = (ev: KeyboardEvent) => {
     emit("keyup", ev)
   }
 
+  if (ev.key === "Enter") {
+    emit("enter", ev)
+    showSuggestionPopover.value = false
+  }
+
+  if (ev.key === "Escape") {
+    showSuggestionPopover.value = false
+  }
+
   // used to scroll to the first suggestion when left arrow is pressed
   if (ev.key === "ArrowLeft") {
     if (suggestions.value.length > 0) {

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

@@ -154,9 +154,6 @@ export function runRESTRequest$(
           )
 
           if (E.isRight(runResult)) {
-            // set the response in the tab so that multiple tabs can run request simultaneously
-            tab.value.document.response = res
-
             tab.value.document.testResults = translateToSandboxTestResults(
               runResult.right
             )

packages/hoppscotch-common/src/helpers/shortcode/ShortcodeListAdapter.ts

@@ -156,7 +156,6 @@ export default class ShortcodeListAdapter {
     const [shortcodeCreated$, shortcodeCreatedSub] = runAuthOnlyGQLSubscription(
       {
         query: ShortcodeCreatedDocument,
-        variables: {},
       }
     )
 
@@ -173,7 +172,6 @@ export default class ShortcodeListAdapter {
     const [shortcodeRevoked$, shortcodeRevokedSub] = runAuthOnlyGQLSubscription(
       {
         query: ShortcodeDeletedDocument,
-        variables: {},
       }
     )
 
@@ -190,7 +188,6 @@ export default class ShortcodeListAdapter {
     const [shortcodeUpdated$, shortcodeUpdatedSub] = runAuthOnlyGQLSubscription(
       {
         query: ShortcodeUpdatedDocument,
-        variables: {},
       }
     )
 

packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts

@@ -1034,11 +1034,6 @@ export default class NewTeamCollectionAdapter {
     }
   }
 
-  /**
-   * Used to obtain the inherited auth and headers for a given folder path, used for both REST and GraphQL team collections
-   * @param folderPath the path of the folder to cascade the auth from
-   * @returns the inherited auth and headers for the given folder path
-   */
   public cascadeParentCollectionForHeaderAuth(folderPath: string) {
     let auth: HoppInheritedProperty["auth"] = {
       parentID: folderPath ?? "",
@@ -1085,7 +1080,7 @@ export default class NewTeamCollectionAdapter {
           authType: "inherit",
           authActive: true,
         }
-        auth.parentID = path.slice(0, i + 1).join("/")
+        auth.parentID = [...path.slice(0, i + 1)].join("/")
         auth.parentName = parentFolder.title
       }
 
@@ -1094,12 +1089,9 @@ export default class NewTeamCollectionAdapter {
       const parentFolderAuth = data.auth
       const parentFolderHeaders = data.headers
 
-      if (
+      if (parentFolderAuth?.authType === "inherit" && path.length === 1) {
-        parentFolderAuth?.authType === "inherit" &&
-        path.slice(0, i + 1).length === 1
-      ) {
         auth = {
-          parentID: path.slice(0, i + 1).join("/"),
+          parentID: [...path.slice(0, i + 1)].join("/"),
           parentName: parentFolder.title,
           inheritedAuth: auth.inheritedAuth,
         }
@@ -1107,7 +1099,7 @@ export default class NewTeamCollectionAdapter {
 
       if (parentFolderAuth?.authType !== "inherit") {
         auth = {
-          parentID: path.slice(0, i + 1).join("/"),
+          parentID: [...path.slice(0, i + 1)].join("/"),
           parentName: parentFolder.title,
           inheritedAuth: parentFolderAuth,
         }
@@ -1120,7 +1112,7 @@ export default class NewTeamCollectionAdapter {
           const index = headers.findIndex(
             (h) => h.inheritedHeader?.key === header.key
           )
-          const currentPath = path.slice(0, i + 1).join("/")
+          const currentPath = [...path.slice(0, i + 1)].join("/")
           if (index !== -1) {
             // Replace the existing header with the same key
             headers[index] = {

packages/hoppscotch-common/src/newstore/collections.ts

@@ -68,7 +68,7 @@ export function navigateToFolderWithIndexPath(
 }
 
 /**
- * Used to obtain the inherited auth and headers for a given folder path, used for both REST and GraphQL personal collections
+ * Used to obtain the inherited auth and headers for a given folder path, used for both REST and GraphQL
  * @param folderPath the path of the folder to cascade the auth from
  * @param type the type of collection
  * @returns the inherited auth and headers for the given folder path

packages/hoppscotch-common/src/pages/e/_id.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="flex flex-col justify-center">
     <div
-      v-if="sharedRequestDetails.loading"
+      v-if="invalidLink"
-      class="flex justify-center items-center py-5"
-    >
-      <HoppSmartSpinner />
-    </div>
-
-    <div
-      v-else-if="E.isLeft(sharedRequestDetails.data) || invalidLink"
       class="flex flex-1 flex-col items-center justify-center p-8"
     >
       <icon-lucide-alert-triangle class="svg-icons mb-2 opacity-75" />
@@ -19,9 +12,8 @@
         {{ t("error.invalid_embed_link") }}
       </p>
     </div>
-
     <Embeds
-      v-else-if="tab"
+      v-else-if="!invalidLink && tab"
       v-model:modelTab="tab"
       :properties="properties"
       :shared-request-i-d="sharedRequestID"