Implement Nebari logo plugin

README.md

@@ -5,6 +5,11 @@
 
 Nebari customizations for JupyterLab.
 
+## Plugins
+
+- `jupyterlab-nebari-mode:logo`: replaces `@jupyterlab/application-extension:logo`, adding clickable Nebari logo:
+  ![](https://raw.githubusercontent.com/nebari-dev/jupyterlab-nebari-mode/main/ui-tests/tests/jupyterlab_nebari_mode.spec.ts-snapshots/top-panel-linux.png)
+
 ## Requirements
 
 - JupyterLab >= 4.0.0

package.json

@@ -94,6 +94,9 @@
         "access": "public"
     },
     "jupyterlab": {
+        "disabledExtensions": [
+            "@jupyterlab/application-extension:logo"
+        ],
         "extension": true,
         "outputDir": "jupyterlab_nebari_mode/labextension"
     },

src/icons.ts

@@ -0,0 +1,7 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+import nebariLogo from '../style/icons/nebari-logo.svg';
+
+export const nebariIcon = new LabIcon({
+  name: 'nebari:logo',
+  svgstr: nebariLogo
+});

src/index.ts

@@ -1,18 +1,68 @@
 import {
+  ILabShell,
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
+import { URLExt } from '@jupyterlab/coreutils';
+import { Widget } from '@lumino/widgets';
+import { nebariIcon } from './icons';
+
+class NebariLogo extends Widget {
+  constructor(options: { paths: JupyterFrontEnd.IPaths }) {
+    super();
+    const paths = options.paths;
+    const link = document.createElement('a');
+    const hubHost = paths.urls.hubHost || '';
+    const hubPrefix = paths.urls.hubPrefix || '';
+
+    link.href = hubHost + URLExt.join(hubPrefix, 'home');
+    link.target = '_blank';
+    link.className = 'nebariLogo-link';
+    this.node.appendChild(link);
+
+    nebariIcon.element({
+      container: link,
+      elementPosition: 'center',
+      margin: '2px 2px 2px 7px',
+      height: 'auto',
+      width: '22px',
+      title: 'Nebari Home'
+    });
+    this.id = 'jp-MainLogo';
+    this.node.addEventListener('pointerover', this);
+  }
+
+  handleEvent(event: Event) {
+    switch (event.type) {
+      case 'pointerover': {
+        const mainMenu = document.querySelector('#jp-MainMenu');
+        if (!(mainMenu instanceof HTMLElement)) {
+          return;
+        }
+        // Ensure main menu gets blurred to avoid confusing
+        // highlight on both the icon AND on the "File" menu entry.
+        mainMenu.dispatchEvent(new FocusEvent('focusout'));
+      }
+    }
+  }
+}
 
 /**
  * Initialization data for the jupyterlab-nebari-mode extension.
  */
-const plugin: JupyterFrontEndPlugin<void> = {
-  id: 'jupyterlab-nebari-mode:plugin',
-  description: 'Nebari customizations for JupyterLab.',
+const logoPlugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab-nebari-mode:logo',
+  description: 'Sets the application logo.',
   autoStart: true,
-  activate: (app: JupyterFrontEnd) => {
-    console.log('JupyterLab extension jupyterlab-nebari-mode is activated!');
+  requires: [ILabShell, JupyterFrontEnd.IPaths],
+  activate: (
+    app: JupyterFrontEnd,
+    shell: ILabShell,
+    paths: JupyterFrontEnd.IPaths
+  ) => {
+    const logo = new NebariLogo({ paths });
+    shell.add(logo, 'top', { rank: 0 });
   }
 };
 
-export default plugin;
+export default logoPlugin;

src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const script: string;
+  export default script;
+}

style/base.css

@@ -3,3 +3,17 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+
+.nebariLogo-link {
+  height: 100%;
+}
+
+.nebariLogo-link:hover {
+  background: var(--jp-layout-color2);
+}
+
+.nebariLogo-link:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: -3px;
+  outline-style: auto;
+}

ui-tests/tests/jupyterlab_nebari_mode.spec.ts

@@ -1,21 +1,28 @@
 import { expect, test } from '@jupyterlab/galata';
 
-/**
- * Don't load JupyterLab webpage before running the tests.
- * This is required to ensure we capture all log messages.
- */
-test.use({ autoGoto: false });
+test('should swap Jupyter logo with clickable Nebari logo', async ({
+  page
+}) => {
+  // Jupyter icon should not be in the main logo
+  const jupyterLogo = page.locator(
+    '#jp-MainLogo > [data-icon="ui-components:jupyter"]'
+  );
+  await expect(jupyterLogo).toHaveCount(0);
 
-test('should emit an activation console message', async ({ page }) => {
-  const logs: string[] = [];
+  // Nebari logo should be in the main logo
+  const link = page.locator('#jp-MainLogo > .nebariLogo-link');
+  await expect(link).toHaveCount(1);
 
-  page.on('console', message => {
-    logs.push(message.text());
-  });
+  // It should look nice and clean in the top panel
+  const topPanel = page.locator('#jp-top-panel');
+  expect.soft(await topPanel.screenshot()).toMatchSnapshot('top-panel.png');
 
-  await page.goto();
+  // Link should change background on hover
+  await link.hover();
+  expect.soft(await link.screenshot()).toMatchSnapshot('nebari-logo-hover.png');
+  await link.blur();
 
-  expect(
-    logs.filter(s => s === 'JupyterLab extension jupyterlab-nebari-mode is activated!')
-  ).toHaveLength(1);
+  // Link should have a focus indicator
+  await link.focus();
+  expect(await link.screenshot()).toMatchSnapshot('nebari-logo-focus.png');
 });