Reuse commands for notebook toolbar items

packages/apputils/src/toolbar/registry.ts

@@ -108,11 +108,11 @@ export function createDefaultFactory(
         return new CommandToolbarButton({
           commands,
           id: toolbarItem.command ?? '',
-          args: { ...toolbarItem.args, toolbar: true },
+          args: { toolbar: true, ...toolbarItem.args },
           icon: toolbarItem.icon
             ? LabIcon.resolve({ icon: toolbarItem.icon })
             : undefined,
-          label: toolbarItem.label
+          label: toolbarItem.label ?? ''
         });
       case 'spacer':
         return Toolbar.createSpacerItem();

packages/apputils/src/toolbar/widget.tsx

@@ -369,6 +369,8 @@ export class Toolbar<T extends Widget = Widget> extends Widget {
 export namespace Toolbar {
   /**
    * Create an interrupt toolbar item.
+   *
+   * @deprecated since version 3.1
    */
   export function createInterruptButton(
     sessionContext: ISessionContext,
@@ -387,6 +389,8 @@ export namespace Toolbar {
 
   /**
    * Create a restart toolbar item.
+   *
+   * @deprecated since version 3.1
    */
   export function createRestartButton(
     sessionContext: ISessionContext,
@@ -678,7 +682,7 @@ namespace Private {
     const _icon = options.icon ?? commands.icon(id, args);
     const icon = _icon === iconClass ? undefined : _icon;
 
-    const label = options.label ?? commands.label(id, args);
+    const label = commands.label(id, args);
     let className = commands.className(id, args);
     // Add the boolean state classes.
     if (commands.isToggled(id, args)) {
@@ -687,7 +691,9 @@ namespace Private {
     if (!commands.isVisible(id, args)) {
       className += ' lm-mod-hidden';
     }
-    let tooltip = commands.caption(id, args) || label || iconLabel;
+
+    let tooltip =
+      commands.caption(id, args) || options.label || label || iconLabel;
     // Shows hot keys in tooltips
     const binding = commands.keyBindings.find(b => b.command === id);
     if (binding) {
@@ -699,7 +705,15 @@ namespace Private {
     };
     const enabled = commands.isEnabled(id, args);
 
-    return { className, icon, iconClass, tooltip, onClick, enabled, label };
+    return {
+      className,
+      icon,
+      iconClass,
+      tooltip,
+      onClick,
+      enabled,
+      label: options.label ?? label
+    };
   }
 
   /**

packages/docmanager-extension/package.json

@@ -48,10 +48,14 @@
     "@jupyterlab/settingregistry": "^3.1.0-beta.0",
     "@jupyterlab/statusbar": "^3.1.0-beta.0",
     "@jupyterlab/translation": "^3.1.0-beta.0",
+    "@jupyterlab/ui-components": "^3.1.0-beta.0",
     "@lumino/algorithm": "^1.3.3",
+    "@lumino/commands": "^1.12.0",
     "@lumino/coreutils": "^1.5.3",
     "@lumino/disposable": "^1.4.3",
-    "@lumino/widgets": "^1.19.0"
+    "@lumino/signaling": "^1.4.3",
+    "@lumino/widgets": "^1.19.0",
+    "react": "^17.0.1"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",

packages/docmanager-extension/src/index.ts → packages/docmanager-extension/src/index.tsx

@@ -12,11 +12,16 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 import {
+  addCommandToolbarButtonClass,
+  CommandToolbarButtonComponent,
   Dialog,
   ICommandPalette,
   ISessionContextDialogs,
+  IToolbarWidgetRegistry,
+  ReactWidget,
   showDialog,
-  showErrorMessage
+  showErrorMessage,
+  UseSignal
 } from '@jupyterlab/apputils';
 import { IChangedArgs, Time } from '@jupyterlab/coreutils';
 import {
@@ -33,10 +38,14 @@ import { Contents, Kernel } from '@jupyterlab/services';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStatusBar } from '@jupyterlab/statusbar';
 import { ITranslator, TranslationBundle } from '@jupyterlab/translation';
+import { saveIcon } from '@jupyterlab/ui-components';
 import { each, map, some, toArray } from '@lumino/algorithm';
+import { CommandRegistry } from '@lumino/commands';
 import { JSONExt } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
+import { ISignal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
+import * as React from 'react';
 
 /**
  * The command IDs used by the document manager plugin.
@@ -94,7 +103,8 @@ const docManagerPlugin: JupyterFrontEndPlugin<IDocumentManager> = {
     ICommandPalette,
     ILabShell,
     ISessionContextDialogs,
-    IDocumentProviderFactory
+    IDocumentProviderFactory,
+    IToolbarWidgetRegistry
   ],
   activate: (
     app: JupyterFrontEnd,
@@ -445,6 +455,35 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
 ];
 export default plugins;
 
+/**
+ * Toolbar item factory
+ */
+export namespace ToolbarItems {
+  /**
+   * Create save button toolbar item.
+   *
+   */
+  export function createSaveButton(
+    commands: CommandRegistry,
+    fileChanged: ISignal<any, Contents.IModel>
+  ): Widget {
+    return addCommandToolbarButtonClass(
+      ReactWidget.create(
+        <UseSignal signal={fileChanged}>
+          {() => (
+            <CommandToolbarButtonComponent
+              commands={commands}
+              id={CommandIDs.save}
+              label={''}
+              args={{ toolbar: true }}
+            />
+          )}
+        </UseSignal>
+      )
+    );
+  }
+}
+
 /* Widget to display the revert to checkpoint confirmation. */
 class RevertConfirmWidget extends Widget {
   /**
@@ -678,11 +717,13 @@ function addCommands(
   commands.addCommand(CommandIDs.save, {
     label: () => trans.__('Save %1', fileType(shell.currentWidget, docManager)),
     caption: trans.__('Save and create checkpoint'),
+    icon: args => (args.toolbar ? saveIcon : ''),
     isEnabled: isWritable,
     execute: () => {
       // Checks that shell.currentWidget is valid:
       if (isEnabled()) {
-        const context = docManager.contextForWidget(shell.currentWidget!);
+        const widget = shell.currentWidget;
+        const context = docManager.contextForWidget(widget!);
         if (!context) {
           return showDialog({
             title: trans.__('Cannot Save'),
@@ -700,7 +741,11 @@ function addCommands(
 
           return context
             .save(true)
-            .then(() => context!.createCheckpoint())
+            .then(() => {
+              if (!widget?.isDisposed) {
+                return context!.createCheckpoint();
+              }
+            })
             .catch(err => {
               // If the save was canceled by user-action, do nothing.
               // FIXME-TRANS: Is this using the text on the button or?

packages/docmanager-extension/style/index.css

@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/statusbar/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');

packages/docmanager-extension/style/index.js

@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 import '@lumino/widgets/style/index.js';
+import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/apputils/style/index.js';
 import '@jupyterlab/statusbar/style/index.js';
 import '@jupyterlab/docregistry/style/index.js';

packages/docmanager-extension/tsconfig.json

@@ -4,7 +4,9 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/*"],
+  "include": [
+    "src/*"
+  ],
   "references": [
     {
       "path": "../application"
@@ -35,6 +37,9 @@
     },
     {
       "path": "../translation"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/mainmenu-extension/package.json

@@ -45,6 +45,7 @@
     "@jupyterlab/services": "^6.1.0-beta.0",
     "@jupyterlab/settingregistry": "^3.1.0-beta.0",
     "@jupyterlab/translation": "^3.1.0-beta.0",
+    "@jupyterlab/ui-components": "^3.1.0-beta.0",
     "@lumino/algorithm": "^1.3.3",
     "@lumino/coreutils": "^1.5.3",
     "@lumino/disposable": "^1.4.3",

packages/mainmenu-extension/src/index.ts

@@ -33,6 +33,12 @@ import {
 import { ServerConnection } from '@jupyterlab/services';
 import { ISettingRegistry, SettingRegistry } from '@jupyterlab/settingregistry';
 import { ITranslator, TranslationBundle } from '@jupyterlab/translation';
+import {
+  fastForwardIcon,
+  refreshIcon,
+  runIcon,
+  stopIcon
+} from '@jupyterlab/ui-components';
 import { each, find } from '@lumino/algorithm';
 import { JSONExt } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
@@ -450,6 +456,8 @@ export function createKernelMenu(
 
   commands.addCommand(CommandIDs.interruptKernel, {
     label: trans.__('Interrupt Kernel'),
+    caption: trans.__('Interrupt the kernel'),
+    icon: args => (args.toolbar ? stopIcon : undefined),
     isEnabled: Private.delegateEnabled(
       app,
       menu.kernelUsers,
@@ -470,6 +478,8 @@ export function createKernelMenu(
 
   commands.addCommand(CommandIDs.restartKernel, {
     label: trans.__('Restart Kernel…'),
+    caption: trans.__('Restart the kernel'),
+    icon: args => (args.toolbar ? refreshIcon : undefined),
     isEnabled: Private.delegateEnabled(app, menu.kernelUsers, 'restartKernel'),
     execute: Private.delegateExecute(app, menu.kernelUsers, 'restartKernel')
   });
@@ -621,6 +631,16 @@ export function createRunMenu(
       const enabled = Private.delegateEnabled(app, menu.codeRunners, 'run')();
       return enabled ? localizedLabel : trans.__('Run Selected');
     },
+    caption: () => {
+      const localizedCaption = Private.delegateLabel(
+        app,
+        menu.codeRunners,
+        'runCaption'
+      );
+      const enabled = Private.delegateEnabled(app, menu.codeRunners, 'run')();
+      return enabled ? localizedCaption : trans.__('Run Selected');
+    },
+    icon: args => (args.toolbar ? runIcon : undefined),
     isEnabled: Private.delegateEnabled(app, menu.codeRunners, 'run'),
     execute: Private.delegateExecute(app, menu.codeRunners, 'run')
   });
@@ -642,6 +662,22 @@ export function createRunMenu(
       }
       return localizedLabel;
     },
+    caption: () => {
+      let localizedCaption = trans.__('Run All');
+      const enabled = Private.delegateEnabled(
+        app,
+        menu.codeRunners,
+        'runAll'
+      )();
+      if (enabled) {
+        localizedCaption = Private.delegateLabel(
+          app,
+          menu.codeRunners,
+          'runAllCaption'
+        );
+      }
+      return localizedCaption;
+    },
     isEnabled: Private.delegateEnabled(app, menu.codeRunners, 'runAll'),
     execute: Private.delegateExecute(app, menu.codeRunners, 'runAll')
   });
@@ -662,6 +698,23 @@ export function createRunMenu(
       }
       return localizedLabel;
     },
+    caption: () => {
+      let localizedCaption = trans.__('Restart Kernel and Run All');
+      const enabled = Private.delegateEnabled(
+        app,
+        menu.codeRunners,
+        'restartAndRunAll'
+      )();
+      if (enabled) {
+        localizedCaption = Private.delegateLabel(
+          app,
+          menu.codeRunners,
+          'restartAndRunAllLabel'
+        );
+      }
+      return localizedCaption;
+    },
+    icon: args => (args.toolbar ? fastForwardIcon : undefined),
     isEnabled: Private.delegateEnabled(
       app,
       menu.codeRunners,

packages/mainmenu-extension/style/index.css

@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/mainmenu/style/index.css');

packages/mainmenu-extension/style/index.js

@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 import '@lumino/widgets/style/index.js';
+import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/apputils/style/index.js';
 import '@jupyterlab/application/style/index.js';
 import '@jupyterlab/mainmenu/style/index.js';

packages/mainmenu-extension/tsconfig.json

@@ -4,7 +4,9 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/*"],
+  "include": [
+    "src/*"
+  ],
   "references": [
     {
       "path": "../application"
@@ -26,6 +28,9 @@
     },
     {
       "path": "../translation"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/mainmenu/src/kernel.ts

@@ -86,7 +86,7 @@ export namespace IKernelMenu {
      * A function to return the label associated to the `restartKernelAndClear` action.
      *
      * This function receives the number of items `n` to be able to provided
-     * correct pluralized forms of tranlsations.
+     * correct pluralized forms of translations.
      */
     restartKernelAndClearLabel?: (n: number) => string;
   }