refactor: unify markup

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

@@ -1,52 +1,19 @@
 <template>
   <div v-if="!activeWorkspaceHandle">No Workspace Selected.</div>
-  <div
+
-    v-else
-    :class="{
-      'rounded border border-divider': saveRequest,
-      'bg-primaryDark':
-        draggingToRoot && currentReorderingStatus.type !== 'request',
-    }"
-    class="flex-1"
-    @drop.prevent="dropToRoot"
-    @dragover.prevent="draggingToRoot = true"
-    @dragend="draggingToRoot = false"
-  >
-    <div
-      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
-      :style="{
-        top: 0,
-      }"
-    >
-      <WorkspaceCurrent :section="t('tab.collections')" />
-      <input
-        v-model="searchText"
-        type="search"
-        autocomplete="off"
-        class="flex h-8 w-full bg-transparent p-4 py-2"
-        :placeholder="t('action.search')"
-      />
-    </div>
   <NewCollectionsRest
-      v-if="platform === 'rest'"
+    v-else-if="platform === 'rest'"
     :picked="picked"
     :save-request="saveRequest"
     :workspace-handle="activeWorkspaceHandle"
     @select="(payload) => emit('select', payload)"
   />
-  </div>
 </template>
 
 <script setup lang="ts">
 import { useService } from "dioc/vue"
-import { ref } from "vue"
+
-import { useI18n } from "~/composables/i18n"
-import { useReadonlyStream } from "~/composables/stream"
-import { useToast } from "~/composables/toast"
 import { Picked } from "~/helpers/types/HoppPicked"
-import toast from "~/modules/toast"
-import { moveRESTFolder } from "~/newstore/collections"
-import { currentReorderingStatus$ } from "~/newstore/reordering"
 import { NewWorkspaceService } from "~/services/new-workspace"
 
 defineProps<{
@@ -59,50 +26,7 @@ const emit = defineEmits<{
   (event: "select", payload: Picked | null): void
 }>()
 
-const t = useI18n()
-const toast = useToast()
-
-const draggingToRoot = ref(false)
-const searchText = ref("")
-
 const workspaceService = useService(NewWorkspaceService)
 
 const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle
-
-const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
-  type: "collection",
-  id: "",
-  parentID: "",
-})
-
-/**
- * This function is called when the user drops the collection
- * to the root
- * @param payload - object containing the collection index dragged
- */
-const dropToRoot = ({ dataTransfer }: DragEvent) => {
-  if (dataTransfer) {
-    const collectionIndexDragged = dataTransfer.getData("collectionIndex")
-    if (!collectionIndexDragged) return
-    // check if the collection is already in the root
-    if (isAlreadyInRoot(collectionIndexDragged)) {
-      toast.error(`${t("collection.invalid_root_move")}`)
-    } else {
-      moveRESTFolder(collectionIndexDragged, null)
-      toast.success(`${t("collection.moved")}`)
-    }
-
-    draggingToRoot.value = false
-  }
-}
-
-/**
- * Checks if the collection is already in the root
- * @param id - path of the collection
- * @returns boolean - true if the collection is already in the root
- */
-const isAlreadyInRoot = (id: string) => {
-  const indexPath = id.split("/")
-  return indexPath.length === 1
-}
 </script>

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

@@ -1,4 +1,30 @@
 <template>
+  <div
+    :class="{
+      'rounded border border-divider': saveRequest,
+      'bg-primaryDark':
+        draggingToRoot && currentReorderingStatus.type !== 'request',
+    }"
+    class="flex-1"
+    @drop.prevent="dropToRoot"
+    @dragover.prevent="draggingToRoot = true"
+    @dragend="draggingToRoot = false"
+  >
+    <div
+      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
+      :style="{
+        top: 0,
+      }"
+    >
+      <WorkspaceCurrent :section="t('tab.collections')" />
+      <input
+        v-model="searchText"
+        type="search"
+        autocomplete="off"
+        class="flex h-8 w-full bg-transparent p-4 py-2"
+        :placeholder="t('action.search')"
+      />
+    </div>
     <div class="flex flex-1 flex-col">
       <div
         class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
