From 9e1466a87721ff0ab4ccf553738b858a274cb116 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Tue, 23 Jan 2024 22:24:18 +0530
Subject: [PATCH] fix: bugs in shared request (#3704)

---
 .../src/components/embeds/index.vue           | 11 ++++++--
 .../src/components/http/RequestOptions.vue    |  4 +--
 .../src/components/share/CreateModal.vue      |  8 +++---
 .../src/components/share/CustomizeModal.vue   |  6 ++--
 .../src/components/share/Modal.vue            |  8 +++---
 .../src/components/share/index.vue            | 28 ++++++++++++-------
 .../src/components/share/templates/Embeds.vue |  2 +-
 .../helpers/shortcode/ShortcodeListAdapter.ts |  3 ++
 .../helpers/teams/TeamCollectionAdapter.ts    | 18 ++++++++----
 .../src/newstore/collections.ts               |  2 +-
 .../hoppscotch-common/src/pages/e/_id.vue     | 12 ++++++--
 11 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/embeds/index.vue b/packages/hoppscotch-common/src/components/embeds/index.vue
index dee53a39f..4e338553a 100644
--- a/packages/hoppscotch-common/src/components/embeds/index.vue
+++ b/packages/hoppscotch-common/src/components/embeds/index.vue
@@ -70,7 +70,11 @@
       v-model:option-tab="selectedOptionTab"
       :properties="properties"
     />
-    <HttpResponse :document="tab.document" :is-embed="true" />
+    <HttpResponse
+      v-if="tab.document.response"
+      :document="tab.document"
+      :is-embed="true"
+    />
   </div>
 </template>
 
@@ -88,18 +92,19 @@ 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: string[]
+  properties: RESTOptionTabs[]
   sharedRequestID: string
 }>()
 
 const tab = useModel(props, "modelTab")
 
-const selectedOptionTab = ref(props.properties[0])
+const selectedOptionTab = ref<RESTOptionTabs>(props.properties[0])
 
 const requestCancelFunc: Ref<(() => void) | null> = ref(null)
 
diff --git a/packages/hoppscotch-common/src/components/http/RequestOptions.vue b/packages/hoppscotch-common/src/components/http/RequestOptions.vue
index f51bbc67e..06a96d52f 100644
--- a/packages/hoppscotch-common/src/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestOptions.vue
@@ -5,7 +5,7 @@
     render-inactive-tabs
   >
     <HoppSmartTab
-      v-if="properties ? properties.includes('parameters') : true"
+      v-if="properties ? properties.includes('params') : 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('body') : true"
+      v-if="properties ? properties.includes('bodyParams') : true"
       :id="'bodyParams'"
       :label="`${t('tab.body')}`"
     >
diff --git a/packages/hoppscotch-common/src/components/share/CreateModal.vue b/packages/hoppscotch-common/src/components/share/CreateModal.vue
index 3a1d08666..ee24486f4 100644
--- a/packages/hoppscotch-common/src/components/share/CreateModal.vue
+++ b/packages/hoppscotch-common/src/components/share/CreateModal.vue
@@ -103,7 +103,7 @@ const widgets: Widget[] = [
   },
 ]
 
