[PR #2865] [MERGED] feat : smart tree component #4118

New issue

Closed

opened 2026-03-17 01:40:59 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:40:59 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2865
Author: @nivedin
Created: 12/1/2022
Status: ✅ Merged
Merged: 1/31/2023
Merged by: @AndrewBastin

Base: main ← Head: feat/smart-tree-component

📝 Commits (10+)

12ff5ed chore: initial smart tree test
5dee938 feat: smart tree adapter
ba8cc34 refactor: smart tree update
77305ac fix: tree child components render
28dc055 refactor: tree branch type
05fcea0 refactor: fix ts error and added dynamic slots
45e2116 refactor: empty state UI
0b18576 refactor: empty folder and collection UI
d2f686c refactor: folder using path
be6b527 feat: add collection and request component as node

📊 Changes

39 files changed (+4427 additions, -4086 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+1 -0)
📝 packages/hoppscotch-common/src/components.d.ts (+7 -7)
📝 packages/hoppscotch-common/src/components/collections/Add.vue (+44 -39)
📝 packages/hoppscotch-common/src/components/collections/AddFolder.vue (+44 -45)
📝 packages/hoppscotch-common/src/components/collections/AddRequest.vue (+14 -21)
➖ packages/hoppscotch-common/src/components/collections/ChooseType.vue (+0 -162)
➕ packages/hoppscotch-common/src/components/collections/Collection.vue (+252 -0)
📝 packages/hoppscotch-common/src/components/collections/Edit.vue (+45 -39)
📝 packages/hoppscotch-common/src/components/collections/EditFolder.vue (+46 -40)
📝 packages/hoppscotch-common/src/components/collections/EditRequest.vue (+48 -44)
📝 packages/hoppscotch-common/src/components/collections/ImportExport.vue (+111 -195)
➕ packages/hoppscotch-common/src/components/collections/MyCollections.vue (+619 -0)
➕ packages/hoppscotch-common/src/components/collections/Request.vue (+235 -0)
📝 packages/hoppscotch-common/src/components/collections/SaveRequest.vue (+170 -180)
➕ packages/hoppscotch-common/src/components/collections/TeamCollections.vue (+625 -0)
➕ packages/hoppscotch-common/src/components/collections/TeamSelect.vue (+167 -0)
📝 packages/hoppscotch-common/src/components/collections/index.vue (+1442 -846)
➖ packages/hoppscotch-common/src/components/collections/my/Collection.vue (+0 -354)
➖ packages/hoppscotch-common/src/components/collections/my/Folder.vue (+0 -340)
➖ packages/hoppscotch-common/src/components/collections/my/Request.vue (+0 -433)

...and 19 more files

📄 Description

Description

This PR introduces a new tree component that can be used for any tree structure. In this PR the collection component has been refactored using the new smart tree. Smart Tree is a flexible tree view component that converts the data into a tree structure.
The separate components like Collection, Folders, Requests for MyCollection, and TeamsCollection have been removed and made common UI components.

A basic tree component structure will look like below -

<SmartTree :adapter="someAdapter">
    <template #content="{ node, toggleChildren, isOpen }">
        <SomeComponent :data="node" :is-open="isOpen" @toggle-children="toggleChildren"/> OR <div>{UI of the node}</div>
    </template>
    <template #emptyNode="{ node }">
         <EmptyContentComponent/>
    </template>
</SmartTree>

The tree consists of two components and one Adapter Interface -

Tree for displaying all the nodes
TreeBranch for displaying each tree node.
SmartTreeAdapter represents the adapter properties.

Tree

The main tree component, which has adapter as the prop.
The tree UI is specified by passing it in the slots.
Content Template returns -
- node - The single node data
- toggleChildren - Function to fetch the children of the node
- isOpen - Boolean value if the node is open or not
EmptyNode Template returns -
- node - The single node data (can be used to differentiate the empty state)

TreeBranch

The branch component , which act as the single node, which accepts node-item and adapter as the props.

Adapter

The adapter which provides the properties of the adapter -

getChildren - Function used to fetch the children of the node
- Accepts id as the prop (id of the node which the children is to fetch)
The TreeNode has to be the type

type TreeNode<T> = {
 id: string
 data: T
}

id - Unique id to represent the node
data - The data to be represented
- T - type of the data that can be passed form the adapter
The childrenNode has to be the type ie the data

type ChildrenResult<T> =
| {
    status: "loading"
  }
| {
    status: "loaded"
    data: Array<TreeNode<T>>
  }

It has two status -

loading - The data would be null (used in the team collection, when fetching from the db)
loaded - The data is fetched and the data is passed to data

The loading UI has been provided to the tree since it will be common to all components.

class SomeAdapter implements SmartTreeAdapter<TypeOfTheNode> {
     // ref because to make the nodes reactive
      constructor(public data: Ref<Type of the incoming data>) {}
      
      getChildren(id): Ref<ChildrenResult<TypeOfTheNode>> {}
}

The adapter is then initialized by passing the data

const someAdapter: SmartTreeAdapter<TypeOfTheNode> = new SomeAdapter (DATA)

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Additional Information

The whole collection component has been refactored to setup - TS. The functionality of the collection component has been kept the same.

TODO:

Issue with root nodes not loading initially (@AndrewBastin)
Fix type errors (@AndrewBastin)

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2865 **Author:** [@nivedin](https://github.com/nivedin) **Created:** 12/1/2022 **Status:** ✅ Merged **Merged:** 1/31/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `main` ← **Head:** `feat/smart-tree-component` --- ### 📝 Commits (10+) - [`12ff5ed`](https://github.com/hoppscotch/hoppscotch/commit/12ff5ed6ed9c40721ffc54150c8d7a6245c05e83) chore: initial smart tree test - [`5dee938`](https://github.com/hoppscotch/hoppscotch/commit/5dee938b334d88fdfdbe4ea5d07981ff55eded10) feat: smart tree adapter - [`ba8cc34`](https://github.com/hoppscotch/hoppscotch/commit/ba8cc3454ce8c4eadb1ebb7365e042a659c61a58) refactor: smart tree update - [`77305ac`](https://github.com/hoppscotch/hoppscotch/commit/77305ace075f4f6fb4d6586bbbb3dce7211fee22) fix: tree child components render - [`28dc055`](https://github.com/hoppscotch/hoppscotch/commit/28dc055998863c941e75e8f916ecae3c3ba5b93a) refactor: tree branch type - [`05fcea0`](https://github.com/hoppscotch/hoppscotch/commit/05fcea0d27c1c8d109de77d98382501c959f8891) refactor: fix ts error and added dynamic slots - [`45e2116`](https://github.com/hoppscotch/hoppscotch/commit/45e211645d1cf1164ecbd936fe9b61083cd09be8) refactor: empty state UI - [`0b18576`](https://github.com/hoppscotch/hoppscotch/commit/0b18576181a8d2b8b7dfcdb317afe7d08ad75f78) refactor: empty folder and collection UI - [`d2f686c`](https://github.com/hoppscotch/hoppscotch/commit/d2f686c26ce08bb805bdf106e9d45e85bff5a606) refactor: folder using path - [`be6b527`](https://github.com/hoppscotch/hoppscotch/commit/be6b527d7e03dce3c2dae57458644448e4885e01) feat: add collection and request component as node ### 📊 Changes **39 files changed** (+4427 additions, -4086 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+1 -0) 📝 `packages/hoppscotch-common/src/components.d.ts` (+7 -7) 📝 `packages/hoppscotch-common/src/components/collections/Add.vue` (+44 -39) 📝 `packages/hoppscotch-common/src/components/collections/AddFolder.vue` (+44 -45) 📝 `packages/hoppscotch-common/src/components/collections/AddRequest.vue` (+14 -21) ➖ `packages/hoppscotch-common/src/components/collections/ChooseType.vue` (+0 -162) ➕ `packages/hoppscotch-common/src/components/collections/Collection.vue` (+252 -0) 📝 `packages/hoppscotch-common/src/components/collections/Edit.vue` (+45 -39) 📝 `packages/hoppscotch-common/src/components/collections/EditFolder.vue` (+46 -40) 📝 `packages/hoppscotch-common/src/components/collections/EditRequest.vue` (+48 -44) 📝 `packages/hoppscotch-common/src/components/collections/ImportExport.vue` (+111 -195) ➕ `packages/hoppscotch-common/src/components/collections/MyCollections.vue` (+619 -0) ➕ `packages/hoppscotch-common/src/components/collections/Request.vue` (+235 -0) 📝 `packages/hoppscotch-common/src/components/collections/SaveRequest.vue` (+170 -180) ➕ `packages/hoppscotch-common/src/components/collections/TeamCollections.vue` (+625 -0) ➕ `packages/hoppscotch-common/src/components/collections/TeamSelect.vue` (+167 -0) 📝 `packages/hoppscotch-common/src/components/collections/index.vue` (+1442 -846) ➖ `packages/hoppscotch-common/src/components/collections/my/Collection.vue` (+0 -354) ➖ `packages/hoppscotch-common/src/components/collections/my/Folder.vue` (+0 -340) ➖ `packages/hoppscotch-common/src/components/collections/my/Request.vue` (+0 -433) _...and 19 more files_ </details> ### 📄 Description ### Description This PR introduces a new tree component that can be used for any tree structure. In this PR the collection component has been refactored using the new smart tree. Smart Tree is a flexible tree view component that converts the data into a tree structure. The separate components like Collection, Folders, Requests for MyCollection, and TeamsCollection have been removed and made common UI components. A basic tree component structure will look like below - ```js <SmartTree :adapter="someAdapter"> <template #content="{ node, toggleChildren, isOpen }"> <SomeComponent :data="node" :is-open="isOpen" @toggle-children="toggleChildren"/> OR <div>{UI of the node}</div> </template> <template #emptyNode="{ node }"> <EmptyContentComponent/> </template> </SmartTree> ``` The tree consists of two components and one Adapter Interface - - `Tree` for displaying all the nodes - `TreeBranch` for displaying each tree node. - `SmartTreeAdapter` represents the adapter properties. #### <ins>Tree</ins> - The main tree component, which has `adapter `as the prop. - The tree UI is specified by passing it in the slots. - Content Template returns - - node - The single node data - toggleChildren - Function to fetch the children of the node - isOpen - Boolean value if the node is open or not - EmptyNode Template returns - - node - The single node data (can be used to differentiate the empty state) #### <ins>TreeBranch</ins> - The branch component , which act as the single node, which accepts `node-item` and `adapter` as the props. #### <ins>Adapter</ins> The adapter which provides the properties of the adapter - - `getChildren` - Function used to fetch the children of the node - Accepts `id` as the prop (id of the node which the children is to fetch) - The TreeNode has to be the type ```js type TreeNode<T> = { id: string data: T } ``` - id - Unique id to represent the node - data - The data to be represented - T - type of the data that can be passed form the adapter - The childrenNode has to be the type ie the data ```js type ChildrenResult<T> = | { status: "loading" } | { status: "loaded" data: Array<TreeNode<T>> } ``` It has two status - - loading - The data would be null (used in the team collection, when fetching from the db) - loaded - The data is fetched and the data is passed to data The loading UI has been provided to the tree since it will be common to all components. ```js class SomeAdapter implements SmartTreeAdapter<TypeOfTheNode> { // ref because to make the nodes reactive constructor(public data: Ref<Type of the incoming data>) {} getChildren(id): Ref<ChildrenResult<TypeOfTheNode>> {} } ```` The adapter is then initialized by passing the data ```js const someAdapter: SmartTreeAdapter<TypeOfTheNode> = new SomeAdapter (DATA) ``` ### Checks - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed ### Additional Information The whole collection component has been refactored to setup - TS. The functionality of the collection component has been kept the same. #### TODO: - [x] Issue with root nodes not loading initially (@AndrewBastin) - [x] Fix type errors (@AndrewBastin) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>