feat: define loadedKey to be controlled (#803)

Author: mortalYoung

src/components/tree/__tests__/tree.test.tsx

@@ -450,8 +450,8 @@ describe('Test the Tree component', () => {
             },
         ];
         const mockFn = jest.fn().mockImplementation(() => sleep(1000));
-        const { getByText, container } = render(
-            <TreeView data={data} onLoadData={mockFn} />
+        const { getByText, container, rerender } = render(
+            <TreeView data={data} onLoadData={mockFn} loadedKeys={[]} />
         );
 
         act(() => {
@@ -466,6 +466,10 @@ describe('Test the Tree component', () => {
         });
         expect(container.querySelector('.codicon-spin')).toBeNull();
 
+        rerender(
+            <TreeView data={data} onLoadData={mockFn} loadedKeys={['1']} />
+        );
+
         act(() => {
             // unfold it and open it again
             fireEvent.click(getByText('test1'));

src/components/tree/index.tsx

@@ -62,6 +62,7 @@ export interface ITreeProps {
     className?: string;
     draggable?: boolean;
     expandKeys?: UniqueId[];
+    loadedKeys?: string[];
     activeKey?: UniqueId;
     onExpand?: (expandedKeys: React.Key[], node: ITreeNodeItemProps) => void;
     onSelect?: (node: ITreeNodeItemProps, isUpdate?) => void;
@@ -83,6 +84,7 @@ const TreeView = ({
     className,
     data = [],
     draggable = false,
+    loadedKeys,
     expandKeys: controlExpandKeys,
     activeKey: controlActiveKey,
     onExpand,
@@ -95,7 +97,6 @@ const TreeView = ({
 }: ITreeProps) => {
     const [expandKeys, setExpandKeys] = useState<UniqueId[]>([]);
     const [activeKey, setActiveKey] = useState<string | null>(null);
-    const loadDataCache = useRef<Record<string, boolean>>({});
     const [loadingKeys, setLoadingKeys] = useState<string[]>([]);
     const dragOverNode = useRef<ITreeNodeItemProps>();
     const dragInfo = useRef<{
@@ -108,7 +109,7 @@ const TreeView = ({
 
     const canLoadData = (key: string) => {
         if (!onLoadData) return false;
-        if (loadDataCache.current.hasOwnProperty(key)) return false;
+        if (loadedKeys?.includes(key)) return false;
         return true;
     };
 
@@ -120,7 +121,6 @@ const TreeView = ({
                 nextKeys.push(uuid!);
                 return nextKeys;
             });
-            loadDataCache.current[uuid] = true;
             onLoadData!(node).finally(() => {
                 setLoadingKeys((keys) => {
                     const nextKeys = keys.concat();

src/controller/explorer/folderTree.tsx

@@ -207,6 +207,11 @@ export class FolderTreeController
     public onLoadData = (treeNode: IFolderTreeNodeProps) => {
         const count = this.count(FolderTreeEvent.onLoadData);
         if (count) {
+            // define current treeNode to be loaded
+            this.folderTreeService.setLoadedKeys([
+                ...this.folderTreeService.getLoadedKeys(),
+                treeNode.id.toString(),
+            ]);
             return new Promise<void>((resolve, reject) => {
                 const callback = (node: IFolderTreeNodeProps) => {
                     this.folderTreeService.update(node);

src/model/workbench/explorer/folderTree.tsx

@@ -36,6 +36,7 @@ export interface IFolderTreeSubItem {
     folderPanelContextMenu?: IMenuItemProps[];
     current?: IFolderTreeNodeProps | null;
     expandKeys?: UniqueId[];
+    loadedKeys?: string[];
 }
 export interface IFolderTree {
     folderTree?: IFolderTreeSubItem;

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

@@ -424,6 +424,28 @@ describe('Test StatusBarService', () => {
         });
     });
 
+    test('Should remove loadedCached when removed successfully', () => {
+        folderTreeService.add({
+            id: '1',
+            name: 'test0',
+            fileType: 'RootFolder',
+            location: 'test0',
+            children: [
+                {
+                    id: '2',
+                    name: 'test',
+                    fileType: 'Folder',
+                    children: [],
+                },
+            ],
+        });
+        folderTreeService.setLoadedKeys(['1', '2']);
+        expect(folderTreeService.getLoadedKeys()).toEqual(['1', '2']);
+
+        folderTreeService.remove('2');
+        expect(folderTreeService.getLoadedKeys()).toEqual(['1']);
+    });
+
     test('Should support to logger ERROR message when remove failed', () => {
         expectLoggerErrorToBeCalled(() => {
             folderTreeService.remove('1');

src/services/workbench/explorer/folderTreeService.ts

@@ -65,6 +65,14 @@ export interface IFolderTreeService extends Component<IFolderTree> {
      * Set the expandKeys for folderTree
      */
     setExpandKeys: (expandKeys: UniqueId[]) => void;
+    /**
+     * Get the loadedKeys for folderTree
+     */
+    getLoadedKeys: () => string[];
+    /**
+     * Set the loadedKeys for folderTree
+     */
+    setLoadedKeys: (loadedKeys: string[]) => void;
     /**
      * Active specific node,
      * or unactive any node in folder tree
@@ -264,6 +272,17 @@ export class FolderTreeService
         });
     }
 
+    public getLoadedKeys() {
+        return this.state.folderTree?.loadedKeys || [];
+    }
+
+    public setLoadedKeys(loadedKeys: string[]) {
+        const { folderTree } = this.state;
+        this.setState({
+            folderTree: { ...folderTree, loadedKeys },
+        });
+    }
+
     private setCurrentFolderLocation(data: IFolderTreeNodeProps, id: UniqueId) {
         const children = data.children;
         const { tree } = this.getCurrentRootFolderInfo(id);
@@ -429,6 +448,12 @@ export class FolderTreeService
 
         tree.removeNode(id);
         if (index > -1) nextData[index] = tree.obj;
+        // Remove loadedKey while removing node
+        if (folderTree.loadedKeys?.includes(id.toString())) {
+            folderTree.loadedKeys = folderTree.loadedKeys.filter(
+                (key) => key !== id.toString()
+            );
+        }
         this.setState({
             folderTree,
         });

src/workbench/sidebar/explore/folderTree.tsx

@@ -86,6 +86,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         data = [],
         folderPanelContextMenu = [],
         expandKeys,
+        loadedKeys,
         current,
     } = folderTree;
 
@@ -236,6 +237,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
                     // root folder do not render
                     activeKey={current?.id}
                     expandKeys={expandKeys}
+                    loadedKeys={loadedKeys}
                     data={data[0]?.children || []}
                     className={classNames(
                         folderTreeClassName,