feat: embeds (#3627)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
2023-12-07 15:03:49 +05:30
parent ab7c29d228
commit 2bf0106aa2
23 changed files with 783 additions and 145 deletions
--- a/packages/hoppscotch-common/src/components/embeds/index.vue
+++ b/packages/hoppscotch-common/src/components/embeds/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="flex flex-1 flex-col">
+    <header
+      class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
+    >
+      <div class="flex flex-1 items-center justify-between space-x-2">
+        <HoppButtonSecondary
+          class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
+          :label="t('app.name')"
+          to="https://hoppscotch.io/"
+          blank
+        />
+        <div class="flex">
+          <HoppSmartItem
+            :label="t('app.open_in_hoppscotch')"
+            :to="sharedRequestURL"
+            blank
+          />
+        </div>
+      </div>
+    </header>
+
+    <div class="flex-1">
+      <div
+        class="flex-none flex-shrink-0 bg-primary p-4 sm:flex sm:flex-shrink-0 sm:space-x-2"
+      >
+        <div
+          class="min-w-52 flex flex-1 whitespace-nowrap rounded border border-divider"
+        >
+          <div class="relative flex">
+            <span
+              class="flex justify-center items-center w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
+            >
+              {{ tab.document.request.method }}
+            </span>
+          </div>
+          <div
+            class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
+          >
+            <input
+              name="method"
+              :value="tab.document.request.endpoint"
+              class="flex-1 px-4 bg-primary"
+              disabled
+            />
+          </div>
+        </div>
+        <div class="mt-2 flex sm:mt-0">
+          <HoppButtonPrimary
+            id="send"
+            :title="`${t(
+              'action.send'
+            )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
+            :label="`${!loading ? t('action.send') : t('action.cancel')}`"
+            class="min-w-20 flex-1"
+            @click="!loading ? newSendRequest() : cancelRequest()"
+          />
+          <HoppButtonSecondary
+            :title="`${t(
+              'request.save'
+            )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
+            :label="t('request.save')"
+            filled
+            :icon="IconSave"
+            class="flex-1 rounded rounded-r-none"
+            blank
+            :to="sharedRequestURL"
+          />
+        </div>
+      </div>
+    </div>
+
+    <HttpRequestOptions
+      v-model="tab.document.request"
+      v-model:option-tab="selectedOptionTab"
+      :properties="properties"
+    />
+
+    <HttpResponse :document="tab.document" :is-embed="true" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Ref } from "vue"
+import { computed, useModel } from "vue"
+import { ref } from "vue"
+import { useI18n } from "~/composables/i18n"
+import { useToast } from "~/composables/toast"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import * as E from "fp-ts/Either"
+import { useStreamSubscriber } from "~/composables/stream"
+import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { runRESTRequest$ } from "~/helpers/RequestRunner"
+import { HoppTab } from "~/services/tab"
+import { HoppRESTDocument } from "~/helpers/rest/document"
+import IconSave from "~icons/lucide/save"
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  modelTab: HoppTab<HoppRESTDocument>
+  properties: string[]
+  sharedRequestID: string
+}>()
+
+const tab = useModel(props, "modelTab")
+
+const selectedOptionTab = ref(props.properties[0])
+
+const requestCancelFunc: Ref<(() => void) | null> = ref(null)
+
+const loading = ref(false)
+
+const baseURL = import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+const sharedRequestURL = computed(() => {
+  return `${baseURL}/r/${props.sharedRequestID}`
+})
+
+const { subscribeToStream } = useStreamSubscriber()
+
+const newSendRequest = async () => {
+  if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
+    toast.error(`${t("empty.endpoint")}`)
+    return
+  }
+
+  ensureMethodInEndpoint()
+
+  loading.value = true
+
+  const [cancel, streamPromise] = runRESTRequest$(tab)
+  const streamResult = await streamPromise
+
+  requestCancelFunc.value = cancel
+  if (E.isRight(streamResult)) {
+    subscribeToStream(
+      streamResult.right,
+      (responseState) => {
+        if (loading.value) {
+          // Check exists because, loading can be set to false
+          // when cancelled
+          updateRESTResponse(responseState)
+        }
+      },
+      () => {
+        loading.value = false
+      },
+      () => {
+        // TODO: Change this any to a proper type
+        const result = (streamResult.right as any).value
+        if (
+          result.type === "network_fail" &&
+          result.error?.error === "NO_PW_EXT_HOOK"
+        ) {
+          const errorResponse: HoppRESTResponse = {
+            type: "extension_error",
+            error: result.error.humanMessage.heading,
+            component: result.error.component,
+            req: result.req,
+          }
+          updateRESTResponse(errorResponse)
+        }
+        loading.value = false
+      }
+    )
+  } else {
+    loading.value = false
+    toast.error(`${t("error.script_fail")}`)
+    let error: Error
+    if (typeof streamResult.left === "string") {
+      error = { name: "RequestFailure", message: streamResult.left }
+    } else {
+      error = streamResult.left
+    }
+    updateRESTResponse({
+      type: "script_fail",
+      error,
+    })
+  }
+}
+
+const updateRESTResponse = (response: HoppRESTResponse | null) => {
+  tab.value.document.response = response
+}
+
+const newEndpoint = computed(() => {
+  return tab.value.document.request.endpoint
+})
+
+const ensureMethodInEndpoint = () => {
+  if (
+    !/^http[s]?:\/\//.test(newEndpoint.value) &&
+    !newEndpoint.value.startsWith("<<")
+  ) {
+    const domain = newEndpoint.value.split(/[/:#?]+/)[0]
+    if (domain === "localhost" || /([0-9]+\.)*[0-9]/.test(domain)) {
+      tab.value.document.request.endpoint =
+        "http://" + tab.value.document.request.endpoint
+    } else {
+      tab.value.document.request.endpoint =
+        "https://" + tab.value.document.request.endpoint
+    }
+  }
+}
+
+const cancelRequest = () => {
+  loading.value = false
+  requestCancelFunc.value?.()
+
+  updateRESTResponse(null)
+}
+</script>
--- a/packages/hoppscotch-common/src/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestOptions.vue
@@ -5,13 +5,18 @@
    render-inactive-tabs
  >
    <HoppSmartTab
+      v-if="properties ? properties.includes('parameters') : true"
      :id="'params'"
      :label="`${t('tab.parameters')}`"
      :info="`${newActiveParamsCount$}`"
    >
      <HttpParameters v-model="request.params" />
    </HoppSmartTab>
-    <HoppSmartTab :id="'bodyParams'" :label="`${t('tab.body')}`">
+    <HoppSmartTab
+      v-if="properties ? properties.includes('body') : true"
+      :id="'bodyParams'"
+      :label="`${t('tab.body')}`"
+    >
      <HttpBody
        v-model:headers="request.headers"
        v-model:body="request.body"
@@ -19,16 +24,22 @@
      />
    </HoppSmartTab>
    <HoppSmartTab
+      v-if="properties ? properties.includes('headers') : true"
      :id="'headers'"
      :label="`${t('tab.headers')}`"
      :info="`${newActiveHeadersCount$}`"
    >
      <HttpHeaders v-model="request" @change-tab="changeOptionTab" />
    </HoppSmartTab>
-    <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
+    <HoppSmartTab
+      v-if="properties ? properties.includes('authorization') : true"
+      :id="'authorization'"
+      :label="`${t('tab.authorization')}`"
+    >
      <HttpAuthorization v-model="request.auth" />
    </HoppSmartTab>
    <HoppSmartTab
+      v-if="properties ? properties.includes('preRequestScript') : true"
      :id="'preRequestScript'"
      :label="`${t('tab.pre_request_script')}`"
      :indicator="
@@ -40,6 +51,7 @@
      <HttpPreRequestScript v-model="request.preRequestScript" />
    </HoppSmartTab>
    <HoppSmartTab
+      v-if="properties ? properties.includes('tests') : true"
      :id="'tests'"
      :label="`${t('tab.tests')}`"
      :indicator="
@@ -76,6 +88,7 @@ const props = withDefaults(
  defineProps<{
    modelValue: HoppRESTRequest
    optionTab: RESTOptionTabs
+    properties?: string[]
  }>(),
  {
    optionTab: "params",
--- a/packages/hoppscotch-common/src/components/http/Response.vue
+++ b/packages/hoppscotch-common/src/components/http/Response.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="relative flex flex-1 flex-col">
-    <HttpResponseMeta :response="doc.response" />
+    <HttpResponseMeta :response="doc.response" :is-embed="isEmbed" />
    <LensesResponseBodyRenderer
      v-if="!loading && hasResponse"
      v-model:document="doc"
@@ -15,6 +15,7 @@ import { HoppRESTDocument } from "~/helpers/rest/document"

 const props = defineProps<{
  document: HoppRESTDocument
+  isEmbed: boolean
 }>()

 const emit = defineEmits<{
--- a/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
@@ -2,8 +2,20 @@
  <div
    class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-center overflow-auto overflow-x-auto whitespace-nowrap bg-primary p-4"
  >
-    <AppShortcutsPrompt v-if="response == null" class="flex-1" />
-    <div v-else class="flex flex-1 flex-col">
+    <AppShortcutsPrompt v-if="response == null && !isEmbed" class="flex-1" />
+
+    <div v-if="response == null && isEmbed">
+      <HoppButtonSecondary
+        :label="`${t('app.documentation')}`"
+        to="https://docs.hoppscotch.io/documentation/features/rest-api-testing#response"
+        :icon="IconExternalLink"
+        blank
+        outline
+        reverse
+      />
+    </div>
+
+    <div v-else-if="response" class="flex flex-1 flex-col">
      <div
        v-if="response.type === 'loading'"
        class="flex flex-col items-center justify-center"
@@ -105,6 +117,7 @@ import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"
 import { useService } from "dioc/vue"
 import { InspectionService } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
+import IconExternalLink from "~icons/lucide/external-link"

 const t = useI18n()
 const colorMode = useColorMode()
@@ -112,6 +125,7 @@ const tabs = useService(RESTTabService)

 const props = defineProps<{
  response: HoppRESTResponse | null | undefined
+  isEmbed?: boolean
 }>()

 /**
--- a/packages/hoppscotch-common/src/components/share/CreateModal.vue
+++ b/packages/hoppscotch-common/src/components/share/CreateModal.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    v-if="selectedWidget"
-    class="divide-y divide-divider rounded border border-divider"
+    class="border divide-y rounded divide-divider border-divider"
  >
    <div v-if="loading" class="px-4 py-2">
      {{ t("shared_requests.creating_widget") }}
@@ -10,17 +10,17 @@
      {{ t("shared_requests.description") }}
    </div>
    <div class="flex flex-col divide-y divide-divider">
-      <div class="flex flex-col space-y-4 p-4">
+      <div class="flex flex-col p-4 space-y-4">
        <div
          v-for="widget in widgets"
          :key="widget.value"
-          class="flex cursor-pointer flex-col space-y-2 rounded border border-divider px-4 py-3 hover:bg-dividerLight"
+          class="flex flex-col p-4 border rounded cursor-pointer border-divider hover:bg-dividerLight"
          :class="{
            '!border-accentLight': selectedWidget.value === widget.value,
          }"
          @click="selectedWidget = widget"
        >
-          <span class="text-md font-bold">
+          <span class="mb-1 font-bold text-secondaryDark">
            {{ widget.label }}
          </span>
          <span class="text-tiny">
@@ -28,9 +28,13 @@
          </span>
        </div>
      </div>
-      <div class="flex flex-col divide-y divide-divider">
-        <div class="px-4 py-3">{{ t("shared_requests.preview") }}</div>
-        <div class="flex flex-col items-center justify-center px-4 py-10">
+      <div class="flex flex-col items-center justify-center p-4">
+        <span
+          class="flex justify-center flex-1 mb-2 text-secondaryLight text-tiny"
+        >
+          {{ t("shared_requests.preview") }}
+        </span>
+        <div class="w-full">
          <ShareTemplatesEmbeds
            v-if="selectedWidget.value === 'embed'"
            :endpoint="request?.endpoint"
@@ -132,7 +136,7 @@ const embedOption = ref<EmbedOption>({
    {
      value: "authorization",
      label: t("tab.authorization"),
-      enabled: true,
+      enabled: false,
    },
  ],
  theme: "system",
--- a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
+++ b/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    v-if="selectedWidget"
-    class="divide-y divide-divider rounded border border-divider"
+    class="border divide-y rounded divide-divider border-divider"
  >
    <div v-if="loading" class="px-4 py-2">
      {{ t("shared_requests.creating_widget") }}
@@ -14,7 +14,7 @@
      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
    </div>
    <div v-else class="flex flex-col divide-y divide-divider">
-      <div class="flex flex-col space-y-4 p-4">
+      <div class="flex flex-col p-2 space-y-2">
        <HoppSmartRadioGroup
          v-model="selectedWidget.value"
          :radios="widgets"
@@ -22,9 +22,9 @@
        />
      </div>
      <div class="flex flex-col divide-y divide-divider">
-        <div class="flex items-center justify-center px-4 py-8">
-          <div v-if="selectedWidget.value === 'embed'" class="w-full flex-1">
-            <div class="flex flex-col pb-8">
+        <div class="flex items-center justify-center px-6 py-4">
+          <div v-if="selectedWidget.value === 'embed'" class="w-full">
+            <div class="flex flex-col pb-4">
              <div
                v-for="option in embedOptions.tabs"
                :key="option.value"
@@ -36,7 +36,8 @@
                <HoppSmartCheckbox
                  :on="option.enabled"
                  @change="removeEmbedOption(option.value)"
-                />
+                >
+                </HoppSmartCheckbox>
              </div>
              <div class="flex items-center justify-between">
                <span>
@@ -49,13 +50,11 @@
                    theme="popover"
                    :on-shown="() => tippyActions!.focus()"
                  >
-                    <span class="select-wrapper">
-                      <HoppButtonSecondary
-                        class="ml-2 rounded-none pr-8 capitalize"
-                        :label="embedOptions.theme"
-                        :icon="embedThemeIcon"
-                      />
-                    </span>
+                    <HoppButtonSecondary
+                      class="!py-2 !px-0 capitalize"
+                      :label="embedOptions.theme"
+                      :icon="embedThemeIcon"
+                    />
                    <template #content="{ hide }">
                      <div
                        ref="tippyActions"
@@ -102,14 +101,20 @@
                </div>
              </div>
            </div>
+            <span
+              class="flex justify-center mb-2 text-secondaryLight text-tiny"
+            >
+              {{ t("shared_requests.preview") }}
+            </span>
            <ShareTemplatesEmbeds
              :endpoint="request?.endpoint"
              :method="request?.method"
              :model-value="embedOptions"
            />
-            <div class="flex items-center justify-center py-4">
+            <div class="flex items-center justify-center">
              <HoppButtonSecondary
                :label="t('shared_requests.copy_html')"
+                class="underline text-secondaryDark"
                @click="
                  copyContent({
                    widget: 'embed',
@@ -126,12 +131,18 @@
            <div
              v-for="variant in buttonVariants"
              :key="variant.id"
-              class="flex flex-col space-y-4"
+              class="flex flex-col"
            >
+              <span
+                class="flex justify-center mb-2 text-secondaryLight text-tiny"
+              >
+                {{ t("shared_requests.preview") }}
+              </span>
              <ShareTemplatesButton :img="variant.img" />
              <div class="flex items-center justify-between">
                <HoppButtonSecondary
                  :label="t('shared_requests.copy_html')"
+                  class="underline text-secondaryDark"
                  @click="
                    copyContent({
                      widget: 'button',
@@ -142,6 +153,7 @@
                />
                <HoppButtonSecondary
                  :label="t('shared_requests.copy_markdown')"
+                  class="underline text-secondaryDark"
                  @click="
                    copyContent({
                      widget: 'button',
@@ -157,12 +169,17 @@
            <div
              v-for="variant in linkVariants"
              :key="variant.type"
-              class="flex flex-col items-center justify-center space-y-2"
+              class="flex flex-col items-center justify-center"
            >
+              <span
+                class="flex justify-center mb-2 text-secondaryLight text-tiny"
+              >
+                {{ t("shared_requests.preview") }}
+              </span>
              <ShareTemplatesLink :link="variant.link" :label="variant.label" />
-
              <HoppButtonSecondary
                :label="t(`shared_requests.copy_${variant.type}`)"
+                class="underline text-secondaryDark"
                @click="
                  copyContent({
                    widget: 'link',
@@ -205,6 +222,35 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  embedOptions: {
+    type: Object as PropType<EmbedOption>,
+    default: () => ({
+      selectedTab: "parameters",
+      tabs: [
+        {
+          value: "parameters",
+          label: "shared_requests.parameters",
+          enabled: true,
+        },
+        {
+          value: "body",
+          label: "shared_requests.body",
+          enabled: true,
+        },
+        {
+          value: "headers",
+          label: "shared_requests.headers",
+          enabled: true,
+        },
+        {
+          value: "authorization",
+          label: "shared_requests.authorization",
+          enabled: false,
+        },
+      ],
+      theme: "system",
+    }),
+  },
 })

 const emit = defineEmits<{
@@ -220,6 +266,7 @@ const emit = defineEmits<{
 }>()

 const selectedWidget = useVModel(props, "modelValue")
+const embedOptions = useVModel(props, "embedOptions")

 type WidgetID = "embed" | "button" | "link"

@@ -254,34 +301,6 @@ type EmbedOption = {
  }[]
  theme: "light" | "dark" | "system"
 }
-
-const embedOptions = ref<EmbedOption>({
-  selectedTab: "parameters",
-  tabs: [
-    {
-      value: "parameters",
-      label: t("tab.parameters"),
-      enabled: true,
-    },
-    {
-      value: "body",
-      label: t("tab.body"),
-      enabled: true,
-    },
-    {
-      value: "headers",
-      label: t("tab.headers"),
-      enabled: true,
-    },
-    {
-      value: "authorization",
-      label: t("tab.authorization"),
-      enabled: true,
-    },
-  ],
-  theme: "system",
-})
-
 const embedThemeIcon = computed(() => {
  if (embedOptions.value.theme === "system") {
    return IconMonitor
@@ -355,12 +374,7 @@ const linkVariants: LinkVariant[] = [
 const baseURL = import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"

 const copyEmbed = () => {
-  const options = embedOptions.value
-  const enabledEmbedOptions = options.tabs
-    .filter((tab) => tab.enabled)
-    .map((tab) => tab.value)
-    .toString()
-  return `<iframe src="${baseURL}/e/${props.request?.id}/${enabledEmbedOptions}' style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'></iframe>`
+  return `<iframe src="${baseURL}/e/${props.request?.id}' style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'></iframe>`
 }

 const copyButton = (
@@ -410,7 +424,10 @@ const copyContent = ({
  } else {
    content = copyEmbed()
  }
-  const copyContent = { sharedRequestID: props.request?.id, content }
+  const copyContent = {
+    sharedRequestID: props.request?.id,
+    content,
+  }
  emit("copy-shared-request", copyContent)
 }

--- a/packages/hoppscotch-common/src/components/share/Modal.vue
+++ b/packages/hoppscotch-common/src/components/share/Modal.vue
@@ -2,7 +2,9 @@
  <HoppSmartModal
    v-if="show"
    dialog
-    :title="t('modal.share_request')"
+    :title="
+      step === 1 ? t('modal.share_request') : t('modal.customize_request')
+    "
    styles="sm:max-w-md"
    @close="hideModal"
  >
@@ -21,6 +23,7 @@
      <ShareCustomizeModal
        v-else-if="step === 2"
        v-model="selectedWidget"
+        v-model:embed-options="embedOptions"
        :request="request"
        :loading="loading"
        @copy-shared-request="copySharedRequest"
@@ -28,19 +31,21 @@
    </template>

    <template #footer>
-      <div v-if="step === 1" class="flex justify-end">
+      <div class="flex justify-start flex-1">
        <HoppButtonPrimary
+          v-if="step === 1"
          :label="t('action.create')"
          :loading="loading"
          @click="createSharedRequest"
        />
        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          class="mr-2"
+          :label="step === 1 ? t('action.cancel') : t('action.close')"
+          class="ml-2"
+          filled
+          outline
          @click="hideModal"
        />
      </div>
-      <HoppButtonPrimary v-else :label="t('action.close')" @click="hideModal" />
    </template>
  </HoppSmartModal>
 </template>
@@ -53,6 +58,18 @@ import { useI18n } from "~/composables/i18n"

 const t = useI18n()

+type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
+
+type EmbedOption = {
+  selectedTab: EmbedTabs
+  tabs: {
+    value: EmbedTabs
+    label: string
+    enabled: boolean
+  }[]
+  theme: "light" | "dark" | "system"
+}
+
 const props = defineProps({
  request: {
    type: Object as PropType<HoppRESTRequest | null>,
@@ -75,6 +92,35 @@ const props = defineProps({
    type: Number,
    default: 1,
  },
+  embedOptions: {
+    type: Object as PropType<EmbedOption>,
+    default: () => ({
+      selectedTab: "parameters",
+      tabs: [
+        {
+          value: "parameters",
+          label: "shared_requests.parameters",
+          enabled: true,
+        },
+        {
+          value: "body",
+          label: "shared_requests.body",
+          enabled: true,
+        },
+        {
+          value: "headers",
+          label: "shared_requests.headers",
+          enabled: true,
+        },
+        {
+          value: "authorization",
+          label: "shared_requests.authorization",
+          enabled: false,
+        },
+      ],
+      theme: "system",
+    }),
+  },
 })

 type WidgetID = "embed" | "button" | "link"
@@ -86,6 +132,7 @@ type Widget = {
 }

 const selectedWidget = useVModel(props, "modelValue")
+const embedOptions = useVModel(props, "embedOptions")

 const emit = defineEmits<{
  (e: "create-shared-request", request: HoppRESTRequest | null): void
@@ -94,7 +141,7 @@ const emit = defineEmits<{
  (e: "update:step", value: number): void
  (
    e: "copy-shared-request",
-    request: {
+    payload: {
      sharedRequestID: string | undefined
      content: string | undefined
    }
@@ -105,11 +152,11 @@ const createSharedRequest = () => {
  emit("create-shared-request", props.request as HoppRESTRequest)
 }

-const copySharedRequest = (request: {
+const copySharedRequest = (payload: {
  sharedRequestID: string | undefined
  content: string | undefined
 }) => {
-  emit("copy-shared-request", request)
+  emit("copy-shared-request", payload)
 }

 const hideModal = () => {
--- a/packages/hoppscotch-common/src/components/share/Request.vue
+++ b/packages/hoppscotch-common/src/components/share/Request.vue
@@ -1,31 +1,31 @@
 <template>
  <div
-    class="group flex items-stretch"
+    class="flex items-stretch group"
    @contextmenu.prevent="options!.tippy.show()"
  >
    <div
      v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
-      class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center py-2"
+      class="flex items-center justify-center flex-1 min-w-0 py-2 cursor-pointer pointer-events-auto"
      :title="`${timeStamp}`"
      @click="openInNewTab"
    >
      <span
-        class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
+        class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
        :style="{ color: requestLabelColor }"
      >
-        <span class="truncate text-tiny font-semibold">
+        <span class="font-semibold truncate text-tiny">
          {{ parseRequest.method }}
        </span>
      </span>
      <span
-        class="pointer-events-none flex min-w-0 flex-1 items-center pr-2 transition group-hover:text-secondaryDark"
+        class="flex items-center flex-1 min-w-0 pr-2 transition pointer-events-none group-hover:text-secondaryDark"
      >
        <span class="flex-1 truncate">
          {{ parseRequest.endpoint }}
        </span>
      </span>
      <span
-        class="flex-1 truncate border-l border-dividerDark px-2 text-secondaryLight group-hover:text-secondaryDark"
+        class="flex px-2 truncate text-secondaryLight group-hover:text-secondaryDark"
      >
        {{ parseRequest.name }}
      </span>
@@ -69,7 +69,7 @@
              />
              <HoppSmartItem
                ref="customizeAction"
-                :icon="IconFileEdit"
+                :icon="IconCustomize"
                :label="`${t('shared_requests.customize')}`"
                :shortcut="['E']"
                @click="
@@ -110,7 +110,7 @@ import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
 import { Shortcode } from "~/helpers/shortcode/Shortcode"
 import IconArrowUpRight from "~icons/lucide/arrow-up-right-square"
 import IconMoreVertical from "~icons/lucide/more-vertical"
-import IconFileEdit from "~icons/lucide/file-edit"
+import IconCustomize from "~icons/lucide/settings-2"
 import IconTrash2 from "~icons/lucide/trash-2"
 import { shortDateTime } from "~/helpers/utils/date"

@@ -121,7 +121,12 @@ const props = defineProps<{
 }>()

 const emit = defineEmits<{
-  (e: "customize-shared-request", request: HoppRESTRequest, id: string): void
+  (
+    e: "customize-shared-request",
+    request: HoppRESTRequest,
+    id: string,
+    embedProperties?: string | null
+  ): void
  (e: "delete-shared-request", codeID: string): void
  (e: "open-new-tab", request: HoppRESTRequest): void
 }>()
@@ -130,6 +135,7 @@ const tippyActions = ref<TippyComponent | null>(null)
 const openInNewTabAction = ref<HTMLButtonElement | null>(null)
 const customizeAction = ref<HTMLButtonElement | null>(null)
 const deleteAction = ref<HTMLButtonElement | null>(null)
+const options = ref<any | null>(null)

 const parseRequest = computed(() =>
  pipe(props.request.request, JSON.parse, translateToNewRequest)
@@ -144,7 +150,13 @@ const openInNewTab = () => {
 }

 const customizeSharedRequest = () => {
-  emit("customize-shared-request", parseRequest.value, props.request.id)
+  const embedProperties = props.request.properties
+  emit(
+    "customize-shared-request",
+    parseRequest.value,
+    props.request.id,
+    embedProperties
+  )
 }

 const deleteSharedRequest = () => {
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/packages/hoppscotch-common/src/components/share/index.vue
@@ -80,11 +80,12 @@
  />
  <ShareModal
    v-model="selectedWidget"
+    v-model:embed-options="embedOptions"
+    :step="step"
    :request="requestToShare"
    :show="showShareRequestModal"
    :loading="shareRequestCreatingLoading"
-    :step="step"
-    @hide-modal="displayCustomizeRequestModal(false)"
+    @hide-modal="displayCustomizeRequestModal(false, null)"
    @copy-shared-request="copySharedRequest"
    @create-shared-request="createSharedRequest"
  />
@@ -105,6 +106,7 @@ import * as TE from "fp-ts/TaskEither"
 import {
  deleteShortcode as backendDeleteShortcode,
  createShortcode,
+  updateEmbedProperties,
 } from "~/helpers/backend/mutations/Shortcode"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { useToast } from "~/composables/toast"
@@ -114,6 +116,7 @@ import { copyToClipboard } from "~/helpers/utils/clipboard"
 import * as E from "fp-ts/Either"
 import { RESTTabService } from "~/services/tab/rest"
 import { useService } from "dioc/vue"
+import { watch } from "vue"

 const t = useI18n()
 const colorMode = useColorMode()
@@ -130,6 +133,70 @@ const shareRequestCreatingLoading = ref(false)

 const requestToShare = ref<HoppRESTRequest | null>(null)

+const embedOptions = ref<EmbedOption>({
+  selectedTab: "parameters",
+  tabs: [
+    {
+      value: "parameters",
+      label: t("tab.parameters"),
+      enabled: false,
+    },
+    {
+      value: "body",
+      label: t("tab.body"),
+      enabled: false,
+    },
+    {
+      value: "headers",
+      label: t("tab.headers"),
+      enabled: false,
+    },
+    {
+      value: "authorization",
+      label: t("tab.authorization"),
+      enabled: false,
+    },
+  ],
+  theme: "system",
+})
+
+const updateEmbedProperty = async (
+  shareRequestID: string,
+  properties: string
+) => {
+  const customizeEmbedResult = await updateEmbedProperties(
+    shareRequestID,
+    properties
+  )()
+
+  if (E.isLeft(customizeEmbedResult)) {
+    toast.error(`${customizeEmbedResult.left.error}`)
+    toast.error(t("error.something_went_wrong"))
+  }
+}
+
+watch(
+  () => embedOptions.value,
+  () => {
+    if (
+      requestToShare.value &&
+      requestToShare.value.id &&
+      showShareRequestModal.value
+    ) {
+      if (selectedWidget.value.value === "embed") {
+        const properties = {
+          options: embedOptions.value.tabs
+            .filter((tab) => tab.enabled)
+            .map((tab) => tab.value),
+          theme: embedOptions.value.theme,
+        }
+        updateEmbedProperty(requestToShare.value.id, JSON.stringify(properties))
+      }
+    }
+  },
+  { deep: true }
+)
+
 const restTab = useService(RESTTabService)

 const currentUser = useReadonlyStream(
@@ -139,6 +206,18 @@ const currentUser = useReadonlyStream(

 const step = ref(1)

+type EmbedTabs = "parameters" | "body" | "headers" | "authorization"
+
+type EmbedOption = {
+  selectedTab: EmbedTabs
+  tabs: {
+    value: EmbedTabs
+    label: string
+    enabled: boolean
+  }[]
+  theme: "light" | "dark" | "system"
+}
+
 type WidgetID = "embed" | "button" | "link"

 type Widget = {
@@ -218,15 +297,73 @@ const displayShareRequestModal = (show: boolean) => {
  showShareRequestModal.value = show
  step.value = 1
 }
-const displayCustomizeRequestModal = (show: boolean) => {
+
+const displayCustomizeRequestModal = (
+  show: boolean,
+  embedProperties?: string | null
+) => {
  showShareRequestModal.value = show
  step.value = 2
+  if (!embedProperties) {
+    selectedWidget.value = {
+      value: "button",
+      label: t("shared_requests.button"),
+      info: t("shared_requests.button_info"),
+    }
+    embedOptions.value = {
+      selectedTab: "parameters",
+      tabs: [
+        {
+          value: "parameters",
+          label: t("tab.parameters"),
+          enabled: false,
+        },
+        {
+          value: "body",
+          label: t("tab.body"),
+          enabled: false,
+        },
+        {
+          value: "headers",
+          label: t("tab.headers"),
+          enabled: false,
+        },
+        {
+          value: "authorization",
+          label: t("tab.authorization"),
+          enabled: false,
+        },
+      ],
+      theme: "system",
+    }
+  } else {
+    const parsedEmbedProperties = JSON.parse(embedProperties)
+    embedOptions.value = {
+      selectedTab: parsedEmbedProperties.options[0],
+      tabs: embedOptions.value.tabs.map((tab) => {
+        return {
+          ...tab,
+          enabled: parsedEmbedProperties.options.includes(tab.value),
+        }
+      }),
+      theme: parsedEmbedProperties.theme,
+    }
+  }
 }

 const createSharedRequest = async (request: HoppRESTRequest | null) => {
  if (request && selectedWidget.value) {
+    const properties = {
+      options: ["parameters", "body", "headers"],
+      theme: "system",
+    }
    shareRequestCreatingLoading.value = true
-    const sharedRequestResult = await createShortcode(request)()
+    const sharedRequestResult = await createShortcode(
+      request,
+      selectedWidget.value.value === "embed"
+        ? JSON.stringify(properties)
+        : undefined
+    )()

    platform.analytics?.logEvent({
      type: "HOPP_SHORTCODE_CREATED",
@@ -243,6 +380,23 @@ const createSharedRequest = async (request: HoppRESTRequest | null) => {
          id: sharedRequestResult.right.createShortcode.id,
        }
        step.value = 2
+
+        if (sharedRequestResult.right.createShortcode.properties) {
+          const parsedEmbedProperties = JSON.parse(
+            sharedRequestResult.right.createShortcode.properties
+          )
+
+          embedOptions.value = {
+            selectedTab: parsedEmbedProperties.options[0],
+            tabs: embedOptions.value.tabs.map((tab) => {
+              return {
+                ...tab,
+                enabled: parsedEmbedProperties.options.includes(tab.value),
+              }
+            }),
+            theme: parsedEmbedProperties.theme,
+          }
+        }
      }
    }
  }
@@ -250,21 +404,22 @@ const createSharedRequest = async (request: HoppRESTRequest | null) => {

 const customizeSharedRequest = (
  request: HoppRESTRequest,
-  shredRequestID: string
+  shredRequestID: string,
+  embedProperties?: string | null
 ) => {
  requestToShare.value = {
    ...request,
    id: shredRequestID,
  }
-  displayCustomizeRequestModal(true)
+  displayCustomizeRequestModal(true, embedProperties)
 }

-const copySharedRequest = (request: {
+const copySharedRequest = (payload: {
  sharedRequestID: string | undefined
  content: string | undefined
 }) => {
-  if (request.content) {
-    copyToClipboard(request.content)
+  if (payload.content) {
+    copyToClipboard(payload.content)
    toast.success(t("state.copied_to_clipboard"))
  }
 }
--- a/packages/hoppscotch-common/src/components/share/templates/Button.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Button.vue
@@ -1,10 +1,6 @@
 <template>
-  <div
-    class="flex items-center justify-center rounded border border-dotted border-dividerDark p-5"
-  >
-    <a href="/" target="_blank">
-      <img :src="img" :alt="t('shared_requests.run_in_hoppscotch')" />
-    </a>
+  <div class="flex flex-col items-center p-4 border rounded border-dividerDark">
+    <img :src="img" :alt="t('shared_requests.run_in_hoppscotch')" />
  </div>
 </template>

--- a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
@@ -1,32 +1,30 @@
 <template>
  <div
-    class="flex flex-col rounded border border-dotted border-divider p-5"
+    class="flex flex-col p-4 border rounded border-dividerDark"
    :class="{
      'bg-accentContrast': isEmbedThemeLight,
    }"
  >
    <div
-      class="flex items-stretch space-x-4 rounded border-divider"
+      class="flex items-stretch space-x-2"
      :class="{
        'bg-accentContrast': isEmbedThemeLight,
      }"
    >
-      <span
-        class="flex max-w-[4rem] items-center justify-center rounded border border-divider px-1 py-2 text-tiny"
-        :class="{
-          '!border-dividerLight bg-accentContrast text-primary':
-            isEmbedThemeLight,
-        }"
-      >
-        <span class="truncate">
-          {{ method }}
-        </span>
-      </span>
-      <span
-        class="flex max-w-46 items-center rounded border border-divider p-2"
-      >
+      <span class="flex items-center min-w-0 border rounded border-divider">
        <span
-          class="min-w-0 truncate"
+          class="flex max-w-[4rem] rounded-l h-full items-center justify-center border-r border-divider text-tiny"
+          :class="{
+            '!border-dividerLight bg-accentContrast text-primary':
+              isEmbedThemeLight,
+          }"
+        >
+          <span class="px-3 truncate">
+            {{ method }}
+          </span>
+        </span>
+        <span
+          class="px-3 truncate"
          :class="{
            'text-primary': isEmbedThemeLight,
          }"
@@ -35,7 +33,7 @@
        </span>
      </span>
      <button
-        class="flex items-center justify-center rounded border border-dividerDark bg-primaryDark px-3 py-2 font-semibold text-secondary"
+        class="flex items-center justify-center flex-shrink-0 px-3 py-2 font-semibold border rounded border-dividerDark bg-primaryDark text-secondary"
        :class="{
          '!bg-accentContrast text-primaryLight': isEmbedThemeLight,
        }"
@@ -44,10 +42,10 @@
      </button>
    </div>
    <div
-      class="flex border-divider"
+      class="flex"
      :class="{
        'bg-accentContrast text-primary': isEmbedThemeLight,
-        'border-b pt-2 ': !noActiveTab,
+        'border-b border-divider pt-2': !noActiveTab,
      }"
    >
      <span
@@ -57,7 +55,8 @@
        class="px-2 py-2"
        :class="{
          'border-b border-dividerDark':
-            embedOptions.selectedTab === option.value,
+            embedOptions.tabs.filter((tab) => tab.enabled)[0]?.value ===
+            option.value,
        }"
      >
        {{ option.label }}
--- a/packages/hoppscotch-common/src/components/share/templates/Link.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Link.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex items-center justify-center rounded border border-dotted border-dividerDark p-5"
-  >
+  <div class="flex flex-col items-center p-4 border rounded border-dividerDark">
    <span
      :class="{
        'border-b border-secondary': label,