@oceanum/oceanumlab 4.7.0 → 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.0",
+    "version": "4.7.2",
     "description": "A Jupyterlab extension to interact with the Oceanum.io platform",
     "keywords": [
         "jupyter",
@@ -60,8 +60,20 @@
         "@jupyterlab/application": "^4.6.3",
         "@jupyterlab/apputils": "^4.7.3",
         "@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",
         "marked": "^18.0.13"
     },

package/schema/datamesh-connect.json

@@ -18,18 +18,6 @@
       "description": "Inject Datamesh token into code.",
       "default": false
     },
-    "datameshUiUrl": {
-      "type": "string",
-      "title": "Datamesh UI URL",
-      "description": "Address of the Datamesh UI shown in the Datamesh panel. Use the address it is finally served from: the panel only accepts workspace updates from this address's origin, so an address that redirects to another origin will not update the workspace.",
-      "default": "https://ui.datamesh.oceanum.io"
-    },
-    "aiBackendUrl": {
-      "type": "string",
-      "title": "Oceanum AI URL",
-      "description": "Address of the Oceanum AI backend used by the AI chat.",
-      "default": "https://ai.oceanum.io"
-    },
     "autoRunCode": {
       "type": "boolean",
       "title": "Auto-run code",
@@ -43,5 +31,8 @@
       "default": false
     }
   },
+  "patternProperties": {
+    "^(datameshUiUrl|aiBackendUrl)$": {}
+  },
   "additionalProperties": false
 }

package/src/DatameshUI.tsx

