@theia/notebook 1.61.0 → 1.62.0

package/src/browser/contributions/notebook-cell-actions-contribution.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Command, CommandContribution, CommandHandler, CommandRegistry, CompoundMenuNodeRole, MenuContribution, MenuModelRegistry, nls } from '@theia/core';
+import { Command, CommandContribution, CommandHandler, CommandRegistry, MenuContribution, MenuModelRegistry, nls } from '@theia/core';
 import { codicon, Key, KeybindingContribution, KeybindingRegistry, KeyCode, KeyModifier } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { NotebookModel } from '../view-model/notebook-model';
@@ -234,15 +234,17 @@ export class NotebookCellActionContribution implements MenuContribution, Command
             NotebookCellActionContribution.ADDITIONAL_ACTION_MENU,
             nls.localizeByDefault('More'),
             {
-                icon: codicon('ellipsis'),
-                role: CompoundMenuNodeRole.Submenu,
-                order: '30'
+                sortString: '30',
+                icon: codicon('ellipsis')
             }
         );
 
-        menus.registerIndependentSubmenu(NotebookCellActionContribution.CONTRIBUTED_CELL_ACTION_MENU, '', { role: CompoundMenuNodeRole.Flat });
+        menus.registerSubmenu(NotebookCellActionContribution.CONTRIBUTED_CELL_ACTION_MENU, '');
         // since contributions are adding to an independent submenu we have to manually add it to the more submenu
-        menus.getMenu(NotebookCellActionContribution.ADDITIONAL_ACTION_MENU).addNode(menus.getMenuNode(NotebookCellActionContribution.CONTRIBUTED_CELL_ACTION_MENU));
+        menus.linkCompoundMenuNode({
+            newParentPath: NotebookCellActionContribution.ADDITIONAL_ACTION_MENU,
+            submenuPath: NotebookCellActionContribution.CONTRIBUTED_CELL_ACTION_MENU
+        });
 
         // code cell sidebar menu
         menus.registerMenuAction(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, {
@@ -259,19 +261,17 @@ export class NotebookCellActionContribution implements MenuContribution, Command
         });
 
         // Notebook Cell extra execution options
