@api-client/ui 0.0.5 → 0.0.7

package/src/elements/http/HttpAssertions.ts

@@ -1,1187 +0,0 @@
-import { 
-  IHttpAssertion, DataSteps, FlowSourceEnum, FlowRequestDataEnum, 
-  FlowResponseDataEnum, TransformationSteps, HttpAssertions as CoreAssertions, AmfNamespace
-} from "@api-client/core/build/browser.js";
-import { html, nothing, TemplateResult } from "lit";
-import { property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
-import { IHttpStep } from "@api-client/core/build/src/models/http-actions/HttpStep.js";
-import ApiElement from "../ApiElement.js";
-import SwitchElement from "../../ui/input/SwitchElement.js";
-import UiChip from "../../ui/chip/UiChip.js";
-import Input from "../../ui/input/Input.js";
-import UiDialog, { UiDialogClosingReason } from "../../ui/dialog/UiDialog.js";
-import '../../define/ui/ui-button.js';
-import '../../define/ui/ui-icon-button.js';
-import '../../define/ui/ui-switch.js';
-import '../../define/ui/ui-icon.js';
-import '../../define/ui/ui-text-field.js';
-import '../../define/ui/ui-chip.js';
-import '../../define/ui/ui-dialog.js';
-
-/**
- * @fires change When the model change
- */
-export default class HttpAssertions extends ApiElement {
-  /**
-   * 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 notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
-  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 handleRemoveStep(e: Event): void {
-    const target = e.currentTarget as HTMLElement;
-    const assertionIndex = Number(target.dataset.index);
-    const stepIndex = Number(target.dataset.stepIndex);
-    if (Number.isNaN(assertionIndex) || Number.isNaN(stepIndex)) {
-      return;
-    }
-    const assertion = this.model[assertionIndex];
-    if (!assertion) {
-      return;
-    }
-    assertion.steps.splice(stepIndex, 1);
-    this.notifyChange();
-    this.requestUpdate();
-  }
-
-  protected draggedChip?: UiChip;
-
-  protected isValidDropTarget(dataTransfer?: DataTransfer | null): boolean {
-    if (!dataTransfer) {
-      return false;
-    }
-    const { types } = dataTransfer;
-    return types.includes('assertion/group') && types.includes('assertion/kind');
-  }
-
-  protected handleDragStart(e: DragEvent): void {
-    const { dataTransfer } = e;
-    if (!dataTransfer) {
-      return;
-    }
-    const chip = e.target as UiChip;
-    const { group, kind, source, data, variant } = chip.dataset;
-    if (!group || !kind) {
-      return;
-    }
-    const copy = chip.cloneNode(true) as UiChip;
-    copy.style.position = 'absolute';
-    copy.style.top = `-100px`;
-    this.draggedChip = copy;
-    document.body.appendChild(copy);
-    dataTransfer.setDragImage(copy, 0, 0);
-    dataTransfer.setData('assertion/group', group);
-    dataTransfer.setData('assertion/kind', kind);
-    if (source) {
-      dataTransfer.setData('assertion/source', source);
-    }
-    if (data) {
-      dataTransfer.setData('assertion/data', data);
-    }
-    if (variant) {
-      dataTransfer.setData('assertion/variant', variant);
-    }
-    chip.blur();
-  }
-
-  protected handleDragEnd(e: DragEvent): void {
-    const { draggedChip } = this;
-    if (!draggedChip) {
-      return;
-    }
-    e.preventDefault();
-    draggedChip.parentElement?.removeChild(draggedChip);
-  }
-
-  protected handleTargetDragOver(e: DragEvent): void {
-    const { draggedChip } = this;
-    if (!draggedChip || e.defaultPrevented || !this.isValidDropTarget(e.dataTransfer)) {
-      return;
-    }
-    e.preventDefault();
-    const target = e.currentTarget as HTMLElement;
-    target.classList.add('dragover');
-  }
-
-  protected handleTargetDragLeave(e: DragEvent): void {
-    if (e.defaultPrevented || !this.isValidDropTarget(e.dataTransfer)) {
-      return;
-    }
-    const target = e.currentTarget as HTMLElement;
-    target.classList.remove('dragover');
-  }
-
-  protected handleDrop(e: DragEvent): void {
-    const { dataTransfer } = e;
-    if (!dataTransfer || e.defaultPrevented || !this.isValidDropTarget(dataTransfer)) {
-      return;
-    }
-    e.preventDefault();
-    this.resetDragIndices();
-    const { index, stepIndex } = (e.target as HTMLElement).dataset;
-    const typedAssertionIndex = Number(index);
-    if (Number.isNaN(typedAssertionIndex)) {
-      return;
-    }
-    let typedStepIndex: number | undefined;
-    if (stepIndex) {
-      const tmp = Number(stepIndex);
-      if (!Number.isNaN(tmp)) {
-        typedStepIndex = tmp;
-      }
-    }
-    this.processDrop(dataTransfer, typedAssertionIndex, typedStepIndex);
-  }
-
-  protected resetDragIndices(): void {
-    const nodes = (this.shadowRoot as ShadowRoot).querySelectorAll('.dragover');
-    Array.from(nodes).forEach(n => n.classList.remove('dragover'));
-  }
-
-  protected processDrop(dataTransfer: DataTransfer, assertionIndex: number, stepIndex?: number): void {
-    const group = dataTransfer.getData('assertion/group');
-    if (!group) {
-      return;
-    }
-    if (group === 'data-source') {
-      this.processDataSourceDrop(dataTransfer, assertionIndex, stepIndex);
-    } else if (group === 'transformation') {
-      this.processTransformationDrop(dataTransfer, assertionIndex, stepIndex);
-    } else if (group === 'assertion') {
-      this.processAssertionDrop(dataTransfer, assertionIndex, stepIndex);
-    }
-  }
-
-  protected processDataSourceDrop(dataTransfer: DataTransfer, assertionIndex: number, stepIndex?: number): void {
-    const item = this.model[assertionIndex];
-    if (!item) {
-      return;
-    }
-    const source = dataTransfer.getData('assertion/source') as FlowSourceEnum;
-    const data = dataTransfer.getData('assertion/data') as FlowRequestDataEnum | FlowResponseDataEnum;
-    const step = new DataSteps.ReadDataSourceStep(source, data).toJSON();
-    if (stepIndex === undefined) {
-      item.steps.push(step);
-    } else if (stepIndex === -1) {
-      item.steps.unshift(step);
-    } else {
-      item.steps.splice(stepIndex, 0, step);
-    }
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected processTransformationDrop(dataTransfer: DataTransfer, assertionIndex: number, stepIndex?: number): void {
-    const item = this.model[assertionIndex];
-    if (!item) {
-      return;
-    }
-    let step: IHttpStep | undefined;
-    const kind = dataTransfer.getData('assertion/kind');
-    if (kind === DataSteps.ReadValueStepKind) {
-      step = new DataSteps.ReadValueStep().toJSON();
-    } else if (kind === TransformationSteps.AsNumberStepKind) {
-      step = new TransformationSteps.AsNumberStep().toJSON();
-    } else if (kind === TransformationSteps.RoundStepKind) {
-      step = new TransformationSteps.RoundStep().toJSON();
-    } else if (kind === TransformationSteps.AsLowerCaseStepKind) {
-      step = new TransformationSteps.AsLowerCaseStep().toJSON();
-    } else if (kind === TransformationSteps.AsUpperCaseStepKind) {
-      step = new TransformationSteps.AsUpperCaseStep().toJSON();
-    } else if (kind === TransformationSteps.TrimStepKind) {
-      step = new TransformationSteps.TrimStep().toJSON();
-    } else if (kind === TransformationSteps.SubstringStepKind) {
-      step = new TransformationSteps.SubstringStep().toJSON();
-    }
-    if (!step) {
-      return;
-    }
-    if (stepIndex === undefined) {
-      item.steps.push(step);
-    } else if (stepIndex === -1) {
-      item.steps.unshift(step);
-    } else {
-      item.steps.splice(stepIndex, 0, step);
-    }
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected processAssertionDrop(dataTransfer: DataTransfer, assertionIndex: number, stepIndex?: number): void {
-    const item = this.model[assertionIndex];
-    if (!item) {
-      return;
-    }
-    let step: IHttpStep | undefined;
-    const kind = dataTransfer.getData('assertion/kind');
-    if (kind === CoreAssertions.EqualAssertionKind) {
-      step = new CoreAssertions.EqualAssertion().toJSON();
-    } else if (kind === CoreAssertions.NotEqualAssertionKind) {
-      step = new CoreAssertions.NotEqualAssertion().toJSON();
-    } else if (kind === CoreAssertions.GreaterThanAssertionKind) {
-      const instance = new CoreAssertions.GreaterThanAssertion();
-      if (dataTransfer.getData('assertion/variant') === 'equal') {
-        instance.equal = true;
-      }
-      step = instance.toJSON();
-    }  else if (kind === CoreAssertions.LessThanAssertionKind) {
-      const instance = new CoreAssertions.LessThanAssertion();
-      if (dataTransfer.getData('assertion/variant') === 'equal') {
-        instance.equal = true;
-      }
-      step = instance.toJSON();
-    } else if (kind === CoreAssertions.IncludesAssertionKind) {
-      step = new CoreAssertions.IncludesAssertion().toJSON();
-    } else if (kind === CoreAssertions.NotIncludesAssertionKind) {
-      step = new CoreAssertions.NotIncludesAssertion().toJSON();
-    } else if (kind === CoreAssertions.MatchesAssertionKind) {
-      step = new CoreAssertions.MatchesAssertion().toJSON();
-    } else if (kind === CoreAssertions.OkAssertionKind) {
-      step = new CoreAssertions.OkAssertion().toJSON();
-    } else if (kind === CoreAssertions.NotOkAssertionKind) {
-      step = new CoreAssertions.NotOkAssertion().toJSON();
-    } else if (kind === CoreAssertions.ToBeAssertionKind) {
-      step = new CoreAssertions.ToBeAssertion().toJSON();
-    } else if (kind === CoreAssertions.NotToBeAssertionKind) {
-      step = new CoreAssertions.NotToBeAssertion().toJSON();
-    }
-    if (!step) {
-      return;
-    }
-    if (stepIndex === undefined) {
-      item.steps.push(step);
-    } else if (stepIndex === -1) {
-      item.steps.unshift(step);
-    } else {
-      item.steps.splice(stepIndex, 0, step);
-    }
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleReadValueStepChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as DataSteps.IReadValueStep | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    input.checkValidity();
-    step.path = input.value;
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleRoundPrecisionChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as TransformationSteps.IRoundStep | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    input.checkValidity();
-    step.precision = input.valueAsNumber;
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleSubstringStartChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as TransformationSteps.ISubstringStep | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    input.checkValidity();
-    step.start = input.valueAsNumber;
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleSubstringEndChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as TransformationSteps.ISubstringStep | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    input.checkValidity();
-    step.end = input.valueAsNumber;
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleEqualAssertionValueChange(e: Event): void {
-    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;
-    }
-    const assertion = this.model[assertionIndex];
-    if (!assertion) {
-      return;
-    }
-    const step = assertion.steps[stepIndex] as CoreAssertions.IEqualAssertion | undefined;
-    if (!step) {
-      return;
-    }
-    step.value = input.value;
-    step.dataType = this.detectInputDataType(assertion.steps.slice(0, stepIndex));
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleGreaterThanAssertionValueChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as CoreAssertions.IGreaterThanAssertion | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    input.checkValidity();
-    step.value = Number(input.value);
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleLessThanAssertionValueChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as CoreAssertions.ILessThanAssertion | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    input.checkValidity();
-    step.value = Number(input.value);
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleIncludesAssertionValueChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as CoreAssertions.IIncludesAssertion | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    input.checkValidity();
-    step.value = input.value;
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected handleMatchesAssertionValueChange(e: Event): void {
-    const step = this.stepFromChangeEvent(e) as CoreAssertions.IMatchesAssertion | undefined;
-    if (!step) {
-      return;
-    }
-    const input = e.target as Input;
-    step.value = input.value;
-    this.requestUpdate();
-    this.notifyChange();
-  }
-
-  protected validateRegexPattern(e: Event): void {
-    const input = e.target as Input;
-    try {
-      RegExp(input.value);
-      input.setCustomValidity('');
-    } catch (_) {
-      input.setCustomValidity('Pattern is invalid');
-    }
-    input.reportValidity();
-  }
-
-  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];
-  }
-
-  /**
-   * Detects the correct data type for the step value based on previous steps.
-   * 
-   * @param steps The steps before the current step
-   * @returns The data type for the step in the AMF namespace.
-   */
-  protected detectInputDataType(steps: IHttpStep[]): string {
-    // we reverse the list so we move from the last step.
-    const reversed = [...steps].reverse();
-    for (const step of reversed) {
-      if (step.kind === TransformationSteps.AsNumberStepKind) {
-        return AmfNamespace.aml.vocabularies.shapes.number;
-      }
-      if (step.kind === DataSteps.ReadDataSourceStepKind) {
-        const typed = step as DataSteps.IReadDataSourceStep;
-        if (typed.data === FlowResponseDataEnum.status) {
-          return AmfNamespace.aml.vocabularies.shapes.number;
-        }
-      }
-    }
-    return AmfNamespace.w3.xmlSchema.string;
-  }
-
-  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()}
-      ${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.renderDataSourceOptions()}
-      ${this.renderTransformationOptions()}
-      ${this.renderAssertionOptions()}
-    </section>
-    `;
-  }
-
-  protected renderStepChip(label: string, group: string, kind: string, variant?: string): TemplateResult {
-    return html`
-    <ui-chip 
-      draggable="true" 
-      data-group="${group}" 
-      data-kind="${kind}" 
-      data-variant="${ifDefined(variant)}" 
-      @dragstart="${this.handleDragStart}" 
-      @dragend="${this.handleDragEnd}"
-    >${label}</ui-chip>
-    `;
-  }
-
-  protected renderDataSourceChip(label: string, group: string, kind: string, source: FlowSourceEnum, data: FlowRequestDataEnum | FlowResponseDataEnum): TemplateResult {
-    return html`
-    <ui-chip 
-      draggable="true" 
-      data-group="${group}" 
-      data-kind="${kind}" 
-      data-source="${source}" 
-      data-data="${data}" 
-      @dragstart="${this.handleDragStart}" 
-      @dragend="${this.handleDragEnd}"
-    >${label}</ui-chip>
-    `;
-  }
-
-  protected renderDataSourceOptions(): TemplateResult {
-    return html`
-    <details class="assertion-group" open>
-      <summary>Data source</summary>
-      <div class="group-content">
-        ${this.renderDataSourceChip('Status code', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.status)}
-        ${this.renderDataSourceChip('Response headers', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.headers)}
-        ${this.renderDataSourceChip('Response body', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.body)}
-        ${this.renderDataSourceChip('Status message', 'data-source', DataSteps.ReadDataSourceStepKind, FlowSourceEnum.response, FlowResponseDataEnum.statusText)}
-      </div>
-    </details>
-    `;
-  }
-
-  protected renderTransformationOptions(): TemplateResult {
-    return html`
-    <details class="assertion-group" open>
-      <summary>Transformation</summary>
-      <div class="group-content">
-        ${this.renderStepChip('Read value', 'transformation', DataSteps.ReadValueStepKind)}
-        ${this.renderStepChip('As number', 'transformation', TransformationSteps.AsNumberStepKind)}
-        ${this.renderStepChip('Round', 'transformation', TransformationSteps.RoundStepKind)}
-        ${this.renderStepChip('To lower case', 'transformation', TransformationSteps.AsLowerCaseStepKind)}
-        ${this.renderStepChip('To upper case', 'transformation', TransformationSteps.AsUpperCaseStepKind)}
-        ${this.renderStepChip('Trim', 'transformation', TransformationSteps.TrimStepKind)}
-        ${this.renderStepChip('Substring', 'transformation', TransformationSteps.SubstringStepKind)}
-      </div>
-    </details>
-    `;
-  }
-
-  protected renderAssertionOptions(): TemplateResult {
-    return html`
-    <details class="assertion-group" open>
-      <summary>Assertions</summary>
-      <div class="group-content">
-        ${this.renderStepChip('Equal', 'assertion', CoreAssertions.EqualAssertionKind)}
-        ${this.renderStepChip('Not equal', 'assertion', CoreAssertions.NotEqualAssertionKind)}
-        ${this.renderStepChip('Greater than', 'assertion', CoreAssertions.GreaterThanAssertionKind)}
-        ${this.renderStepChip('Greater than equal', 'assertion', CoreAssertions.GreaterThanAssertionKind, 'equal')}
-        ${this.renderStepChip('Less than', 'assertion', CoreAssertions.LessThanAssertionKind)}
-        ${this.renderStepChip('Less than equal', 'assertion', CoreAssertions.LessThanAssertionKind, 'equal')}
-        ${this.renderStepChip('Includes', 'assertion', CoreAssertions.IncludesAssertionKind)}
-        ${this.renderStepChip('Not includes', 'assertion', CoreAssertions.NotIncludesAssertionKind)}
-        ${this.renderStepChip('Matches', 'assertion', CoreAssertions.MatchesAssertionKind)}
-        ${this.renderStepChip('OK', 'assertion', CoreAssertions.OkAssertionKind)}
-        ${this.renderStepChip('Not OK', 'assertion', CoreAssertions.NotOkAssertionKind)}
-        ${this.renderStepChip('To be...', 'assertion', CoreAssertions.ToBeAssertionKind)}
-        ${this.renderStepChip('Not to be...', 'assertion', CoreAssertions.NotToBeAssertionKind)}
-      </div>
-    </details>
-    `;
-  }
-
-  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">${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`
-    ${this.renderAssertionDescription(item)}
-    <div class="param-row">
-      ${this.renderToggleButton(item, index)}
-      ${this.renderSteps(item, index)}
-      <div class="assertion-actions">
-        ${this.renderRenameAssertion(index)}
-        ${this.renderDeleteAssertion(index)}
-      </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 renderSteps(item: IHttpAssertion, assertionIndex: number): TemplateResult {
-    const content = Array.isArray(item.steps) && !!item.steps.length ? this.renderStepsList(item.steps, assertionIndex) : this.renderEmptyStep(assertionIndex);
-    return html`
-    <div 
-      class="steps" 
-      data-index="${assertionIndex}"
-      @drop="${this.handleDrop}" 
-      @dragover="${this.handleTargetDragOver}"
-      @dragleave="${this.handleTargetDragLeave}"
-    >${content}</div>
-    `;
-  }
-
-  protected renderEmptyStep(assertionIndex: number): TemplateResult {
-    return html`
-    <span class="step-pill empty drop-target space-step-left" data-index="${assertionIndex}" @drop="${this.handleDrop}" @dragover="${this.handleTargetDragOver}">Empty slot</span>
-    <span class="drop-info drop-target space-step-left" data-index="${assertionIndex}" @drop="${this.handleDrop}" @dragover="${this.handleTargetDragOver}">Drop an action here</span>
-    `;
-  }
-
-  protected renderStepsList(steps: IHttpStep[], assertionIndex: number): TemplateResult[] {
-    const items: TemplateResult[] = [];
-    steps.forEach((item, stepIndex) => {
-      const content = this.renderStep(item, assertionIndex, stepIndex);
-      if (content) {
-        items.push(html`
-        <div class="step-unit">
-          ${this.renderDropSpacer(assertionIndex, stepIndex)}
-          ${content}
-        </div>
-        `);
-      }
-    });
-    return items;
-  }
-
-  protected renderStep(item: IHttpStep, assertionIndex: number, stepIndex: number): TemplateResult | undefined {
-    const { kind } = item;
-    switch (kind) {
-      case DataSteps.ReadDataSourceStepKind: return this.renderReadDataSourceStep(item, assertionIndex, stepIndex);
-      case DataSteps.ReadValueStepKind: return this.renderReadValueStep(item as DataSteps.IReadValueStep, assertionIndex, stepIndex);
-
-      // transformations
-      case TransformationSteps.AsNumberStepKind: return this.renderStepPill('As number', assertionIndex, stepIndex);
-      case TransformationSteps.AsLowerCaseStepKind: return this.renderStepPill('To lower case', assertionIndex, stepIndex);
-      case TransformationSteps.AsUpperCaseStepKind: return this.renderStepPill('To upper case', assertionIndex, stepIndex);
-      case TransformationSteps.TrimStepKind: return this.renderStepPill('Trim', assertionIndex, stepIndex);
-      case TransformationSteps.RoundStepKind: return this.renderRoundStep(item as TransformationSteps.IRoundStep, assertionIndex, stepIndex);
-      case TransformationSteps.SubstringStepKind: return this.renderSubstringStep(item as TransformationSteps.ISubstringStep, assertionIndex, stepIndex);
-
-      // assertions
-      case CoreAssertions.EqualAssertionKind: return this.renderEqualAssertion(item as CoreAssertions.IEqualAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.NotEqualAssertionKind: return this.renderNotEqualAssertion(item as CoreAssertions.INotEqualAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.GreaterThanAssertionKind: return this.renderGreaterThanAssertion(item as CoreAssertions.IGreaterThanAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.LessThanAssertionKind: return this.renderLessThanAssertion(item as CoreAssertions.ILessThanAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.IncludesAssertionKind: return this.renderIncludesAssertion(item as CoreAssertions.IIncludesAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.NotIncludesAssertionKind: return this.renderNotIncludesAssertion(item as CoreAssertions.INotIncludesAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.MatchesAssertionKind: return this.renderMatchesAssertion(item as CoreAssertions.IMatchesAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.OkAssertionKind: return this.renderStepPill('Is OK', assertionIndex, stepIndex);
-      case CoreAssertions.NotOkAssertionKind: return this.renderStepPill('Is not OK', assertionIndex, stepIndex);
-      case CoreAssertions.ToBeAssertionKind: return this.renderToBeAssertion(item as CoreAssertions.IToBeAssertion, assertionIndex, stepIndex);
-      case CoreAssertions.NotToBeAssertionKind: return this.renderNotToBeAssertion(item as CoreAssertions.INotToBeAssertion, assertionIndex, stepIndex);
-      default: return undefined;
-    }
-  }
-
-  protected renderDropSpacer(assertionIndex: number, stepIndex: number): TemplateResult {
-    return html`<div class="drop-target spacer" 
-      data-index="${assertionIndex}" 
-      data-step-index="${stepIndex}" 
-      @drop="${this.handleDrop}" 
-      @dragover="${this.handleTargetDragOver}"
-      @dragleave="${this.handleTargetDragLeave}"
-    > </div>`;
-  }
-
-  protected renderStepPill(label: string, assertionIndex: number, stepIndex: number): TemplateResult {
-    return html`
-    <span class="step-pill with-icon">
-      ${label}
-      <ui-icon-button
-        title="Remove"
-        aria-label="Deletes this step"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close"></ui-icon></ui-icon-button>
-    </span>
-    `;
-  }
-
-  protected renderReadDataSourceStep(item: DataSteps.IReadDataSourceStep, assertionIndex: number, stepIndex: number): TemplateResult | undefined {
-    const { data, source } = item;
-    if (!data || !source) {
-      // invalid configuration
-      return undefined;
-    }
-    let label: string | undefined;
-    if (source === FlowSourceEnum.response) {
-      if (data === FlowResponseDataEnum.url) {
-        label = 'Response URL';
-      } else if (data === FlowResponseDataEnum.headers) {
-        label = 'Response headers';
-      } else if (data === FlowResponseDataEnum.status) {
-        label = 'Status code';
-      } else if (data === FlowResponseDataEnum.statusText) {
-        label = 'Status message';
-      } else if (data === FlowResponseDataEnum.body) {
-        label = 'Response body';
-      }
-    } else if (source === FlowSourceEnum.request) {
-      if (data === FlowRequestDataEnum.url) {
-        label = 'Request URL';
-      } else if (data === FlowRequestDataEnum.headers) {
-        label = 'Request headers';
-      } else if (data === FlowRequestDataEnum.body) {
-        label = 'Request body';
-      } else if (data === FlowRequestDataEnum.method) {
-        label = 'Request method';
-      }
-    }
-    if (!label) {
-      return undefined;
-    }
-    return this.renderStepPill(label, assertionIndex, stepIndex);
-  }
-
-  protected renderReadValueStep(item: DataSteps.IReadValueStep, assertionIndex: number, stepIndex: number): TemplateResult {
-    return html`
-    <ui-text-field
-      name="value.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="Read value"
-      required
-      .value="${live(item.path || '')}"
-      @change="${this.handleReadValueStepChange}"
-    ></ui-text-field>
-    `;
-  }
-
-  protected renderRoundStep(item: TransformationSteps.IRoundStep, assertionIndex: number, stepIndex: number): TemplateResult {
-    const pill = this.renderStepPill('Round', assertionIndex, stepIndex);
-    const { precision = 0 } = item;
-    return html`
-    ${pill}
-    <ui-text-field
-      name="precision.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="Precision"
-      required
-      .value="${live(String(precision))}"
-      @change="${this.handleRoundPrecisionChange}"
-      class="space-step-left number-input"
-      type="number"
-      min="0"
-      max="100"
-      step="1"
-      title="The number of digits to appear after the decimal point. Should be a value between 0 and 100, inclusive."
-    ></ui-text-field>
-    `;
-  }
-
-  protected renderSubstringStep(item: TransformationSteps.ISubstringStep, assertionIndex: number, stepIndex: number): TemplateResult {
-    const pill = this.renderStepPill('Substring', assertionIndex, stepIndex);
-    const { start = 0, end } = item;
-    return html`
-    ${pill}
-    <ui-text-field
-      name="start.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="Start"
-      required
-      .value="${live(String(start))}"
-      @change="${this.handleSubstringStartChange}"
-      class="space-step-left number-input"
-      type="number"
-      step="1"
-      title="The index of the first character to include in the returned substring."
-    ></ui-text-field>
-
-    <ui-text-field
-      name="end.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      label="End"
-      .value="${live(end ? String(end) : '')}"
-      @change="${this.handleSubstringEndChange}"
-      class="space-step-left number-input"
-      type="number"
-      step="1"
-      title="The index of the first character to exclude from the returned substring."
-    ></ui-text-field>
-    `;
-  }
-
-  protected renderEqualAssertion(item: CoreAssertions.IEqualAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    return html`
-    <ui-text-field
-      name="equal.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.EqualAssertionKind}"
-      label="Equal to"
-      required
-      .value="${live(item.value || '')}"
-      @change="${this.handleEqualAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderNotEqualAssertion(item: CoreAssertions.INotEqualAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    return html`
-    <ui-text-field
-      name="not-equal.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.NotEqualAssertionKind}"
-      label="Not equal to"
-      required
-      .value="${live(item.value || '')}"
-      @change="${this.handleEqualAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderGreaterThanAssertion(item: CoreAssertions.IGreaterThanAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    const { equal, value } = item;
-    const label = equal ? 'Greater than equal' : 'Greater than';
-    const effectiveValue = typeof value === 'number' ? String(value) : '';
-    return html`
-    <ui-text-field
-      name="value.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.GreaterThanAssertionKind}"
-      data-variant="${equal ? 'equal' : ''}"
-      label="${label}"
-      required
-      .value="${live(effectiveValue)}"
-      @change="${this.handleGreaterThanAssertionValueChange}"
-      inputMode="numeric"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderLessThanAssertion(item: CoreAssertions.ILessThanAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    const { equal, value } = item;
-    const label = equal ? 'Less than equal' : 'Less than';
-    const effectiveValue = typeof value === 'number' ? String(value) : '';
-    return html`
-    <ui-text-field
-      name="value.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.LessThanAssertionKind}"
-      data-variant="${equal ? 'equal' : ''}"
-      label="${label}"
-      required
-      .value="${live(effectiveValue)}"
-      @change="${this.handleLessThanAssertionValueChange}"
-      inputMode="numeric"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderIncludesAssertion(item: CoreAssertions.IIncludesAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    const { value } = item;
-    return html`
-    <ui-text-field
-      name="includes.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.IncludesAssertionKind}"
-      label="Includes value"
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleIncludesAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderNotIncludesAssertion(item: CoreAssertions.INotIncludesAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    const { value } = item;
-    return html`
-    <ui-text-field
-      name="not-includes.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.NotIncludesAssertionKind}"
-      label="Not includes value"
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleIncludesAssertionValueChange}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderMatchesAssertion(item: CoreAssertions.IMatchesAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    const { value } = item;
-    return html`
-    <ui-text-field
-      name="matches.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.MatchesAssertionKind}"
-      label="Matches regex"
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleMatchesAssertionValueChange}"
-      @input="${this.validateRegexPattern}"
-      invalidText="Pattern is invalid"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderToBeAssertion(item: CoreAssertions.IToBeAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    const { value } = item;
-    const types = Object.values(CoreAssertions.ToBeTypes);
-    return html`
-    <ui-text-field
-      name="to-be.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.ToBeAssertionKind}"
-      label="To be..."
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleMatchesAssertionValueChange}"
-      .list="${types}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderNotToBeAssertion(item: CoreAssertions.INotToBeAssertion, assertionIndex: number, stepIndex: number): TemplateResult {
-    const { value } = item;
-    const types = Object.values(CoreAssertions.ToBeTypes);
-    return html`
-    <ui-text-field
-      name="not-to-be.${assertionIndex}.${stepIndex}"
-      data-assertion-index="${assertionIndex}"
-      data-step-index="${stepIndex}"
-      data-kind="${CoreAssertions.NotToBeAssertionKind}"
-      label="Not to be..."
-      required
-      .value="${live(value || '')}"
-      @change="${this.handleMatchesAssertionValueChange}"
-      .list="${types}"
-    >
-      <ui-icon-button
-        slot="suffix"
-        title="Remove assertion"
-        aria-label="Deletes this assertion"
-        @click="${this.handleRemoveStep}"
-        data-index="${assertionIndex}"
-        data-step-index="${stepIndex}"
-      ><ui-icon icon="close" role="presentation"></ui-icon></ui-icon-button>
-    </ui-text-field>
-    `;
-  }
-
-  protected renderRenameAssertionDialog(): TemplateResult {
-    return html`
-    <ui-dialog modal class="rename-dialog" @close="${this.handleRenameDialogResult}">
-      <ui-icon slot="icon" icon="rename"></ui-icon>
-      <span slot="title">Rename assertion</span>
-      
-      <ui-text-field
-        name="rename"
-        label="Assertion description"
-        required
-      ></ui-text-field>
-
-      <ui-button slot="button" value="dismiss" type="text">Cancel</ui-button>
-      <ui-button slot="button" value="confirm" type="text">Accept</ui-button>
-    </ui-dialog>
-    `;
-  }
-}