Fix toolbar buttons for notebook (#50)

* Fix toolbar buttons for share/download position,

restore add Text button,
use themed icon for download caret

* Update Playwright Snapshots

* Try to fix download icon

* Update Playwright Snapshots

* Trigger CI

* Update Playwright Snapshots

* Trigger CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: krassowski

schema/plugin.json

@@ -51,6 +51,14 @@
         "name": "restart-and-run",
         "caption": "Restart and run all cells"
       },
+      {
+        "name": "share",
+        "rank": 35
+      },
+      {
+        "name": "downloadDropdown",
+        "rank": 36
+      },
       {
         "name": "cellType",
         "command": "",
@@ -70,8 +78,13 @@
       },
       {
         "name": "insert-text",
-        "command": "jupytereverywhere:insert-markdown-cell",
-        "disabled": false,
+        "command": "apputils:run-all-enabled",
+        "args": {
+          "commands": ["notebook:insert-cell-below", "notebook:change-cell-to-markdown"],
+          "args": {
+            "toolbar": true
+          }
+        },
         "rank": 13,
         "icon": "ui-components:add",
         "label": "Text"

src/icons.ts

@@ -24,6 +24,7 @@ import runSvg from '../style/icons/run.svg';
 import refreshSvg from '../style/icons/refresh.svg';
 import stopSvg from '../style/icons/stop.svg';
 import fastForwardSvg from '../style/icons/fast-forward.svg';
+import downloadCaretSvg from '../style/icons/download-caret.svg';
 
 export namespace EverywhereIcons {
   // Overwrite Jupyter default icons
@@ -80,4 +81,8 @@ export namespace EverywhereIcons {
     name: 'everywhere:logo',
     svgstr: logoSvg
   });
+  export const downloadCaret = new LabIcon({
+    name: 'everywhere:download-caret',
+    svgstr: downloadCaretSvg
+  });
 }

src/pages/notebook.tsx

@@ -2,15 +2,19 @@ import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application'
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { SidebarIcon } from '../ui-components/SidebarIcon';
 import { EverywhereIcons } from '../icons';
-import { ToolbarButton } from '@jupyterlab/apputils';
+import { ToolbarButton, IToolbarWidgetRegistry } from '@jupyterlab/apputils';
 import { DownloadDropdownButton } from '../ui-components/DownloadDropdownButton';
 import { Commands } from '../commands';
 
 export const notebookPlugin: JupyterFrontEndPlugin<void> = {
   id: 'jupytereverywhere:notebook',
   autoStart: true,
-  requires: [INotebookTracker],
-  activate: (app: JupyterFrontEnd, tracker: INotebookTracker) => {
+  requires: [INotebookTracker, IToolbarWidgetRegistry],
+  activate: (
+    app: JupyterFrontEnd,
+    tracker: INotebookTracker,
+    toolbarRegistry: IToolbarWidgetRegistry
+  ) => {
     const { commands, shell } = app;
     const contents = app.serviceManager.contents;
 
@@ -82,51 +86,24 @@ export const notebookPlugin: JupyterFrontEndPlugin<void> = {
     app.shell.activateById(sidebarItem.id);
     app.restored.then(() => app.shell.activateById(sidebarItem.id));
 
-    /**
-     * Create a "Share" button
-     */
-    const shareButton = new ToolbarButton({
-      label: 'Share',
-      icon: EverywhereIcons.link,
-      tooltip: 'Share this notebook',
-      onClick: () => {
-        void commands.execute(Commands.shareNotebookCommand);
-      }
-    });
-
-    /**
-     * Create the Download dropdown
-     */
-    const downloadDropdownButton = new DownloadDropdownButton(commands);
+    toolbarRegistry.addFactory(
+      'Notebook',
+      'downloadDropdown',
+      () => new DownloadDropdownButton(commands)
+    );
 
-    tracker.widgetAdded.connect((_, notebookPanel) => {
-      if (notebookPanel) {
-        // Look for the right position to insert the buttons (after the run buttons)
-        let insertIndex = 5;
-        const toolbar = notebookPanel.toolbar;
-
-        Array.from(toolbar.names()).forEach((name, index) => {
-          if (name === 'run-all') {
-            insertIndex = index + 1;
+    toolbarRegistry.addFactory(
+      'Notebook',
+      'share',
+      () =>
+        new ToolbarButton({
+          label: 'Share',
+          icon: EverywhereIcons.link,
+          tooltip: 'Share this notebook',
+          onClick: () => {
+            void commands.execute(Commands.shareNotebookCommand);
           }
-        });
-
-        // Add download dropdown button
-        try {
-          toolbar.insertItem(insertIndex, 'downloadDropdownButton', downloadDropdownButton);
-          insertIndex++;
-        } catch (error) {
-          toolbar.addItem('downloadDropdownButton', downloadDropdownButton);
-        }
-
-        // Add the share button
-        try {
-          toolbar.insertItem(insertIndex, 'shareButton', shareButton);
-        } catch (error) {
-          // Fallback: add at the end
-          toolbar.addItem('shareButton', shareButton);
-        }
-      }
-    });
+        })
+    );
   }
 };

src/ui-components/DownloadDropdownButton.tsx

@@ -1,7 +1,8 @@
-import { ReactWidget, ToolbarButtonComponent, caretDownIcon } from '@jupyterlab/ui-components';
+import { ReactWidget, ToolbarButtonComponent } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Menu } from '@lumino/widgets';
 import React from 'react';
+import { EverywhereIcons } from '../icons';
 
 export class DownloadDropdownButton extends ReactWidget {
   constructor(commands: CommandRegistry) {
@@ -19,7 +20,7 @@ export class DownloadDropdownButton extends ReactWidget {
     return (
       <ToolbarButtonComponent
         className="je-DownloadButton"
-        icon={caretDownIcon}
+        icon={EverywhereIcons.downloadCaret}
         label="Download"
         tooltip="Download notebook"
         onClick={this._showMenu.bind(this)}