@api-client/ui 0.0.5 → 0.0.8

package/src/elements/http/HttpAssertions.element.ts

@@ -0,0 +1,286 @@
+import { 
+  IHttpAssertion,
+  IHttpStep,
+} from "@api-client/core/build/browser.js";
+import { html, nothing, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import { HttpFlowsUi, StepsTarget } from "./HttpFlowsUi.js";
+import type SwitchElement from "../../ui/input/SwitchElement.js";
+import type Input from "../../ui/input/Input.js";
+import UiDialog, { UiDialogClosingReason } from "../../ui/dialog/UiDialog.js";
+import '../../define/ui/ui-button.js';
+import '../../define/ui/ui-switch.js';
+import '../../define/ui/ui-dialog.js';
+import '../../define/ui/ui-divider.js';
+
+/**
+ * @fires change When the model change
+ */
+export default class HttpAssertions extends HttpFlowsUi {
+  /**
+   * The list of assertions.
+   * This is a live list. All changes are propagated in the model.
+   */
+  @property({ type: Array }) model: IHttpAssertion[] = [];
+
+  /**
+   * Adds a new empty assertion to the model.
+   * Note, this function won't notify the parent element
+   * about the change as empty rules can be discarded.
+   */
+  addAssertion(): void {
+    const { model } = this;
+    model.push({
+      enabled: true,
+      steps: [],
+    });
+    this.requestUpdate();
+  }
+
+  /**
+   * Removes an assertion at specified index.
+   * @param index The index of the assertion in the `model` to remove.
+   */
+  removeAssertion(index: number): void {
+    const { model } = this;
+    if (!model[index]) {
+      throw new RangeError(`Invalid index: ${index}`);
+    }
+    model.splice(index, 1);
+    this.requestUpdate();
+    this.notifyChange();
+  }
+
+  /**
+   * Toggles the enabled state of the assertion.
+   * @param index The index of the assertion on the `model` array
+   * @param value The `enabled` value.
+   */
+  toggleAssertion(index: number, value: boolean): void {
+    const { model } = this;
+    if (!model[index]) {
+      throw new RangeError(`Invalid index: ${index}`);
+    }
+    model[index].enabled = value;
+    this.requestUpdate();
+    this.notifyChange();
+  }
+
+  protected handleAdd(): void {
+    this.addAssertion();
+  }
+
+  protected handleRemove(e: Event): void {
+    const node = e.currentTarget as HTMLElement;
+    const index = Number(node.dataset.index);
+    if (Number.isNaN(index)) {
+      return;
+    }
+    this.removeAssertion(index);
+  }
+
+  protected handleToggle(e: Event): void {
+    const node = e.currentTarget as SwitchElement;
+    const index = Number(node.dataset.index);
+    if (Number.isNaN(index)) {
+      return;
+    }
+    this.toggleAssertion(index, node.checked);
+  }
+
+  protected getStepsTarget(assertionOrActionIndex: number): StepsTarget | undefined {
+    if (Number.isNaN(assertionOrActionIndex)) {
+      return undefined;
+    }
+    return this.model[assertionOrActionIndex];
+  }
+
+  protected stepFromChangeEvent(e: Event): IHttpStep | undefined {
+    const input = e.target as Input;
+    input.checkValidity();
+    const assertionIndex = Number(input.dataset.assertionIndex);
+    const stepIndex = Number(input.dataset.stepIndex);
+    if (Number.isNaN(assertionIndex) || Number.isNaN(stepIndex)) {
+      return undefined;
+    }
+    const assertion = this.model[assertionIndex];
+    if (!assertion) {
+      return undefined;
+    }
+    return assertion.steps[stepIndex];
+  }
+
+  protected handleRenameAssertion(e: Event): void {
+    const target = e.currentTarget as HTMLElement;
+    const assertionIndex = Number(target.dataset.assertionIndex);
+    if (Number.isNaN(assertionIndex)) {
+      return;
+    }
+    const assertion = this.model[assertionIndex];
+    if (!assertion) {
+      return;
+    }
+    const { description } = assertion;
+    const dialog = this.shadowRoot?.querySelector('.rename-dialog') as UiDialog | null;
+    if (!dialog) {
+      return;
+    }
+    const input = dialog.querySelector('ui-text-field') as Input;
+    input.value = description || '';
+    dialog.open = true;
+    dialog.dataset.assertionIndex = target.dataset.assertionIndex;
+  }
+
+  protected handleRenameDialogResult(e: CustomEvent<UiDialogClosingReason>): void {
+    if (e.detail.cancelled) {
+      return;
+    }
+    const dialog = e.currentTarget as UiDialog;
+    const assertionIndex = Number(dialog.dataset.assertionIndex);
+    if (Number.isNaN(assertionIndex)) {
+      return;
+    }
+    const assertion = this.model[assertionIndex];
+    if (!assertion) {
+      return;
+    }
+    const input = dialog.querySelector('ui-text-field') as Input;
+    assertion.description = input.value;
+    this.requestUpdate();
+    this.notifyChange();
+    input.value = '';
+    delete dialog.dataset.assertionIndex;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+    ${this.renderActionButtons()}
+    <div class="container">
+      ${this.renderEditor()}
+      <ui-divider vertical></ui-divider>
+      ${this.renderAssertions()}
+    </div>
+    ${this.renderRenameAssertionDialog()}
+    `;
+  }
+
+  protected renderActionButtons(): TemplateResult {
+    return html`
+    <div class="editor-actions">
+      <ui-button type="tonal" @click="${this.handleAdd}" class="add-button">Add</ui-button>
+    </div>
+    `;
+  }
+
+  protected renderAssertions(): TemplateResult {
+    return html`
+    <section aria-label="Assertion options" class="options">
+      ${this.renderResponseDataSourceSuggestions()}
+      ${this.renderTransformationSuggestions()}
+      ${this.renderAssertionSuggestions()}
+    </section>
+    `;
+  }
+
+  protected renderEditor(): TemplateResult {
+    const { model } = this;
+    const content = Array.isArray(model) && !!model.length ? this.renderList(model) : this.renderEmptyMessage();
+    return html`
+    <section aria-label="Assertions editor" class="editor surface1">${content}</section>
+    `;
+  }
+
+  protected renderEmptyMessage(): TemplateResult {
+    return html`
+    <div class="empty-message">No assertions added</div>
+    `;
+  }
+
+  protected renderList(model: IHttpAssertion[]): TemplateResult {
+    return html`
+    ${model.map((item, index) => this.renderAssertion(item, index))}
+    `;
+  }
+
+  protected renderAssertion(item: IHttpAssertion, index: number): TemplateResult {
+    return html`
+    <div class="step-row">
+      ${this.renderAssertionDescription(item)}
+      <div class="param-row">
+        ${this.renderToggleButton(item, index)}
+        ${this.renderSteps(item, index)}
+        <div class="action-actions">
+          ${this.renderRenameAssertion(index)}
+          ${this.renderDeleteAssertion(index)}
+        </div>
+      </div>
+    </div>
+    `;
+  }
+
+  protected renderAssertionDescription(item: IHttpAssertion): TemplateResult | typeof nothing {
+    const { description } = item;
+    if (!description) {
+      return nothing;
+    }
+    return html`
+    <div class="assertion-description label-medium">${description}</div>
+    `;
+  }
+
+  protected renderToggleButton(item: IHttpAssertion, assertionIndex: number): TemplateResult {
+    return html`
+    <ui-switch 
+      .checked="${!!item.enabled}" 
+      @change="${this.handleToggle}" 
+      aria-label="Toggle this assertion"
+      data-index="${assertionIndex}"
+      class="toggle-button"
+    ></ui-switch>
+    `;
+  }
+
+  protected renderRenameAssertion(assertionIndex: number): TemplateResult {
+    return html`
+    <ui-icon-button 
+      aria-label="Rename this assertion" 
+      title="Rename this assertion" 
+      data-assertion-index="${assertionIndex}" 
+      @click="${this.handleRenameAssertion}"
+      class="rename-button"
+    >
+      <ui-icon icon="rename" role="presentation"></ui-icon>
+    </ui-icon-button>
+    `;
+  }
+
+  protected renderDeleteAssertion(assertionIndex: number): TemplateResult {
+    return html`
+    <ui-icon-button 
+      aria-label="Delete this assertion" 
+      title="Delete this assertion" 
+      data-index="${assertionIndex}" 
+      @click="${this.handleRemove}"
+      class="delete-button"
+    >
+      <ui-icon icon="deleteOutline" role="presentation"></ui-icon>
+    </ui-icon-button>
+    `;
+  }
+
+  protected renderRenameAssertionDialog(): TemplateResult {
+    return html`
+    <ui-dialog modal class="rename-dialog" @close="${this.handleRenameDialogResult}" dismissLabel="Cancel" confirmLabel="Accept">
+      <ui-icon slot="icon" icon="rename"></ui-icon>
+      <span slot="title">Rename assertion</span>
+      
+      <ui-text-field
+        name="rename"
+        label="Assertion description"
+        required
+        class="input"
+      ></ui-text-field>
+    </ui-dialog>
+    `;
+  }
+}

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

@@ -1,165 +1,12 @@
 import { css } from 'lit';
 
 export default css`
-:host {
-  display: block;
-}
-
-.editor-actions {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.editor-actions > * {
-  margin-right: 20px;
-}
-
-.empty-message {
-  text-align: center;
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
-  font-style: var(--md-sys-typescale-body-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-  line-height: var(--md-sys-typescale-body-medium-height);
-  text-transform: var(--md-sys-typescale-body-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
-  color: var(--md-sys-color-on-surface);
-}
-
 .param-row {
-  display: flex;
-  align-items: start;
-  min-height: 56px;
   margin-bottom: 24px;
+  border-radius: var(--md-sys-shape-corner-small);
 }
 
-.param-row > :first-child,
-.param-row > :last-child {
-  margin-top: 8px;
-}
-
-.steps {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  border-radius: 8px;
-  padding-top: 8px;
-  border: 1px transparent dashed;
-}
-
-.step-unit {
-  display: flex;
-  align-items: center;
-}
-
-.step-pill {
-  background-color: var(--md-sys-color-surface-variant);
-  height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  border-radius: 8px;
-
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
-  font-style: var(--md-sys-typescale-body-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-  line-height: var(--md-sys-typescale-body-medium-height);
-  text-transform: var(--md-sys-typescale-body-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
-}
-
-.drop-info {
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
-  font-style: var(--md-sys-typescale-body-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-  line-height: var(--md-sys-typescale-body-medium-height);
-  text-transform: var(--md-sys-typescale-body-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
-}
-
-.step-pill.with-icon {
-  padding-right: 0;
-}
-
-.step-pill.empty {
-  border: 1px var(--md-sys-color-outline-variant) dashed;
-}
-
-.steps > * {
-  margin-bottom: 8px;
-}
-
-.container {
-  display: flex;
-}
-
-.container > .editor {
-  flex: 8;
-}
-
-.container > .options {
-  flex: 4;
-}
-
-.assertion-group summary {
-  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);
-  padding: 16px 0px;
-}
-
-.group-content {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  align-items: center;
-}
-
-.group-content > ui-chip {
-  margin: 4px;
-}
-
-.drop-target.spacer {
-  width: 8px;
-  height: 56px;
-  transition: width 120ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-
-.drop-target.spacer.dragover {
-  width: 40px;
-  border: 1px var(--md-sys-color-outline-variant) dashed;
-  background-color: var(--md-sys-color-surface-variant);
-  border-radius: 8px;
-  margin: 0 4px;
-}
-
-.steps.dragover {
-  background-color: var(--md-sys-color-surface);
-  border-color: var(--md-sys-color-outline-variant);
-  border-radius: 8px;
-}
-
-.space-step-left {
-  margin-left: 8px;
-}
-
-.number-input {
-  min-width: 120px;
-}
-
-.assertion-actions {
+.action-actions {
   display: flex;
   align-items: center;
 }
@@ -168,7 +15,11 @@ export default css`
   --ui-dialog--width: 420px;
 }
 
-.rename-dialog ui-text-field {
+.rename-dialog .input {
   width: 100%;
 }
+
+.toggle-button {
+  margin-left: 12px;
+}
 `;

package/src/elements/http/HttpFlows.common.ts

@@ -0,0 +1,181 @@
+import { css } from 'lit';
+import typographyStyles from '../../styles/m3/typography.module.js';
+import dialogStyles from '../../styles/m3/dialog.module.js';
+import surfaceStyles from '../../styles/m3/surface.module.js';
+
+export default [typographyStyles, dialogStyles, surfaceStyles, css`
+:host {
+  display: block;
+}
+
+.surface1,
+.surface2 {
+  z-index: 0;
+}
+
+.editor-actions {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.editor-actions > * {
+  margin-right: 20px;
+}
+
+.empty-message {
+  margin-top: 16px;
+  text-align: center;
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+  color: var(--md-sys-color-on-surface);
+}
+
+.container {
+  display: flex;
+}
+
+.container > .editor {
+  flex: 8;
+}
+
+.container > .options {
+  flex: 4;
+}
+
+.action-group summary {
+  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);
+  padding: 16px 0px;
+  cursor: default;
+}
+
+.group-content {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+}
+
+.group-content > ui-chip {
+  margin: 4px;
+}
+
+.param-row {
+  display: flex;
+  align-items: start;
+  min-height: 56px;
+}
+
+.param-row > :first-child,
+.param-row > :last-child {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.action-tab,
+.param-row {
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+}
+
+.steps {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  border-radius: 8px;
+  padding-top: 8px;
+  border: 1px transparent dashed;
+}
+
+.steps > * {
+  margin-bottom: 8px;
+}
+
+.steps.dragover {
+  background-color: var(--md-sys-color-surface);
+  border-color: var(--md-sys-color-outline-variant);
+  border-radius: 8px;
+}
+
+.step-unit {
+  display: flex;
+  align-items: center;
+}
+
+.step-pill {
+  background-color: var(--md-sys-color-surface-variant);
+  height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  border-radius: 8px;
+
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+}
+
+.drop-info {
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+}
+
+.step-pill.with-icon {
+  padding-right: 0;
+}
+
+.step-pill.empty {
+  border: 1px var(--md-sys-color-outline-variant) dashed;
+}
+
+.drop-target.spacer {
+  width: 8px;
+  height: 56px;
+  transition: width 120ms cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.drop-target.spacer.dragover {
+  width: 40px;
+  border: 1px var(--md-sys-color-outline-variant) dashed;
+  background-color: var(--md-sys-color-surface-variant);
+  border-radius: 8px;
+  margin: 0 4px;
+}
+
+.space-step-left {
+  margin-left: 8px;
+}
+
+.number-input {
+  min-width: 120px;
+}
+
+.step-row {
+  margin: 20px;
+}
+`];