@@ -70,7 +96,9 @@
                   toggleChildren(),
                     saveRequest &&
                       onSelectPick({
-                      pickedType: isAlreadyInRoot(node.data.value.collectionID)
+                        pickedType: isAlreadyInRoot(
+                          node.data.value.collectionID
+                        )
                           ? 'my-collection'
                           : 'my-folder',
                         ...getCollectionIndexPathArgs(
@@ -211,6 +239,7 @@
         @set-collection-properties="setCollectionProperties"
       />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -229,7 +258,6 @@ import { WorkspaceRESTCollectionTreeAdapter } from "~/helpers/adapters/Workspace
 import { TeamCollection } from "~/helpers/backend/graphql"
 import {
   getFoldersByPath,
-  resolveSaveContextOnCollectionReorder,
   updateInheritedPropertiesForAffectedRequests,
 } from "~/helpers/collection/collection"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
@@ -253,6 +281,7 @@ import { RESTTabService } from "~/services/tab/rest"
 import IconImport from "~icons/lucide/folder-down"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconPlus from "~icons/lucide/plus"
+import { currentReorderingStatus$ } from "~/newstore/reordering"
 
 const t = useI18n()
 const toast = useToast()
@@ -306,6 +335,12 @@ const emit = defineEmits<{
 const workspaceService = useService(NewWorkspaceService)
 const restCollectionState = useReadonlyStream(restCollections$, [])
 
+const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
+  type: "collection",
+  id: "",
+  parentID: "",
+})
+
 const treeAdapter = markRaw(
   new WorkspaceRESTCollectionTreeAdapter(
     props.workspaceHandle,
@@ -313,6 +348,9 @@ const treeAdapter = markRaw(
   )
 )
 
+const draggingToRoot = ref(false)
+const searchText = ref("")
+
 const modalLoadingState = ref(false)
 
 const showModalAdd = ref(false)
@@ -1292,6 +1330,27 @@ const dropEvent = (
   }
 }
 
+/**
+ * This function is called when the user drops the collection
+ * to the root
+ * @param payload - object containing the collection index dragged
+ */
+const dropToRoot = ({ dataTransfer }: DragEvent) => {
+  if (dataTransfer) {
+    const collectionIndexDragged = dataTransfer.getData("collectionIndex")
+    if (!collectionIndexDragged) return
+    // check if the collection is already in the root
+    if (isAlreadyInRoot(collectionIndexDragged)) {
+      toast.error(`${t("collection.invalid_root_move")}`)
+    } else {
+      moveRESTFolder(collectionIndexDragged, null)
+      toast.success(`${t("collection.moved")}`)
+    }
+
+    draggingToRoot.value = false
+  }
+}
+
 const dropRequest = (payload: {
   parentCollectionIndexPath?: string | undefined
   requestIndex: string

packages/hoppscotch-common/src/helpers/collection/collection.ts

@@ -64,9 +64,14 @@ export function resolveSaveContextOnCollectionReorder(
   const tabService = getService(RESTTabService)
 
   const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
+      return affectedPaths.has(tab.document.saveContext.folderPath)
+    }
+
     return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
+      tab.document.saveContext?.originLocation ===
-      affectedPaths.has(tab.document.saveContext.folderPath)
+        "workspace-user-collection" &&
+      affectedPaths.has(tab.document.saveContext.collectionID)
     )
   })
 
@@ -77,6 +82,16 @@ export function resolveSaveContextOnCollectionReorder(
       )!
       tab.value.document.saveContext.folderPath = newPath
     }
+
+    if (
+      tab.value.document.saveContext?.originLocation ===
+      "workspace-user-collection"
+    ) {
+      const newPath = affectedPaths.get(
+        tab.value.document.saveContext?.collectionID
+      )!
+      tab.value.document.saveContext.collectionID = newPath
+    }
   }
 }
 
@@ -93,9 +108,14 @@ export function updateSaveContextForAffectedRequests(
 ) {
   const tabService = getService(RESTTabService)
   const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
+      return tab.document.saveContext.folderPath.startsWith(oldFolderPath)
+    }
+
     return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
+      tab.document.saveContext?.originLocation ===
-      tab.document.saveContext.folderPath.startsWith(oldFolderPath)
+        "workspace-user-collection" &&
+      tab.document.saveContext.collectionID.startsWith(oldFolderPath)
     )
   })
 
@@ -109,6 +129,19 @@ export function updateSaveContextForAffectedRequests(
         ),
       }
     }
