refactor: update components for embeds flow

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

@@ -32,9 +32,13 @@
             {{ tab.document.request.method }}
           </span>
           <div
-            class="flex items-center flex-1 flex-shrink-0 min-w-0 px-4 py-2 truncate rounded-r"
+            class="flex items-center flex-1 flex-shrink-0 min-w-0 truncate rounded-r"
           >
-            {{ tab.document.request.endpoint }}
+            <SmartEnvInput
+              v-model="tab.document.request.endpoint"
+              :readonly="true"
+              :envs="tabRequestVariables"
+            />
           </div>
         </div>
         <div class="flex mt-2 space-x-2 sm:mt-0">
@@ -69,6 +73,7 @@
       v-model="tab.document.request"
       v-model:option-tab="selectedOptionTab"
       :properties="properties"
+      :envs="tabRequestVariables"
     />
     <HttpResponse
       v-if="tab.document.response"
@@ -117,6 +122,15 @@ const sharedRequestURL = computed(() => {
   return `${shortcodeBaseURL}/r/${props.sharedRequestID}`
 })
 
+const tabRequestVariables = computed(() => {
+  return tab.value.document.request.requestVariables.map((v) => ({
+    key: v.key,
+    value: v.value,
+    secret: false,
+    sourceEnv: "RequestVariable",
+  }))
+})
+
 const { subscribeToStream } = useStreamSubscriber()
 
 const newSendRequest = async () => {

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

@@ -150,7 +150,7 @@
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">
         <div v-if="auth.authType === 'basic'">
-          <HttpAuthorizationBasic v-model="auth" />
+          <HttpAuthorizationBasic v-model="auth" :envs="envs" />
         </div>
         <div v-if="auth.authType === 'inherit'" class="p-4">
           <span v-if="inheritedProperties?.auth">
@@ -173,17 +173,22 @@
               v-model="auth.token"
               placeholder="Token"
               :auto-complete-env="true"
+              :envs="envs"
             />
           </div>
         </div>
         <div v-if="auth.authType === 'oauth-2'">
           <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput v-model="auth.token" placeholder="Token" />
+            <SmartEnvInput
+              v-model="auth.token"
+              placeholder="Token"
+              :envs="envs"
+            />
           </div>
-          <HttpOAuth2Authorization v-model="auth" />
+          <HttpOAuth2Authorization v-model="auth" :envs="envs" />
         </div>
         <div v-if="auth.authType === 'api-key'">
-          <HttpAuthorizationApiKey v-model="auth" />
+          <HttpAuthorizationApiKey v-model="auth" :envs="envs" />
         </div>
       </div>
       <div
@@ -219,6 +224,7 @@ import { useColorMode } from "@composables/theming"
 import { useVModel } from "@vueuse/core"
 import { onMounted } from "vue"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 const t = useI18n()
 
@@ -229,6 +235,7 @@ const props = defineProps<{
   isCollectionProperty?: boolean
   isRootCollection?: boolean
   inheritedProperties?: HoppInheritedProperty
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

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

@@ -100,10 +100,12 @@
     <HttpBodyParameters
       v-if="body.contentType === 'multipart/form-data'"
       v-model="body"
+      :envs="envs"
     />
     <HttpURLEncodedParams
       v-else-if="body.contentType === 'application/x-www-form-urlencoded'"
       v-model="body"
+      :envs="envs"
     />
     <HttpRawBody v-else-if="body.contentType !== null" v-model="body" />
     <HoppSmartPlaceholder
@@ -141,6 +143,7 @@ import IconExternalLink from "~icons/lucide/external-link"
 import IconInfo from "~icons/lucide/info"
 import IconRefreshCW from "~icons/lucide/refresh-cw"
 import { RESTOptionTabs } from "./RequestOptions.vue"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 const colorMode = useColorMode()
 const t = useI18n()
@@ -148,6 +151,7 @@ const t = useI18n()
 const props = defineProps<{
   body: HoppRESTReqBody
   headers: HoppRESTHeader[]
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

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

@@ -73,6 +73,8 @@
                 isFile: entry.isFile,
               })
             "
+            :auto-complete-env="true"
+            :envs="envs"
           />
           <div v-if="entry.isFile" class="file-chips-container">
             <div class="file-chips-wrapper space-x-1">
@@ -95,6 +97,8 @@
                   isFile: entry.isFile,
                 })
               "
