support to set the expanded panels of Explorer

src/components/collapse/__tests__/index.test.tsx

@@ -440,4 +440,24 @@ describe('Test The Collapse Component', () => {
             toolbar: [{ id: 'toolbar1', 'data-testid': 'toolbar1' }],
         });
     });
+    test('Should support to set activePanelKeys', async () => {
+        const { container } = render(
+            <Collapse
+                data={[
+                    { id: 'mock1', name: 'test1', config: { grow: 0 } },
+                    {
+                        id: 'mock2',
+                        name: 'mock2',
+                    },
+                    { id: 'mock3', name: 'test3' },
+                ]}
+                activePanelKeys={['mock2']}
+            />
+        );
+        const metaData = (
+            container.querySelector('div[data-collapse-id="mock2"]') as any
+        )?.dataset.collapseId;
+
+        expect(metaData).toBe('mock2');
+    });
 });

src/components/collapse/index.tsx

@@ -1,5 +1,4 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
-
 import { classNames } from 'mo/common/className';
 import { HTMLElementProps, UniqueId } from 'mo/common/types';
 import { getDataAttributionsFromProps } from 'mo/common/dom';
@@ -40,8 +39,9 @@ export interface ICollapseItem extends HTMLElementProps {
 }
 
 export interface ICollapseProps extends HTMLElementProps {
+    activePanelKeys?: UniqueId[];
     data?: ICollapseItem[];
-    onCollapseChange?: (keys: React.Key[]) => void;
+    onCollapseChange?: (keys: UniqueId[]) => void;
     onResize?: (resizes: number[]) => void;
     onToolbarClick?: (
         item: IActionBarItemProps,
@@ -60,6 +60,7 @@ export const HEADER_HEIGTH = 26;
 
 export function Collapse({
     data = [],
+    activePanelKeys: controlActivePanelKeys,
     className,
     title,
     style,
@@ -69,7 +70,8 @@ export function Collapse({
     onResize,
     ...restProps
 }: ICollapseProps) {
-    const [activePanelKeys, setActivePanelKeys] = useState<React.Key[]>([]);
+    const [activePanelKeys, setActivePanelKeys] = useState<UniqueId[]>([]);
+
     const [collapsing, setCollapsing] = useState(false);
     const wrapper = useRef<HTMLDivElement>(null);
     const [sizes, setSizes] = useState<number[]>(
@@ -118,7 +120,7 @@ export function Collapse({
         return null;
     };
 
-    const handleChangeCallback = (key: React.Key) => {
+    const handleChangeCallback = (key: UniqueId) => {
         const currentKeys = activePanelKeys.concat();
         if (currentKeys.includes(key)) {
             currentKeys.splice(currentKeys.indexOf(key), 1);
@@ -241,6 +243,10 @@ export function Collapse({
         first.current = false;
     }, [activePanelKeys, data]);
 
+    useLayoutEffect(() => {
+        Array.isArray(controlActivePanelKeys) &&
+            setActivePanelKeys(controlActivePanelKeys);
+    }, [controlActivePanelKeys]);
     // perform the next resizes value via sizes
     // the effects of data changes will lead to perform recalculate sizes, which cause recalculate the resizers
     // so don't need to add data into deps

src/model/workbench/explorer/explorer.tsx

@@ -39,17 +39,21 @@ export interface IExplorerPanelItem {
 export interface IExplorer {
     data: IExplorerPanelItem[];
     headerToolBar?: IActionBarItemProps;
+    activePanelKeys?: UniqueId[];
 }
 
 export class IExplorerModel implements IExplorer {
     public data: IExplorerPanelItem[];
     public headerToolBar?: IActionBarItemProps;
+    public activePanelKeys?: UniqueId[];
 
     constructor(
         data: IExplorerPanelItem[] = [],
-        headerToolBar?: IActionBarItemProps
+        headerToolBar?: IActionBarItemProps,
+        activePanelKeys?: UniqueId[]
     ) {
         this.data = data;
         this.headerToolBar = headerToolBar;
+        this.activePanelKeys = activePanelKeys;
     }
 }

src/services/__tests__/explorerService.test.ts

@@ -4,9 +4,11 @@ import { expectFnCalled, expectLoggerErrorToBeCalled } from '@test/utils';
 import { container } from 'tsyringe';
 import { searchById } from 'mo/common/utils';
 import { ExplorerService } from '../workbench';
+import { BuiltinService } from '../builtinService';
 import { modules } from '../builtinService/const';
 
 const explorerService = container.resolve(ExplorerService);
+const builtinService = container.resolve(BuiltinService);
 
 const panelData: IExplorerPanelItem = {
     id: 'test',
@@ -298,4 +300,14 @@ describe('Test the Explorer Service', () => {
             explorerService.emit(ExplorerEvent.onCollapseAllFolders);
         });
     });
+
+    test('Should support to set expanded panels', () => {
+        const constants = builtinService.getConstants();
+        const { SAMPLE_FOLDER_PANEL_ID } = constants as {
+            SAMPLE_FOLDER_PANEL_ID: string;
+        };
+        explorerService.setExpandedPanels([SAMPLE_FOLDER_PANEL_ID]);
+        const state = explorerService.getState();
+        expect(state.activePanelKeys).toEqual([SAMPLE_FOLDER_PANEL_ID]);
+    });
 });

src/services/workbench/explorer/explorerService.ts

@@ -23,6 +23,11 @@ export interface IExplorerService extends Component<IExplorer> {
      * Update the panels data, as well as modify toolbar data
      */
     updatePanel(data: Partial<IExplorerPanelItem>): void;
+    /**
+     *
+     * Set expanded Panels of Explore
+     */
+    setExpandedPanels(activePanelKeys: UniqueId[]): void;
     /**
      * Remove a panel via id, as well as remove the corresponding action bar
      */
@@ -93,6 +98,12 @@ export class ExplorerService
         this.state = container.resolve(IExplorerModel);
     }
 
+    public setExpandedPanels(activePanelKeys: UniqueId[]) {
+        this.setState({
+            activePanelKeys,
+        });
+    }
+
     private toggleIcon(icon?: string) {
         return icon === 'check' ? '' : 'check';
     }

src/workbench/sidebar/explore/explore.tsx

@@ -13,6 +13,7 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
     props: IExplorerProps
 ) => {
     const {
+        activePanelKeys,
         data = [],
         headerToolBar,
         onClick,
@@ -35,6 +36,7 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
             <Content>
                 <Collapse
                     data={data}
+                    activePanelKeys={activePanelKeys}
                     onCollapseChange={onCollapseChange}
                     onToolbarClick={onToolbarClick}
                 />

stories/extensions/test/testPane.tsx

@@ -140,6 +140,14 @@ export default class TestPane extends React.Component {
             molecule.layout.togglePanelVisibility();
         };
 
+        const setExpandedPanels = () => {
+            const constants = molecule.builtin.getConstants();
+            const { SAMPLE_FOLDER_PANEL_ID } = constants as {
+                SAMPLE_FOLDER_PANEL_ID: string;
+            };
+            molecule.explorer.setExpandedPanels([SAMPLE_FOLDER_PANEL_ID]);
+        };
+
         const updateOutput = () => {
             const { PANEL_OUTPUT } = molecule.builtin.getConstants();
             const editorIns = molecule.panel.outputEditorInstance;
@@ -495,6 +503,9 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000;
                         <Button onClick={addExplorer}>
                             Add Explorer Panel
                         </Button>
+                        <Button onClick={setExpandedPanels}>
+                            setExpandedPanels
+                        </Button>
                         <Button onClick={addRootFolder}>Add Root Folder</Button>
                     </div>
                     <div>