feat: develop auxiliary bar (#833)

* feat: develop auxiliary bar

* fix: fix can't select in auxiliaryBar

* test: update tests

* chore: rename auxiliaryService to auxiliaryBarService

* test: improve tests

* test: improve tests

* test: improve tests

* test: remove console.log in test

* test: update tests

Author: mortalYoung

src/controller/__tests__/auxiliaryBar.test.ts

@@ -0,0 +1,26 @@
+import { AuxiliaryBarService } from 'mo/services';
+import { container } from 'tsyringe';
+import { AuxiliaryController } from '..';
+
+const auxiliaryBarController = container.resolve(AuxiliaryController);
+const auxiliaryBarService = container.resolve(AuxiliaryBarService);
+
+describe('The AuxiliaryBar Controller', () => {
+    test('Should support call onClick', () => {
+        const original = auxiliaryBarService.setActive;
+        auxiliaryBarService.setActive = jest.fn((props) => original(props));
+
+        const clickFn = jest.fn();
+        auxiliaryBarService.onTabClick(clickFn);
+
+        auxiliaryBarController.onClick(1);
+        expect(auxiliaryBarService.setActive).toBeCalledWith(1);
+        expect(clickFn).toBeCalledWith(1);
+
+        auxiliaryBarController.onClick(1);
+        expect(auxiliaryBarService.setActive).toBeCalledWith(undefined);
+        expect(clickFn).toBeCalledWith(1);
+
+        auxiliaryBarService.setActive = original;
+    });
+});

src/controller/__tests__/menuBar.test.ts

@@ -140,6 +140,19 @@ describe('The menuBar controller', () => {
         expect(mockExecute.mock.calls[1][1]).toEqual({ icon: 'check' });
         mockExecute.mockClear();
 
+        // update auxiliary bar
+        mockItem.id = constants.MENU_VIEW_AUXILIARY;
+        menuBarController.onClick(mockEvent, mockItem);
+        expect(mockExecute).toBeCalled();
+        expect(mockExecute.mock.calls[0][0]).toBe(
+            constants.MENU_VIEW_AUXILIARY
+        );
+        expect(mockExecute.mock.calls[0][1]).toEqual({ icon: 'check' });
+
+        menuBarController.onClick(mockEvent, mockItem);
+        expect(mockExecute.mock.calls[1][1]).toEqual({ icon: '' });
+        mockExecute.mockClear();
+
         // update menu bar
         mockItem.id = constants.MENU_VIEW_MENUBAR;
         menuBarController.onClick(mockEvent, mockItem);

src/controller/auxiliaryBar.ts

@@ -0,0 +1,31 @@
+import 'reflect-metadata';
+import { Controller } from 'mo/react/controller';
+import { container, singleton } from 'tsyringe';
+import { AuxiliaryBarService, IAuxiliaryBarService } from 'mo/services';
+import { AuxiliaryEventKind } from 'mo/model';
+import type { UniqueId } from 'mo/common/types';
+
+export interface IAuxiliaryController {
+    onClick?: (key: UniqueId) => void;
+}
+
+@singleton()
+export class AuxiliaryController
+    extends Controller
+    implements IAuxiliaryController
+{
+    private readonly auxiliaryService: IAuxiliaryBarService;
+    constructor() {
+        super();
+        this.auxiliaryService = container.resolve(AuxiliaryBarService);
+    }
+
+    public initView = () => {};
+
+    public onClick = (key: UniqueId) => {
+        this.auxiliaryService.setActive(
+            this.auxiliaryService.getState().current === key ? undefined : key
+        );
+        this.emit(AuxiliaryEventKind.onTabClick, key);
+    };
+}

src/controller/index.ts

@@ -1,4 +1,5 @@
 export * from './activityBar';
+export * from './auxiliaryBar';
 export * from './editor';
 export * from './menuBar';
 export * from './notification';

src/controller/menuBar.ts

@@ -67,6 +67,7 @@ export class MenuBarController
             ACTION_QUICK_SELECT_ALL,
             ACTION_QUICK_COPY_LINE_UP,
             MENU_VIEW_ACTIVITYBAR,
+            MENU_VIEW_AUXILIARY,
             MENU_VIEW_MENUBAR,
             MENU_VIEW_STATUSBAR,
             MENU_QUICK_COMMAND,
@@ -94,6 +95,7 @@ export class MenuBarController
                 [MENU_VIEW_STATUSBAR, () => this.updateStatusBar()],
                 [MENU_QUICK_COMMAND, () => this.gotoQuickCommand()],
                 [ID_SIDE_BAR, () => this.updateSideBar()],
+                [MENU_VIEW_AUXILIARY, () => this.updateAuxiliaryBar()],
                 [MENU_VIEW_PANEL, () => this.updatePanel()],
                 [
                     MENUBAR_MODE_HORIZONTAL,
@@ -264,6 +266,19 @@ export class MenuBarController
         );
     };
 
+    public updateAuxiliaryBar = () => {
+        const nextHidden = this.layoutService.setAuxiliaryBar(
+            (hidden) => !hidden
+        );
+
+        const { MENU_VIEW_AUXILIARY } = this.builtinService.getConstants();
+        if (MENU_VIEW_AUXILIARY) {
+            this.menuBarService.update(MENU_VIEW_AUXILIARY, {
+                icon: nextHidden ? '' : 'check',
+            });
+        }
+    };
+
     private updatePanel = () => {
         this.monacoService.commandService.executeCommand(
             QuickTogglePanelAction.ID

src/extensions/locales-defaults/locales/en.json

@@ -22,7 +22,8 @@
         "menu.openView": "Open View",
         "menu.appearance": "Appearance",
         "menu.showMenuBar": "Show Menu Bar",
-        "menu.showSideBar": "Show Side bar",
+        "menu.showAuxiliaryBar": "Show Auxiliary Bar",
+        "menu.showSideBar": "Show Side Bar",
         "menu.showSideBar.label": "Toggle Side Bar Visibility",
         "menu.showStatusBar": "Show Status Bar",
         "menu.showActivityBar": "Show Activity Bar",

src/extensions/locales-defaults/locales/zh-CN.json

@@ -22,7 +22,8 @@
         "menu.openView": "打开视图",
         "menu.appearance": "外观",
         "menu.showMenuBar": "显示菜单栏",
-        "menu.showSideBar": "显示边栏",
+        "menu.showAuxiliaryBar": "显示辅助侧边栏",
+        "menu.showSideBar": "显示侧边栏",
         "menu.showSideBar.label": "切换侧边栏",
         "menu.showStatusBar": "显示状态栏",
         "menu.showActivityBar": "显示活动栏",

src/model/workbench/auxiliaryBar.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { UniqueId } from 'mo/common/types';
+
+export enum AuxiliaryEventKind {
+    onTabClick = 'AuxiliaryBar.onClick',
+}
+
+export type IAuxiliaryBarMode = 'default' | 'tabs';
+
+export type IAuxiliaryData = { key: UniqueId; title: React.ReactNode };
+
+export interface IAuxiliaryBar {
+    mode: IAuxiliaryBarMode;
+    data: IAuxiliaryData[];
+    current?: UniqueId;
+    children?: React.ReactNode;
+}
+
+export class AuxiliaryModel implements IAuxiliaryBar {
+    public mode: IAuxiliaryBarMode = 'default';
+    public children: React.ReactNode;
+    public data: IAuxiliaryData[] = [];
+    public current?: UniqueId;
+    constructor(
+        mode: IAuxiliaryBarMode = 'default',
+        data: IAuxiliaryData[] = [],
+        current?: UniqueId,
+        children?: React.ReactNode
+    ) {
+        this.mode = mode;
+        this.children = children;
+        this.data = data;
+        this.current = current;
+    }
+}

src/model/workbench/index.ts

@@ -1,6 +1,7 @@
 import { IActivityBar, IMenuBar, IPanel, ISidebar, IStatusBar } from 'mo/model';
 
 export * from './activityBar';
+export * from './auxiliaryBar';
 export * from './editor';
 export * from './sidebar';
 export * from './statusBar';

src/model/workbench/layout.ts

@@ -27,6 +27,7 @@ export interface ILayout {
     splitPanePos: (number | string)[];
     horizontalSplitPanePos: (number | string)[];
     activityBar: ViewVisibility;
+    auxiliaryBar: ViewVisibility;
     panel: IPanelViewState;
     statusBar: ViewVisibility;
     sidebar: ISidebarViewState;
@@ -40,16 +41,18 @@ export class LayoutModel implements ILayout {
     public horizontalSplitPanePos: (number | string)[];
     public groupSplitPos: (number | string)[];
     public activityBar: ViewVisibility;
+    public auxiliaryBar: ViewVisibility;
     public panel: IPanelViewState;
     public statusBar: ViewVisibility;
     public sidebar: ISidebarViewState;
     public menuBar: IMenuBarViewState;
     public editorGroupDirection: MenuBarMode;
     constructor(
-        splitPanePos: string[] = ['300px', 'auto'],
+        splitPanePos: (number | string)[] = [300, 'auto', 300],
         horizontalSplitPanePos = ['auto', '150px'],
         groupSplitPos = [],
         activityBar = { hidden: false },
+        auxiliaryBar = { hidden: true },
         panel = { hidden: false, panelMaximized: false },
         statusBar = { hidden: false },
         sidebar = { hidden: false, position: Position.left },
@@ -60,6 +63,7 @@ export class LayoutModel implements ILayout {
         this.horizontalSplitPanePos = horizontalSplitPanePos;
         this.groupSplitPos = groupSplitPos;
         this.activityBar = activityBar;
+        this.auxiliaryBar = auxiliaryBar;
         this.panel = panel;
         this.statusBar = statusBar;
         this.sidebar = sidebar;