@oceanum/oceanumlab 4.7.1 → 4.7.2

package/lib/share/widgets.d.ts

@@ -0,0 +1,25 @@
+import { Dialog } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import type { ShareChoice } from './client';
+import { ISpecSummary } from './notebook';
+/** Dialog body listing notebooks to open; its value is the selected record id. */
+export declare class NotebookListBody extends Widget implements Dialog.IBodyWidget<string | null> {
+    constructor(mine: readonly ISpecSummary[], shared: readonly ISpecSummary[]);
+    getValue(): string | null;
+    private _addSection;
+    private _select;
+    private _selected;
+}
+export declare const EVERYONE_WARNING: string;
+/** Dialog body for sharing; its value is the change to make, or `null` if incomplete. */
+export declare class ShareBody extends Widget implements Dialog.IBodyWidget<ShareChoice | null> {
+    constructor(link: string);
+    getValue(): ShareChoice | null;
+    private _radio;
+    private static _count;
+    private readonly _person;
+    private readonly _everyone;
+    private readonly _stopEveryone;
+    private readonly _email;
+    private readonly _level;
+}

package/lib/share/widgets.js

@@ -0,0 +1,154 @@
+import { Clipboard } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import { parseShareEmails, parseTimestamp } from './notebook';
+function element(tag, className, text) {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text !== undefined) {
+        // Names and emails come from other users: always set text, never HTML.
+        node.textContent = text;
+    }
+    return node;
+}
+/** Dialog body listing notebooks to open; its value is the selected record id. */
+export class NotebookListBody extends Widget {
+    constructor(mine, shared) {
+        super();
+        this._selected = null;
+        this.addClass('jp-OceanumShare-body');
+        this._addSection('My notebooks', mine, false);
+        this._addSection('Shared with me', shared, true);
+    }
+    getValue() {
+        return this._selected;
+    }
+    _addSection(title, items, showCreator) {
+        this.node.appendChild(element('h3', 'jp-OceanumShare-heading', title));
+        if (items.length === 0) {
+            this.node.appendChild(element('p', 'jp-OceanumShare-empty', 'None'));
+            return;
+        }
+        const list = element('ul', 'jp-OceanumShare-list');
+        list.setAttribute('role', 'listbox');
+        list.setAttribute('aria-label', title);
+        for (const item of items) {
+            const option = element('li', 'jp-OceanumShare-item');
+            option.setAttribute('role', 'option');
+            option.setAttribute('aria-selected', 'false');
+            option.tabIndex = 0;
+            option.appendChild(element('span', 'jp-OceanumShare-name', item.name));
+            const modified = parseTimestamp(item.modified);
+            const details = [
+                modified ? `Modified ${modified.toLocaleDateString()}` : '',
+                showCreator && item.creator ? item.creator : ''
+            ].filter(Boolean);
+            option.appendChild(element('span', 'jp-OceanumShare-meta', details.join(' · ')));
+            const select = () => this._select(item.id, option);
+            option.addEventListener('click', select);
+            option.addEventListener('focus', select);
+            list.appendChild(option);
+        }
+        this.node.appendChild(list);
+    }
+    _select(id, option) {
+        this._selected = id;
+        for (const node of this.node.querySelectorAll('.jp-OceanumShare-item')) {
+            const selected = node === option;
+            node.classList.toggle('jp-mod-selected', selected);
+            node.setAttribute('aria-selected', String(selected));
+        }
+    }
+}
+export const EVERYONE_WARNING = 'Anyone with the link can read this notebook, including people without an Oceanum ' +
+    'account. This cannot be limited to your organisation. Its name and your email ' +
+    'address also become visible to anyone who lists Oceanum notebooks.';
+const PUBLIC_GRANT = {
+    type: 'public',
+    entity: '',
+    permission: 'read'
+};
+/** Dialog body for sharing; its value is the change to make, or `null` if incomplete. */
+export class ShareBody extends Widget {
+    constructor(link) {
+        super();
+        this.addClass('jp-OceanumShare-body');
+        this.node.appendChild(element('h3', 'jp-OceanumShare-heading', 'Link'));
+        const row = element('div', 'jp-OceanumShare-linkRow');
+        const linkInput = element('input', 'jp-OceanumShare-link');
+        linkInput.readOnly = true;
+        linkInput.value = link;
+        linkInput.setAttribute('aria-label', 'Notebook link');
+        const copy = element('button', 'jp-mod-styled jp-OceanumShare-copy', 'Copy link');
+        copy.type = 'button';
+        copy.addEventListener('click', () => {
+            Clipboard.copyToSystem(link);
+            copy.textContent = 'Copied';
+        });
+        row.append(linkInput, copy);
+        this.node.appendChild(row);
+        this.node.appendChild(element('p', 'jp-OceanumShare-hint', 'The link opens the notebook for anyone it is shared with.'));
+        this.node.appendChild(element('h3', 'jp-OceanumShare-heading', 'Share with'));
+        const name = `jp-OceanumShare-who-${++ShareBody._count}`;
+        this._person = this._radio(name, 'A specific person', true);
+        const personRow = element('div', 'jp-OceanumShare-personRow');
+        this._email = element('textarea', 'jp-OceanumShare-email');
+        this._email.rows = 2;
+        this._email.placeholder = 'name@example.com, another@example.com';
+        this._email.setAttribute('aria-label', 'Email addresses');
+        this._level = element('select', 'jp-OceanumShare-level');
+        this._level.setAttribute('aria-label', 'Access');
+        for (const [value, label] of [
+            ['read', 'can view'],
+            ['write', 'can edit']
+        ]) {
+            const option = element('option', '', label);
+            option.value = value;
+            this._level.appendChild(option);
+        }
+        personRow.append(this._email, this._level);
+        this.node.appendChild(personRow);
+        this.node.appendChild(element('p', 'jp-OceanumShare-hint', 
+        // Not "new lines": JupyterLab's dialog swallows Enter before it reaches the
+        // textarea, so one cannot be typed here. Pasted ones still separate addresses.
+        'Separate several addresses with commas or spaces. Everyone you add gets the access chosen here.'));
+        this._everyone = this._radio(name, 'Everyone with the link', false);
+        this.node.appendChild(element('p', 'jp-OceanumShare-warning', EVERYONE_WARNING));
+        this._stopEveryone = this._radio(name, 'Stop sharing with everyone', false);
+        const update = () => {
+            this._email.disabled = !this._person.checked;
+            this._level.disabled = !this._person.checked;
+        };
+        for (const radio of [this._person, this._everyone, this._stopEveryone]) {
+            radio.addEventListener('change', update);
+        }
+    }
+    getValue() {
+        if (this._everyone.checked) {
+            return { action: 'grant', grants: [PUBLIC_GRANT], invalid: [] };
+        }
+        if (this._stopEveryone.checked) {
+            return { action: 'revoke', grant: PUBLIC_GRANT };
+        }
+        const { emails, invalid } = parseShareEmails(this._email.value);
+        if (emails.length === 0 && invalid.length === 0) {
+            return null;
+        }
+        const permission = this._level.value === 'write' ? 'write' : 'read';
+        return {
+            action: 'grant',
+            grants: emails.map(entity => ({ type: 'user', entity, permission })),
+            invalid
+        };
+    }
+    _radio(name, text, checked) {
+        const label = element('label', 'jp-OceanumShare-choice');
+        const input = element('input', 'jp-OceanumShare-radio');
+        input.type = 'radio';
+        input.name = name;
+        input.checked = checked;
+        label.append(input, document.createTextNode(` ${text}`));
+        this.node.appendChild(label);
+        return input;
+    }
+}
+ShareBody._count = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oceanum/oceanumlab",
-    "version": "4.7.1",
+    "version": "4.7.2",
     "description": "A Jupyterlab extension to interact with the Oceanum.io platform",
     "keywords": [
         "jupyter",
@@ -62,12 +62,16 @@
         "@jupyterlab/cells": "^4.6.3",
         "@jupyterlab/console": "^4.6.3",
         "@jupyterlab/coreutils": "^6.6.3",
+        "@jupyterlab/docmanager": "^4.6.3",
+        "@jupyterlab/mainmenu": "^4.6.3",
+        "@jupyterlab/nbformat": "^4.6.3",
         "@jupyterlab/notebook": "^4.6.3",
         "@jupyterlab/services": "^7.6.3",
         "@jupyterlab/settingregistry": "^4.6.3",
         "@lumino/commands": "^2.3.3",
         "@lumino/coreutils": "^2.2.2",
         "@lumino/disposable": "^2.1.5",
+        "@lumino/messaging": "^2.0.3",
         "@lumino/signaling": "^2.1.5",
         "@lumino/widgets": "^2.8.0",
         "@phosphor-icons/react": "^2.1.10",

package/src/DatameshWidget.tsx

@@ -22,6 +22,7 @@ import { marked } from 'marked';
 
 import { DatasourceItem } from './DatasourceItem';
 import { IOceanumAuth } from './auth/tokens';
+import { startSignIn } from './auth/startSignIn';
 import { StoredNotebooks } from './StoredNotebooks';
 import { ITab, Tabs } from './Tabs';
 import {
@@ -29,6 +30,7 @@ import {
   aiBackendUrl,
   aiCredentialSource,
   canSignIn,
+  isSignedIn,
   pastedToken,
   resolveAiCredential,
   signInToken,
@@ -496,6 +498,8 @@ interface IAiAccess {
   pasted: string;
   /** Whether the host can sign the user in to Oceanum.io on this site. */
   canSignIn: boolean;
+  /** Whether the host says the user is signed in to Oceanum.io. */
+  signedIn: boolean;
   /** The backend address: the deployment's Oceanum AI. */
   backend: string;
 }
@@ -509,6 +513,7 @@ function readAiAccess(
     source: aiCredentialSource(datameshToken, commands),
     pasted: pastedToken(datameshToken),
     canSignIn: canSignIn(commands),
+    signedIn: isSignedIn(commands),
     backend: aiBackendUrl(settings.aiBackendUrl())
   };
 }
@@ -977,6 +982,7 @@ function PanelTabs({
   commands,
   settings,
   renderDatamesh,
+  openStoredNotebook,
   selected,
   onSelect
 }: {
@@ -984,6 +990,7 @@ function PanelTabs({
   commands: CommandRegistry;
   settings: IAiSettings;
   renderDatamesh: () => React.ReactElement;
+  openStoredNotebook?: (id: string) => void;
   selected: string;
   onSelect: (id: string) => void;
 }): React.ReactElement {
@@ -996,7 +1003,15 @@ function PanelTabs({
         // An auth with no environment is a provider that has nothing to sign in to (the
         // server has sign-in turned off). Asking the user to sign in would be a dead end.
         auth?.environment ? (
-          <StoredNotebooks auth={auth} />
+          <StoredNotebooks
+            auth={auth}
+            onOpen={openStoredNotebook && (item => openStoredNotebook(item.id))}
+            onSignIn={() => {
+              startSignIn(commands, auth).catch(error => {
+                console.warn('Oceanum.io sign-in could not start.', error);
+              });
+            }}
+          />
         ) : (
           <div className="oceanum-text-empty">
             Oceanum.io sign-in is not configured for this host.
@@ -1005,7 +1020,10 @@ function PanelTabs({
     },
     { id: 'datamesh', label: 'Datamesh', render: renderDatamesh }
   ];
-  if (access.source) {
+  // Signed in, not merely holding a credential: a Datamesh token pasted into the
+  // settings would reach the backend, but the tab stays out of the way until someone
+  // has signed in to Oceanum.io.
+  if (access.signedIn) {
     tabs.push({
       id: 'ai',
       label: 'Oceanum AI',
@@ -1128,6 +1146,7 @@ export class DatameshConnectWidget extends ReactWidget {
               commands={this.props.commands}
               settings={this.props}
               renderDatamesh={() => this.renderDatamesh()}
+              openStoredNotebook={this.props.openStoredNotebook}
               selected={this.selectedTab}
               onSelect={id => this.selectTab(id)}
             />

package/src/StoredNotebooks.tsx

@@ -1,16 +1,23 @@
 import * as React from 'react';
 
 import { IOceanumAuth } from './auth/tokens';
-import { ISpecSummary, listNotebooks, partitionNotebooks } from './specStore';
+import { SpecStoreClient } from './share/client';
+import { notebooksChanged } from './share/events';
+import { ISpecSummary, partitionSummaries } from './share/notebook';
+import { SPEC_ID_ATTRIBUTE } from './share/plugin';
 
 export interface IStoredNotebooksProps {
   auth: IOceanumAuth;
   /**
-   * Open a stored notebook, when this host can. Undefined where nothing has registered
-   * a way to open one — today that is native JupyterLab, which has no spec store drive
-   * until OCE-182. The list then reads rather than offering an action that does nothing.
+   * Open a stored notebook. Undefined where nothing has registered a way to open one;
+   * the list then reads rather than offering a click that does nothing.
    */
   onOpen?: (item: ISpecSummary) => void;
+  /**
+   * Start signing in the way this host shows it; without it the auth's own `signIn()`
+   * is used, which on a JupyterLab server shows no code dialog.
+   */
+  onSignIn?: () => void;
 }
 
 type Load =
@@ -29,6 +36,12 @@ function Section({
   empty: string;
   onOpen?: (item: ISpecSummary) => void;
 }): React.ReactElement {
+  // Each row carries its record id so the share plugin's context menu (Open, Rename,
+  // Share, Delete) can tell which one was clicked.
+  const rowAttributes = (item: ISpecSummary) => ({
+    [SPEC_ID_ATTRIBUTE]: item.id,
+    title: item.description ?? undefined
+  });
   return (
     <div className="oceanum-notebooks-section">
       <div className="oceanum-notebooks-heading">
@@ -47,7 +60,7 @@ function Section({
                   type="button"
                   className="oceanum-notebooks-item"
                   onClick={() => onOpen(item)}
-                  title={item.description ?? undefined}
+                  {...rowAttributes(item)}
                 >
                   <span className="oceanum-notebooks-name">
                     {item.name || 'Untitled'}
@@ -56,7 +69,7 @@ function Section({
               ) : (
                 <div
                   className="oceanum-notebooks-item oceanum-notebooks-item-static"
-                  title={item.description ?? undefined}
+                  {...rowAttributes(item)}
                 >
                   <span className="oceanum-notebooks-name">
                     {item.name || 'Untitled'}
@@ -76,18 +89,25 @@ function Section({
  */
 export function StoredNotebooks({
   auth,
-  onOpen
+  onOpen,
+  onSignIn
 }: IStoredNotebooksProps): React.ReactElement {
   const [load, setLoad] = React.useState<Load>({ state: 'loading' });
   const [user, setUser] = React.useState(auth.user);
+  // Bumped whenever the store changes, so the list is fetched again.
+  const [version, setVersion] = React.useState(0);
 
   // Reload whenever the signed-in user changes, so signing in or out does not leave a
-  // stale list from the previous session on screen.
+  // stale list from the previous session on screen; and whenever this extension has
+  // created, renamed or deleted a record.
   React.useEffect(() => {
     const onUser = (): void => setUser(auth.user);
+    const onChanged = (): void => setVersion(v => v + 1);
     auth.userChanged.connect(onUser);
+    notebooksChanged.connect(onChanged);
     return () => {
       auth.userChanged.disconnect(onUser);
+      notebooksChanged.disconnect(onChanged);
     };
   }, [auth]);
 
@@ -101,15 +121,11 @@ export function StoredNotebooks({
     setLoad({ state: 'loading' });
     void (async () => {
       try {
-        const token = await auth.getAccessToken();
-        if (cancelled) {
-          return;
-        }
-        if (!token) {
-          setLoad({ state: 'ready', items: [] });
-          return;
-        }
-        const items = await listNotebooks(specs, token);
+        const client = new SpecStoreClient({
+          specsUrl: specs,
+          getAccessToken: () => auth.getAccessToken()
+        });
+        const items = await client.list();
         if (!cancelled) {
           setLoad({ state: 'ready', items });
         }
@@ -128,12 +144,36 @@ export function StoredNotebooks({
     return () => {
       cancelled = true;
     };
-  }, [auth, user]);
+  }, [auth, user, version]);
 
   if (!user) {
+    const signIn = (): void => {
+      if (onSignIn) {
+        onSignIn();
+        return;
+      }
+      auth.signIn().catch(error => {
+        console.warn('Oceanum.io sign-in could not start.', error);
+      });
+    };
     return (
       <div className="oceanum-text-empty">
-        Sign in to Oceanum.io to see your notebooks.
+        {/* A link rather than a button to match the panel's other actions, so it
+            carries the role and the keys a button would have. */}
+        <a
+          role="button"
+          tabIndex={0}
+          onClick={signIn}
+          onKeyDown={event => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              signIn();
+            }
+          }}
+        >
+          Sign in
+        </a>{' '}
+        to Oceanum.io to see your notebooks.
       </div>
     );
   }
@@ -146,7 +186,7 @@ export function StoredNotebooks({
     return <div className="oceanum-text-error">{load.message}</div>;
   }
 
-  const { mine, shared } = partitionNotebooks(load.items, user.email);
+  const { mine, shared } = partitionSummaries(load.items, user.email);
   return (
     <div className="oceanum-notebooks">
       <Section

package/src/__tests__/OceanumPanel.spec.tsx

@@ -11,8 +11,27 @@ const icon = new LabIcon({
   svgstr: '<svg xmlns="http://www.w3.org/2000/svg"></svg>'
 });
 
-function panel(): DatameshConnectWidget {
+interface IPanelOptions {
+  /** The `datameshToken` setting value. */
+  token?: string;
+  /** Register the host's sign-in commands, and say whether someone is signed in. */
+  signedIn?: boolean;
+}
+
+function panel(options: IPanelOptions = {}): DatameshConnectWidget {
   const commands = new CommandRegistry();
+  if (options.signedIn !== undefined) {
+    // What the host provides: sign-out is visible only while signed in, which is how
+    // the sidebar reads the state without running anything.
+    commands.addCommand('oceanum-auth:sign-out', {
+      execute: () => undefined,
+      isVisible: () => options.signedIn === true
+    });
+    commands.addCommand('oceanum-auth:access-token', {
+      execute: () => null,
+      isVisible: () => false
+    });
+  }
   const app = {
     shell: { currentWidget: null },
     commands
@@ -24,7 +43,7 @@ function panel(): DatameshConnectWidget {
     openDatameshUI: (): void => undefined,
     datameshUiUrl: () => 'https://ui.datamesh.example.com',
     datameshUiFrame: (): Window | null => null,
-    datameshToken: () => '',
+    datameshToken: () => options.token ?? '',
     aiBackendUrl: () => 'https://ai.example.com',
     settingsChanged: new Signal<unknown, void>({}),
     commands,
@@ -33,8 +52,10 @@ function panel(): DatameshConnectWidget {
   } as unknown as ConstructorParameters<typeof DatameshConnectWidget>[0]);
 }
 
-async function mount(): Promise<DatameshConnectWidget> {
-  const widget = panel();
+async function mount(
+  options: IPanelOptions = {}
+): Promise<DatameshConnectWidget> {
+  const widget = panel(options);
   Widget.attach(widget, document.body);
   await new Promise(resolve => setTimeout(resolve, 100));
   return widget;
@@ -46,6 +67,19 @@ async function mount(): Promise<DatameshConnectWidget> {
  * touches the Datamesh surface, so nothing else here would notice if rearranging the
  * two lost one of them.
  */
+beforeAll(() => {
+  // The AI chat scrolls to its last message, and every pane renders whether or not it
+  // is the selected one. jsdom has no scrollIntoView, and the error would come back as
+  // React unmounting the whole sidebar.
+  (Element.prototype as unknown as Record<string, unknown>).scrollIntoView =
+    (): void => undefined;
+});
+
+const tabLabels = (widget: DatameshConnectWidget): (string | null)[] =>
+  Array.from(widget.node.querySelectorAll('[role="tab"]')).map(
+    node => node.textContent
+  );
+
 describe('the Oceanum panel', () => {
   it('offers no Oceanum AI tab when the chat has no credential', async () => {
     // AIChatPanel renders nothing without one, so a labelled tab would open on the
@@ -61,6 +95,28 @@ describe('the Oceanum panel', () => {
     widget.dispose();
   });
 
+  it('offers no Oceanum AI tab for a pasted token alone, until someone signs in', async () => {
+    // The token would reach the backend, but the tab waits for a sign-in.
+    const withToken = await mount({ token: 'a-datamesh-token' });
+    expect(tabLabels(withToken)).toEqual(['Notebooks', 'Datamesh']);
+    withToken.dispose();
+
+    const signedOut = await mount({
+      token: 'a-datamesh-token',
+      signedIn: false
+    });
+    expect(tabLabels(signedOut)).toEqual(['Notebooks', 'Datamesh']);
+    signedOut.dispose();
+  });
+
+  it('offers the Oceanum AI tab once the host says the user is signed in', async () => {
+    const widget = await mount({ signedIn: true });
+
+    expect(tabLabels(widget)).toEqual(['Notebooks', 'Datamesh', 'Oceanum AI']);
+
+    widget.dispose();
+  });
+
   it('still renders the Datamesh workspace section', async () => {
     const widget = await mount();