Merge pull request #12 from hoppscotch/workspace-refactor-changes

refactor: add support for new abstractions at the workspace level

Author: anwarulislam

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "description": "Hoppscotch UI",
   "author": "Hoppscotch ([email protected])",

src/components/smart/Tree.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends any">
-import { computed, inject } from "vue"
+import { inject } from "vue"
 import SmartTreeBranch from "./TreeBranch.vue"
 import SmartSpinner from "./Spinner.vue"
 import { SmartTreeAdapter, TreeNode } from "~/helpers/treeAdapter"
@@ -68,5 +68,5 @@ const props = defineProps<{
 /**
  * Fetch the root nodes from the adapter by passing the node id as null
  */
-const rootNodes = computed(() => props.adapter.getChildren(null).value)
+const rootNodes = props.adapter.getChildren(null)
 </script>

src/components/smart/TreeBranch.vue

@@ -27,7 +27,7 @@
     >
       <SmartTreeBranch
         v-for="childNode in childNodes.data"
-        :key="childNode.id"
+        :key="`${childNode.id}-${childNode.data.type}`"
         :node-item="childNode"
         :adapter="adapter"
       >
@@ -114,9 +114,7 @@ const highlightNode = ref(false)
 /**
  * Fetch the child nodes from the adapter by passing the node id of the current node
  */
-const childNodes = computed(
-  () => props.adapter.getChildren(props.nodeItem.id).value,
-)
+const childNodes = props.adapter.getChildren(props.nodeItem.id, props.nodeItem.data.type)
 
 const toggleNodeChildren = () => {
   if (!childrenRendered.value) childrenRendered.value = true

src/helpers/treeAdapter.ts

@@ -28,7 +28,8 @@ export interface SmartTreeAdapter<T> {
   /**
    *
    * @param nodeID - id of the node to get children for
+   * @param nodeType - Type of the node (`collection` | `request`)
    * @returns - Ref that contains the children of the node. It is reactive and will be updated when the children are changed.
    */
-  getChildren: (nodeID: string | null) => Ref<ChildrenResult<T>>
+  getChildren: (nodeID: string | null, nodeType?: string) => Ref<ChildrenResult<T>>
 }