-type Tabs = "parameters" | "body" | "headers" | "authorization"
+type Tabs = "params" | "bodyParams" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: Tabs
@@ -116,15 +116,15 @@ type EmbedOption = {
 }
 
 const embedOption = ref<EmbedOption>({
-  selectedTab: "parameters",
+  selectedTab: "params",
   tabs: [
     {
-      value: "parameters",
+      value: "params",
       label: t("tab.parameters"),
       enabled: true,
     },
     {
-      value: "body",
+      value: "bodyParams",
       label: t("tab.body"),
       enabled: true,
     },
diff --git a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue b/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
index d810b3814..87a6ee85e 100644
--- a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
+++ b/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
@@ -225,10 +225,10 @@ const props = defineProps({
   embedOptions: {
     type: Object as PropType<EmbedOption>,
     default: () => ({
-      selectedTab: "parameters",
+      selectedTab: "params",
       tabs: [
         {
-          value: "parameters",
+          value: "params",
           label: "shared_requests.parameters",
           enabled: true,
         },
@@ -290,7 +290,7 @@ const widgets: Widget[] = [
   },
 ]
 
-type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
+type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: EmbedTabs
diff --git a/packages/hoppscotch-common/src/components/share/Modal.vue b/packages/hoppscotch-common/src/components/share/Modal.vue
index ff99e6735..942e5bc8d 100644
--- a/packages/hoppscotch-common/src/components/share/Modal.vue
+++ b/packages/hoppscotch-common/src/components/share/Modal.vue
@@ -56,7 +56,7 @@ import { useI18n } from "~/composables/i18n"
 
 const t = useI18n()
 
-type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
+type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: EmbedTabs
@@ -93,15 +93,15 @@ const props = defineProps({
   embedOptions: {
     type: Object as PropType<EmbedOption>,
     default: () => ({
-      selectedTab: "parameters",
+      selectedTab: "params",
       tabs: [
         {
-          value: "parameters",
+          value: "params",
           label: "shared_requests.parameters",
           enabled: true,
         },
         {
-          value: "body",
+          value: "bodyParams",
           label: "shared_requests.body",
           enabled: true,
         },
diff --git a/packages/hoppscotch-common/src/components/share/index.vue b/packages/hoppscotch-common/src/components/share/index.vue
index 4ad929bb8..50b7f5c70 100644
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/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">
+      <div v-if="loading" class="flex flex-col items-center justify-center p-4">
         <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: "parameters",
+  selectedTab: "params",
   tabs: [
     {
-      value: "parameters",
+      value: "params",
       label: t("tab.parameters"),
       enabled: false,
     },
     {
-      value: "body",
+      value: "bodyParams",
       label: t("tab.body"),
       enabled: false,
     },
@@ -208,7 +208,7 @@ const currentUser = useReadonlyStream(
 
 const step = ref(1)
 
-type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
+type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: EmbedTabs
@@ -249,7 +249,15 @@ const loading = computed(
 
 onLoggedIn(() => {
   try {
-    adapter.initialize()
+    // 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)
   }
@@ -313,15 +321,15 @@ const displayCustomizeRequestModal = (
       info: t("shared_requests.button_info"),
     }
     embedOptions.value = {
-      selectedTab: "parameters",
+      selectedTab: "params",
       tabs: [
         {
-          value: "parameters",
+          value: "params",
           label: t("tab.parameters"),
           enabled: false,
         },
         {
-          value: "body",
+          value: "bodyParams",
           label: t("tab.body"),
           enabled: false,
         },
@@ -451,7 +459,7 @@ const getErrorMessage = (err: GQLError<string>) => {
   }
   switch (err.error) {
     case "shortcode/not_found":
-      return t("shared_request.not_found")
+      return t("shared_requests.not_found")
     default:
       return t("error.something_went_wrong")
   }
diff --git a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue b/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
index fee9c2a2e..dfdb6b31c 100644
--- a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
@@ -57,7 +57,7 @@ import { computed } from "vue"
 
 import { useI18n } from "~/composables/i18n"
 
-type Tabs = "parameters" | "body" | "headers" | "authorization"
+type Tabs = "params" | "bodyParams" | "headers" | "authorization"
 
 type EmbedOption = {
   selectedTab: Tabs
diff --git a/packages/hoppscotch-common/src/helpers/shortcode/ShortcodeListAdapter.ts b/packages/hoppscotch-common/src/helpers/shortcode/ShortcodeListAdapter.ts
index 5b02d985d..80e4b6e5e 100644
--- a/packages/hoppscotch-common/src/helpers/shortcode/ShortcodeListAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/shortcode/ShortcodeListAdapter.ts
@@ -156,6 +156,7 @@ export default class ShortcodeListAdapter {
     const [shortcodeCreated$, shortcodeCreatedSub] = runAuthOnlyGQLSubscription(
       {
         query: ShortcodeCreatedDocument,
+        variables: {},
       }
     )
 
@@ -172,6 +173,7 @@ export default class ShortcodeListAdapter {
     const [shortcodeRevoked$, shortcodeRevokedSub] = runAuthOnlyGQLSubscription(
       {
         query: ShortcodeDeletedDocument,
+        variables: {},
       }
     )
 
@@ -188,6 +190,7 @@ export default class ShortcodeListAdapter {
     const [shortcodeUpdated$, shortcodeUpdatedSub] = runAuthOnlyGQLSubscription(
       {
         query: ShortcodeUpdatedDocument,
+        variables: {},
       }
     )
 
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
index b6a1e0863..5cda13eaa 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
@@ -1034,6 +1034,11 @@ 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 ?? "",
@@ -1080,7 +1085,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
       }
 
@@ -1089,9 +1094,12 @@ export default class NewTeamCollectionAdapter {
       const parentFolderAuth = data.auth
       const parentFolderHeaders = data.headers
 
-      if (parentFolderAuth?.authType === "inherit" && path.length === 1) {
+      if (
+        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,
         }
@@ -1099,7 +1107,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,
         }
@@ -1112,7 +1120,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] = {
diff --git a/packages/hoppscotch-common/src/newstore/collections.ts b/packages/hoppscotch-common/src/newstore/collections.ts
index a23042a7f..91cdbb364 100644
--- a/packages/hoppscotch-common/src/newstore/collections.ts
+++ b/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
+ * Used to obtain the inherited auth and headers for a given folder path, used for both REST and GraphQL personal collections
  * @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
diff --git a/packages/hoppscotch-common/src/pages/e/_id.vue b/packages/hoppscotch-common/src/pages/e/_id.vue
index 94085ae1b..a44d5464b 100644
--- a/packages/hoppscotch-common/src/pages/e/_id.vue
+++ b/packages/hoppscotch-common/src/pages/e/_id.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="flex flex-col justify-center">
     <div
-      v-if="invalidLink"
+      v-if="sharedRequestDetails.loading"
+      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" />
@@ -12,8 +19,9 @@
         {{ t("error.invalid_embed_link") }}
       </p>
     </div>
+
     <Embeds
-      v-else-if="!invalidLink && tab"
+      v-else-if="tab"
       v-model:modelTab="tab"
       :properties="properties"
       :shared-request-i-d="sharedRequestID"