refactor: update share request flow (#3805)

packages/hoppscotch-common/locales/en.json

@@ -889,6 +889,7 @@
     "query": "Query",
     "schema": "Schema",
     "shared_requests": "Shared Requests",
+    "share_tab_request": "Share tab request",
     "socketio": "Socket.IO",
     "sse": "SSE",
     "tests": "Tests",

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

@@ -29,6 +29,7 @@
           class="flex flex-col focus:outline-none"
           tabindex="0"
           @keyup.r="renameAction?.$el.click()"
+          @keyup.s="shareRequestAction?.$el.click()"
           @keyup.d="duplicateAction?.$el.click()"
           @keyup.w="closeAction?.$el.click()"
           @keyup.x="closeOthersAction?.$el.click()"
@@ -58,6 +59,19 @@
               }
             "
           />
+          <HoppSmartItem
+            ref="shareRequestAction"
+            :icon="IconShare2"
+            :label="t('tab.share_tab_request')"
+            :shortcut="['S']"
+            :new="true"
+            @click="
+              () => {
+                emit('share-tab-request')
+                hide()
+              }
+            "
+          />
           <HoppSmartItem
             v-if="isRemovable"
             ref="closeAction"
@@ -99,6 +113,7 @@ import IconXCircle from "~icons/lucide/x-circle"
 import IconXSquare from "~icons/lucide/x-square"
 import IconFileEdit from "~icons/lucide/file-edit"
 import IconCopy from "~icons/lucide/copy"
+import IconShare2 from "~icons/lucide/share-2"
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 
@@ -114,6 +129,7 @@ const emit = defineEmits<{
   (event: "close-tab"): void
   (event: "close-other-tabs"): void
   (event: "duplicate-tab"): void
+  (event: "share-tab-request"): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -123,4 +139,5 @@ const renameAction = ref<HTMLButtonElement | null>(null)
 const closeAction = ref<HTMLButtonElement | null>(null)
 const closeOthersAction = ref<HTMLButtonElement | null>(null)
 const duplicateAction = ref<HTMLButtonElement | null>(null)
+const shareRequestAction = ref<HTMLButtonElement | null>(null)
 </script>

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

@@ -7,7 +7,7 @@
       v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
       class="flex items-center justify-center flex-1 min-w-0 py-2 cursor-pointer pointer-events-auto"
       :title="`${timeStamp}`"
-      @click="openInNewTab"
+      @click="customizeSharedRequest()"
     >
       <span
         class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
@@ -128,7 +128,6 @@ const emit = defineEmits<{
     embedProperties?: string | null
   ): void
   (e: "delete-shared-request", codeID: string): void
-  (e: "open-new-tab", request: HoppRESTRequest): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -145,10 +144,6 @@ const requestLabelColor = computed(() =>
   getMethodLabelColorClassOf(parseRequest.value)
 )
 
-const openInNewTab = () => {
-  emit("open-new-tab", parseRequest.value)
-}
-
 const customizeSharedRequest = () => {
   const embedProperties = props.request.properties
   emit(

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

@@ -9,8 +9,14 @@
       />
     </div>
     <div
-      class="sticky top-sidebarPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-end overflow-x-auto border-b border-dividerLight bg-primary"
+      class="sticky top-sidebarPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
     >
+      <HoppButtonSecondary
+        :label="t('action.new')"
+        :icon="IconPlus"
+        class="!rounded-none"
+        @click="shareRequest()"
+      />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         to="https://docs.hoppscotch.io/documentation/features/widgets"
@@ -47,7 +53,6 @@
           :request="request"
           @customize-shared-request="customizeSharedRequest"
           @delete-shared-request="deleteSharedRequest"
-          @open-new-tab="openInNewTab"
         />
         <HoppSmartIntersection
           v-if="hasMoreSharedRequests"
@@ -70,7 +75,15 @@
         :alt="`${t('empty.shared_requests')}`"
         :text="t('empty.shared_requests')"
         @drop.stop
+      >
+        <template #body>
+          <HoppButtonPrimary
+            :label="t('add.new')"
+            :icon="IconPlus"
+            @click="shareRequest()"
           />
+        </template>
+      </HoppSmartPlaceholder>
     </div>
   </div>
   <HoppSmartConfirmModal
@@ -95,6 +108,7 @@
 
 <script lang="ts" setup>
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconPlus from "~icons/lucide/plus"
 import { useI18n } from "~/composables/i18n"
 import ShortcodeListAdapter from "~/helpers/shortcode/ShortcodeListAdapter"
 import { useReadonlyStream } from "~/composables/stream"
@@ -270,6 +284,17 @@ onAuthEvent((ev) => {
   }
 })
 
+const shareRequest = () => {
+  if (currentUser.value) {
+    const tab = restTab.currentActiveTab
+    invokeAction("share.request", {
+      request: tab.value.document.request,
+    })
+  } else {
+    invokeAction("modals.login.toggle")
+  }
+}
+
 const deleteSharedRequest = (codeID: string) => {
   if (currentUser.value) {
     sharedRequestID.value = codeID
@@ -434,13 +459,6 @@ const copySharedRequest = (payload: {
   }
 }
 
-const openInNewTab = (request: HoppRESTRequest) => {
-  restTab.createNewTab({
-    isDirty: false,
-    request,
-  })
-}
-
 const resolveConfirmModal = (title: string | null) => {
   if (title === `${t("confirm.remove_shared_request")}`) onDeleteSharedRequest()
   else {

packages/hoppscotch-common/src/pages/index.vue

@@ -26,6 +26,7 @@
                 @close-tab="removeTab(tab.id)"
                 @close-other-tabs="closeOtherTabsAction(tab.id)"
                 @duplicate-tab="duplicateTab(tab.id)"
+                @share-tab-request="shareTabRequest(tab.id)"
               />
             </template>
             <template #suffix>
@@ -145,6 +146,11 @@ const tabs = useService(RESTTabService)
 
 const currentTabID = tabs.currentTabID
 
+const currentUser = useReadonlyStream(
+  platform.auth.getCurrentUserStream(),
+  platform.auth.getCurrentUser()
+)
+
 type PopupDetails = {
   show: boolean
   position: {
@@ -308,6 +314,19 @@ const onSaveModalClose = () => {
   }
 }
 
+const shareTabRequest = (tabID: string) => {
+  const tab = tabs.getTabRef(tabID)
+  if (tab.value) {
+    if (currentUser.value) {
+      invokeAction("share.request", {
+        request: tab.value.document.request,
+      })
+    } else {
+      invokeAction("modals.login.toggle")
+    }
+  }
+}
+
 const syncTabState = () => {
   if (tabStateForSync.value)
     tabs.loadTabsFromPersistedState(tabStateForSync.value)