-        menus.registerIndependentSubmenu(NotebookCellActionContribution.CONTRIBUTED_CELL_EXECUTION_MENU,
+        menus.registerSubmenu(NotebookCellActionContribution.CONTRIBUTED_CELL_EXECUTION_MENU,
             nls.localizeByDefault('More...'),
-            { role: CompoundMenuNodeRole.Flat, icon: codicon('chevron-down') });
+            { icon: codicon('chevron-down') });
         // menus.getMenu(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU).addNode(menus.getMenuNode(NotebookCellActionContribution.CONTRIBUTED_CELL_EXECUTION_MENU));
 
         // code cell output sidebar menu
         menus.registerSubmenu(
             NotebookCellActionContribution.ADDITIONAL_OUTPUT_SIDEBAR_MENU,
             nls.localizeByDefault('More'),
-            {
-                icon: codicon('ellipsis'),
-                role: CompoundMenuNodeRole.Submenu
-            });
+            { icon: codicon('ellipsis') }
+        );
         menus.registerMenuAction(NotebookCellActionContribution.ADDITIONAL_OUTPUT_SIDEBAR_MENU, {
             commandId: NotebookCellCommands.CLEAR_OUTPUTS_COMMAND.id,
             label: nls.localizeByDefault('Clear Cell Outputs'),
@@ -565,8 +565,8 @@ export class NotebookCellActionContribution implements MenuContribution, Command
 export namespace NotebookCellActionContribution {
     export const ACTION_MENU = ['notebook-cell-actions-menu'];
     export const ADDITIONAL_ACTION_MENU = [...ACTION_MENU, 'more'];
-    export const CONTRIBUTED_CELL_ACTION_MENU = 'notebook/cell/title';
-    export const CONTRIBUTED_CELL_EXECUTION_MENU = 'notebook/cell/execute';
+    export const CONTRIBUTED_CELL_ACTION_MENU = ['notebook/cell/title'];
+    export const CONTRIBUTED_CELL_EXECUTION_MENU = ['notebook/cell/execute'];
     export const CODE_CELL_SIDEBAR_MENU = ['code-cell-sidebar-menu'];
     export const OUTPUT_SIDEBAR_MENU = ['code-cell-output-sidebar-menu'];
     export const ADDITIONAL_OUTPUT_SIDEBAR_MENU = [...OUTPUT_SIDEBAR_MENU, 'more'];

package/src/browser/notebook-frontend-module.ts

@@ -53,6 +53,7 @@ import { NotebookStatusBarContribution } from './contributions/notebook-status-b
 import { NotebookCellEditorService } from './service/notebook-cell-editor-service';
 import { NotebookCellStatusBarService } from './service/notebook-cell-status-bar-service';
 import { MonacoEditorModelFilter } from '@theia/monaco/lib/browser/monaco-text-model-service';
+import { ActiveMonacoEditorContribution } from '@theia/monaco/lib/browser/monaco-editor-service';
 
 export default new ContainerModule(bind => {
     bind(NotebookColorContribution).toSelf().inSingletonScope();
@@ -76,6 +77,7 @@ export default new ContainerModule(bind => {
     bind(NotebookKernelQuickPickService).toSelf().inSingletonScope();
     bind(NotebookClipboardService).toSelf().inSingletonScope();
     bind(NotebookCellEditorService).toSelf().inSingletonScope();
+    bind(ActiveMonacoEditorContribution).toService(NotebookCellEditorService);
     bind(NotebookCellStatusBarService).toSelf().inSingletonScope();
 
     bind(NotebookCellResourceResolver).toSelf().inSingletonScope();

package/src/browser/service/notebook-cell-editor-service.ts

@@ -19,13 +19,18 @@ import { inject, injectable, postConstruct } from '@theia/core/shared/inversify'
 import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { NotebookEditorWidgetService } from './notebook-editor-widget-service';
 import { CellUri } from '../../common';
+import { ActiveMonacoEditorContribution, MonacoEditorService } from '@theia/monaco/lib/browser/monaco-editor-service';
+import { ICodeEditor } from '@theia/monaco-editor-core/esm/vs/editor/browser/editorBrowser';
 
 @injectable()
-export class NotebookCellEditorService {
+export class NotebookCellEditorService implements ActiveMonacoEditorContribution {
 
     @inject(NotebookEditorWidgetService)
     protected readonly notebookEditorWidgetService: NotebookEditorWidgetService;
 
+    @inject(MonacoEditorService)
+    protected readonly monacoEditorService: MonacoEditorService;
+
     protected onDidChangeCellEditorsEmitter = new Emitter<void>();
     readonly onDidChangeCellEditors = this.onDidChangeCellEditorsEmitter.event;
 
@@ -42,6 +47,8 @@ export class NotebookCellEditorService {
             // if defocus notebook editor or another notebook editor is focused, clear the active cell
             if (!editor || (this.currentActiveCell && CellUri.parse(this.currentActiveCell.uri)?.notebook.toString() !== editor?.model?.uri.toString())) {
                 this.currentActiveCell = undefined;
+                // eslint-disable-next-line no-null/no-null
+                this.monacoEditorService.setActiveCodeEditor(null);
                 this.onDidChangeFocusedCellEditorEmitter.fire(undefined);
             }
         });
@@ -64,6 +71,7 @@ export class NotebookCellEditorService {
     editorFocusChanged(editor?: SimpleMonacoEditor): void {
         if (editor) {
             this.currentActiveCell = editor;
+            this.monacoEditorService.setActiveCodeEditor(editor.getControl());
             this.onDidChangeFocusedCellEditorEmitter.fire(editor);
         }
     }
@@ -71,4 +79,8 @@ export class NotebookCellEditorService {
     getActiveCell(): SimpleMonacoEditor | undefined {
         return this.currentActiveCell;
     }
+
+    getActiveEditor(): ICodeEditor | undefined {
+        return this.getActiveCell()?.getControl();
+    }
 }

package/src/browser/service/notebook-context-manager.ts

@@ -16,7 +16,7 @@
 
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyChangeEvent, ContextKeyService, ContextMatcher, ScopedValueStore } from '@theia/core/lib/browser/context-key-service';
-import { DisposableCollection, Emitter } from '@theia/core';
+import { DisposableCollection } from '@theia/core';
 import { NotebookKernelService } from './notebook-kernel-service';
 import {
     NOTEBOOK_CELL_EDITABLE,
@@ -43,9 +43,6 @@ export class NotebookContextManager {
 
     protected readonly toDispose = new DisposableCollection();
 
-    protected readonly onDidChangeContextEmitter = new Emitter<ContextKeyChangeEvent>();
-    readonly onDidChangeContext = this.onDidChangeContextEmitter.event;
-
     protected _context?: HTMLElement;
 
     scopedStore: ScopedValueStore;
@@ -72,14 +69,12 @@ export class NotebookContextManager {
             if (e.notebook.toString() === widget?.getResourceUri()?.toString()) {
                 this.scopedStore.setContext(NOTEBOOK_KERNEL_SELECTED, !!e.newKernel);
                 this.scopedStore.setContext(NOTEBOOK_KERNEL, e.newKernel);
-                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_KERNEL_SELECTED, NOTEBOOK_KERNEL]));
             }
         }));
 
         widget.model?.onDidChangeContent(events => {
             if (events.some(e => e.kind === NotebookCellsChangeType.ModelChange || e.kind === NotebookCellsChangeType.Output)) {
                 this.scopedStore.setContext(NOTEBOOK_HAS_OUTPUTS, widget.model?.cells.some(cell => cell.outputs.length > 0));
-                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_HAS_OUTPUTS]));
             }
         });
 
@@ -91,23 +86,18 @@ export class NotebookContextManager {
         widget.model?.onDidChangeSelectedCell(e => {
             this.selectedCellChanged(e.cell);
             this.scopedStore.setContext(NOTEBOOK_CELL_FOCUSED, !!e);
-            this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_FOCUSED]));
         });
 
         this.toDispose.push(this.executionStateService.onDidChangeExecution(e => {
             if (e.notebook.toString() === widget.model?.uri.toString()) {
                 this.setCellContext(e.cellHandle, NOTEBOOK_CELL_EXECUTING, !!e.changed);
                 this.setCellContext(e.cellHandle, NOTEBOOK_CELL_EXECUTION_STATE, e.changed?.state ?? 'idle');
-                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_EXECUTING, NOTEBOOK_CELL_EXECUTION_STATE]));
             }
         }));
 
         widget.onDidChangeOutputInputFocus(focus => {
             this.scopedStore.setContext(NOTEBOOK_OUTPUT_INPUT_FOCUSED, focus);
-            this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_OUTPUT_INPUT_FOCUSED]));
         });
