fix: customized MenuBar data will be lost when modifying the MenuBar's mode (#650)

* fix: custom menu data is lost when modifying the MenuBar's mode

* fix: get the "Appearance" menu id from constants

Author: kiwiwong

src/controller/__tests__/menuBar.test.ts

@@ -169,9 +169,6 @@ describe('The menuBar controller', () => {
     test('Should support to change the layout mode', () => {
         const mockEvent = {} as any;
         const mockItem = { id: constants.MENUBAR_MODE_HORIZONTAL };
-        const mockExecute = jest.fn();
-        const originalSetMenus = menuBarService.setMenus;
-        const originalUpdateMenuBarMode = menuBarController.updateMenuBarMode;
 
         // change default mode
         const defaultMode = layoutService.getMenuBarMode();
@@ -184,21 +181,20 @@ describe('The menuBar controller', () => {
         expect(layoutService.getMenuBarMode()).toBe(anotherMode);
 
         // update to horizontal mode
-        menuBarService.setMenus = mockExecute;
         layoutService.setMenuBarMode(MenuBarMode.vertical);
         menuBarController.onClick(mockEvent, mockItem);
-        expect(mockExecute).toBeCalled();
-        mockExecute.mockClear();
+        expect(
+            menuBarService.getMenuById(constants.MENUBAR_MODE_VERTICAL)
+        ).toBeTruthy();
 
         // update to vertical mode
         mockItem.id = constants.MENUBAR_MODE_VERTICAL;
         layoutService.setMenuBarMode(MenuBarMode.horizontal);
         menuBarController.onClick(mockEvent, mockItem);
-        expect(mockExecute).toBeCalled();
-        mockExecute.mockClear();
+        expect(
+            menuBarService.getMenuById(constants.MENUBAR_MODE_HORIZONTAL)
+        ).toBeTruthy();
 
-        menuBarService.setMenus = originalSetMenus;
-        menuBarController.updateMenuBarMode = originalUpdateMenuBarMode;
         layoutService.reset();
         menuBarService.reset();
     });

src/controller/menuBar.ts

@@ -110,7 +110,7 @@ export class MenuBarController
             }
         });
 
-        this.subscribe(MenuBarEvent.onChangeMode, this.updateMenuBarData);
+        this.subscribe(MenuBarEvent.onChangeMode, this.updateMenuBarDataByMode);
     }
 
     public updateFocusinEle = (ele: HTMLElement | null) => {
@@ -215,10 +215,42 @@ export class MenuBarController
         this.layoutService.setMenuBarMode(mode);
     };
 
-    public updateMenuBarData = (mode: keyof typeof MenuBarMode) => {
+    private updateMenuBarDataByMode = (mode: keyof typeof MenuBarMode) => {
         const { builtInMenuBarData } = this.builtinService.getModules();
-        const menuBarData = this.getMenuBarDataByMode(mode, builtInMenuBarData);
-        this.menuBarService.setMenus(menuBarData);
+        const {
+            MENUBAR_MODE_HORIZONTAL,
+            MENUBAR_MODE_VERTICAL,
+            MENU_APPEARANCE_ID,
+        } = this.builtinService.getConstants();
+        let removeKey = MENUBAR_MODE_HORIZONTAL;
+        let appendKey = MENUBAR_MODE_VERTICAL;
+
+        if (mode === MenuBarMode.vertical) {
+            removeKey = MENUBAR_MODE_VERTICAL;
+            appendKey = MENUBAR_MODE_HORIZONTAL;
+        }
+
+        const menuItem = this.getMenuBarItem(builtInMenuBarData, appendKey!);
+        this.menuBarService.remove(removeKey!);
+        this.menuBarService.append(menuItem!, MENU_APPEARANCE_ID!);
+    };
+
+    private getMenuBarItem = (
+        data: IMenuBarItem[],
+        id: string
+    ): IMenuBarItem | null => {
+        let item: IMenuBarItem;
+        for (item of data) {
+            if (item.id === id) {
+                return { ...item };
+            } else if (Array.isArray(item.data) && item.data.length > 0) {
+                const itemData = this.getMenuBarItem(item.data, id);
+                if (itemData) {
+                    return itemData;
+                }
+            }
+        }
+        return null;
     };
 
     public updateStatusBar = () => {

src/model/workbench/menuBar.ts

@@ -20,6 +20,7 @@ export interface IMenuBarItem {
     icon?: string | JSX.Element;
     data?: ISubMenuProps[];
     render?: (data: IMenuItemProps) => React.ReactNode | JSX.Element;
+    disabled?: boolean;
 }
 
 export interface IMenuBar {

src/services/builtinService/const.ts

@@ -64,6 +64,7 @@ export const constants = {
     PANEL_TOOLBOX_RESIZE: 'panel.toolbox.maximize',
     PANEL_TOOLBOX_RESTORE_SIZE: 'panel.toolbox.restoreSize',
     PANEL_OUTPUT: 'panel.output.title',
+    MENU_APPEARANCE_ID: 'Appearance',
     MENU_FILE_OPEN: 'openFile',
     MENU_QUICK_COMMAND: 'editor.action.quickCommand',
     MENU_VIEW_MENUBAR: 'workbench.action.showMenuBar',
@@ -584,7 +585,7 @@ export const modules = {
                         name: localize('menu.openView', 'Open View'),
                     },
                     {
-                        id: 'Appearance',
+                        id: constants.MENU_APPEARANCE_ID,
                         name: localize('menu.appearance', 'Appearance'),
                         data: [
                             {