add open in voila button

Author: trungleduc

package.json

@@ -57,7 +57,8 @@
     },
     "dependencies": {
         "@jupyterlab/application": "^4.0.0",
-        "@jupyterlab/filebrowser": "^4.5.6"
+        "@jupyterlab/filebrowser": "^4.5.6",
+        "@jupyterlab/notebook": "^4.5.6"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",

schema/open-in-voila-plugin.json

@@ -6,7 +6,7 @@
       {
         "command": "jupyter-ui-tweak/open-in-voila-command",
         "selector": ".jp-DirListing-item[data-file-type=\"notebook\"]",
-        "rank": 0
+        "rank": 3
       }
     ]
   },

src/index.ts

@@ -4,10 +4,11 @@ import {
 } from '@jupyterlab/application';
 import { IToolbarWidgetRegistry } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
-import { caretDownIcon, tabIcon } from '@jupyterlab/ui-components';
+import { caretDownIcon, launchIcon } from '@jupyterlab/ui-components';
 import { Menu, MenuBar } from '@lumino/widgets';
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { getVoilaUrl } from './tools';
+import { VoilaButton } from './voilabutton';
 const FILE_BROWSER_FACTORY = 'FileBrowser';
 
 /**
@@ -108,7 +109,7 @@ const openInVoila: JupyterFrontEndPlugin<void> = {
       caption: 'Open selected notebook in Voila',
       isEnabled: () => true,
       isVisible: () => true,
-      icon: tabIcon,
+      icon: launchIcon,
       execute: () => {
         const file = factory.tracker.currentWidget
           ?.selectedItems()
@@ -119,6 +120,11 @@ const openInVoila: JupyterFrontEndPlugin<void> = {
         }
       }
     });
+
+    const { commands, docRegistry } = app;
+
+    const voilaButton = new VoilaButton(commands);
+    docRegistry.addWidgetExtension('Notebook', voilaButton);
   }
 };
 

src/voilabutton.ts

@@ -0,0 +1,39 @@
+import { ToolbarButton } from '@jupyterlab/apputils';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { INotebookModel, NotebookPanel } from '@jupyterlab/notebook';
+import { CommandRegistry } from '@lumino/commands';
+import { IDisposable } from '@lumino/disposable';
+import { launchIcon } from '@jupyterlab/ui-components';
+
+export class VoilaButton implements DocumentRegistry.IWidgetExtension<
+  NotebookPanel,
+  INotebookModel
+> {
+  /**
+   * Instantiate a new VoilaRenderButton.
+   * @param commands The command registry.
+   */
+  constructor(commands: CommandRegistry) {
+    this._commands = commands;
+  }
+
+  /**
+   * Create a new extension object.
+   */
+  createNew(panel: NotebookPanel): IDisposable {
+    const button = new ToolbarButton({
+      tooltip: 'Open with Voilà',
+      className: 'jp-tweak-open-in-voila-button',
+      icon: launchIcon,
+      pressed: false,
+      noFocusOnClick: true,
+      onClick: () => {
+        this._commands.execute('notebook:open-with-voila');
+      }
+    });
+    panel.toolbar.insertAfter('cellType', 'openInVoila', button);
+    return button;
+  }
+
+  private _commands: CommandRegistry;
+}

style/base.css

@@ -3,3 +3,7 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+
+.jp-tweak-open-in-voila-button[aria-pressed='true'] {
+  box-shadow: none !important;
+}