@oceanum/oceanumlab 4.7.0 → 4.7.1

package/src/DatameshWidget.tsx

@@ -21,6 +21,9 @@ import React from 'react';
 import { marked } from 'marked';
 
 import { DatasourceItem } from './DatasourceItem';
+import { IOceanumAuth } from './auth/tokens';
+import { StoredNotebooks } from './StoredNotebooks';
+import { ITab, Tabs } from './Tabs';
 import {
   SIGN_IN_COMMAND,
   aiBackendUrl,
@@ -476,7 +479,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 +496,7 @@ 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. */
+  /** The backend address: the deployment's Oceanum AI. */
   backend: string;
 }
 
@@ -583,8 +586,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 +945,74 @@ 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,
+  selected,
+  onSelect
+}: {
+  auth: IOceanumAuth | null;
+  commands: CommandRegistry;
+  settings: IAiSettings;
+  renderDatamesh: () => React.ReactElement;
+  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} />
+        ) : (
+          <div className="oceanum-text-empty">
+            Oceanum.io sign-in is not configured for this host.
+          </div>
+        )
+    },
+    { id: 'datamesh', label: 'Datamesh', render: renderDatamesh }
+  ];
+  if (access.source) {
+    tabs.push({
+      id: 'ai',
+      label: 'Oceanum AI',
+      render: () => <AIChatPanel commands={commands} settings={settings} />
+    });
+  }
+  return <Tabs tabs={tabs} selected={selected} onSelect={onSelect} />;
 }
 
 /**
@@ -1014,18 +1080,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 +1105,56 @@ 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()}
+              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';
 }

package/src/StoredNotebooks.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+
+import { IOceanumAuth } from './auth/tokens';
+import { ISpecSummary, listNotebooks, partitionNotebooks } from './specStore';
+
+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.
+   */
+  onOpen?: (item: ISpecSummary) => void;
+}
+
+type Load =
+  | { state: 'loading' }
+  | { state: 'error'; message: string }
+  | { state: 'ready'; items: ISpecSummary[] };
+
+function Section({
+  title,
+  items,
+  empty,
+  onOpen
+}: {
+  title: string;
+  items: readonly ISpecSummary[];
+  empty: string;
+  onOpen?: (item: ISpecSummary) => void;
+}): React.ReactElement {
+  return (
+    <div className="oceanum-notebooks-section">
+      <div className="oceanum-notebooks-heading">
+        {title}
+        <span className="oceanum-notebooks-count">{items.length}</span>
+      </div>
+      {items.length === 0 ? (
+        <div className="oceanum-text-empty">{empty}</div>
+      ) : (
+        <ul className="oceanum-notebooks-list">
+          {items.map(item => (
+            <li key={item.id}>
+              {/* Names come from other users: React escapes these, never set as HTML. */}
+              {onOpen ? (
+                <button
+                  type="button"
+                  className="oceanum-notebooks-item"
+                  onClick={() => onOpen(item)}
+                  title={item.description ?? undefined}
+                >
+                  <span className="oceanum-notebooks-name">
+                    {item.name || 'Untitled'}
+                  </span>
+                </button>
+              ) : (
+                <div
+                  className="oceanum-notebooks-item oceanum-notebooks-item-static"
+                  title={item.description ?? undefined}
+                >
+                  <span className="oceanum-notebooks-name">
+                    {item.name || 'Untitled'}
+                  </span>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The notebooks this user has stored on Oceanum.io, theirs and those shared with them.
+ */
+export function StoredNotebooks({
+  auth,
+  onOpen
+}: IStoredNotebooksProps): React.ReactElement {
+  const [load, setLoad] = React.useState<Load>({ state: 'loading' });
+  const [user, setUser] = React.useState(auth.user);
+
+  // Reload whenever the signed-in user changes, so signing in or out does not leave a
+  // stale list from the previous session on screen.
+  React.useEffect(() => {
+    const onUser = (): void => setUser(auth.user);
+    auth.userChanged.connect(onUser);
+    return () => {
+      auth.userChanged.disconnect(onUser);
+    };
+  }, [auth]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    const specs = auth.urls?.specs ?? null;
+    if (!user || !specs) {
+      setLoad({ state: 'ready', items: [] });
+      return;
+    }
+    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);
+        if (!cancelled) {
+          setLoad({ state: 'ready', items });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setLoad({
+            state: 'error',
+            message:
+              error instanceof Error
+                ? error.message
+                : 'Could not reach Oceanum.io.'
+          });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [auth, user]);
+
+  if (!user) {
+    return (
+      <div className="oceanum-text-empty">
+        Sign in to Oceanum.io to see your notebooks.
+      </div>
+    );
+  }
+  if (load.state === 'loading') {
+    return <div className="oceanum-text-empty">Loading…</div>;
+  }
+  if (load.state === 'error') {
+    // Never render the sections alongside an error: their empty messages would claim
+    // the account has no notebooks when the load simply failed.
+    return <div className="oceanum-text-error">{load.message}</div>;
+  }
+
+  const { mine, shared } = partitionNotebooks(load.items, user.email);
+  return (
+    <div className="oceanum-notebooks">
+      <Section
+        title="My notebooks"
+        items={mine}
+        empty="You have not saved any notebooks yet."
+        onOpen={onOpen}
+      />
+      <Section
+        title="Shared with me"
+        items={shared}
+        empty="No notebooks have been shared with you."
+        onOpen={onOpen}
+      />
+    </div>
+  );
+}

package/src/Tabs.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+
+export interface ITab {
+  /** Stable key, also used as the restored selection value. */
+  id: string;
+  label: string;
+  render: () => React.ReactElement;
+}
+
+export interface ITabsProps {
+  tabs: readonly ITab[];
+  /** Selected tab id. Falls back to the first tab when it names no tab. */
+  selected: string;
+  onSelect: (id: string) => void;
+}
+
+/**
+ * A tab strip over a single visible pane.
+ *
+ * JupyterLab users work from the keyboard, so the strip follows the WAI-ARIA tabs
+ * pattern: one tab stop for the whole strip, arrows to move between tabs, Home and End
+ * to reach the ends.
+ *
+ * Every pane stays mounted and the inactive ones are hidden. Unmounting would be
+ * cheaper, but the AI pane holds the conversation in component state and the Datamesh
+ * pane holds a workspace subscription, so switching tabs would silently discard a chat
+ * the user is in the middle of.
+ */
+export function Tabs({
+  tabs,
+  selected,
+  onSelect
+}: ITabsProps): React.ReactElement {
+  const index = Math.max(
+    0,
+    tabs.findIndex(tab => tab.id === selected)
+  );
+  const active = tabs[index];
+
+  const onKeyDown = (event: React.KeyboardEvent): void => {
+    const last = tabs.length - 1;
+    let next: number | null = null;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      next = index === last ? 0 : index + 1;
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      next = index === 0 ? last : index - 1;
+    } else if (event.key === 'Home') {
+      next = 0;
+    } else if (event.key === 'End') {
+      next = last;
+    }
+    if (next === null) {
+      return;
+    }
+    // Otherwise the arrow keys also scroll the panel.
+    event.preventDefault();
+    onSelect(tabs[next].id);
+  };
+
+  return (
+    <div className="oceanum-tabs">
+      <div
+        className="oceanum-tabs-strip"
+        role="tablist"
+        aria-label="Oceanum.io"
+      >
+        {tabs.map((tab, i) => (
+          <button
+            key={tab.id}
+            id={`oceanum-tab-${tab.id}`}
+            className={
+              i === index ? 'oceanum-tab oceanum-tab-selected' : 'oceanum-tab'
+            }
+            role="tab"
+            type="button"
+            aria-selected={i === index}
+            aria-controls={`oceanum-tabpanel-${tab.id}`}
+            // Only the selected tab is in the tab order, so Tab moves past the strip
+            // rather than through every tab in it.
+            tabIndex={i === index ? 0 : -1}
+            onClick={() => onSelect(tab.id)}
+            onKeyDown={onKeyDown}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {tabs.map(tab => (
+        <div
+          key={tab.id}
+          className="oceanum-tabpanel"
+          id={`oceanum-tabpanel-${tab.id}`}
+          role="tabpanel"
+          aria-labelledby={`oceanum-tab-${tab.id}`}
+          hidden={tab.id !== active.id}
+        >
+          {tab.render()}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/__tests__/DatameshWidget.spec.tsx

@@ -199,12 +199,16 @@ describe('DatameshConnectWidget: Oceanum AI with the host sign-in', () => {
     oceanum.setSignedIn(true);
     await until(() => expect(chat(node)).not.toBeNull());
     expect(notice(node)).toBeNull();
-    expect(requests).toEqual([
-      {
-        url: 'https://ai.example.test/api/capabilities',
-        headers: { Authorization: 'Bearer a-jwt' }
-      }
-    ]);
+    // Also awaited: the chat renders before the capabilities call resolves, so asserting
+    // this straight after the chat appears is a race that a slow run loses.
+    await until(() =>
+      expect(requests).toEqual([
+        {
+          url: 'https://ai.example.test/api/capabilities',
+          headers: { Authorization: 'Bearer a-jwt' }
+        }
+      ])
+    );
     // One token request for the capabilities, however many components watch.
     expect(oceanum.accessToken).toHaveBeenCalledTimes(1);
 
@@ -237,7 +241,9 @@ describe('DatameshConnectWidget: Oceanum AI with the host sign-in', () => {
     // Signing in is a change, not a poll: it may run the token command once.
     oceanum.setSignedIn(true);
     await until(() => expect(chat(node)).not.toBeNull());
-    expect(oceanum.executed).toEqual([ACCESS_TOKEN_COMMAND]);
+    // Awaited: the chat renders before the token command resolves, so asserting straight
+    // after it appears is a race that a slow run loses.
+    await until(() => expect(oceanum.executed).toEqual([ACCESS_TOKEN_COMMAND]));
 
     await settle(2000);
     expect(oceanum.executed).toEqual([ACCESS_TOKEN_COMMAND]);
@@ -248,7 +254,8 @@ describe('DatameshConnectWidget: Oceanum AI with the host sign-in', () => {
     const node = mount(oceanum.commands);
 
     await until(() => expect(chat(node)).not.toBeNull());
-    expect(requests).toHaveLength(1);
+    // Awaited: the capabilities request resolves separately from the chat rendering.
+    await until(() => expect(requests).toHaveLength(1));
 
     // The host refreshed the token and told the registry, as it does.
     oceanum.setToken('refreshed-jwt');
@@ -264,12 +271,15 @@ describe('DatameshConnectWidget: Oceanum AI with the host sign-in', () => {
     const node = mount(oceanum.commands, { pasted: 'pasted-token' });
 
     await until(() => expect(chat(node)).not.toBeNull());
-    expect(requests).toEqual([
-      {
-        url: 'https://ai.oceanum.io/api/capabilities',
-        headers: { 'X-Datamesh-Token': 'pasted-token' }
-      }
-    ]);
+    // Awaited: the capabilities request resolves separately from the chat rendering.
+    await until(() =>
+      expect(requests).toEqual([
+        {
+          url: 'https://ai.oceanum.io/api/capabilities',
+          headers: { 'X-Datamesh-Token': 'pasted-token' }
+        }
+      ])
+    );
     expect(oceanum.executed).toEqual([]);
   });
 
@@ -283,12 +293,15 @@ describe('DatameshConnectWidget: Oceanum AI with the host sign-in', () => {
     const node = mount(oceanum.commands, { pasted: '' });
 
     await until(() => expect(chat(node)).not.toBeNull());
-    expect(requests).toEqual([
-      {
-        url: 'https://ai.oceanum.io/api/capabilities',
-        headers: { Authorization: 'Bearer a-jwt' }
-      }
-    ]);
+    // Awaited: the capabilities request resolves separately from the chat rendering.
+    await until(() =>
+      expect(requests).toEqual([
+        {
+          url: 'https://ai.oceanum.io/api/capabilities',
+          headers: { Authorization: 'Bearer a-jwt' }
+        }
+      ])
+    );
   });
 
   it('keeps the chat hidden when the capabilities say there is no code', async () => {

package/src/__tests__/OceanumPanel.spec.tsx

@@ -0,0 +1,101 @@
+import { JupyterFrontEnd } from '@jupyterlab/application';
+import { CommandRegistry } from '@lumino/commands';
+import { Signal } from '@lumino/signaling';
+import { Widget } from '@lumino/widgets';
+import { LabIcon } from '@jupyterlab/ui-components';
+
+import { DatameshConnectWidget } from '../DatameshWidget';
+
+const icon = new LabIcon({
+  name: 'oceanum:test-icon',
+  svgstr: '<svg xmlns="http://www.w3.org/2000/svg"></svg>'
+});
+
+function panel(): DatameshConnectWidget {
+  const commands = new CommandRegistry();
+  const app = {
+    shell: { currentWidget: null },
+    commands
+  } as unknown as JupyterFrontEnd;
+  return new DatameshConnectWidget({
+    app,
+    name: 'Datamesh Connect',
+    icon,
+    openDatameshUI: (): void => undefined,
+    datameshUiUrl: () => 'https://ui.datamesh.example.com',
+    datameshUiFrame: (): Window | null => null,
+    datameshToken: () => '',
+    aiBackendUrl: () => 'https://ai.example.com',
+    settingsChanged: new Signal<unknown, void>({}),
+    commands,
+    getCurrentWidget: () => new Widget(),
+    auth: null
+  } as unknown as ConstructorParameters<typeof DatameshConnectWidget>[0]);
+}
+
+async function mount(): Promise<DatameshConnectWidget> {
+  const widget = panel();
+  Widget.attach(widget, document.body);
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return widget;
+}
+
+/**
+ * The panel used to render the Datamesh workspace and the AI chat one above the other.
+ * They are now tabs. `DatameshWidget.spec.tsx` covers the AI chat's behaviour but never
+ * touches the Datamesh surface, so nothing else here would notice if rearranging the
+ * two lost one of them.
+ */
+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
+    // same emptiness the panel showed before there were tabs, but now advertised.
+    const widget = await mount();
+    const labels = Array.from(widget.node.querySelectorAll('[role="tab"]')).map(
+      node => node.textContent
+    );
+
+    expect(labels).toEqual(['Notebooks', 'Datamesh']);
+    expect(widget.node.querySelector('#oceanum-tabpanel-ai')).toBeNull();
+
+    widget.dispose();
+  });
+
+  it('still renders the Datamesh workspace section', async () => {
+    const widget = await mount();
+
+    expect(
+      widget.node.querySelector('.datamesh-workspace-header')
+    ).not.toBeNull();
+    expect(
+      widget.node.querySelector('.datamesh-connect-workspace')
+    ).not.toBeNull();
+    expect(widget.node.textContent).toContain('Datamesh Workspace');
+
+    widget.dispose();
+  });
+
+  it('opens on Notebooks, and announces a change so it can be persisted', async () => {
+    const widget = await mount();
+    const seen: string[] = [];
+    widget.tabChanged.connect((_, id) => seen.push(id));
+
+    expect(widget.selectedTab).toBe('notebooks');
+    widget.selectTab('datamesh');
+    expect(widget.selectedTab).toBe('datamesh');
+    expect(seen).toEqual(['datamesh']);
+
+    // Selecting the same tab again is not a change.
+    widget.selectTab('datamesh');
+    expect(seen).toEqual(['datamesh']);
+
+    widget.dispose();
+  });
+
+  it('explains the Notebooks tab rather than failing when sign-in is unavailable', async () => {
+    // auth is null on a host with no Oceanum environment.
+    const widget = await mount();
+    expect(widget.node.textContent).toContain('sign-in is not configured');
+    widget.dispose();
+  });
+});