@@ -3,20 +3,11 @@ import { ReactWidget } from '@jupyterlab/apputils';
 import { datameshUiSrc } from './datameshUiUrl';
 
 export class DatameshUI extends ReactWidget {
-  /** `url` is the `datameshUiUrl` setting. */
+  /** `url` is the deployment's Datamesh UI address (the sign-in environment's). */
   constructor(private _url: string) {
     super();
   }
 
-  /**
-   * Point the panel at the `datameshUiUrl` setting's new value. The iframe
-   * reloads only if its address actually changes.
-   */
-  set url(url: string) {
-    this._url = url;
-    this.update();
-  }
-
   /** The iframe's window, for telling its messages apart; `null` if none. */
   get frame(): Window | null {
     return this.node.querySelector('iframe')?.contentWindow ?? null;

package/src/DatameshWidget.tsx

@@ -21,11 +21,16 @@ import React from 'react';
 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 {
   SIGN_IN_COMMAND,
   aiBackendUrl,
   aiCredentialSource,
   canSignIn,
+  isSignedIn,
   pastedToken,
   resolveAiCredential,
   signInToken,
@@ -476,7 +481,7 @@ interface IAiSettings {
    * Not `window.datameshToken`, which keeps a token after it is cleared.
    */
   datameshToken: () => string;
-  /** The `aiBackendUrl` setting. */
+  /** The deployment's Oceanum AI address. */
   aiBackendUrl: () => string;
   /** Emitted when the settings change. */
   settingsChanged: ISignal<unknown, void>;
@@ -493,7 +498,9 @@ interface IAiAccess {
   pasted: string;
   /** Whether the host can sign the user in to Oceanum.io on this site. */
   canSignIn: boolean;
-  /** The backend address, from the `aiBackendUrl` setting. */
+  /** Whether the host says the user is signed in to Oceanum.io. */
+  signedIn: boolean;
+  /** The backend address: the deployment's Oceanum AI. */
   backend: string;
 }
 
@@ -506,6 +513,7 @@ function readAiAccess(
     source: aiCredentialSource(datameshToken, commands),
     pasted: pastedToken(datameshToken),
     canSignIn: canSignIn(commands),
+    signedIn: isSignedIn(commands),
     backend: aiBackendUrl(settings.aiBackendUrl())
   };
 }
@@ -583,8 +591,15 @@ function TokenConfigMessage({
 
   return (
     <div className="oceanum-token-config">
-      Set your <a onClick={openSettings}>Datamesh token</a> to enable Oceanum.io
-      services{' '}
+      Set your{' '}
+      <a
+        onClick={() =>
+          commands.execute('settingeditor:open', { query: 'Oceanum' })
+        }
+      >
+        Datamesh token
+      </a>{' '}
+      to enable Oceanum.io services{' '}
       <a
         href="https://home.oceanum.io/account"
         target="_blank"
@@ -935,18 +950,87 @@ export interface IDatameshWidgetProps {
   name: string;
   icon: LabIcon;
   openDatameshUI: any;
-  /** The `datameshUiUrl` setting. */
+  /** The deployment's Datamesh UI address. */
   datameshUiUrl: () => string;
   /** The Datamesh UI panel's iframe window; `null` when the panel is closed. */
   datameshUiFrame: () => Window | null;
   /** The `datameshToken` setting. */
   datameshToken: () => string;
-  /** The `aiBackendUrl` setting. */
+  /** The deployment's Oceanum AI address. */
   aiBackendUrl: () => string;
   /** Emitted when the settings change. */
   settingsChanged: ISignal<unknown, void>;
   commands: CommandRegistry;
   getCurrentWidget: () => Widget;
+  /** Oceanum.io sign-in, or null on a host with no Oceanum environment. */
+  auth?: IOceanumAuth | null;
+  /** Open a stored notebook by spec store id. */
+  openStoredNotebook?: (id: string) => void;
+}
+
+/**
+ * The panel's tabs.
+ *
+ * A component rather than a list built in `render`, because whether Oceanum AI is
+ * reachable is not static: `useAiAccess` re-reads it when the settings change and when
+ * the host signals a sign-in or sign-out. An AI tab is only offered when the chat has a
+ * credential to work with — otherwise it would open on the same nothing the panel
+ * rendered before there were tabs, except now with a label promising otherwise.
+ */
+function PanelTabs({
+  auth,
+  commands,
+  settings,
+  renderDatamesh,
+  openStoredNotebook,
+  selected,
+  onSelect
+}: {
+  auth: IOceanumAuth | null;
+  commands: CommandRegistry;
+  settings: IAiSettings;
+  renderDatamesh: () => React.ReactElement;
+  openStoredNotebook?: (id: string) => void;
+  selected: string;
+  onSelect: (id: string) => void;
+}): React.ReactElement {
+  const access = useAiAccess(commands, settings);
+  const tabs: ITab[] = [
+    {
+      id: 'notebooks',
+      label: 'Notebooks',
+      render: () =>
+        // 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}
+            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.
+          </div>
+        )
+    },
+    { id: 'datamesh', label: 'Datamesh', render: renderDatamesh }
+  ];
+  // 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',
+      render: () => <AIChatPanel commands={commands} settings={settings} />
+    });
+  }
+  return <Tabs tabs={tabs} selected={selected} onSelect={onSelect} />;
 }
 
 /**
@@ -1014,18 +1098,10 @@ export class DatameshConnectWidget extends ReactWidget {
     );
   }
 
-  render(): React.ReactElement {
+  /** The Datamesh workspace tab: what this panel showed above the divider. */
+  renderDatamesh(): React.ReactElement {
     return (
-      <div className="datamesh-connect">
-        <header className="oceanum-sidebar-header">
-          <this.props.icon.react
-            tag="span"
-            width="auto"
-            height="20px"
-            verticalAlign="middle"
-          />
-          <span className="oceanum-sidebar-title">Oceanum.io</span>
-        </header>
+      <>
         <div className="datamesh-workspace-header">
           <span>Datamesh Workspace</span>
           <div
@@ -1047,9 +1123,57 @@ export class DatameshConnectWidget extends ReactWidget {
             settings={this.props}
           />
         </div>
-        <div className="datamesh-connect-divider" />
-        <AIChatPanel commands={this.props.commands} settings={this.props} />
+      </>
+    );
+  }
+
+  render(): React.ReactElement {
+    return (
+      <div className="datamesh-connect">
+        <header className="oceanum-sidebar-header">
+          <this.props.icon.react
+            tag="span"
+            width="auto"
+            height="20px"
+            verticalAlign="middle"
+          />
+          <span className="oceanum-sidebar-title">Oceanum.io</span>
+        </header>
+        <UseSignal signal={this.tabChanged} initialArgs={this.selectedTab}>
+          {(): React.ReactElement => (
+            <PanelTabs
+              auth={this.props.auth ?? null}
+              commands={this.props.commands}
+              settings={this.props}
+              renderDatamesh={() => this.renderDatamesh()}
+              openStoredNotebook={this.props.openStoredNotebook}
+              selected={this.selectedTab}
+              onSelect={id => this.selectTab(id)}
+            />
+          )}
+        </UseSignal>
       </div>
     );
   }
+
+  /**
+   * The visible tab. The widget only holds it and announces changes through
+   * `tabChanged`; the plugin persists it in IStateDB, because the layout restorer
+   * restores a widget's place in the shell rather than fields on it.
+   */
+  get selectedTab(): string {
+    return this._selectedTab;
+  }
+
+  selectTab(id: string): void {
+    if (id !== this._selectedTab) {
+      this._selectedTab = id;
+      this.tabChanged.emit(id);
+    }
+  }
+
+  readonly tabChanged = new Signal<this, string>(this);
+  // Notebooks first: on notebook.oceanum.io this panel is how a user reaches their
+  // work, so it opens there rather than on Datamesh.
+  private _selectedTab = 'notebooks';
 }