-
-        this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_VIEW_TYPE, NOTEBOOK_KERNEL_SELECTED, NOTEBOOK_KERNEL]));
     }
 
     protected cellDisposables = new DisposableCollection();
@@ -123,12 +113,8 @@ export class NotebookContextManager {
             this.cellDisposables.push(cell.onDidRequestCellEditChange(cellEdit => {
                 this.scopedStore.setContext(NOTEBOOK_CELL_MARKDOWN_EDIT_MODE, cellEdit);
                 this.scopedStore.setContext(NOTEBOOK_CELL_EDITABLE, cell.cellKind === CellKind.Markup && !cellEdit);
-                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_MARKDOWN_EDIT_MODE]));
             }));
         }
-
-        this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_TYPE]));
-
     }
 
     protected setCellContext(cellHandle: number, key: string, value: unknown): void {

package/src/browser/view/notebook-cell-list-view.tsx

@@ -19,7 +19,7 @@ import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookCellToolbarFactory } from './notebook-cell-toolbar-factory';
 import { animationFrame, onDomEvent } from '@theia/core/lib/browser';
-import { CommandRegistry, DisposableCollection, MenuModelRegistry, MenuNode, nls } from '@theia/core';
+import { CommandMenu, CommandRegistry, DisposableCollection, MenuModelRegistry, nls } from '@theia/core';
 import { NotebookCommands, NotebookMenus } from '../contributions/notebook-actions-contribution';
 import { NotebookCellActionContribution } from '../contributions/notebook-cell-actions-contribution';
 import { NotebookContextManager } from '../service/notebook-context-manager';
@@ -126,7 +126,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                         <NotebookCellDivider
                             menuRegistry={this.props.menuRegistry}
                             isVisible={() => this.isEnabled()}
-                            onAddNewCell={(commandId: string) => this.onAddNewCell(commandId, index)}
+                            onAddNewCell={handler => this.onAddNewCell(handler, index)}
                             onDrop={e => this.onDrop(e, index)}
                             onDragOver={e => this.onDragOver(e, cell, 'top')} />
                         <CellDropIndicator visible={this.shouldRenderDragOverIndicator(cell, 'top')} />
