@api-client/ui 0.5.58 → 0.6.1

package/src/modeling/internals/DomainValidationReport.ts

@@ -0,0 +1,291 @@
+import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { DomainAssociationKind, DomainEntityKind, DomainPropertyKind } from '@api-client/core/models/kinds.js'
+import type { DomainValidation } from '@api-client/core/modeling/validation/rules.js'
+import type { SchemaSelectionInfo } from '../types.js'
+import type { DataDomain } from '@api-client/core/browser.js'
+
+/**
+ * An element that specializes in displaying a domain validation report.
+ * It is used in the context of the domain validation process.
+ *
+ * The report is generated elsewhere and passed to this element for display.
+ *
+ * @fires openissue {CustomEvent<SchemaSelectionInfo>} Fired when the user clicks on the "Open" button
+ *   of a validation issue.
+ *   The detail contains `SchemaSelectionInfo` with the entity/property/association to navigate to.
+ * @fires autofix - Fired when the user clicks on the "Auto fix" button.
+ */
+export default class DomainValidationReport extends LitElement {
+  /**
+   * The generated report of domain validation.
+   */
+  @property({ type: Array }) accessor report: DomainValidation[] = []
+
+  /**
+   * The domain that was validated.
+   * This is used to provide context for the validation report.
+   */
+  @property({ type: Object }) accessor domain: DataDomain | undefined
+  /**
+   * When set to true, the UI will include an "Auto fix" button
+   * that allows the user to attempt to automatically fix issues in the report.
+   * The host must handle the `autofix` event to perform the actual fixing.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor withAutoFix = false
+  /**
+   * The number of issues with the severity of "info".
+   */
+  @state() accessor infoCount = 0
+  /**
+   * The number of issues with the severity of "warning".
+   */
+  @state() accessor warningCount = 0
+  /**
+   * The number of issues with the severity of "error".
+   */
+  @state() accessor errorCount = 0
+  /**
+   * Controls which severity levels are currently shown.
+   * Determines which validation messages are filtered and displayed.
+   */
+  @state() accessor visibleSeverities = new Set<'error' | 'warning' | 'info'>()
+  /**
+   * Cached filtered report based on current severity filters.
+   * This improves performance by avoiding re-filtering on every render.
+   */
+  @state() accessor filteredReport: DomainValidation[] = []
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    super.willUpdate(cp)
+    if (cp.has('report')) {
+      this.computeIssueCounters()
+      this.setDefaultFilters()
+      this.updateFilteredReport()
+    }
+    if (cp.has('visibleSeverities')) {
+      this.updateFilteredReport()
+    }
+  }
+
+  /**
+   * Computes the number of issues in the report based on their severity.
+   * This method is called whenever the `report` is updated.
+   */
+  protected computeIssueCounters(): void {
+    this.infoCount = this.report.filter((validation) => validation.severity === 'info').length
+    this.warningCount = this.report.filter((validation) => validation.severity === 'warning').length
+    this.errorCount = this.report.filter((validation) => validation.severity === 'error').length
+  }
+
+  /**
+   * Sets the default filters based on available issues.
+   * By default shows errors. If no errors, shows warnings. Never shows notices by default.
+   */
+  protected setDefaultFilters(): void {
+    if (this.errorCount > 0) {
+      this.visibleSeverities = new Set(['error'])
+    } else if (this.warningCount > 0) {
+      this.visibleSeverities = new Set(['warning'])
+    } else {
+      this.visibleSeverities = new Set()
+    }
+  }
+
+  /**
+   * Updates the filtered report based on the current severity filters.
+   * This method is called whenever the visibility filters change.
+   */
+  protected updateFilteredReport(): void {
+    this.filteredReport = this.report.filter((validation) =>
+      this.visibleSeverities.has(validation.severity as 'error' | 'warning' | 'info')
+    )
+  }
+
+  /**
+   * Handles the filter button click events.
+   * Toggles the visibility of validation messages by severity.
+   */
+  protected handleFilterClick(e: Event): void {
+    const target = e.target as HTMLElement
+    const severity = target.dataset.severity as 'error' | 'warning' | 'info'
+    if (!severity) {
+      return
+    }
+
+    const newVisibleSeverities = new Set(this.visibleSeverities)
+    if (newVisibleSeverities.has(severity)) {
+      newVisibleSeverities.delete(severity)
+    } else {
+      newVisibleSeverities.add(severity)
+    }
+    this.visibleSeverities = newVisibleSeverities
+  }
+
+  /**
+   * A handler for the "Open" button click event.
+   * It prepares the Intent data to be used to run the activity
+   * that will open the corresponding issue.
+   */
+  protected handleOpenIssue(e: Event): void {
+    const target = e.target as HTMLElement
+    const index = target.dataset.index
+    if (!index) {
+      return
+    }
+    const validation = this.filteredReport[Number(index)]
+    if (!validation) {
+      return
+    }
+    const { key, kind, parent } = validation
+    const data: SchemaSelectionInfo = {}
+    if (kind === DomainEntityKind) {
+      data.selection = {
+        key,
+        kind,
+        domain: this.domain?.key || '',
+      }
+    } else if (kind === DomainPropertyKind && parent) {
+      data.selection = {
+        key: parent,
+        kind: DomainEntityKind,
+        domain: this.domain?.key || '',
+      }
+      data.field = {
+        key,
+        kind,
+        domain: this.domain?.key || '',
+      }
+    } else if (kind === DomainAssociationKind && parent) {
+      data.selection = {
+        key: parent,
+        kind: DomainEntityKind,
+        domain: this.domain?.key || '',
+      }
+      data.field = {
+        key,
+        kind,
+        domain: this.domain?.key || '',
+      }
+    } else {
+      return
+    }
+    const ev = new CustomEvent('openissue', {
+      detail: data,
+      bubbles: true,
+      composed: true,
+    })
+    this.dispatchEvent(ev)
+    // Events.Intent.startActivity(
+    //   {
+    //     action: QUICK_API_SCHEMA,
+    //     data,
+    //   },
+    //   this
+    // )
+  }
+
+  handleAutoFix(): void {
+    this.dispatchEvent(new Event('autofix'))
+  }
+
+  override render(): TemplateResult | typeof nothing {
+    if (this.report.length === 0) {
+      return nothing
+    }
+    return html`
+      <div class="validation-report-content">
+        ${this.#renderFilters()}${this.#renderStatus()}
+        <ul class="report">
+          ${this.filteredReport.map((validation, i) => this.#renderValidation(validation, i))}
+        </ul>
+      </div>
+    `
+  }
+
+  #renderStatus(): TemplateResult {
+    const filteredCount = this.filteredReport.length
+    const totalCount = this.report.length
+
+    return html` <div class="status">Showing ${filteredCount} of ${totalCount}</div> `
+  }
+
+  #renderFilters(): TemplateResult {
+    const isErrorVisible = this.visibleSeverities.has('error')
+    const isWarningVisible = this.visibleSeverities.has('warning')
+    const isInfoVisible = this.visibleSeverities.has('info')
+
+    return html`
+      <div class="filters" @click="${this.handleFilterClick}">
+        <ui-button-group type="connected" multiple>
+          <ui-button
+            color="tonal"
+            size="xs"
+            toggle
+            data-severity="error"
+            ?selected="${isErrorVisible}"
+            ?disabled="${this.errorCount === 0}"
+          >
+            ${isErrorVisible ? html`<ui-icon slot="icon">check</ui-icon>` : nothing}Errors (${this.errorCount})
+          </ui-button>
+          <ui-button
+            color="tonal"
+            size="xs"
+            toggle
+            data-severity="warning"
+            ?selected="${isWarningVisible}"
+            ?disabled="${this.warningCount === 0}"
+          >
+            ${isWarningVisible ? html`<ui-icon slot="icon">check</ui-icon>` : nothing}Warnings (${this.warningCount})
+          </ui-button>
+          <ui-button
+            color="tonal"
+            size="xs"
+            toggle
+            data-severity="info"
+            ?selected="${isInfoVisible}"
+            ?disabled="${this.infoCount === 0}"
+          >
+            ${isInfoVisible ? html`<ui-icon slot="icon">check</ui-icon>` : nothing}Notices (${this.infoCount})
+          </ui-button>
+        </ui-button-group>
+        ${this.withAutoFix ? this.#renderAutoFixButton() : nothing}
+      </div>
+    `
+  }
+
+  #renderAutoFixButton(): TemplateResult {
+    return html`
+      <ui-button color="outlined" @click="${this.handleAutoFix}" title="Fix all auto fixable issues">
+        <ui-icon slot="icon">autorenew</ui-icon> Auto fix
+      </ui-button>
+    `
+  }
+
+  #renderValidation(validation: DomainValidation, index: number): TemplateResult {
+    const { message, severity, help } = validation
+    let icon = ''
+    switch (severity) {
+      case 'warning':
+        icon = 'warning'
+        break
+      case 'error':
+        icon = 'error'
+        break
+      default:
+        icon = 'info'
+        break
+    }
+    return html`
+      <li class="${severity}">
+        <ui-icon class="report-icon">${icon}</ui-icon>
+        <div class="report-details">
+          <span class="report-message">${message}</span>
+          ${help ? html`<span class="report-help">${help}</span>` : ''}
+        </div>
+        <ui-button color="text" data-index="${index}" @click="${this.handleOpenIssue}">Open</ui-button>
+      </li>
+    `
+  }
+}

