fix: no selected option tab during the initial load

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

@@ -88,18 +88,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)
 

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')}`"
     >

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,
     },

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

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,
         },

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

@@ -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
@@ -251,9 +251,13 @@ 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
-    setTimeout(() => {
+    const initLoadTimeout = setTimeout(() => {
       adapter.initialize()
     }, 10)
+
+    return () => {
+      clearTimeout(initLoadTimeout)
+    }
   } catch (e) {
     console.error(e)
   }
@@ -317,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,
         },

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