refactor: port share requests

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

@@ -27,15 +27,24 @@
     >
       <History :page="'rest'" />
     </HoppSmartTab>
+    <HoppSmartTab
+      :id="'share-request'"
+      :icon="IconShare2"
+      :label="`${t('tab.shared_requests')}`"
+    >
+      <Share />
+    </HoppSmartTab>
   </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">
-import IconClock from "~icons/lucide/clock"
-import IconLayers from "~icons/lucide/layers"
-import IconFolder from "~icons/lucide/folder"
-import { ref } from "vue"
 import { useI18n } from "@composables/i18n"
+import { ref } from "vue"
+
+import IconClock from "~icons/lucide/clock"
+import IconFolder from "~icons/lucide/folder"
+import IconLayers from "~icons/lucide/layers"
+import IconShare2 from "~icons/lucide/share-2"
 
 const t = useI18n()
 

packages/hoppscotch-common/src/components/new-collections/index.vue

@@ -34,9 +34,9 @@ import { Picked } from "~/helpers/types/HoppPicked";
 import { NewWorkspaceService } from "~/services/new-workspace"
 
 defineProps<{
-  picked: Picked | null
+  picked?: Picked | null
   platform: "rest" | "gql"
-  saveRequest: boolean
+  saveRequest?: boolean
 }>()
 
 const emit = defineEmits<{

packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue

@@ -151,20 +151,22 @@
 </template>
 
 <script setup lang="ts">
-import { RESTCollectionViewCollection } from "~/services/new-workspace/view"
+import { computed, ref } from "vue"
 import { TippyComponent } from "vue-tippy"
-import { ref, computed } from "vue"
+
 import { useI18n } from "~/composables/i18n"
+import { RESTCollectionViewCollection } from "~/services/new-workspace/view"
+
 import IconCheckCircle from "~icons/lucide/check-circle"
-import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconFilePlus from "~icons/lucide/file-plus"
-import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconDownload from "~icons/lucide/download"
-import IconTrash2 from "~icons/lucide/trash-2"
 import IconEdit from "~icons/lucide/edit"
+import IconFilePlus from "~icons/lucide/file-plus"
 import IconFolder from "~icons/lucide/folder"
 import IconFolderOpen from "~icons/lucide/folder-open"
+import IconFolderPlus from "~icons/lucide/folder-plus"
+import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconSettings2 from "~icons/lucide/settings-2"
+import IconTrash2 from "~icons/lucide/trash-2"
 
 const t = useI18n()
 
@@ -175,21 +177,21 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (event: "toggle-children"): void
-  (event: "add-request", parentCollectionIndexPath: string): void
   (event: "add-child-collection", parentCollectionIndexPath: string): void
-  (
-    event: "edit-root-collection",
-    payload: { collectionIndexPath: string; collectionName: string }
-  ): void
+  (event: "add-request", parentCollectionIndexPath: string): void
   (
     event: "edit-child-collection",
     payload: { collectionIndexPath: string; collectionName: string }
   ): void
   (event: "edit-collection-properties", collectionIndexPath: string): void
+  (
+    event: "edit-root-collection",
+    payload: { collectionIndexPath: string; collectionName: string }
+  ): void
   (event: "export-data"): void
-  (event: "remove-root-collection", collectionIndexPath: string): void
   (event: "remove-child-collection", collectionIndexPath: string): void
+  (event: "remove-root-collection", collectionIndexPath: string): void
+  (event: "toggle-children"): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)

packages/hoppscotch-common/src/components/new-collections/rest/Request.vue

@@ -115,6 +115,18 @@
                     }
                   "
                 />
+                <HoppSmartItem
+                  ref="shareAction"
+                  :icon="IconShare2"
+                  :label="t('action.share')"
+                  :shortcut="['S']"
+                  @click="
+                    () => {
+                      emit('share-request', requestView.request)
+                      hide()
+                    }
+                  "
+                />
               </div>
             </template>
           </tippy>
@@ -125,17 +137,21 @@
 </template>
 
 <script setup lang="ts">
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconMoreVertical from "~icons/lucide/more-vertical"
-import IconEdit from "~icons/lucide/edit"
-import IconCopy from "~icons/lucide/copy"
-import IconTrash2 from "~icons/lucide/trash-2"
-import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import { useI18n } from "@composables/i18n"
-import { RESTCollectionViewRequest } from "~/services/new-workspace/view"
+import { HoppRESTRequest } from "@hoppscotch/data"
 import { computed, ref } from "vue"
 import { TippyComponent } from "vue-tippy"