package/src/modeling/internals/ModelingElement.ts

@@ -0,0 +1,95 @@
+import type { DataDomain } from '@api-client/core/modeling/DataDomain.js'
+import { LitElement, PropertyValues } from 'lit'
+import { property } from 'lit/decorators.js'
+import { fromError } from '../../exceptions/builder.js'
+
+/**
+ * Base class for modeling elements
+ *
+ * @fires change - When something changed
+ * @fires error - When an error occurred. The event detail will contain an Exception object.
+ */
+export class ModelingElement extends LitElement {
+  /**
+   * The instance of the root DataNamespace.
+   */
+  @property({ type: Object }) accessor root: DataDomain | undefined
+  /**
+   * The parent namespace this element belongs to.
+   * When rendering a foreign domain, this will be the namespace of the foreign domain.
+   * Normally, this is the `key` of the root DataDomain.
+   */
+  @property({ type: String }) accessor namespace: string | undefined
+
+  /**
+   * The selected object that this element is interested in.
+   * @attribute
+   */
+  @property({ type: String }) accessor selected: string | undefined
+  /**
+   * If true, the element is in read-only mode.
+   * This means that the element will not allow any modifications to the data.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor readOnly: boolean | undefined
+
+  /**
+   * Computed property that indicates if the element is a foreign element.
+   * A foreign element is one that is not part of the root DataDomain.
+   */
+  protected get isForeignElement(): boolean {
+    return this.root !== undefined && this.namespace !== this.root.key
+  }
+
+  /**
+   * Computed property that indicates if the element can be edited.
+   * An element can be edited if it is not read-only and is not a foreign element.
+   */
+  protected get canEdit(): boolean {
+    return !this.readOnly && !this.isForeignElement
+  }
+
+  constructor() {
+    super()
+    this.handleDomainChange = this.handleDomainChange.bind(this)
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('root')) {
+      const old = cp.get('root')
+      if (old) {
+        old.removeEventListener('change', this.handleDomainChange)
+      }
+      this.root?.addEventListener('change', this.handleDomainChange)
+    }
+    super.willUpdate(cp)
+  }
+
+  protected handleDomainChange(): void {
+    this.requestUpdate()
+  }
+
+  /**
+   * A common way for an element to notify a change.
+   */
+  notifyChange(): void {
+    this.dispatchEvent(new Event('change'))
+  }
+
+  /**
+   * Reports an error to the element.
+   * It will dispatch an 'error' event with the Exception object as the detail.
+   * It unifies the error handling across the application.
+   * @param error The error to report.
+   */
+  reportError(error: Error): void {
+    const e = fromError(error)
+    this.dispatchEvent(
+      new CustomEvent('error', {
+        bubbles: true,
+        composed: true,
+        detail: e,
+      })
+    )
+  }
+}

