@theia/notebook 1.62.0-next.3 → 1.62.0

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 {