@oceanum/oceanumlab 4.7.0 → 4.7.2

package/src/StoredNotebooks.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+
+import { IOceanumAuth } from './auth/tokens';
+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. 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 =
+  | { 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 {
+  // 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">
+        {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)}
+                  {...rowAttributes(item)}
+                >
+                  <span className="oceanum-notebooks-name">
+                    {item.name || 'Untitled'}
+                  </span>
+                </button>
+              ) : (
+                <div
+                  className="oceanum-notebooks-item oceanum-notebooks-item-static"
+                  {...rowAttributes(item)}
+                >
+                  <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,
+  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; 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]);
+
+  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 client = new SpecStoreClient({
+          specsUrl: specs,
+          getAccessToken: () => auth.getAccessToken()
+        });
+        const items = await client.list();
+        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, 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">
+        {/* 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>
+    );
+  }
+  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 } = partitionSummaries(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,157 @@
+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>'
+});
+
+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
+  } 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: () => options.token ?? '',
+    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(
+  options: IPanelOptions = {}
+): Promise<DatameshConnectWidget> {
+  const widget = panel(options);
+  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.
+ */
+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
+    // 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('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();
+
+    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();
+  });
+});