package/src/modeling/internals/styles/AccessConfiguration.styles.ts

@@ -0,0 +1,106 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: flex;
+    padding: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+  }
+
+  .intro {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+
+    .header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      align-self: stretch;
+
+      .title-large {
+        flex: 1 0 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .inline-help {
+        align-self: stretch;
+        color: var(--md-sys-color-on-surface);
+      }
+    }
+  }
+
+  .rules {
+    align-self: stretch;
+  }
+
+  .rule-divider {
+    align-self: stretch;
+  }
+
+  .rule {
+    align-self: stretch;
+  }
+
+  .rule-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    color: var(--md-sys-color-on-surface);
+
+    .actions {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .rule-explainer {
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 12px;
+    align-self: stretch;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    background: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+  }
+
+  .domain-input {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    align-self: stretch;
+
+    .domain-field {
+      flex: 1 0 0;
+    }
+  }
+
+  .email-domains {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+  }
+
+  .resource-owner-details {
+    margin-top: 8px;
+
+    .error-message {
+      color: var(--md-sys-color-error);
+      background-color: var(--md-sys-color-error-container);
+      padding: 4px 8px;
+      border-radius: var(--md-sys-shape-corner-small, 4px);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+`

package/src/modeling/internals/styles/ApiCreateActionEditor.styles.ts

@@ -0,0 +1,15 @@
+import { css } from 'lit'
+import common from './EditorCommon.styles.js'
+import form from './form_styles.js'
+
+export default [
+  common,
+  form,
+  css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  `,
+] as const

package/src/modeling/internals/styles/ApiDeleteActionEditor.styles.ts

@@ -0,0 +1,15 @@
+import { css } from 'lit'
+import common from './EditorCommon.styles.js'
+import form from './form_styles.js'
+
+export default [
+  common,
+  form,
+  css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  `,
+] as const

package/src/modeling/internals/styles/ApiListActionEditor.styles.ts

@@ -0,0 +1,15 @@
+import { css } from 'lit'
+import common from './EditorCommon.styles.js'
+import form from './form_styles.js'
+
+export default [
+  common,
+  form,
+  css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  `,
+] as const

package/src/modeling/internals/styles/ApiModelingActionsScreen.styles.ts

@@ -0,0 +1,31 @@
+import { css } from 'lit'
+
+export default css`
+  .exposed-canvas {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    overflow: auto;
+  }
+
+  .exposure-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    border-bottom: 1px var(--md-sys-color-outline-variant) solid;
+    padding-bottom: 12px;
+  }
+
+  .children-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .child-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+`

package/src/modeling/internals/styles/ApiModelingEntityCard.ts

@@ -0,0 +1,85 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: inline-flex;
+    align-items: flex-start;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    border: 1px solid var(--md-sys-color-outline-variant);
+
+    background: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .entity-card {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+
+    .entity {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+
+      .header {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+        gap: 16px;
+        align-self: stretch;
+
+        .headline {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          flex: 1 0 0;
+
+          .path {
+            color: var(--md-sys-color-on-surface-variant);
+          }
+        }
+      }
+
+      .actions-section {
+        display: flex;
+        padding: 0 16px 16px 16px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 8px;
+        align-self: stretch;
+
+        .actions {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 8px;
+          flex: 1 0 0;
+        }
+
+        .chip-list {
+          display: flex;
+          align-items: flex-start;
+          align-content: flex-start;
+          gap: 16px;
+          align-self: stretch;
+        }
+      }
+    }
+
+    .footer {
+      display: flex;
+      padding: 0 16px 8px 16px;
+      align-items: center;
+      gap: 16px;
+      align-self: stretch;
+
+      .action-buttons {
+        display: flex;
+        align-items: center;
+        flex: 1 0 0;
+      }
+    }
+  }
+`