refactor: update components for embeds flow

2024-02-19 23:34:23 +05:30
parent fb615d2d2b
commit 175641246e
16 changed files with 114 additions and 19 deletions
--- a/packages/hoppscotch-common/src/components/embeds/index.vue
+++ b/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 () => {
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/RequestOptions.vue
+++ b/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",
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/http/authorization/Basic.vue
+++ b/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<{
--- a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
+++ b/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
--- a/packages/hoppscotch-common/src/components/share/Modal.vue
+++ b/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
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/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",
    }
--- a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
+++ b/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
--- a/packages/hoppscotch-common/src/components/smart/EnvInput.vue
+++ b/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,
        }
      })