Update the menu entries when widgets are added or removed from side panels

Author: brichet

packages/application-extension/src/index.ts

@@ -44,7 +44,7 @@ import { PromiseDelegate } from '@lumino/coreutils';
 
 import { DisposableDelegate, DisposableSet } from '@lumino/disposable';
 
-import { Menu, Widget } from '@lumino/widgets';
+import { Widget } from '@lumino/widgets';
 
 /**
  * The default notebook factory.
@@ -670,47 +670,25 @@ const sidebarVisibility: JupyterFrontEndPlugin<void> = {
       }
     });
 
-    const leftSidebarMenu = new Menu({ commands: app.commands });
-    leftSidebarMenu.title.label = trans.__('Show Left Sidebar');
-
-    const rightSidebarMenu = new Menu({ commands: app.commands });
-    rightSidebarMenu.title.label = trans.__('Show Right Sidebar');
-
     app.restored.then(() => {
-      const leftWidgets = notebookShell.widgetsList('left');
-      leftWidgets.forEach(widget => {
-        leftSidebarMenu.addItem({
-          command: CommandIDs.togglePanel,
-          args: {
-            side: 'left',
-            title: widget.title.caption,
-            id: widget.id
-          }
+      // Create a menu entry for left and right panel and update it with current widgets
+      if (menu) {
+        notebookShell.leftHandler.createMenuEntry({
+          mainMenuEntry: menu.viewMenu,
+          commandRegistry: app.commands,
+          entryLabel: trans.__('Show Left Sidebar'),
+          command: CommandIDs.togglePanel
         });
-      });
 
-      const rightWidgets = notebookShell.widgetsList('right');
-      rightWidgets.forEach(widget => {
-        rightSidebarMenu.addItem({
-          command: CommandIDs.togglePanel,
-          args: {
-            side: 'right',
-            title: widget.title.caption,
-            id: widget.id
-          }
+        notebookShell.rightHandler.createMenuEntry({
+          mainMenuEntry: menu.viewMenu,
+          commandRegistry: app.commands,
+          entryLabel: trans.__('Show Right Sidebar'),
+          command: CommandIDs.togglePanel
         });
-      });
-
-      const menuItemsToAdd: Menu.IItemOptions[] = [];
-      if (leftWidgets.length > 0) {
-        menuItemsToAdd.push({ type: 'submenu', submenu: leftSidebarMenu });
-      }
-      if (rightWidgets.length > 0) {
-        menuItemsToAdd.push({ type: 'submenu', submenu: rightSidebarMenu });
-      }
 
-      if (menu && menuItemsToAdd) {
-        menu.viewMenu.addGroup(menuItemsToAdd, 2);
+        notebookShell.leftHandler.updateMenu();
+        notebookShell.rightHandler.updateMenu();
       }
     });
   },

packages/application/src/shell.ts

@@ -4,16 +4,20 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { PageConfig } from '@jupyterlab/coreutils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { IRankedMenu } from '@jupyterlab/ui-components';
 
 import { ArrayExt, find, IIterator, iter } from '@lumino/algorithm';
+import { CommandRegistry } from '@lumino/commands';
 import { PromiseDelegate, Token } from '@lumino/coreutils';
+import { IDisposable } from '@lumino/disposable';
 import { Message, MessageLoop, IMessageHandler } from '@lumino/messaging';
 import { Debouncer } from '@lumino/polling';
 import { ISignal, Signal } from '@lumino/signaling';
 
 import {
   BoxLayout,
   Layout,
+  Menu,
   Panel,
   SplitPanel,
   StackedPanel,
@@ -47,8 +51,8 @@ export class NotebookShell extends Widget implements JupyterFrontEnd.IShell {
 
     this._topHandler = new Private.PanelHandler();
     this._menuHandler = new Private.PanelHandler();
-    this._leftHandler = new Private.SideBarHandler();
-    this._rightHandler = new Private.SideBarHandler();
+    this._leftHandler = new Private.SideBarHandler('left');
+    this._rightHandler = new Private.SideBarHandler('right');
     this._main = new Panel();
     const topWrapper = (this._topWrapper = new Panel());
     const menuWrapper = (this._menuWrapper = new Panel());
@@ -526,12 +530,14 @@ namespace Private {
     /**
      * Construct a new side bar handler.
      */