+
 import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
+import { RESTCollectionViewRequest } from "~/services/new-workspace/view"
+
+import IconCheckCircle from "~icons/lucide/check-circle"
+import IconCopy from "~icons/lucide/copy"
+import IconEdit from "~icons/lucide/edit"
+import IconMoreVertical from "~icons/lucide/more-vertical"
+import IconRotateCCW from "~icons/lucide/rotate-ccw"
+import IconShare2 from "~icons/lucide/share-2"
+import IconTrash2 from "~icons/lucide/trash-2"
 
 const t = useI18n()
 
@@ -156,6 +172,7 @@ const emit = defineEmits<{
   ): void
   (event: "remove-request", requestIndexPath: string): void
   (event: "select-request", requestIndexPath: string): void
+  (event: "share-request", request: HoppRESTRequest): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)

packages/hoppscotch-common/src/components/new-collections/rest/index.vue

@@ -47,12 +47,12 @@
             :save-request="saveRequest"
             @add-request="addRequest"
             @add-child-collection="addChildCollection"
+            @edit-child-collection="editChildCollection"
             @edit-root-collection="editRootCollection"
             @edit-collection-properties="editCollectionProperties"
-            @edit-child-collection="editChildCollection"
-            @select-pick="onSelectPick"
-            @remove-root-collection="removeRootCollection"
             @remove-child-collection="removeChildCollection"
+            @remove-root-collection="removeRootCollection"
+            @select-pick="onSelectPick"
             @toggle-children="
               () => {
                 toggleChildren(),
@@ -82,6 +82,7 @@
             @remove-request="removeRequest"
             @select-pick="onSelectPick"
             @select-request="selectRequest"
+            @share-request="shareRequest"
           />
           <div v-else @click="toggleChildren">
             {{ node.data.value }}
@@ -164,6 +165,7 @@ import { cloneDeep } from "lodash-es"
 import { useI18n } from "~/composables/i18n"
 import { useReadonlyStream } from "~/composables/stream"
 import { useToast } from "~/composables/toast"
+import { invokeAction } from "~/helpers/actions"
 import { WorkspaceRESTCollectionTreeAdapter } from "~/helpers/adapters/WorkspaceRESTCollectionTreeAdapter"
 import { TeamCollection } from "~/helpers/backend/graphql"
 import { updateInheritedPropertiesForAffectedRequests } from "~/helpers/collection/collection"
@@ -174,6 +176,7 @@ import {
   restCollections$,
   saveRESTRequestAs,
 } from "~/newstore/collections"
+import { platform } from "~/platform"
 import { NewWorkspaceService } from "~/services/new-workspace"
 import { HandleRef } from "~/services/new-workspace/handle"
 import { RESTCollectionViewRequest } from "~/services/new-workspace/view"
@@ -189,8 +192,8 @@ const tabs = useService(RESTTabService)
 
 const props = defineProps<{
   workspaceHandle: HandleRef<Workspace>
-  picked: Picked | null
-  saveRequest: boolean
+  picked?: Picked | null
+  saveRequest?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -241,6 +244,11 @@ const editingProperties = ref<{
 
 const confirmModalTitle = ref<string | null>(null)
 
+const currentUser = useReadonlyStream(
+  platform.auth.getCurrentUserStream(),
+  platform.auth.getCurrentUser()
+)
+
 const isSelected = ({
   collectionIndex,
   folderPath,
@@ -1116,6 +1124,16 @@ const setCollectionProperties = async (updatedCollectionProps: {
   displayModalEditProperties(false)
 }
 
+const shareRequest = (request: HoppRESTRequest) => {
+  if (currentUser.value) {
+    // Opens the share request modal if the user is logged in
+    return invokeAction("share.request", { request })
+  }
+
+  // Else, prompts the user to login
+  invokeAction("modals.login.toggle")
+}
+
 const resolveConfirmModal = (title: string | null) => {
   if (title === `${t("confirm.remove_collection")}`) {
     onRemoveRootCollection()

packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts

@@ -453,7 +453,7 @@ export class PersonalWorkspaceProviderService
               providerID,
               workspaceID,
               collectionID,
-              name: collection.name,
+              name: collection?.name ?? "",
             },
           }
         })