@oceanum/oceanumlab 4.7.0 → 4.7.2

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;
@@ -475,3 +481,250 @@
   border-top: 1px solid var(--jp-border-color2);
   margin: 0.5em 0;
 }
+
+/* Oceanum sign-in: the top-bar account control (src/auth/accountWidget.ts). */
+.oc-Account {
+  align-self: center;
+  margin: 0 8px;
+  padding: 2px 10px;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border-radius: 12px;
+  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);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.oc-Account:hover {
+  background: var(--jp-layout-color2);
+}
+
+.oc-Account:not(.oc-mod-signedIn) {
+  border-color: var(--jp-brand-color1);
+  color: var(--jp-brand-color1);
+}
+
+/* The sign-in dialog: the device code, and the link that confirms it. */
+.oc-SignIn {
+  max-width: 360px;
+}
+
+.oc-SignIn-code {
+  margin: 12px 0;
+  padding: 10px;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border-radius: 4px;
+  background: var(--jp-layout-color2);
+  font-family: var(--jp-code-font-family);
+  font-size: 22px;
+  letter-spacing: 3px;
+  text-align: center;
+  user-select: all;
+}
+
+.oc-SignIn-link {
+  display: block;
+  padding: 6px 12px;
+  border-radius: 2px;
+  text-align: center;
+  text-decoration: none;
+}
+
+.oc-SignIn-note {
+  margin-top: 12px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}
+
+/* The Oceanum side panel's tab strip (src/Tabs.tsx). */
+.oceanum-tabs {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.oceanum-tabs-strip {
+  display: flex;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+}
+
+.oceanum-tab {
+  flex: 1 1 auto;
+  padding: 6px 4px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--jp-ui-font-color2);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  cursor: pointer;
+}
+
+.oceanum-tab:hover {
+  background: var(--jp-layout-color2);
+}
+
+.oceanum-tab-selected {
+  border-bottom-color: var(--jp-brand-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.oceanum-tabpanel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+/* Must come after the rule above: an author `display` beats the user agent's
+ * `[hidden] { display: none }`, so without this every pane renders at once and the
+ * tabs only move the underline. */
+.oceanum-tabpanel[hidden] {
+  display: none;
+}
+
+/* Stored notebooks (src/StoredNotebooks.tsx). */
+.oceanum-notebooks-heading {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px 2px;
+}
+
+.oceanum-notebooks-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.oceanum-notebooks-item {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  border: none;
+  background: transparent;
+  color: var(--jp-ui-font-color1);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  text-align: left;
+  cursor: pointer;
+}
+
+.oceanum-notebooks-item:hover {
+  background: var(--jp-layout-color2);
+}
+
+.oceanum-notebooks-item-static {
+  cursor: default;
+}
+
+.oceanum-notebooks-item-static:hover {
+  background: transparent;
+}
+
+.oceanum-notebooks-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oceanum-text-error {
+  padding: 8px;
+  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);
+}