@@ -173,7 +173,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
             <NotebookCellDivider
                 menuRegistry={this.props.menuRegistry}
                 isVisible={() => this.isEnabled()}
-                onAddNewCell={(commandId: string) => this.onAddNewCell(commandId, this.props.notebookModel.cells.length)}
+                onAddNewCell={handler => this.onAddNewCell(handler, this.props.notebookModel.cells.length)}
                 onDrop={e => this.onDrop(e, this.props.notebookModel.cells.length - 1)}
                 onDragOver={e => this.onDragOver(e, this.props.notebookModel.cells[this.props.notebookModel.cells.length - 1], 'bottom')} />
         </ul>;
@@ -255,10 +255,10 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
         this.setState({ ...this.state, dragOverIndicator: undefined });
     }
 
-    protected onAddNewCell(commandId: string, index: number): void {
+    protected onAddNewCell(handler: (...args: unknown[]) => void, index: number): void {
         if (this.isEnabled()) {
             this.props.commandRegistry.executeCommand(NotebookCommands.CHANGE_SELECTED_CELL.id, index - 1);
-            this.props.commandRegistry.executeCommand(commandId,
+            handler(
                 this.props.notebookModel,
                 index
             );
@@ -276,7 +276,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
 
 export interface NotebookCellDividerProps {
     isVisible: () => boolean;
-    onAddNewCell: (commandId: string) => void;
+    onAddNewCell: (createCommand: (...args: unknown[]) => void) => void;
     onDrop: (event: React.DragEvent<HTMLLIElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLLIElement>) => void;
     menuRegistry: MenuModelRegistry;
@@ -286,21 +286,28 @@ export function NotebookCellDivider({ isVisible, onAddNewCell, onDrop, onDragOve
     const [hover, setHover] = React.useState(false);
 
     const menuPath = NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_CELL_ADD_GROUP;
-    const menuItems = menuRegistry.getMenuNode(menuPath).children;
-
-    const renderItem = (item: MenuNode): React.ReactNode => <button
-        key={item.id}
-        className='theia-notebook-add-cell-button'
-        onClick={() => onAddNewCell(item.command || '')}
-        title={nls.localizeByDefault(`Add ${item.label} Cell`)}
-    >
-        <div className={item.icon + ' theia-notebook-add-cell-button-icon'} />
-        <div className='theia-notebook-add-cell-button-text'>{item.label}</div>
-    </button>;
+    const menuItems: CommandMenu[] = menuRegistry.getMenu(menuPath).children.filter(item => CommandMenu.is(item)).map(item => item as CommandMenu);
+
+    const renderItem = (item: CommandMenu): React.ReactNode => {
+        const execute = (...args: unknown[]) => {
+            if (CommandMenu.is(item)) {
+                item.run([...menuPath, item.id], ...args);
+            }
+        };
+        return <button
+            key={item.id}
+            className='theia-notebook-add-cell-button'
+            onClick={() => onAddNewCell(execute)}
+            title={nls.localizeByDefault(`Add ${item.label} Cell`)}
+        >
+            <div className={item.icon + ' theia-notebook-add-cell-button-icon'} />
+            <div className='theia-notebook-add-cell-button-text'>{item.label}</div>
+        </button>;
+    };
 
     return <li className='theia-notebook-cell-divider' onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onDrop={onDrop} onDragOver={onDragOver}>
         {hover && isVisible() && <div className='theia-notebook-add-cell-buttons'>
-            {menuItems.map((item: MenuNode) => renderItem(item))}
+            {menuItems.map((item: CommandMenu) => renderItem(item))}
         </div>}
     </li>;
 }

package/src/browser/view/notebook-cell-toolbar-factory.tsx

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import { CommandRegistry, CompoundMenuNodeRole, MenuModelRegistry, MenuNode } from '@theia/core';
+import { CommandMenu, CommandRegistry, CompoundMenuNode, DisposableCollection, Emitter, Event, MenuModelRegistry, MenuPath, RenderedMenuNode } from '@theia/core';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { NotebookCellSidebar, NotebookCellToolbar } from './notebook-cell-toolbar';
@@ -29,7 +29,6 @@ export interface NotebookCellToolbarItem {
     label?: string;
     onClick: (e: React.MouseEvent) => void;
     isVisible: () => boolean;
-    contextKeys?: Set<string>
 }
 
 export interface toolbarItemOptions {
@@ -55,48 +54,61 @@ export class NotebookCellToolbarFactory {
     @inject(NotebookContextManager)
     protected readonly notebookContextManager: NotebookContextManager;
 
+    protected readonly onDidChangeContextEmitter = new Emitter<void>;
+    readonly onDidChangeContext: Event<void> = this.onDidChangeContextEmitter.event;
+
+    protected toDisposeOnRender = new DisposableCollection();
+
     renderCellToolbar(menuPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): React.ReactNode {
         return <NotebookCellToolbar getMenuItems={() => this.getMenuItems(menuPath, cell, itemOptions)}
-            onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
+            onContextChanged={this.onDidChangeContext} />;
     }
 
     renderSidebar(menuPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): React.ReactNode {
         return <NotebookCellSidebar getMenuItems={() => this.getMenuItems(menuPath, cell, itemOptions)}
-            onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
+            onContextChanged={this.onDidChangeContext} />;
     }
 
     private getMenuItems(menuItemPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): NotebookCellToolbarItem[] {
+        this.toDisposeOnRender.dispose();
+        this.toDisposeOnRender = new DisposableCollection();
         const inlineItems: NotebookCellToolbarItem[] = [];
         for (const menuNode of this.menuRegistry.getMenu(menuItemPath).children) {
-            if (!menuNode.when || this.notebookContextManager.getCellContext(cell.handle).match(menuNode.when, this.notebookContextManager.context)) {
-                if (menuNode.role === CompoundMenuNodeRole.Flat) {
-                    inlineItems.push(...menuNode.children?.map(child => this.createToolbarItem(child, itemOptions)) ?? []);
-                } else {
-                    inlineItems.push(this.createToolbarItem(menuNode, itemOptions));
+
+            const itemPath = [...menuItemPath, menuNode.id];
+            if (menuNode.isVisible(itemPath, this.notebookContextManager.getCellContext(cell.handle), this.notebookContextManager.context, itemOptions.commandArgs?.() ?? [])) {
+                if (RenderedMenuNode.is(menuNode)) {
+                    if (menuNode.onDidChange) {
+                        this.toDisposeOnRender.push(menuNode.onDidChange(() => this.onDidChangeContextEmitter.fire()));
+                    }
+                    inlineItems.push(this.createToolbarItem(itemPath, menuNode, itemOptions));
                 }
             }
         }
         return inlineItems;
     }
 
-    private createToolbarItem(menuNode: MenuNode, itemOptions: toolbarItemOptions): NotebookCellToolbarItem {
-        const menuPath = menuNode.role === CompoundMenuNodeRole.Submenu ? this.menuRegistry.getPath(menuNode) : undefined;
+    private createToolbarItem(menuPath: MenuPath, menuNode: RenderedMenuNode, itemOptions: toolbarItemOptions): NotebookCellToolbarItem {
         return {
             id: menuNode.id,
             icon: menuNode.icon,
             label: menuNode.label,
-            onClick: menuPath ?
-                e => this.contextMenuRenderer.render(
-                    {
-                        anchor: e.nativeEvent,
-                        menuPath,
-                        includeAnchorArg: false,
-                        args: itemOptions.contextMenuArgs?.(),
-                        context: this.notebookContextManager.context || (e.currentTarget as HTMLElement)
-                    }) :
-                () => this.commandRegistry.executeCommand(menuNode.command!, ...(itemOptions.commandArgs?.() ?? [])),
-            isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, ...(itemOptions.commandArgs?.() ?? []))),
-            contextKeys: menuNode.when ? this.contextKeyService.parseKeys(menuNode.when) : undefined
+            onClick: e => {
+                if (CompoundMenuNode.is(menuNode)) {
+                    this.contextMenuRenderer.render(
+                        {
+                            anchor: e.nativeEvent,
+                            menuPath: menuPath,
+                            menu: menuNode,
+                            includeAnchorArg: false,
+                            args: itemOptions.contextMenuArgs?.(),
+                            context: this.notebookContextManager.context || (e.currentTarget as HTMLElement)
+                        });
+                } else if (CommandMenu.is(menuNode)) {
+                    menuNode.run(menuPath, ...(itemOptions.commandArgs?.() ?? []));
+                };
+            },
+            isVisible: () => true
         };
     }
 }

package/src/browser/view/notebook-cell-toolbar.tsx

@@ -17,11 +17,10 @@ import * as React from '@theia/core/shared/react';
 import { ACTION_ITEM } from '@theia/core/lib/browser';
 import { NotebookCellToolbarItem } from './notebook-cell-toolbar-factory';
 import { DisposableCollection, Event } from '@theia/core';
-import { ContextKeyChangeEvent } from '@theia/core/lib/browser/context-key-service';
 
 export interface NotebookCellToolbarProps {
     getMenuItems: () => NotebookCellToolbarItem[];
-    onContextKeysChanged: Event<ContextKeyChangeEvent>;
+    onContextChanged: Event<void>;
 }
 
 interface NotebookCellToolbarState {
@@ -34,11 +33,9 @@ abstract class NotebookCellActionBar extends React.Component<NotebookCellToolbar
 
     constructor(props: NotebookCellToolbarProps) {
         super(props);
-        this.toDispose.push(props.onContextKeysChanged(e => {
+        this.toDispose.push(props.onContextChanged(e => {
             const menuItems = this.props.getMenuItems();
-            if (menuItems.some(item => item.contextKeys ? e.affects(item.contextKeys) : false)) {
-                this.setState({ inlineItems: menuItems });
-            }
+            this.setState({ inlineItems: menuItems });
         }));
         this.state = { inlineItems: this.props.getMenuItems() };
     }

package/src/browser/view/notebook-main-toolbar.tsx

@@ -13,7 +13,7 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { ArrayUtils, CommandRegistry, CompoundMenuNodeRole, DisposableCollection, MenuModelRegistry, MenuNode, nls } from '@theia/core';
+import { ArrayUtils, CommandMenu, CommandRegistry, DisposableCollection, Group, GroupImpl, MenuModelRegistry, MenuNode, MenuPath, nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
 import { codicon, ContextMenuRenderer } from '@theia/core/lib/browser';
 import { NotebookCommands, NotebookMenus } from '../contributions/notebook-actions-contribution';
@@ -21,7 +21,6 @@ import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookKernelService } from '../service/notebook-kernel-service';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
-import { NotebookCommand } from '../../common';
 import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface NotebookMainToolbarProps {
@@ -97,19 +96,12 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         }));
 
         // TODO maybe we need a mechanism to check for changes in the menu to update this toolbar
-        const contextKeys = new Set<string>();
-        this.getAllContextKeys(this.getMenuItems(), contextKeys);
-        props.notebookContextManager.onDidChangeContext(e => {
-            if (e.affects(contextKeys)) {
-                this.forceUpdate();
-            }
-        });
-        props.contextKeyService.onDidChange(e => {
-            if (e.affects(contextKeys)) {
-                this.forceUpdate();
+        const menuItems = this.getMenuItems();
+        for (const item of menuItems) {
+            if (item.onDidChange) {
+                item.onDidChange(() => this.forceUpdate());
             }
-        });
-
+        }
     }
 
     override componentWillUnmount(): void {
@@ -137,14 +129,16 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
 
     protected renderContextMenu(event: MouseEvent, menuItems: readonly MenuNode[]): void {
         const hiddenItems = menuItems.slice(menuItems.length - this.calculateNumberOfHiddenItems(menuItems));
-        const contextMenu = this.props.menuRegistry.getMenu([NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_HIDDEN_ITEMS_CONTEXT_MENU]);
 
-        contextMenu.children.map(item => item.id).forEach(id => contextMenu.removeNode(id));
-        hiddenItems.forEach(item => contextMenu.addNode(item));
+        const menu = new GroupImpl(NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_HIDDEN_ITEMS_CONTEXT_MENU[0]);
+
+        hiddenItems.forEach(item => menu.addNode(item));
 
         this.props.contextMenuRenderer.render({
             anchor: event,
-            menuPath: [NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_HIDDEN_ITEMS_CONTEXT_MENU],
+            menuPath: NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_HIDDEN_ITEMS_CONTEXT_MENU,
+            menu: menu,
+            contextKeyService: this.props.contextKeyService,
             context: this.props.editorNode,
             args: [this.props.notebookModel.uri]
         });
@@ -153,7 +147,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
     override render(): React.ReactNode {
         const menuItems = this.getMenuItems();
         return <div className='theia-notebook-main-toolbar' id='notebook-main-toolbar'>
-            {menuItems.slice(0, menuItems.length - this.calculateNumberOfHiddenItems(menuItems)).map(item => this.renderMenuItem(item))}
+            {menuItems.slice(0, menuItems.length - this.calculateNumberOfHiddenItems(menuItems)).map(item => this.renderMenuItem(NotebookMenus.NOTEBOOK_MAIN_TOOLBAR, item))}
             {
                 this.state.numberOfHiddenItems > 0 &&
                 <span className={`${codicon('ellipsis')} action-label theia-notebook-main-toolbar-item`} onClick={e => this.renderContextMenu(e.nativeEvent, menuItems)} />
@@ -180,51 +174,31 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         }
     }
 
-    protected renderMenuItem(item: MenuNode, submenu?: string): React.ReactNode {
-        if (item.role === CompoundMenuNodeRole.Group) {
-            const itemNodes = ArrayUtils.coalesce(item.children?.map(child => this.renderMenuItem(child, item.id)) ?? []);
+    protected renderMenuItem<T>(itemPath: MenuPath, item: MenuNode, submenu?: string): React.ReactNode {
+        if (Group.is(item)) {
+            const itemNodes = ArrayUtils.coalesce(item.children?.map(child => this.renderMenuItem([...itemPath, child.id], child, item.id)) ?? []);
             return <React.Fragment key={item.id}>
                 {itemNodes}
                 {itemNodes && itemNodes.length > 0 && <span key={`${item.id}-separator`} className='theia-notebook-toolbar-separator'></span>}
             </React.Fragment>;
-        } else if ((this.nativeSubmenus.includes(submenu ?? '')) || !item.when || this.props.contextKeyService.match(item.when, this.props.editorNode)) {
-            const visibleCommand = Boolean(this.props.commandRegistry.getVisibleHandler(item.command ?? '', this.props.notebookModel));
-            if (!visibleCommand) {
-                return undefined;
-            }
-            const command = this.props.commandRegistry.getCommand(item.command ?? '') as NotebookCommand | undefined;
-            const label = command?.shortTitle ?? item.label;
-            const title = command?.tooltip ?? item.label;
-            return <div key={item.id} id={item.id} title={title} className={`theia-notebook-main-toolbar-item action-label${this.getAdditionalClasses(item)}`}
+        } else if (CommandMenu.is(item) && ((this.nativeSubmenus.includes(submenu ?? '')) || item.isVisible(itemPath, this.props.contextKeyService, this.props.editorNode))) {
+            return <div key={item.id} id={item.id} title={item.label} className={`theia-notebook-main-toolbar-item action-label${this.getAdditionalClasses(itemPath, item)}`}
                 onClick={() => {
-                    if (item.command && (!item.when || this.props.contextKeyService.match(item.when, this.props.editorNode))) {
-                        this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel.uri);
-                    }
+                    item.run(itemPath, this.props.notebookModel.uri);
                 }}>
                 <span className={item.icon} />
-                <span className='theia-notebook-main-toolbar-item-text'>{label}</span>
+                <span className='theia-notebook-main-toolbar-item-text'>{item.label}</span>
             </div>;
         }
         return undefined;
     }
 
     protected getMenuItems(): readonly MenuNode[] {
-        const menuPath = NotebookMenus.NOTEBOOK_MAIN_TOOLBAR;
-        const pluginCommands = this.props.menuRegistry.getMenuNode(menuPath).children;
-        const theiaCommands = this.props.menuRegistry.getMenu([menuPath]).children;
-        return theiaCommands.concat(pluginCommands);
+        return this.props.menuRegistry.getMenu(NotebookMenus.NOTEBOOK_MAIN_TOOLBAR).children;
     }
 
-    protected getAdditionalClasses(item: MenuNode): string {
-        return !item.when || this.props.contextKeyService.match(item.when, this.props.editorNode) ? '' : ' theia-mod-disabled';
-    }
-
-    protected getAllContextKeys(menus: readonly MenuNode[], keySet: Set<string>): void {
-        menus.filter(item => item.when)
-            .forEach(item => this.props.contextKeyService.parseKeys(item.when!)?.forEach(key => keySet.add(key)));
-
-        menus.filter(item => item.children && item.children.length > 0)
-            .forEach(item => this.getAllContextKeys(item.children!, keySet));
+    protected getAdditionalClasses(itemPath: MenuPath, item: CommandMenu): string {
+        return item.isEnabled(itemPath, this.props.editorNode) ? '' : ' theia-mod-disabled';
     }
 
     protected calculateNumberOfHiddenItems(allMenuItems: readonly MenuNode[]): number {