feat: support to set the folderTree nodes whether to sort by default (#614)

* fix: folderTree sort

* docs: add description about FolderTree's sorting function

* fix: folderTree.update supports updating the node whose id is 0

Co-authored-by: jiming <jiming@dtstack.com>

Author: kiwiwong

src/model/workbench/explorer/folderTree.tsx

@@ -38,6 +38,7 @@ export interface IFolderTreeSubItem {
 export interface IFolderTree {
     folderTree?: IFolderTreeSubItem;
     entry?: React.ReactNode;
+    autoSort?: Boolean;
 }
 
 export interface IFolderTreeNodeProps extends ITreeNodeItemProps<any> {
@@ -89,6 +90,7 @@ export class TreeNodeModel implements IFolderTreeNodeProps {
 export class IFolderTreeModel implements IFolderTree {
     public folderTree: IFolderTreeSubItem;
     public entry: React.ReactNode;
+    public autoSort: Boolean;
 
     constructor(
         folderTree: IFolderTreeSubItem = {
@@ -97,9 +99,11 @@ export class IFolderTreeModel implements IFolderTree {
             folderPanelContextMenu: [],
             data: [],
         },
+        autoSort: Boolean = false,
         entry?: React.ReactNode
     ) {
         this.folderTree = folderTree;
         this.entry = entry;
+        this.autoSort = autoSort;
     }
 }

src/services/workbench/__tests__/folderTreeService.test.ts

@@ -272,7 +272,7 @@ describe('Test StatusBarService', () => {
         const children = data[0].children!;
         expect(children).toHaveLength(2);
         expect(children[0]).toEqual({
-            ...fileNode,
+            ...pendingNode,
         });
     });
 
@@ -312,6 +312,7 @@ describe('Test StatusBarService', () => {
             isLeaf: false,
             children: [ignoreFile, normalFile, normalFolder, ignoreFolder],
         });
+        folderTreeService.toggleAutoSort();
         folderTreeService.add(root);
 
         // let data = folderTreeService.getState().folderTree?.data || [];
@@ -389,6 +390,11 @@ describe('Test StatusBarService', () => {
             '.prettierignore',
             'file',
         ]);
+
+        // update tree node when autoSort is true
+        root.name = 'new-root';
+        folderTreeService.update(root);
+        expect(folderTreeService.get(root.id)?.name).toBe('new-root');
     });
 
     test('Should support to set entry', () => {

src/services/workbench/explorer/folderTreeService.ts

@@ -138,6 +138,10 @@ export interface IFolderTreeService extends Component<IFolderTree> {
             callback: (treeNode: IFolderTreeNodeProps) => void
         ) => void
     ): void;
+    /**
+     * Toggle whether to enable sorting, which is disabled by default.
+     */
+    toggleAutoSort(): void;
 }
 
 @singleton()
@@ -251,14 +255,16 @@ export class FolderTreeService
     }
 
     private addRootFolder(folder: IFolderTreeNodeProps) {
-        const { folderTree } = this.state;
+        const { folderTree, autoSort } = this.state;
 
         if (folderTree?.data?.length) {
             // if root folder exists, then do nothing
             return;
         }
 
-        this.sortTree(folder.children || []);
+        if (autoSort) {
+            this.sortTree(folder.children || []);
+        }
         this.setState({
             folderTree: { ...folderTree, data: [folder] },
         });
@@ -315,6 +321,7 @@ export class FolderTreeService
 
     public add(data: IFolderTreeNodeProps, id?: UniqueId): void {
         const isRootFolder = data.fileType === 'RootFolder';
+        const { autoSort } = this.state;
 
         if (isRootFolder) {
             this.addRootFolder(data);
@@ -357,7 +364,9 @@ export class FolderTreeService
         }
 
         cloneData[index] = tree!.obj;
-        this.sortTree(cloneData[index].children || []);
+        if (autoSort) {
+            this.sortTree(cloneData[index].children || []);
+        }
         this.setState({
             folderTree: {
                 ...this.state.folderTree,
@@ -388,7 +397,8 @@ export class FolderTreeService
 
     public update(data: IFolderTreeNodeProps) {
         const { id, ...restData } = data;
-        if (!id) throw new Error('Id is required in updating data');
+        const { autoSort } = this.state;
+        if (!id && id !== 0) throw new Error('Id is required in updating data');
         const folderTree: IFolderTreeSubItem = cloneDeep(
             this.getState().folderTree || {}
         );
@@ -404,7 +414,9 @@ export class FolderTreeService
         tree.updateNode(id, restData);
         if (index > -1) {
             nextData[index] = tree.obj;
-            this.sortTree(nextData[index].children || []);
+            if (autoSort) {
+                this.sortTree(nextData[index].children || []);
+            }
         }
         this.setState({
             folderTree,
@@ -499,4 +511,8 @@ export class FolderTreeService
     ) => {
         this.subscribe(FolderTreeEvent.onLoadData, callback);
     };
+
+    public toggleAutoSort() {
+        this.setState({ autoSort: !this.state.autoSort });
+    }
 }

website/docs/guides/extend-builtin-ui.md

@@ -105,6 +105,13 @@ molecule.folderTree.onSelectFile((file: IFolderTreeNodeProps) => {
 });
 ```
 
+Enable sorting
+
+```ts
+// Toggle whether to enable sorting, which is disabled by default.
+molecule.folderTree.toggleAutoSort();
+```
+
 For more information about the use of FolderTree, please refer to the [API](../api/classes/molecule.FolderTreeService) documentation.
 
 ## [EditorTree](../api/interfaces/molecule.IEditorTreeService)

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-builtin-ui.md

@@ -106,6 +106,13 @@ molecule.folderTree.onSelectFile((file: IFolderTreeNodeProps) => {
 });
 ```
 
+启用排序功能
+
+```ts
+// Toggle whether to enable sorting, which is disabled by default.
+molecule.folderTree.toggleAutoSort();
+```
+
 更多关于 FolderTree 的使用，请参考 [API](../api/classes/molecule.FolderTreeService) 文档。
 
 ## [编辑器树（EditorTree)](../api/interfaces/molecule.IEditorTreeService)