@oceanum/oceanumlab 4.7.1 → 4.8.0

package/src/share/upload.ts

@@ -0,0 +1,27 @@
+/**
+ * Ask the user for a notebook file on their computer; null if they cancel.
+ *
+ * Kept apart from the plugin because it is browser-only: the tests replace it.
+ */
+export function chooseNotebookFile(): Promise<File | null> {
+  return new Promise(resolve => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.ipynb,application/x-ipynb+json';
+    input.hidden = true;
+    // Attached while the picker is open: some browsers (Safari) drop the `change`
+    // event of a detached input, or collect the input before it fires.
+    document.body.appendChild(input);
+    const settle = (file: File | null): void => {
+      input.remove();
+      resolve(file);
+    };
+    input.addEventListener('change', () => settle(input.files?.[0] ?? null), {
+      once: true
+    });
+    // Browsers fire `cancel` when the picker is dismissed; without it the promise
+    // would simply never settle, which is harmless.
+    input.addEventListener('cancel', () => settle(null), { once: true });
+    input.click();
+  });
+}

package/src/share/widgets.ts

@@ -0,0 +1,217 @@
+import { Clipboard, Dialog } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+
+import type { PermissionGrant, ShareChoice } from './client';
+import { ISpecSummary, parseShareEmails, parseTimestamp } from './notebook';
+
+function element<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  className: string,
+  text?: string
+): HTMLElementTagNameMap[K] {
+  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
+  implements Dialog.IBodyWidget<string | null>
+{
+  constructor(mine: readonly ISpecSummary[], shared: readonly ISpecSummary[]) {
+    super();
+    this.addClass('jp-OceanumShare-body');
+    this._addSection('My notebooks', mine, false);
+    this._addSection('Shared with me', shared, true);
+  }
+
+  getValue(): string | null {
+    return this._selected;
+  }
+
+  private _addSection(
+    title: string,
+    items: readonly ISpecSummary[],
+    showCreator: boolean
+  ): void {
+    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);
+  }
+
+  private _select(id: string, option: HTMLElement): void {
+    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));
+    }
+  }
+
+  private _selected: string | null = null;
+}
+
+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: PermissionGrant = {
+  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
+  implements Dialog.IBodyWidget<ShareChoice | null>
+{
+  constructor(link: string) {
+    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(): ShareChoice | null {
+    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
+    };
+  }
+
+  private _radio(
+    name: string,
+    text: string,
+    checked: boolean
+  ): HTMLInputElement {
+    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;
+  }
+
+  private static _count = 0;
+  private readonly _person: HTMLInputElement;
+  private readonly _everyone: HTMLInputElement;
+  private readonly _stopEveryone: HTMLInputElement;
+  private readonly _email: HTMLTextAreaElement;
+  private readonly _level: HTMLSelectElement;
+}

package/style/index.css

@@ -43,17 +43,26 @@
   color: var(--jp-ui-font-color1);
 }
 
+/* Headers within the panel's tabs (Datamesh Workspace and the workspace name, Oceanum
+ * AI, My notebooks / Shared with me) share one text style: bold, standard case. */
+.datamesh-workspace-header,
+.datamesh-workspace-name,
+.oceanum-ai-chat-header,
+.oceanum-notebooks-heading {
+  font-weight: 600;
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  letter-spacing: 0.5px;
+  text-transform: none;
+}
+
 /* Datamesh Workspace section header */
 .datamesh-workspace-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  font-weight: 600;
-  font-size: var(--jp-ui-font-size0);
-  color: var(--jp-ui-font-color2);
   background: var(--jp-layout-color1);
-  letter-spacing: 0.5px;
 }
 
 .add-connection {
@@ -78,13 +87,9 @@
 
 .datamesh-workspace-name {
   flex: 0 0 auto;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
   padding: 8px 8px 8px 12px;
   margin: 0;
   margin-bottom: 10px;
-  font-size: var(--jp-ui-font-size1);
 }
 
 .datasource-item-expand,
@@ -224,12 +229,8 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-weight: bold;
-  font-size: var(--jp-ui-font-size1);
   padding: 6px 10px;
-  color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color2);
-  letter-spacing: 0.5px;
 }
 
 .oceanum-ai-chat-title {
@@ -257,8 +258,13 @@
   white-space: nowrap;
 }
 
