refactor: update embed customize flow

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

@@ -38,15 +38,11 @@
           :loading="loading"
           @click="createSharedRequest"
         />
-        <HoppButtonPrimary
-          v-else
-          :label="t('action.save')"
-          :loading="loading"
-          @click="saveSharedRequest"
-        />
         <HoppButtonSecondary
-          :label="t('action.cancel')"
+          :label="step === 1 ? t('action.cancel') : t('action.close')"
           class="ml-2"
+          filled
+          outline
           @click="hideModal"
         />
       </div>
@@ -151,7 +147,6 @@ const emit = defineEmits<{
       type: string | undefined
     }
   ): void
-  (e: "save-shared-request"): void
 }>()
 
 const createSharedRequest = () => {
@@ -166,10 +161,6 @@ const copySharedRequest = (payload: {
   emit("copy-shared-request", payload)
 }
 
-const saveSharedRequest = () => {
-  emit("save-shared-request")
-}
-
 const hideModal = () => {
   emit("hide-modal")
   selectedWidget.value = {

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

@@ -88,7 +88,6 @@
     @hide-modal="displayCustomizeRequestModal(false, null)"
     @copy-shared-request="copySharedRequest"
     @create-shared-request="createSharedRequest"
-    @save-shared-request="saveSharedRequest"
   />
 </template>
 
@@ -117,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()
@@ -139,17 +139,17 @@ const embedOptions = ref<EmbedOption>({
     {
       value: "parameters",
       label: t("tab.parameters"),
-      enabled: true,
+      enabled: false,
     },
     {
       value: "body",
       label: t("tab.body"),
-      enabled: true,
+      enabled: false,
     },
     {
       value: "headers",
       label: t("tab.headers"),
-      enabled: true,
+      enabled: false,
     },
     {
       value: "authorization",
@@ -162,7 +162,7 @@ const embedOptions = ref<EmbedOption>({
 
 const updateEmbedProperty = async (
   shareRequestID: string,
-  properties: string | null
+  properties: string
 ) => {
   const customizeEmbedResult = await updateEmbedProperties(
     shareRequestID,
@@ -172,28 +172,31 @@ const updateEmbedProperty = async (
   if (E.isLeft(customizeEmbedResult)) {
     toast.error(`${customizeEmbedResult.left.error}`)
     toast.error(t("error.something_went_wrong"))
-  } else if (E.isRight(customizeEmbedResult)) {
-    if (customizeEmbedResult.right.updateEmbedProperties) {
-      if (customizeEmbedResult.right.updateEmbedProperties.properties) {
-        const parsedEmbedProperties = JSON.parse(
-          customizeEmbedResult.right.updateEmbedProperties.properties
-        )
-
-        embedOptions.value = {
-          selectedTab: parsedEmbedProperties.options[0],
-          tabs: embedOptions.value.tabs.map((tab) => {
-            return {
-              ...tab,
-              enabled: parsedEmbedProperties.options.includes(tab.value),
-            }
-          }),
-          theme: parsedEmbedProperties.theme,
-        }
-      }
-    }
   }
 }
 
+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(
@@ -306,6 +309,32 @@ const displayCustomizeRequestModal = (
       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 = {
@@ -395,25 +424,6 @@ const copySharedRequest = (payload: {
   }
 }
 
-const saveSharedRequest = () => {
-  if (requestToShare.value && requestToShare.value.id) {
-    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))
-    } else {
-      updateEmbedProperty(requestToShare.value.id, null)
-    }
-
-    toast.success(t("shared_requests.modified"))
-    displayShareRequestModal(false)
-  }
-}
-
 const openInNewTab = (request: HoppRESTRequest) => {
   restTab.createNewTab({
     isDirty: false,

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

@@ -6,13 +6,13 @@
     }"
   >
     <div
-      class="flex items-stretch space-x-4 rounded border-divider"
+      class="flex items-stretch space-x-2 rounded border-divider"
       :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="flex max-w-[4rem] items-center justify-center rounded border border-divider p-2 text-tiny"
         :class="{
           '!border-dividerLight bg-accentContrast text-primary':
             isEmbedThemeLight,

packages/hoppscotch-common/src/helpers/backend/mutations/Shortcode.ts

@@ -35,10 +35,7 @@ export const deleteShortcode = (code: string) =>
     code,
   })
 
-export const updateEmbedProperties = (
-  code: string,
-  properties: string | null
-) =>
+export const updateEmbedProperties = (code: string, properties: string) =>
   runMutation<
     UpdateEmbedPropertiesMutation,
     UpdateEmbedPropertiesMutationVariables,