refactor: port collection tree rendered in the save request modal to the new implementation

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

@@ -18,7 +18,10 @@
     </div>
     <NewCollectionsRest
       v-if="platform === 'rest'"
+      :picked="picked"
+      :save-request="saveRequest"
       :workspace-handle="activeWorkspaceHandle"
+      @select="(payload) => emit('select', payload)"
     />
   </div>
 </template>
@@ -27,10 +30,17 @@
 import { useService } from "dioc/vue"
 import { ref } from "vue"
 import { useI18n } from "~/composables/i18n"
+import { Picked } from "~/helpers/types/HoppPicked";
 import { NewWorkspaceService } from "~/services/new-workspace"
 
 defineProps<{
+  picked: Picked | null
   platform: "rest" | "gql"
+  saveRequest: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: "select", payload: Picked | null): void
 }>()
 
 const t = useI18n()
@@ -40,7 +50,4 @@ const searchText = ref("")
 const workspaceService = useService(NewWorkspaceService)
 
 const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle
-
-const showModalAdd = ref(false)
-const showModalImportExport = ref(false)
 </script>

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

@@ -12,12 +12,16 @@
           <span
             class="pointer-events-none flex items-center justify-center px-4"
           >
-            <component :is="collectionIcon" class="svg-icons" />
+            <component
+              :is="collectionIcon"
+              class="svg-icons"
+              :class="{ 'text-accent': isSelected }"
+            />
           </span>
           <span
             class="pointer-events-none flex min-w-0 flex-1 py-2 pr-2 transition group-hover:text-secondaryDark"
           >
-            <span class="truncate">
+            <span class="truncate" :class="{ 'text-accent': isSelected }">
               {{ collectionView.name }}
             </span>
           </span>
@@ -151,6 +155,7 @@ import { RESTCollectionViewCollection } from "~/services/new-workspace/view"
 import { TippyComponent } from "vue-tippy"
 import { ref, computed } from "vue"
 import { useI18n } from "~/composables/i18n"
