@api-client/ui 0.0.12 → 0.0.14

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>
     `;
   }
 }

package/src/elements/http/BodyEditor.styles.ts

@@ -1,6 +1,7 @@
 import { css } from 'lit';
+import typography from '../../styles/m3/typography.module.js';
 
-export default css`
+export default [typography, css`
 :host {
   display: flex;
   flex-direction: column;
@@ -32,7 +33,8 @@ http-body-text-editor {
   background-color: #FFEB3B;
   color: #000;
   padding: 0 8px;
-  border-radius: 8px;
+  border-radius: var(--md-sys-shape-corner-small);
+  margin-bottom: 20px;
 }
 
 .invalid-mime .warning-icon {
@@ -54,14 +56,6 @@ http-body-text-editor {
 .form-info {
   margin: 20px 0 0 0;
   color: var(--md-sys-color-on-surface);
-  font-family: var(--md-sys-typescale-body-small-font-family-name);
-  font-style: var(--md-sys-typescale-body-small-font-family-style);
-  font-weight: var(--md-sys-typescale-body-small-font-weight);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-  letter-spacing: var(--md-sys-typescale-body-small-tracking);
-  line-height: var(--md-sys-typescale-body-small-height);
-  text-transform: var(--md-sys-typescale-body-small-text-transform);
-  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
 }
 
 .file-picker {
@@ -73,13 +67,5 @@ http-body-text-editor {
   display: flex;
   align-items: center;
   margin-left: 8px;
-  font-family: var(--md-sys-typescale-label-medium-font-family-name);
-  font-style: var(--md-sys-typescale-label-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-label-medium-font-weight);
-  font-size: var(--md-sys-typescale-label-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
-  line-height: var(--md-sys-typescale-label-medium-height);
-  text-transform: var(--md-sys-typescale-label-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
 }
-`;
+`];

package/src/elements/http/BodyEditor.ts

@@ -683,7 +683,7 @@ export default class BodyEditor extends ApiElement {
     >
       URL decode
     </ui-button>
-    <label title="When set it automatically encodes the values before sending the request">
+    <label title="When set it automatically encodes the values before sending the request" class="label-medium">
       <ui-checkbox .checked="${autoEncode}" @change="${this.handleUrlEncodeAutoChange}"></ui-checkbox>
       Encode on send
     </label>
@@ -803,7 +803,7 @@ export default class BodyEditor extends ApiElement {
 
   protected renderFormInfo(): TemplateResult {
     return html`
-    <p class="form-info">
+    <p class="form-info body-small">
       Note that the content-type header will be added when the request is sent.
     </p>
     `;
@@ -829,7 +829,7 @@ export default class BodyEditor extends ApiElement {
     const { value } = this;
     const { size, name } = value as File;
     return html`
-    <div class="file-info">
+    <div class="file-info label-medium">
       <span class="file-name">${name || 'unknown name'}</span>
       <span class="file-size">${size} bytes</span>
       <ui-icon-button
@@ -850,7 +850,7 @@ export default class BodyEditor extends ApiElement {
     }
     const id = this.invalidMimeMessage;
     return html`
-    <div class="invalid-mime">
+    <div class="invalid-mime body-medium">
       <ui-icon icon="warning" class="warning-icon"></ui-icon>
       ${id === 1 ? this.renderFixableInvalidMime('multipart/form-data') : ''}
       ${id === 2 ? this.renderFixableInvalidMime('application/x-www-form-urlencoded') : ''}
@@ -863,7 +863,7 @@ export default class BodyEditor extends ApiElement {
    */
   protected renderFixableInvalidMime(suggested: string): TemplateResult {
     return html`
-      <p class="message">
+      <p class="message body-medium">
         The <code>content-type</code> header has different value than <b>${suggested}</b>.
       </p>
       <ui-button class="fix" type="tonal" title="Updates the content type header for the request" @click="${this.autoFixMime}">Fix</ui-button>