@api-client/ui 0.0.11 → 0.0.13

package/src/bindings/base/StoreBindings.ts

@@ -15,16 +15,11 @@ import {
   SpaceKind,
   Space,
   PermissionRole,
-  HttpCertificate,
   ContextSpaceListOptions,
   IRevision,
   TrashEntry,
   TrashEntryCreate,
   ContextDeleteBulkEvent,
-  ICertificate,
-  ContextListEvent,
-  ContextReadEvent,
-  ContextUpdateEvent,
   FileAddOptions,
   FileBreadcrumb,
   IBackendObserveCommand,
@@ -127,13 +122,17 @@ export abstract class StoreBindings extends PlatformBindings {
 
   projectExeChannel = new BroadcastChannel(StoreBroadcast.projectRuns);
 
-  certificatesChannel = new BroadcastChannel(StoreBroadcast.certificates);
+  initialized = false;
 
   async initializeStore(): Promise<void> {
     // ...
   }
 
   async initialize(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
     const target = document.body;
 
     window.addEventListener(EventTypes.Store.initEnvironment, this.handleInitializeEnvironment.bind(this));
@@ -156,6 +155,7 @@ export abstract class StoreBindings extends PlatformBindings {
     window.addEventListener(EventTypes.Store.File.delete, this.handleFileDelete.bind(this) as EventListener);
     window.addEventListener(EventTypes.Store.File.patchUsers, this.handleFilePatchUser.bind(this) as EventListener);
     window.addEventListener(EventTypes.Store.File.listUsers, this.handleListFileUsers.bind(this) as EventListener);
+    window.addEventListener(EventTypes.Store.File.breadcrumbs, this.handleFileBreadcrumbs.bind(this) as EventListener);
 
     // User
     window.addEventListener(EventTypes.Store.User.me, this.handlerMe.bind(this));
@@ -182,12 +182,6 @@ export abstract class StoreBindings extends PlatformBindings {
     target.addEventListener(EventTypes.Store.ProjectRuns.clearSpace, this.handleProjectExecutionClearSpace.bind(this) as EventListener);
     target.addEventListener(EventTypes.Store.ProjectRuns.clearProject, this.handleProjectExecutionClearProject.bind(this) as EventListener);
     target.addEventListener(EventTypes.Store.ProjectRuns.clearParent, this.handleProjectExecutionClearFolder.bind(this) as EventListener);
-
-    // certificates
-    target.addEventListener(EventTypes.Store.Certificate.list, this.handleCertificateList.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.Certificate.read, this.handleCertificateRead.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.Certificate.delete, this.handleCertificateDelete.bind(this) as EventListener);
-    target.addEventListener(EventTypes.Store.Certificate.insert, this.handleCertificateInsert.bind(this) as EventListener);
   }
 
   abstract environment: EnvironmentSettings;
@@ -372,6 +366,11 @@ export abstract class StoreBindings extends PlatformBindings {
     event.detail.result = this.getStore().sdk.file.listUsers(this.space, event.detail.key);
   }
 
+  protected handleFileBreadcrumbs(event: CustomEvent<{ key: string, result: Promise<ContextListResult<FileBreadcrumb>> }>): void {
+    event.preventDefault();
+    event.detail.result = this.files.breadcrumbs(event.detail.key)
+    // this.getStore().sdk.file.breadcrumbs(this.space, event.detail.key);
+  }
 
   protected handlerMe(input: Event): void {
     const e = input as CustomEvent<{ result: Promise<IUser> }>;
@@ -613,27 +612,6 @@ export abstract class StoreBindings extends PlatformBindings {
     patchUsers: (space: string, value: IAccessPatchInfo): Promise<void> => this.getStore().sdk.spaces.patchUsers(this.space || space, value),
   }
 
-  certificates = {
-    add: (value: HttpCertificate, space: string): Promise<ContextChangeRecord<HttpCertificate>> => this.getStore().sdk.certificates.add(value, this.space || space),
-    addBulk: (values: HttpCertificate[], space: string): Promise<IBulkOperationResult<ContextChangeRecord<HttpCertificate>>> => this.getStore().sdk.certificates.addBulk(values, this.space || space),
-    read: (key: string): Promise<HttpCertificate> => this.getStore().sdk.certificates.read(key),
-    list: (options?: ContextSpaceListOptions): Promise<ContextListResult<HttpCertificate>> => {
-      const cp = { ...options } as ContextSpaceListOptions;
-      if (!cp.space) {
-        cp.space = this.space;
-      }
-      return this.getStore().sdk.certificates.list(cp);
-    },
-    delete: async (key: string): Promise<ContextDeleteRecord> => {
-      await this.getStore().sdk.certificates.delete(key);
-      return {
-        key,
-      };
-    },
-    deleteBulk: (keys: string[]): Promise<IBulkOperationResult<ContextDeleteRecord>> => this.getStore().sdk.certificates.deleteBulk(keys),
-    empty: (space: string): Promise<void> => this.getStore().sdk.certificates.empty(this.space || space),
-  }
-
   trash = {
     add: (entry: TrashEntryCreate, space: string): Promise<ContextChangeRecord<TrashEntry>> => this.getStore().sdk.trash.add(entry, this.space || space),
     list: (options: ContextSpaceListOptions): Promise<ContextListResult<TrashEntry>> => {
@@ -682,43 +660,7 @@ export abstract class StoreBindings extends PlatformBindings {
     me: (): Promise<IUser> => this.getStore().sdk.user.me(),
     read: (key: string): Promise<IUser> => this.getStore().sdk.user.read(key),
   }
-
-  protected handleCertificateList(event: Event): void {
-    const e = event as ContextListEvent<ICertificate>;
-    e.preventDefault();
-    const options: ContextSpaceListOptions = {
-      ...e.detail,
-      space: this.space,
-    }
-    e.detail.result = this.certificates.list(options);
-  }
-
-  protected handleCertificateRead(event: Event): void {
-    const e = event as ContextReadEvent<ICertificate>;
-    e.preventDefault();
-    e.detail.result = this.certificates.read(e.detail.key);
-  }
-
-  protected handleCertificateDelete(event: Event): void {
-    const e = event as ContextDeleteEvent;
-    e.preventDefault();
-    e.detail.result = this.certificates.delete(e.detail.key);
-  }
-
-  protected handleCertificateInsert(event: Event): void {
-    const e = event as ContextUpdateEvent<HttpCertificate, HttpCertificate>;
-    e.preventDefault();
-    e.detail.result = this.certificates.add(e.detail.item, this.space);
-  }
-
-  async observeCertificates(): Promise<void> {
-    await this.observePath(RouteBuilder.certificates());
-  }
-
-  async unobserveCertificates(): Promise<void> {
-    await this.unobservePath(RouteBuilder.certificates());
-  }
-
+  
   async observeSpaces(): Promise<void> {
     await this.observePath(RouteBuilder.spaces());
   }
@@ -822,10 +764,13 @@ export abstract class StoreBindings extends PlatformBindings {
   protected storeEventHandler(e: MessageEvent): void {
     const event = JSON.parse(e.data) as BroadcastEvent | BackendErrorEvent;
     if (event.type === 'error') {
-      // TODO: Report an error somehow
       throw new Error(event.cause);
     }
     if (event.space && event.space !== this.space) {
+      // we allow files here to support shared files.
+      if (event.path === RouteBuilder.files()) {
+        this.filesChannel.postMessage(event);
+      }
       return;
     }
     if (event.path === RouteBuilder.spaces()) {
@@ -845,8 +790,6 @@ export abstract class StoreBindings extends PlatformBindings {
       this.historyChannel.postMessage(event);
     } else if (event.path === RouteBuilder.projectExecutions()) {
       this.projectExeChannel.postMessage(event);
-    } else if (event.path === RouteBuilder.certificates()) {
-      this.certificatesChannel.postMessage(event);
     } else {
       // eslint-disable-next-line no-console
       console.warn(`Broadcast path not handled`, event.path, event)

package/src/bindings/web/WebFileBindings.ts

@@ -46,7 +46,7 @@ export class WebFileBindings extends FileBindings {
       const handles = await window.showOpenFilePicker(dialogOptions);
       const result: string[] = [];
       handles.forEach((handle) => {
-        const path = uuidV4();
+        const path = `${uuidV4()}/${handle.name}`;
         result.push(path);
         this.handles.set(path, handle);
       });

package/src/define/http/certificate-add.ts

@@ -0,0 +1,12 @@
+import { customElement } from 'lit/decorators.js';
+import Element from '../../elements/http/CertificateAdd.element.js';
+
+@customElement('certificate-add')
+export class CertificateAddElement extends Element {
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'certificate-add': Element;
+  }
+}

package/src/define/store/file-picker.ts

@@ -0,0 +1,12 @@
+import { customElement } from "lit/decorators.js";
+import Element from "../../elements/store/FilePicker.element.js";
+
+@customElement('file-picker')
+export class FilePickerElement extends Element {
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'file-picker': Element;
+  }
+}

package/src/define/{files → store}/share-file.ts

@@ -1,6 +1,6 @@
 import { customElement } from 'lit/decorators.js';
-import Element from "../../elements/files/ShareFile.js";
-import styles from "../../elements/files/ShareFile.styles.js";
+import Element from "../../elements/store/ShareFile.element.js";
+import styles from "../../elements/store/ShareFile.styles.js";
 import dialogStyles from '../../ui/dialog/UiDialog.styles.js';
 
 @customElement('share-file')

package/src/define/ui/ui-segmented-button-set.ts

@@ -9,6 +9,6 @@ export class UiSegmentedButtonSetElement extends Element {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'ui-segmented-button-set': UiSegmentedButtonSetElement;
+    'ui-segmented-button-set': Element;
   }
 }

package/src/elements/authorization/ui/CC.styles.ts

@@ -1,19 +1,14 @@
 import { css } from 'lit';
 
 export default css`
-.cert-meta {
-  display: inline-flex;
-  align-items: center;
-}
-
 :host {
-  max-height: 300px;
   display: flex;
   flex-direction: column;
 }
 
-form {
-  overflow: auto;
-  flex: 1;
+.certificate-info {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
 }
 `;

package/src/elements/authorization/ui/CcAuthorization.ts

@@ -1,129 +1,69 @@
 import { html, nothing, TemplateResult } from "lit";
-import { state } from "lit/decorators.js";
 import {
-  ICCAuthorization, HttpCertificate, Events as CoreEvents,
-  ICertificate,
-  BroadcastEvent,
-  BroadcastCreatedEvent,
-  DeletedBroadcastEvent,
+  ICCAuthorization, HttpCertificate, Events as CoreEvents, CertificateFileKind, ICertificate, IFile,
 } from '@api-client/core/build/browser.js';
-import '@github/relative-time-element';
+import { state } from "lit/decorators.js";
 import { Authorization } from "./Authorization.js";
+import type { FilePickerClosingReason } from "../../store/FilePicker.element.js";
 import { Events } from "../../../events/Events.js";
-import type RadioElement from "../../../ui/input/RadioElement.js";
-import { StoreBroadcast } from "../../../http-client/store/StoreBroadcast.js";
+import '../../../define/ui/ui-dropdown-list.js';
 import '../../../define/ui/ui-button.js';
-import '../../../define/ui/ui-radio.js';
+import '../../../define/ui/ui-icon-button.js';
+import '../../../define/ui/ui-icon.js';
+import '../../../define/store/file-picker.js';
 
 export default class CcAuthorization extends Authorization {
-  @state() items?: ICertificate[];
-
-  @state() querying = false;
-
-  @state() loadingError?: string;
-
-  channel = new BroadcastChannel(StoreBroadcast.certificates);
-
-  constructor() {
-    super();
-
-    this.handleBroadcast = this.handleBroadcast.bind(this);
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.channel.addEventListener('message', this.handleBroadcast);
-    this.queryCertificates();
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.channel.removeEventListener('message', this.handleBroadcast);
-  }
-
-  protected handleBroadcast(e: MessageEvent): void {
-    const event = e.data as BroadcastEvent;
-    switch (event.operation) {
-      case 'created': this.handleCreated(event as BroadcastCreatedEvent); break;
-      case 'deleted': this.handleDeleted(event as DeletedBroadcastEvent); break;
-      default:
-    }
-  }
+  @state() selectorRendered = false;
 
-  protected handleCreated(event: BroadcastCreatedEvent): void {
-    const cert = event.data as ICertificate;
-    if (!this.items) {
-      this.items = [];
+  get config(): ICCAuthorization {
+    const { authorization } = this;
+    if (!authorization) {
+      return { };
     }
-    const index = this.items.findIndex(i => i.key === cert.key);
-    if (index >= 0) {
-      this.items[index] = cert;
-    } else {
-      this.items.push(cert);
+    if (!authorization.config) {
+      authorization.config = {} as ICCAuthorization;
     }
-    this.requestUpdate();
+    return authorization.config as ICCAuthorization;
   }
 
-  protected handleDeleted(event: DeletedBroadcastEvent): void {
-    if (!this.items) {
+  protected handleClose(e: CustomEvent<FilePickerClosingReason>): void {
+    const { canceled, file } = e.detail;
+    if (canceled) {
       return;
     }
-    const { key } = event;
-    const index = this.items.findIndex(i => i.key === key);
-    if (index >= 0) {
-      this.items.splice(index, 1);
-      this.requestUpdate();
-    }
+    this.setCertificate((file as IFile).key);
+    CoreEvents.Telemetry.event({
+      category: 'Certificates',
+      action: 'Authorization',
+      label: 'selected-certificate'
+    }, this);
   }
 
-  protected async queryCertificates(): Promise<void> {
-    if (this.querying) {
-      return;
-    }
-    this.querying = true;
+  async setCertificate(key: string): Promise<void> {
+    let result: unknown;
     try {
-      const data = await Events.HttpClient.Model.Certificate.list({ limit: 100, space: "" }); // the space should be filled by the bindings / hosting app
-      if (!data) {
-        this.items = undefined;
-        throw new Error(`Certificates query not handled by the store.`);
-        return;
-      }
-      this.items = data.items;
-    } catch (cause) {
-      this.loadingError = (cause as Error).message;
-    } finally {
-      this.querying = false;
+      result = await Events.Store.File.read(key, true, this);
+    } catch (_) {
+      return;
     }
+    const { config } = this;
+    config.certificate = result as ICertificate;
+    this.requestUpdate();
+    this.notifyChange();
   }
 
-  protected handleSelected(e: Event): void {
-    const { authorization } = this;
-    if (!authorization) {
-      return;
+  protected handleDropDownOpen(): void {
+    this.selectorRendered = true;
+    if (this.isUpdatePending) {
+      this.scheduleUpdate();
     }
+  }
 
-    const radio = e.target as RadioElement;
-    const { checked, value } = radio;
-    if (!checked) {
-      return;
-    }
-    const config = authorization.config as ICCAuthorization || {} as ICCAuthorization;
-    if (value === '') {
-      delete config.certificate;
-    } else {
-      const cert = this.items?.find(i => i.key === value);
-      if (!cert) {
-        return;
-      }
-      config.certificate = cert;
-    }
+  protected handleClearCertificate(): void {
+    const { config } = this;
+    delete config.certificate;
+    this.requestUpdate();
     this.notifyChange();
-
-    CoreEvents.Telemetry.event({
-      category: 'Certificates',
-      action: 'Authorization',
-      label: 'selected-certificate'
-    }, this);
   }
 
   override render(): TemplateResult {
@@ -134,81 +74,41 @@ export default class CcAuthorization extends Authorization {
   }
 
   protected renderEditor(): TemplateResult | typeof nothing {
-    const { authorization, loadingError, items } = this;
-    if (!authorization) {
-      return nothing;
-    }
-    const hasItems = !!items && !!items.length;
-    if (!loadingError && !hasItems) {
-      return html`
-      ${this.renderEmptyState()}
-      `;
-    }
-    const config = authorization.config as ICCAuthorization || {} as ICCAuthorization;
+    const { config } = this;
+    const { certificate } = config;
+    // Note, the <form> element is required by the Authorization class for validation.
     return html`
-    ${loadingError ? this.renderErrorState(loadingError) : ''}
-    ${hasItems ? html`
-    <form autocomplete="on" class="auth-form basic-auth">
-      ${this.renderList(items, config.certificate)}
-    </form>
-    ` : ''}
+    <form autocomplete="on" class="auth-form cc-auth"></form>
+    ${this.renderSelector()}
+    ${certificate ? this.renderSelection(certificate) : nothing}
     `;
   }
 
-  protected renderErrorState(error: string): TemplateResult {
-    return html`<p class="error-message">Unable to load certificates: ${error}.</p>`;
-  }
-
-  protected renderEmptyState(): TemplateResult {
-    return html`<p class="empty-screen body-large">There are no certificates installed in this application.</p>`;
-  }
-
-  protected renderList(items: HttpCertificate[], current?: ICertificate): TemplateResult {
-    const currentKey = current && current.key;
+  protected renderSelector(): TemplateResult {
+    const { selectorRendered } = this;
+    const kinds: typeof CertificateFileKind[] = [CertificateFileKind];
     return html`
-      ${this.renderNoneItem(currentKey)}
-      ${items.map((item) => this.renderCertItem(item, currentKey))}
-    `;
-  }
-
-  protected renderNoneItem(selectedKey?: string): TemplateResult {
-    return html`
-    <label class="label-medium">
-      <ui-radio name="certificate" value="" .checked="${!selectedKey}" @change="${this.handleSelected}"></ui-radio>
-      None
-    </label>
-    `;
-  }
-
-  /**
-   * @param item The item to render
-   * @returns The template for the dropdown item.
-   */
-  protected renderCertItem(item: HttpCertificate, selectedKey?: string): TemplateResult {
-    return html`
-    <div class="cert-item">
-      <label>
-        <ui-radio name="certificate" value="${item.key}" .checked="${item.key === selectedKey}" @change="${this.handleSelected}"></ui-radio>
-        <div class="cert-meta">
-          <span class="label-medium">${item.name}</span>
-          <span class="body-small">Added: ${this.renderDateTime(item.created)}</span>
-        </div>
-      </label>
+    <div class="selector">
+      <ui-dropdown-list @open="${this.handleDropDownOpen}">
+        <ui-button class="dropdown-trigger" type="tonal">Select a certificate</ui-button>
+        ${selectorRendered ? html`<file-picker slot="dropdown" .kinds="${kinds}" @close="${this.handleClose}"></file-picker>` : nothing}
+      </ui-dropdown-list>
     </div>
     `;
   }
 
-  /**
-   * @param created The certificate created time.
-   * @returns The template for the cert time element.
-   */
-  protected renderDateTime(created?: number): TemplateResult {
-    if (!created) {
-      return html`<span>Unknown</span>`;
-    }
-    const d = new Date(created);
+  protected renderSelection(certificate: HttpCertificate): TemplateResult {
     return html`
-    <relative-time datetime="${d.toISOString()}"></relative-time>
+    <div class="certificate-info body-medium">
+      Current certificate: ${certificate.name}
+      <ui-icon-button 
+        aria-label="Remove certificate from authorization" 
+        title="Remove certificate from authorization"
+        @click="${this.handleClearCertificate}"
+      >
+        <ui-icon role="presentation" icon="deleteOutline"></ui-icon>
+      </ui-icon-button>
+    </div>
     `;
   }
 }