+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"
@@ -166,6 +171,7 @@ const t = useI18n()
 const props = defineProps<{
   collectionView: RESTCollectionViewCollection
   isOpen: boolean
+  isSelected?: boolean | null
 }>()
 
 const emit = defineEmits<{
@@ -195,6 +201,9 @@ const exportAction = ref<HTMLButtonElement | null>(null)
 const options = ref<TippyComponent | null>(null)
 
 const collectionIcon = computed(() => {
+  if (props.isSelected) {
+    return IconCheckCircle
+  }
   return !props.isOpen ? IconFolder : IconFolderOpen
 })
 

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

@@ -13,14 +13,20 @@
           :class="requestLabelColor"
           :style="{ color: requestLabelColor }"
         >
-          <span class="truncate text-tiny font-semibold">
+          <component
+            :is="IconCheckCircle"
+            v-if="isSelected"
+            class="svg-icons"
+            :class="{ 'text-accent': isSelected }"
+          />
+          <span v-else class="truncate text-tiny font-semibold">
             {{ requestView.request.method }}
           </span>
         </span>
         <span
           class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
         >
-          <span class="truncate">
+          <span class="truncate" :class="{ 'text-accent': isSelected }">
             {{ requestView.request.name }}
           </span>
           <span
@@ -119,6 +125,7 @@
 </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"
@@ -135,6 +142,7 @@ const t = useI18n()
 const props = defineProps<{
   isActive: boolean
   requestView: RESTCollectionViewRequest
+  isSelected: boolean | null | undefined
 }>()
 
 const emit = defineEmits<{

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

@@ -2,7 +2,11 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
-      :style="'top: var(--upper-primary-sticky-fold)'"
+      :style="
+        saveRequest
+          ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
+          : 'top: var(--upper-primary-sticky-fold)'
+      "
     >
       <HoppButtonSecondary
         :icon="IconPlus"
@@ -19,6 +23,7 @@
           :icon="IconHelpCircle"
         />
         <HoppButtonSecondary
+          v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconImport"
           :title="t('modal.import_export')"
@@ -30,27 +35,52 @@
     <div class="flex flex-1 flex-col">
       <HoppSmartTree :adapter="treeAdapter">
         <template #content="{ node, toggleChildren, isOpen }">
-          <!-- TODO: Implement -->
           <NewCollectionsRestCollection
             v-if="node.data.type === 'collection'"
             :collection-view="node.data.value"
             :is-open="isOpen"
+            :is-selected="
+              isSelected(
+                getCollectionIndexPathArgs(node.data.value.collectionID)
+              )
+            "
+            :save-request="saveRequest"
             @add-request="addRequest"
             @add-child-collection="addChildCollection"
             @edit-root-collection="editRootCollection"
             @edit-collection-properties="editCollectionProperties"
             @edit-child-collection="editChildCollection"
+            @select-pick="onSelectPick"
             @remove-root-collection="removeRootCollection"
             @remove-child-collection="removeChildCollection"
-            @toggle-children="toggleChildren"
+            @toggle-children="
+              () => {
+                toggleChildren(),
+                  saveRequest &&
+                    onSelectPick({
+                      pickedType: isAlreadyInRoot(node.data.value.collectionID)
+                        ? 'my-collection'
+                        : 'my-folder',
+                      ...getCollectionIndexPathArgs(
+                        node.data.value.collectionID
+                      ),
+                    })
+              }
+            "
           />
+
           <NewCollectionsRestRequest
             v-else-if="node.data.type === 'request'"
             :is-active="isActiveRequest(node.data.value.request.id)"
+            :is-selected="
+              isSelected(getRequestIndexPathArgs(node.data.value.requestID))
+            "
             :request-view="node.data.value"
+            :save-request="saveRequest"
             @duplicate-request="duplicateRequest"
             @edit-request="editRequest"
             @remove-request="removeRequest"
+            @select-pick="onSelectPick"
             @select-request="selectRequest"
           />
           <div v-else @click="toggleChildren">
@@ -150,6 +180,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 { Picked } from "~/helpers/types/HoppPicked"
 
 const t = useI18n()
 const toast = useToast()
@@ -157,9 +188,12 @@ const tabs = useService(RESTTabService)
 
 const props = defineProps<{
   workspaceHandle: HandleRef<Workspace>
+  picked: Picked | null
+  saveRequest: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
+  (event: "select", payload: Picked | null): void
   (e: "display-modal-add"): void
   (e: "display-modal-import-export"): void
 }>()
@@ -206,6 +240,37 @@ const editingProperties = ref<{
 
 const confirmModalTitle = ref<string | null>(null)
 
+const isSelected = ({
+  collectionIndex,
+  folderPath,
+  requestIndex,
+}: {
+  collectionIndex?: number | undefined
+  folderPath?: string | undefined
+  requestIndex?: number | undefined
+}) => {
+  if (collectionIndex !== undefined) {
+    return (
+      props.picked &&
+      props.picked.pickedType === "my-collection" &&
+      props.picked.collectionIndex === collectionIndex
+    )
+  } else if (requestIndex !== undefined && folderPath !== undefined) {
+    return (
+      props.picked &&
+      props.picked.pickedType === "my-request" &&
+      props.picked.folderPath === folderPath &&
+      props.picked.requestIndex === requestIndex
+    )
+  } else if (folderPath !== undefined) {
+    return (
+      props.picked &&
+      props.picked.pickedType === "my-folder" &&
+      props.picked.folderPath === folderPath
+    )
+  }
+}
+
 const displayModalAddRequest = (show: boolean) => {
   showModalAddRequest.value = show
 
@@ -271,8 +336,8 @@ const addNewRootCollection = async (name: string) => {
   showModalAdd.value = false
 }
 
-const removeRootCollection = (collPathIndex: string) => {
-  editingCollectionIndexPath.value = collPathIndex
+const removeRootCollection = (collectionIndexPath: string) => {
+  editingCollectionIndexPath.value = collectionIndexPath
 
   confirmModalTitle.value = `${t("confirm.remove_collection")}`
   displayConfirmModal(true)
@@ -298,6 +363,10 @@ const onRemoveRootCollection = async () => {
     return
   }
 
+  if (isSelected({ collectionIndex: parseInt(collectionIndexPath) })) {
+    emit("select", null)
+  }
+
   const result = await workspaceService.removeRESTCollection(collectionHandle)
 
   if (E.isLeft(result)) {
@@ -552,6 +621,14 @@ const onRemoveChildCollection = async () => {
     return
   }
 
+  if (
+    isSelected({
+      folderPath: parentCollectionIndexPath.split("/").pop(),
+    })
+  ) {
+    emit("select", null)
+  }
+
   const result = await workspaceService.removeRESTCollection(
     parentCollectionHandle
   )
@@ -600,6 +677,15 @@ const onRemoveRequest = async () => {
     requestHandle,
   })
 
+  if (
+    isSelected({
+      requestIndex: parseInt(requestIndexPath.split("/").pop() ?? ""),
+      folderPath: editingCollectionIndexPath.value,
+    })
+  ) {
+    emit("select", null)
+  }
+
   const result = await workspaceService.removeRESTRequest(requestHandle)
 
   if (E.isLeft(result)) {
@@ -619,6 +705,15 @@ const onRemoveRequest = async () => {
 
 const selectRequest = async (requestIndexPath: string) => {
   const collectionIndexPath = requestIndexPath.split("/").slice(0, -1).join("/")
+  const requestIndex = requestIndexPath.split("/").slice(-1)[0]
+
+  if (props.saveRequest) {
+    return emit("select", {
+      pickedType: "my-request",
+      folderPath: collectionIndexPath,
+      requestIndex: parseInt(requestIndex),
+    })
+  }
 
   const collectionHandleResult = await workspaceService.getCollectionHandle(
     props.workspaceHandle,
@@ -997,4 +1092,30 @@ const isActiveRequest = (requestID: string) => {
   }
   return requestHandle.value.data.request.id === requestID
 }
+
+const onSelectPick = (payload: Picked | null) => {
+  emit("select", payload)
+}
+
+const getCollectionIndexPathArgs = (
+  collectionIndexPath: string
+): { collectionIndex: number } | { folderPath: string } => {
+  return isAlreadyInRoot(collectionIndexPath)
+    ? {
+        collectionIndex: parseInt(collectionIndexPath),
+      }
+    : { folderPath: collectionIndexPath }
+}
+
+const getRequestIndexPathArgs = (requestIndexPath: string) => {
+  const requestIndexPathArr = pathToIndex(requestIndexPath)
+
+  const parentCollectionIndexPath = requestIndexPathArr.slice(0, -1).join("/")
+  const requestIndex = parseInt(requestIndexPathArr.slice(-1)[0])
+
+  return {
+    folderPath: parentCollectionIndexPath,
+    requestIndex,
+  }
+}
 </script>