Repository: jupyterlab/retrolab (language: python)

Issue:
The icons for "Open with JupyterLab" and "Open with Classic Notebook" are too similar
Both use a Jupyter logo, and we need to wait for the tooltip to show in order to know which does what.


Discussion / hints:
Thanks @SylvainCorlay for opening the issue.

For extra context this is referring to the following buttons in the notebook toolbar:

![image](https://user-images.githubusercontent.com/591645/138750227-0bdff0fc-b0c5-4a6d-8129-6b813eb07b2c.png)
This issue has been mentioned on **Jupyter Community Forum**. There might be relevant details there:

https://discourse.jupyter.org/t/request-for-implementation-a-classic-jupyter-notebook-extension-for-easy-switching-between-lab-retrolab-classic-notebook-nteract/12292/1


Fix patch:
diff --git a/packages/lab-extension/package.json b/packages/lab-extension/package.json
index 88022dc7..e70c86fe 100644
--- a/packages/lab-extension/package.json
+++ b/packages/lab-extension/package.json
@@ -50,11 +50,9 @@
     "@jupyterlab/mainmenu": "^3.2.0",
     "@jupyterlab/notebook": "^3.2.0",
     "@jupyterlab/translation": "^3.2.0",
-    "@jupyterlab/ui-components": "^3.2.0",
     "@lumino/commands": "^1.15.0",
     "@lumino/disposable": "^1.7.0",
-    "@retrolab/application": "^0.3.13",
-    "@retrolab/ui-components": "^0.3.13"
+    "@retrolab/application": "^0.3.13"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3.2.0",
diff --git a/packages/lab-extension/src/index.ts b/packages/lab-extension/src/index.ts
index 71c3322d..ff3850cf 100644
--- a/packages/lab-extension/src/index.ts
+++ b/packages/lab-extension/src/index.ts
@@ -7,7 +7,7 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import { CommandToolbarButton, ICommandPalette } from '@jupyterlab/apputils';
+import { ICommandPalette } from '@jupyterlab/apputils';
 
 import { PageConfig } from '@jupyterlab/coreutils';
 
@@ -17,16 +17,10 @@ import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 
 import { ITranslator } from '@jupyterlab/translation';
 
-import {
-  jupyterIcon,
-  jupyterFaviconIcon,
-  LabIcon
-} from '@jupyterlab/ui-components';
+import { Menu, MenuBar } from '@lumino/widgets';
 
 import { IRetroShell } from '@retrolab/application';
 
-import { retroSunIcon } from '@retrolab/ui-components';
-
 /**
  * The command IDs used by the application plugin.
  */
@@ -56,7 +50,6 @@ interface ISwitcherChoice {
   command: string;
   commandLabel: string;
   buttonLabel: string;
-  icon: LabIcon;
   urlPrefix: string;
 }
 
@@ -84,13 +77,17 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
     labShell: ILabShell | null
   ) => {
     if (!notebookTracker) {
-      // to prevent showing the toolbar button in RetroLab
+      // to prevent showing the toolbar button in non-notebook pages
       return;
     }
 
     const { commands, shell } = app;
     const baseUrl = PageConfig.getBaseUrl();
     const trans = translator.load('retrolab');
+    const menubar = new MenuBar();
+    const switcher = new Menu({ commands });
+    switcher.title.label = trans.__('Interface');
+    menubar.addMenu(switcher);
 
     const isEnabled = () => {
       return (
@@ -100,11 +97,10 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
     };
 
     const addInterface = (option: ISwitcherChoice) => {
-      const { command, icon, buttonLabel, commandLabel, urlPrefix } = option;
+      const { command, commandLabel, urlPrefix } = option;
       commands.addCommand(command, {
         label: args => (args.noLabel ? '' : commandLabel),
         caption: commandLabel,
-        icon,
         execute: () => {
           const current = notebookTracker.currentWidget;
           if (!current) {
@@ -123,21 +119,7 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
         menu.viewMenu.addGroup([{ command }], 1);
       }
 
-      notebookTracker.widgetAdded.connect(
-        async (sender: INotebookTracker, panel: NotebookPanel) => {
-          panel.toolbar.insertBefore(
-            'kernelName',
-            buttonLabel,
-            new CommandToolbarButton({
-              commands,
-              id: command,
-              args: { noLabel: 1 }
-            })
-          );
-          await panel.context.ready;
-          commands.notifyCommandChanged();
-        }
-      );
+      switcher.addItem({ command });
     };
 
     // always add Classic
@@ -145,7 +127,6 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
       command: 'retrolab:open-classic',
       commandLabel: trans.__('Open With %1', 'Classic Notebook'),
       buttonLabel: 'openClassic',
-      icon: jupyterIcon,
       urlPrefix: `${baseUrl}tree/`
     });
 
@@ -154,7 +135,6 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
         command: 'retrolab:open-retro',
         commandLabel: trans.__('Open With %1', 'RetroLab'),
         buttonLabel: 'openRetro',
-        icon: retroSunIcon,
         urlPrefix: `${baseUrl}retro/tree/`
       });
     }
@@ -164,10 +144,17 @@ const launchButtons: JupyterFrontEndPlugin<void> = {
         command: 'retrolab:open-lab',
         commandLabel: trans.__('Open With %1', 'JupyterLab'),
         buttonLabel: 'openLab',
-        icon: jupyterFaviconIcon,
         urlPrefix: `${baseUrl}doc/tree/`
       });
     }
+
+    notebookTracker.widgetAdded.connect(
+      async (sender: INotebookTracker, panel: NotebookPanel) => {
+        panel.toolbar.insertBefore('kernelName', 'interface-switcher', menubar);
+        await panel.context.ready;
+        commands.notifyCommandChanged();
+      }
+    );
   }
 };
 
diff --git a/packages/lab-extension/tsconfig.json b/packages/lab-extension/tsconfig.json
index 34d11b40..b223e1a1 100644
--- a/packages/lab-extension/tsconfig.json
+++ b/packages/lab-extension/tsconfig.json
@@ -8,9 +8,6 @@
   "references": [
     {
       "path": "../application"
-    },
-    {
-      "path": "../ui-components"
     }
   ]
 }


Test patch:
diff --git a/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-chromium-linux.png b/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-chromium-linux.png
index 56d39531..f2efde38 100644
Binary files a/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-chromium-linux.png and b/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-chromium-linux.png differ
diff --git a/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-firefox-linux.png b/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-firefox-linux.png
index 5ebafe99..d9a2f58a 100644
Binary files a/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-firefox-linux.png and b/ui-tests/test/menus.spec.ts-snapshots/opened-menu-view-firefox-linux.png differ
diff --git a/ui-tests/test/mobile.spec.ts-snapshots/notebook-chromium-linux.png b/ui-tests/test/mobile.spec.ts-snapshots/notebook-chromium-linux.png
index 607e9330..e18f9117 100644
Binary files a/ui-tests/test/mobile.spec.ts-snapshots/notebook-chromium-linux.png and b/ui-tests/test/mobile.spec.ts-snapshots/notebook-chromium-linux.png differ
diff --git a/ui-tests/test/mobile.spec.ts-snapshots/notebook-firefox-linux.png b/ui-tests/test/mobile.spec.ts-snapshots/notebook-firefox-linux.png
index 82338d6f..540fc47d 100644
Binary files a/ui-tests/test/mobile.spec.ts-snapshots/notebook-firefox-linux.png and b/ui-tests/test/mobile.spec.ts-snapshots/notebook-firefox-linux.png differ