+/* The thread takes only the height it needs, so the input sits under the last message
+ * rather than at the foot of the tab with a gap between them. `min-height: 0` is what
+ * lets it shrink past its content once the thread is taller than the space there is:
+ * without it a flex item refuses to, and the input would be pushed out of the panel. */
 .oceanum-ai-chat-messages {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
+  min-height: 0;
   overflow-y: auto;
   padding: 6px 8px;
   display: flex;
@@ -586,9 +592,6 @@
   display: flex;
   justify-content: space-between;
   padding: 6px 8px 2px;
-  color: var(--jp-ui-font-color2);
-  font-size: var(--jp-ui-font-size0);
-  text-transform: uppercase;
 }
 
 .oceanum-notebooks-list {
@@ -597,7 +600,8 @@
   list-style: none;
 }
 
-.oceanum-notebooks-item {
+.oceanum-notebooks-item,
+.oceanum-notebooks-example {
   display: block;
   width: 100%;
   padding: 4px 8px;
@@ -610,7 +614,8 @@
   cursor: pointer;
 }
 
-.oceanum-notebooks-item:hover {
+.oceanum-notebooks-item:hover,
+.oceanum-notebooks-example:hover {
   background: var(--jp-layout-color2);
 }
 
@@ -618,10 +623,107 @@
   cursor: default;
 }
 
+.oceanum-notebooks-actions {
+  padding: 6px 8px 2px;
+}
+
+.oceanum-notebooks-upload {
+  padding: 3px 8px;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border-radius: var(--jp-border-radius);
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  cursor: pointer;
+}
+
+.oceanum-notebooks-upload:hover {
+  background: var(--jp-layout-color2);
+}
+
 .oceanum-notebooks-item-static:hover {
   background: transparent;
 }
 
+/* The Examples heading's count and show/hide switch, kept together on the right. */
+.oceanum-notebooks-heading-end {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* The Examples show/hide switch (a button with role="switch"). */
+.oceanum-notebooks-switch {
+  position: relative;
+  flex: none;
+  width: 24px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  border-radius: 7px;
+  background: var(--jp-layout-color3);
+  cursor: pointer;
+}
+
+.oceanum-notebooks-switch[aria-checked='true'] {
+  background: var(--jp-brand-color1);
+}
+
+.oceanum-notebooks-switch:focus-visible {
+  outline: 1px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.oceanum-notebooks-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--jp-layout-color0);
+  transition: left 0.1s ease;
+}
+
+.oceanum-notebooks-switch[aria-checked='true'] .oceanum-notebooks-switch-thumb {
+  left: 12px;
+}
+
+/* Forced colours replace backgrounds, which would leave a switch drawn only with them
+   invisible: draw it with system colours instead. */
+@media (forced-colors: active) {
+  .oceanum-notebooks-switch {
+    forced-color-adjust: none;
+    box-sizing: border-box;
+    border: 1px solid ButtonText;
+    background: Canvas;
+  }
+
+  .oceanum-notebooks-switch[aria-checked='true'] {
+    background: Highlight;
+  }
+
+  .oceanum-notebooks-switch-thumb {
+    top: 1px;
+    left: 1px;
+    background: ButtonText;
+  }
+
+  .oceanum-notebooks-switch[aria-checked='true']
+    .oceanum-notebooks-switch-thumb {
+    left: 11px;
+    background: HighlightText;
+  }
+}
+
+/* A group within Examples: quieter than the tab's section headings. */
+.oceanum-notebooks-subheading {
+  padding: 4px 8px 0;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}
+
 .oceanum-notebooks-name {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -633,3 +735,95 @@
   color: var(--jp-error-color1);
   font-size: var(--jp-ui-font-size1);
 }
+
+/* Open from Oceanum and Share on Oceanum dialogs (src/share/widgets.ts). */
+.jp-OceanumShare-body {
+  min-width: 320px;
+  max-width: 560px;
+}
+
+.jp-OceanumShare-heading {
+  margin: 12px 0 6px;
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 600;
+}
+
+.jp-OceanumShare-heading:first-child {
+  margin-top: 0;
+}
+
+.jp-OceanumShare-empty,
+.jp-OceanumShare-hint {
+  margin: 0 0 6px;
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-OceanumShare-list {
+  max-height: 240px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+.jp-OceanumShare-item {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 8px;
+  cursor: pointer;
+}
+
+.jp-OceanumShare-item:hover {
+  background: var(--jp-layout-color2);
+}
+
+.jp-OceanumShare-item.jp-mod-selected {
+  background: var(--jp-brand-color3);
+}
+
+.jp-OceanumShare-meta {
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}
+
+.jp-OceanumShare-linkRow,
+.jp-OceanumShare-personRow {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.jp-OceanumShare-linkRow > :first-child,
+.jp-OceanumShare-personRow > :first-child {
+  flex: 1;
+}
+
+/* A textarea so several addresses fit; without this it would default to monospace. */
+.jp-OceanumShare-email {
+  font: inherit;
+  resize: vertical;
+}
+
+/* Keep the access select beside the first line of addresses, not centred against them. */
+.jp-OceanumShare-personRow {
+  align-items: flex-start;
+}
+
+.jp-OceanumShare-choice {
+  display: block;
+  margin: 6px 0;
+}
+
+.jp-OceanumShare-choice input[type='radio'] {
+  width: auto;
+  height: auto;
+  margin: 0 4px 0 0;
+  appearance: auto;
+}
+
+.jp-OceanumShare-warning {
+  margin: 0 0 0 20px;
+  color: var(--jp-warn-color0);
+}

package/lib/specStore.d.ts

@@ -1,37 +0,0 @@
-/**
- * Reading the Oceanum spec store's `notebook` records.
- *
- * Deliberately small: only what the Stored notebooks tab needs. oceanum-notebook's
- * share-oceanum package has a fuller client (create, update, permissions), and when
- * sharing moves here the two should become one rather than sitting side by side.
- */
-/** A spec store list entry. The list omits the notebook body. */
-export interface ISpecSummary {
-    id: string;
-    name: string;
-    description: string | null;
-    /** Set when the record is created and never updated, so this is a creation time. */
-    modified: string;
-    /** Null unless the caller created the record: the store hides other creators. */
-    creator: string | null;
-}
-/**
- * Every notebook the signed-in user may read: their own and those shared with them.
- *
- * The store answers an unauthenticated caller with an empty list rather than an error,
- * so a missing token is indistinguishable from an empty account — callers should check
- * they are signed in before showing "no notebooks".
- */
-export declare function listNotebooks(specsUrl: string, token: string, fetcher?: typeof fetch): Promise<ISpecSummary[]>;
-/**
- * Split a listing into the caller's own notebooks and the rest, newest first.
- *
- * The store only sends `creator` on records the caller created, so anything else it
- * returns is shared with them — directly, or because it is public. Addresses are
- * compared case-insensitively: the store matches entities as case-sensitive globs, so
- * the two sides can differ in case.
- */
-export declare function partitionNotebooks(items: readonly ISpecSummary[], email: string | null): {
-    mine: ISpecSummary[];
-    shared: ISpecSummary[];
-};

package/lib/specStore.js

@@ -1,57 +0,0 @@
-/**
- * Reading the Oceanum spec store's `notebook` records.
- *
- * Deliberately small: only what the Stored notebooks tab needs. oceanum-notebook's
- * share-oceanum package has a fuller client (create, update, permissions), and when
- * sharing moves here the two should become one rather than sitting side by side.
- */
-function isSummary(value) {
-    if (typeof value !== 'object' || value === null) {
-        return false;
-    }
-    const v = value;
-    return (typeof v.id === 'string' &&
-        typeof v.name === 'string' &&
-        typeof v.modified === 'string');
-}
-/**
- * Every notebook the signed-in user may read: their own and those shared with them.
- *
- * The store answers an unauthenticated caller with an empty list rather than an error,
- * so a missing token is indistinguishable from an empty account — callers should check
- * they are signed in before showing "no notebooks".
- */
-export async function listNotebooks(specsUrl, token, fetcher = fetch) {
-    const url = `${specsUrl.replace(/\/+$/, '')}/specs/notebook`;
-    const response = await fetcher(url, {
-        headers: { Authorization: `Bearer ${token}` }
-    });
-    if (!response.ok) {
-        // The store answers a bad or expired token with 400, and 403 both for no access
-        // and for a record that does not exist.
-        throw new Error(`Oceanum.io returned HTTP ${response.status}.`);
-    }
-    const data = await response.json();
-    if (!Array.isArray(data)) {
-        throw new Error('Oceanum.io returned an unexpected response.');
-    }
-    return data.filter(isSummary);
-}
-/**
- * Split a listing into the caller's own notebooks and the rest, newest first.
- *
- * The store only sends `creator` on records the caller created, so anything else it
- * returns is shared with them — directly, or because it is public. Addresses are
- * compared case-insensitively: the store matches entities as case-sensitive globs, so
- * the two sides can differ in case.
- */
-export function partitionNotebooks(items, email) {
-    var _a;
-    const me = (_a = email === null || email === void 0 ? void 0 : email.toLowerCase()) !== null && _a !== void 0 ? _a : null;
-    const sorted = [...items].sort((a, b) => b.modified.localeCompare(a.modified));
-    const isMine = (item) => { var _a; return me !== null && ((_a = item.creator) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === me; };
-    return {
-        mine: sorted.filter(isMine),
-        shared: sorted.filter(item => !isMine(item))
-    };
-}