+
+    if (
+      tab.value.document.saveContext?.originLocation ===
+      "workspace-user-collection"
+    ) {
+      tab.value.document.saveContext = {
+        ...tab.value.document.saveContext,
+        collectionID: tab.value.document.saveContext.collectionID.replace(
+          oldFolderPath,
+          newFolderPath
+        ),
+      }
+    }
   }
 }
 /**
@@ -281,9 +314,14 @@ export function updateInheritedPropertiesForAffectedRequests(
 function resetSaveContextForAffectedRequests(folderPath: string) {
   const tabService = getService(RESTTabService)
   const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
+      return tab.document.saveContext.folderPath.startsWith(folderPath)
+    }
+
     return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
+      tab.document.saveContext?.originLocation ===
-      tab.document.saveContext.folderPath.startsWith(folderPath)
+        "workspace-user-collection" &&
+      tab.document.saveContext.collectionID.startsWith(folderPath)
     )
   })
 

packages/hoppscotch-common/src/helpers/collection/request.ts

@@ -39,11 +39,21 @@ export function resolveSaveContextOnRequestReorder(payload: {
 
   const tabService = getService(RESTTabService)
   const tabs = tabService.getTabsRefTo((tab) => {
+    if (tab.document.saveContext?.originLocation === "user-collection") {
       return (
-      tab.document.saveContext?.originLocation === "user-collection" &&
         tab.document.saveContext.folderPath === folderPath &&
         affectedIndexes.has(tab.document.saveContext.requestIndex)
       )
+    }
+
+    return (
+      tab.document.saveContext?.originLocation ===
+        "workspace-user-collection" &&
+      tab.document.saveContext.collectionID === folderPath &&
+      affectedIndexes.has(
+        parseInt(tab.document.saveContext.requestID.split("/").slice(-1)[0])
+      )
+    )
   })
 
   for (const tab of tabs) {

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

@@ -508,13 +508,11 @@ export class PersonalWorkspaceProviderService
       draggedCollectionIndex,
       destinationCollectionIndex
     )
-    // resolveSaveContextOnCollectionReorder({
+    resolveSaveContextOnCollectionReorder({
-    //   lastIndex: pathToLastIndex(draggedCollectionIndex),
+      lastIndex: this.pathToLastIndex(draggedCollectionIndex),
-    //   newIndex: pathToLastIndex(
+      newIndex: this.pathToLastIndex(destinationCollectionIndex ?? ""),
-    //     destinationCollectionIndex ? destinationCollectionIndex : ""
+      folderPath: draggedCollectionIndex.split("/").slice(0, -1).join("/"),
-    //   ),
+    })
-    //   folderPath: draggedCollectionIndex.split("/").slice(0, -1).join("/"),
-    // })
 
     return Promise.resolve(E.right(undefined))
   }
@@ -533,34 +531,38 @@ export class PersonalWorkspaceProviderService
 
     const draggedCollectionIndex = collectionHandle.value.data.collectionID
 
-    // const parentFolder = draggedCollectionIndex
-    //   .split("/")
-    //   .slice(0, -1)
-    //   .join("/") // remove last folder to get parent folder
-
-    // const totalFoldersOfDestinationCollection =
-    //   getFoldersByPath(
-    //     restCollectionStore.value.state,
-    //     destinationCollectionIndex
-    //   ).length - (parentFolder === destinationCollectionIndex ? 1 : 0)
-
     moveRESTFolder(draggedCollectionIndex, destinationCollectionIndex)
 
-    // resolveSaveContextOnCollectionReorder(
+    if (destinationCollectionIndex === null) {
-    //   {
+      return Promise.resolve(E.right(undefined))
-    //     lastIndex: pathToLastIndex(draggedCollectionIndex),
+    }
-    //     newIndex: -1,
-    //     folderPath: parentFolder,
-    //     length: getFoldersByPath(restCollectionStore.value.state, parentFolder)
-    //       .length,
-    //   },
-    //   "drop"
-    // )
 
-    // updateSaveContextForAffectedRequests(
+    const parentFolder = draggedCollectionIndex
-    //   draggedCollectionIndex,
+      .split("/")
-    //   `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
+      .slice(0, -1)
-    // )
+      .join("/") // remove last folder to get parent folder
+
+    const totalFoldersOfDestinationCollection =
+      getFoldersByPath(
+        restCollectionStore.value.state,
+        destinationCollectionIndex
+      ).length - (parentFolder === destinationCollectionIndex ? 1 : 0)
+
+    resolveSaveContextOnCollectionReorder(
+      {
+        lastIndex: this.pathToLastIndex(draggedCollectionIndex),
+        newIndex: -1,
+        folderPath: parentFolder,
+        length: getFoldersByPath(restCollectionStore.value.state, parentFolder)
+          .length,
+      },
+      "drop"
+    )
+
+    updateSaveContextForAffectedRequests(
+      draggedCollectionIndex,
+      `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
+    )
 
     // const { auth, headers } = cascadeParentCollectionForHeaderAuth(
     //   `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`,