-    constructor() {
+    constructor(area: 'left' | 'right') {
+      this._area = area;
       this._stackedPanel = new StackedPanel();
       this._stackedPanel.hide();
       this._current = null;
       this._lastCurrent = null;
       this._stackedPanel.widgetRemoved.connect(this._onWidgetRemoved, this);
+      this._sideBarMenu = null;
     }
 
     get current(): Widget | null {
@@ -563,6 +569,13 @@ namespace Private {
       return this._updated;
     }
 
+    /**
+     * Associate a menu entry to the sidebar.
+     */
+    createMenuEntry(options: SideBarMenuOption): void {
+      this._sideBarMenu = new SideBarMenu(options);
+    }
+
     /**
      * Expand the sidebar.
      *
@@ -619,8 +632,7 @@ namespace Private {
       ArrayExt.insert(this._items, index, item);
       this._stackedPanel.insertWidget(index, widget);
 
-      // TODO: Update menu to include widget in appropriate position
-
+      this.updateMenu();
       this._refreshVisibility();
     }
 
@@ -640,6 +652,14 @@ namespace Private {
       this._refreshVisibility();
     }
 
+    /**
+     * Update menu entries
+     */
+    updateMenu(): void {
+      if (!this._sideBarMenu) return;
+      const widgets = this.stackedPanel.widgets;
+      this._sideBarMenu?.updateMenu(widgets, this._area);
+    }
     /**
      * Find the insertion index for a rank item.
      */
@@ -678,15 +698,100 @@ namespace Private {
         this._lastCurrent = null;
       }
       ArrayExt.removeAt(this._items, this._findWidgetIndex(widget));
-      // TODO: Remove the widget from the menu
+
+      this.updateMenu();
       this._refreshVisibility();
     }
 
+    private _area: 'left' | 'right';
     private _isHiddenByUser = false;
     private _items = new Array<Private.IRankItem>();
     private _stackedPanel: StackedPanel;
     private _current: Widget | null;
     private _lastCurrent: Widget | null;
     private _updated: Signal<SideBarHandler, void> = new Signal(this);
+    private _sideBarMenu: SideBarMenu | null;
+  }
+
+  /**
+   * A class which manages the menu entry associated to the side bar.
+   */
+  export class SideBarMenu {
+    /**
+     * Construct a new side bar handler.
+     */
+    constructor(options: SideBarMenuOption) {
+      this._commandRegistry = options.commandRegistry;
+      this._command = options.command;
+      this._mainMenuEntry = options.mainMenuEntry;
+      this._entryLabel = options.entryLabel;
+    }
+
+    /**
+     * Update the menu by disposing the previous one and rebuilding a new one from widgets list.
+     */
+    updateMenu(widgets: Readonly<Widget[]>, area: 'left' | 'right'): void {
+      // Remove the previous menu entry.
+      if (this._menu) this._menu.dispose();
+
+      // Build the new menu entry from widgets list.
+      let menu = new Menu({ commands: this._commandRegistry });
+      menu.title.label = this._entryLabel;
+      widgets.forEach(widget => {
+        menu.addItem({
+          command: this._command,
+          args: {
+            side: area,
+            title: widget.title.caption,
+            id: widget.id
+          }
+        });
+      });
+
+      // If there are widgets, add the menu to the main menu entry.
+      if (widgets.length > 0) {
+        this._menu = this._mainMenuEntry.addItem({
+          type: 'submenu',
+          submenu: menu
+        });
+      }
+    }
+
+    _entryLabel: string;
+    _command: string;
+    _mainMenuEntry: IRankedMenu;
+    _commandRegistry: CommandRegistry;
+    _menu: IDisposable | null = null;
   }
+
+  /**
+   * An interface for the options to include in SideBarMenu constructor.
+   */
+  type SideBarMenuOption = {
+    /**
+     * The main menu entry where the sidebar menu should be added.
+     */
+    mainMenuEntry: IRankedMenu;
+
+    /**
+     * Tha label of the sidebar menu.
+     */
+    entryLabel: string;
+
+    /**
+     * The application command registry, necessary when updating the sidebar menu.
+     */
+    commandRegistry: CommandRegistry;
+
+    /**
+     * The command to call from each sidebar menu entry.
+     *
+     * ### Notes
+     * That command required 3 args :
+     *      side: 'left' | 'right', the area to toggle
+     *      title: string, label of the command
+     *      id: string, id of the widget to activate
+     */
+    command: string;
+  };
 }