+              :auto-complete-env="true"
+              :envs="envs"
             />
           </span>
           <span>
@@ -190,11 +194,13 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { useColorMode } from "@composables/theming"
 import { useVModel } from "@vueuse/core"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 type Body = HoppRESTReqBody & { contentType: "multipart/form-data" }
 
 const props = defineProps<{
   modelValue: Body
+  envs: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

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

@@ -93,6 +93,7 @@
               :env-index="index"
               :inspection-results="getInspectorResult(headerKeyResults, index)"
               :auto-complete-env="true"
+              :envs="envs"
               @change="
                 updateHeader(index, {
                   id: header.id,
@@ -110,6 +111,7 @@
               "
               :env-index="index"
               :auto-complete-env="true"
+              :envs="envs"
               @change="
                 updateHeader(index, {
                   id: header.id,
@@ -331,7 +333,11 @@ import {
   getComputedHeaders,
   getComputedAuthHeaders,
 } from "~/helpers/utils/EffectiveURL"
-import { aggregateEnvs$, getAggregateEnvs } from "~/newstore/environments"
+import {
+  AggregateEnvironment,
+  aggregateEnvs$,
+  getAggregateEnvs,
+} from "~/newstore/environments"
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { InspectionService, InspectorResult } from "~/services/inspection"
@@ -361,6 +367,7 @@ const props = defineProps<{
   modelValue: HoppRESTRequest
   isCollectionProperty?: boolean
   inheritedProperties?: HoppInheritedProperty
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

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

@@ -8,6 +8,7 @@
         "
         :auto-complete-env="true"
         placeholder="OpenID Connect Discovery URL"
+        :envs="envs"
       />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
@@ -16,6 +17,7 @@
         placeholder="Authorization URL"
         :auto-complete-env="true"
         :styles="hasOIDCURL ? 'pointer-events-none opacity-70' : ''"
+        :envs="envs"
       ></SmartEnvInput>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
@@ -24,6 +26,7 @@
         placeholder="Access Token URL"
         :auto-complete-env="true"
         :styles="hasOIDCURL ? 'pointer-events-none opacity-70' : ''"
+        :envs="envs"
       />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
@@ -31,6 +34,7 @@
         v-model="clientID"
         :auto-complete-env="true"
         placeholder="Client ID"
+        :envs="envs"
       />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
@@ -38,6 +42,7 @@
         v-model="clientSecret"
         :auto-complete-env="true"
         placeholder="Client Secret"
+        :envs="envs"
       />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
@@ -45,6 +50,7 @@
         v-model="scope"
         :auto-complete-env="true"
         placeholder="Scope"
+        :envs="envs"
       />
     </div>
     <div class="p-2">
@@ -77,6 +83,7 @@ const toast = useToast()
 
 const props = defineProps<{
   modelValue: HoppRESTAuthOAuth2 | HoppGQLAuthOAuth2
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

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

@@ -88,6 +88,7 @@
                 getInspectorResult(parameterKeyResults, index)
               "
               :auto-complete-env="true"
+              :envs="envs"
               @change="
                 updateParam(index, {
                   id: param.id,
@@ -104,6 +105,7 @@
                 getInspectorResult(parameterValueResults, index)
               "
               :auto-complete-env="true"
+              :envs="envs"
               @change="
                 updateParam(index, {
                   id: param.id,
@@ -211,6 +213,7 @@ import { InspectionService, InspectorResult } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 const colorMode = useColorMode()
 
@@ -244,6 +247,7 @@ useCodemirror(
 
 const props = defineProps<{
   modelValue: HoppRESTParam[]
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

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

@@ -10,7 +10,7 @@
       :label="`${t('tab.parameters')}`"
       :info="`${newActiveParamsCount$}`"
     >
-      <HttpParameters v-model="request.params" />
+      <HttpParameters v-model="request.params" :envs="envs" />
     </HoppSmartTab>
     <HoppSmartTab
       v-if="properties ? properties.includes('bodyParams') : true"
@@ -20,6 +20,7 @@
       <HttpBody
         v-model:headers="request.headers"
         v-model:body="request.body"
+        :envs="envs"
         @change-tab="changeOptionTab"
       />
     </HoppSmartTab>
@@ -32,6 +33,7 @@
       <HttpHeaders
         v-model="request"
         :inherited-properties="inheritedProperties"
+        :envs="envs"
         @change-tab="changeOptionTab"
       />
     </HoppSmartTab>
@@ -43,6 +45,7 @@
       <HttpAuthorization
         v-model="request.auth"
         :inherited-properties="inheritedProperties"
+        :envs="envs"
       />
     </HoppSmartTab>
     <HoppSmartTab
@@ -85,6 +88,7 @@ import { useVModel } from "@vueuse/core"
 import { computed } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 const VALID_OPTION_TABS = [
   "params",
@@ -107,6 +111,7 @@ const props = withDefaults(
     optionTab: RESTOptionTabs
     properties?: string[]
     inheritedProperties?: HoppInheritedProperty
+    envs?: AggregateEnvironment[]
   }>(),
   {
     optionTab: "params",

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

@@ -92,6 +92,8 @@
                   active: param.active,
                 })
               "
+              :auto-complete-env="true"
+              :envs="envs"
             />
             <SmartEnvInput
               v-model="param.value"
@@ -104,6 +106,8 @@
                   active: param.active,
                 })
               "
+              :auto-complete-env="true"
+              :envs="envs"
             />
             <span>
               <HoppButtonSecondary
@@ -200,6 +204,7 @@ import { throwError } from "~/helpers/functional/error"
 import { useVModel } from "@vueuse/core"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 type Body = HoppRESTReqBody & {
   contentType: "application/x-www-form-urlencoded"
@@ -207,6 +212,7 @@ type Body = HoppRESTReqBody & {
 
 const props = defineProps<{
   modelValue: Body
+  envs: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue

@@ -4,6 +4,7 @@
       v-model="auth.key"
       :auto-complete-env="true"
       placeholder="Key"
+      :envs="envs"
     />
   </div>
   <div class="flex flex-1 border-b border-dividerLight">
@@ -11,6 +12,7 @@
       v-model="auth.value"
       :auto-complete-env="true"
       placeholder="Value"
+      :envs="envs"
     />
   </div>
   <div class="flex items-center border-b border-dividerLight">
@@ -73,11 +75,13 @@ import { useI18n } from "@composables/i18n"
 import { HoppRESTAuthAPIKey } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
 import { ref } from "vue"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 const t = useI18n()
 
 const props = defineProps<{
   modelValue: HoppRESTAuthAPIKey
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

packages/hoppscotch-common/src/components/http/authorization/Basic.vue

@@ -4,6 +4,7 @@
       v-model="auth.username"
       :placeholder="t('authorization.username')"
       :auto-complete-env="true"
+      :envs="envs"
     />
   </div>
   <div class="flex flex-1 border-b border-dividerLight">
@@ -11,6 +12,7 @@
       v-model="auth.password"
       :placeholder="t('authorization.password')"
       :auto-complete-env="true"
+      :envs="envs"
     />
   </div>
 </template>
@@ -19,11 +21,13 @@
 import { useI18n } from "@composables/i18n"
 import { HoppRESTAuthBasic } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
+import { AggregateEnvironment } from "~/newstore/environments"
 
 const t = useI18n()
 
 const props = defineProps<{
   modelValue: HoppRESTAuthBasic
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{

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

@@ -290,7 +290,12 @@ const widgets: Widget[] = [
   },
 ]
 
-type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
+type EmbedTabs =
+  | "params"
+  | "bodyParams"
+  | "headers"
+  | "authorization"
+  | "requestVariables"
 
 type EmbedOption = {
   selectedTab: EmbedTabs

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

@@ -56,7 +56,12 @@ import { useI18n } from "~/composables/i18n"
 
 const t = useI18n()
 
-type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
+type EmbedTabs =
+  | "params"
+  | "bodyParams"
+  | "headers"
+  | "authorization"
+  | "requestVariables"
 
 type EmbedOption = {
   selectedTab: EmbedTabs

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

@@ -173,6 +173,11 @@ const embedOptions = ref<EmbedOption>({
       label: t("tab.authorization"),
       enabled: false,
     },
+    {
+      value: "requestVariables",
+      label: t("tab.variables"),
+      enabled: false,
+    },
   ],
   theme: "system",
 })
@@ -223,7 +228,12 @@ const currentUser = useReadonlyStream(
 
 const step = ref(1)
 
-type EmbedTabs = "params" | "bodyParams" | "headers" | "authorization"
+type EmbedTabs =
+  | "params"
+  | "bodyParams"
+  | "headers"
+  | "authorization"
+  | "requestVariables"
 
 type EmbedOption = {
   selectedTab: EmbedTabs
@@ -369,6 +379,11 @@ const displayCustomizeRequestModal = (
           label: t("tab.authorization"),
           enabled: false,
         },
+        {
+          value: "requestVariables",
+          label: t("tab.variables"),
+          enabled: false,
+        },
       ],
       theme: "system",
     }

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

@@ -28,7 +28,7 @@
       </button>
     </div>
     <div
-      class="flex"
+      class="flex overflow-x-scroll"
       :class="[{ 'border-b pt-2 ': !noActiveTab }, embedColours]"
     >
       <span
@@ -57,7 +57,12 @@ import { computed } from "vue"
 
 import { useI18n } from "~/composables/i18n"
 
-type Tabs = "params" | "bodyParams" | "headers" | "authorization"
+type Tabs =
+  | "params"
+  | "bodyParams"
+  | "headers"
+  | "authorization"
+  | "requestVariables"
 
 type EmbedOption = {
   selectedTab: Tabs

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

@@ -87,7 +87,6 @@ import { platform } from "~/platform"
 import { onClickOutside, useDebounceFn } from "@vueuse/core"
 import { InspectorResult } from "~/services/inspection"
 import { invokeAction } from "~/helpers/actions"
-import { Environment } from "@hoppscotch/data"
 import { useI18n } from "~/composables/i18n"
 import IconEye from "~icons/lucide/eye"
 import IconEyeoff from "~icons/lucide/eye-off"
@@ -98,14 +97,12 @@ import { RESTTabService } from "~/services/tab/rest"
 
 const t = useI18n()
 
-type Env = Environment["variables"][number] & { source: string }
-
 const props = withDefaults(
   defineProps<{
     modelValue?: string
     placeholder?: string
     styles?: string
-    envs?: Env[] | null
+    envs?: AggregateEnvironment[] | null
     focus?: boolean
     selectTextOnMount?: boolean
     environmentHighlights?: boolean
@@ -371,7 +368,7 @@ const envVars = computed(() => {
         if (x.secret) {
           return {
             key: x.key,
-            sourceEnv: "source" in x ? x.source : null,
+            sourceEnv: "sourceEnv" in x ? x.sourceEnv : null,
             value: "********",
             secret: true,
           }
@@ -379,7 +376,7 @@ const envVars = computed(() => {
         return {
           key: x.key,
           value: x.value,
-          sourceEnv: "source" in x ? x.source : null,
+          sourceEnv: "sourceEnv" in x ? x.sourceEnv : null,
           secret: false,
         }
       })