From 09e960194086f4925c02c1fa6eae69c000603c21 Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Wed, 6 Dec 2023 12:44:17 +0530
Subject: [PATCH] chore: add save option to modify sahred request

---
 packages/hoppscotch-common/locales/en.json    |  2 ++
 .../src/components/share/Modal.vue            | 27 ++++++++++++++-----
 .../src/components/share/index.vue            | 25 ++++++++++-------
 .../helpers/backend/mutations/Shortcode.ts    |  5 +++-
 4 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 6b741ff02..6e4912501 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -432,6 +432,7 @@
     "close_unsaved_tab": "You have unsaved changes",
     "collections": "Collections",
     "confirm": "Confirm",
+    "customize_request": "Customize Request",
     "edit_request": "Edit Request",
     "share_request":"Share Request",
     "import_export": "Import / Export"
@@ -636,6 +637,7 @@
     "embed_info": "Add a mini 'Hoppscotch API Playground' to your website, blog or documentation.",
     "link":"Link",
     "link_info": "Create a shareable link to share with anyone on the internet with view access.",
+    "modified": "Shared request modified",
     "not_found":"Shared request not found",
     "open_new_tab": "Open in new tab",
     "preview":"Preview",
diff --git a/packages/hoppscotch-common/src/components/share/Modal.vue b/packages/hoppscotch-common/src/components/share/Modal.vue
index bff923b34..bd1b844cf 100644
--- 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"
   >
@@ -29,19 +31,25 @@
     </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"
         />
+        <HoppButtonPrimary
+          v-else
+          :label="t('action.save')"
+          :loading="loading"
+          @click="saveSharedRequest"
+        />
         <HoppButtonSecondary
           :label="t('action.cancel')"
-          class="mr-2"
+          class="ml-2"
           @click="hideModal"
         />
       </div>
-      <HoppButtonPrimary v-else :label="t('action.close')" @click="hideModal" />
     </template>
   </HoppSmartModal>
 </template>
@@ -137,24 +145,29 @@ const emit = defineEmits<{
   (e: "update:step", value: number): void
   (
     e: "copy-shared-request",
-    request: {
+    payload: {
       sharedRequestID: string | undefined
       content: string | undefined
       type: string | undefined
     }
   ): void
+  (e: "save-shared-request"): void
 }>()
 
 const createSharedRequest = () => {
   emit("create-shared-request", props.request as HoppRESTRequest)
 }
 
-const copySharedRequest = (request: {
+const copySharedRequest = (payload: {
   sharedRequestID: string | undefined
   content: string | undefined
   type: string | undefined
 }) => {
-  emit("copy-shared-request", request)
+  emit("copy-shared-request", payload)
+}
+
+const saveSharedRequest = () => {
+  emit("save-shared-request")
 }
 
 const hideModal = () => {
diff --git a/packages/hoppscotch-common/src/components/share/index.vue b/packages/hoppscotch-common/src/components/share/index.vue
index 7e2f17f9c..059893145 100644
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/packages/hoppscotch-common/src/components/share/index.vue
@@ -88,6 +88,7 @@
     @hide-modal="displayCustomizeRequestModal(false, null)"
     @copy-shared-request="copySharedRequest"
     @create-shared-request="createSharedRequest"
+    @save-shared-request="saveSharedRequest"
   />
 </template>
 
@@ -161,7 +162,7 @@ const embedOptions = ref<EmbedOption>({
 
 const updateEmbedProperty = async (
   shareRequestID: string,
-  properties: string
+  properties: string | null
 ) => {
   const customizeEmbedResult = await updateEmbedProperties(
     shareRequestID,
@@ -383,19 +384,20 @@ const customizeSharedRequest = (
   displayCustomizeRequestModal(true, embedProperties)
 }
 
-const copySharedRequest = (request: {
+const copySharedRequest = (payload: {
   sharedRequestID: string | undefined
   content: string | undefined
   type: string | undefined
 }) => {
-  if (request.content) {
-    copyToClipboard(request.content)
+  if (payload.content) {
+    copyToClipboard(payload.content)
     toast.success(t("state.copied_to_clipboard"))
-    if (
-      requestToShare.value &&
-      requestToShare.value.id &&
-      request.type === "embed"
-    ) {
+  }
+}
+
+const saveSharedRequest = () => {
+  if (requestToShare.value && requestToShare.value.id) {
+    if (selectedWidget.value.value === "embed") {
       const properties = {
         options: embedOptions.value.tabs
           .filter((tab) => tab.enabled)
@@ -403,7 +405,12 @@ const copySharedRequest = (request: {
         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)
   }
 }
 
diff --git a/packages/hoppscotch-common/src/helpers/backend/mutations/Shortcode.ts b/packages/hoppscotch-common/src/helpers/backend/mutations/Shortcode.ts
index 18d4a5ede..c394b1287 100644
--- a/packages/hoppscotch-common/src/helpers/backend/mutations/Shortcode.ts
+++ b/packages/hoppscotch-common/src/helpers/backend/mutations/Shortcode.ts
@@ -35,7 +35,10 @@ export const deleteShortcode = (code: string) =>
     code,
   })
 
-export const updateEmbedProperties = (code: string, properties: string) =>
+export const updateEmbedProperties = (
+  code: string,
+  properties: string | null
+) =>
   runMutation<
     UpdateEmbedPropertiesMutation,
     UpdateEmbedPropertiesMutationVariables,