@api-client/ui 0.5.57 → 0.6.0

package/src/elements/data-table/internals/DataCatalogTable.ts

@@ -0,0 +1,234 @@
+import { html, PropertyValues, TemplateResult } from 'lit'
+import { DataTable } from '../DataTable.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import type { DataCatalogSchemaWithVersion } from '@api-client/core/models/DataCatalog.js'
+import { schemaModel as schemaIcon } from '../../../md/icons/Icons.js'
+import type { UiListSelection } from '../../../md/list/internals/List.js'
+import { property } from 'lit/decorators.js'
+
+/**
+ * Represents a selection in the data catalog browser.
+ */
+export interface DataCatalogTableSelectionDetail {
+  /**
+   * The schema that was selected.
+   * When not set, the selection was cleared.
+   */
+  item?: DataCatalogSchemaWithVersion
+  /**
+   * The version of the schema that was selected.
+   * When not set, the selection was cleared.
+   */
+  version?: string
+}
+
+/**
+ * @fires CustomEvent<DataCatalogTableSelectionDetail> select - Dispatched when the selection in the table changes.
+ */
+export default class DataCatalogTable extends DataTable<DataCatalogSchemaWithVersion> {
+  // @ts-expect-error This is to explicitly declare the type as LitPlugin does not handle this situation.
+  declare items: LiveData<DataCatalogSchemaWithVersion[]> | undefined
+
+  /**
+   * When the user makes a selection, this map will contain the selected version for a schema.
+   */
+  selectedVersions = new Map<string, string>()
+
+  /**
+   * When set, the table will render additional column with a button to directly select the item.
+   * Note, the row selection will not be available in this case.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor directSelect = false
+
+  constructor() {
+    super()
+    if (this.directSelect) {
+      this.selection = 'none'
+    } else {
+      this.selection = 'single'
+      this.active = true
+    }
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('directSelect')) {
+      if (this.directSelect) {
+        this.selection = 'none'
+        this.active = false
+        this.clearSelection()
+      } else {
+        this.selection = 'single'
+        this.active = true
+      }
+    }
+    if (cp.has('items')) {
+      this.clearSelection()
+    }
+  }
+
+  protected clearSelection(): void {
+    this.selectedVersions.clear()
+    const hasSelected = this.selectedItems[0]
+    this.selectedItems = []
+    if (hasSelected) {
+      this.notifySelect([])
+    }
+  }
+
+  protected handleVersionSelect(e: CustomEvent<UiListSelection>): void {
+    const target = e.detail.item
+    const value = target.dataset.value
+    const key = target.dataset.key
+    if (!value || !key) {
+      return
+    }
+    this.selectedVersions.set(key, value)
+    const popover = this.shadowRoot?.getElementById(`select-${key}`) as HTMLElement | null
+    if (popover) {
+      popover.hidePopover()
+    }
+    const anchor = this.shadowRoot?.querySelector(`[popovertarget="select-${key}"]`) as HTMLElement | null
+    if (anchor) {
+      anchor.focus()
+    }
+    this.requestUpdate()
+    const selected = this.selectedItems[0]
+    if (selected && selected.key === key) {
+      // if the selected item is the one that was just updated, notify the parent
+      this.notifySelect([selected])
+    }
+  }
+
+  protected override notifySelect(selectedItems: DataCatalogSchemaWithVersion[]): void {
+    const selected = selectedItems[0]
+    const detail: DataCatalogTableSelectionDetail = {}
+    if (selected) {
+      detail.item = selected
+      detail.version = this.selectedVersions.get(selected.key) || selected.versions[0].version
+    }
+    this.dispatchEvent(
+      new CustomEvent('select', {
+        bubbles: true,
+        composed: true,
+        detail,
+      })
+    )
+  }
+
+  override renderHeader(): TemplateResult[] {
+    const result: TemplateResult[] = [
+      this.renderHeaderCell('Name', 0),
+      this.renderHeaderCell('Version', 1, { delegateFocus: true }),
+      this.renderHeaderCell('Lifecycle', 2),
+      this.renderHeaderCell('Organization', 3),
+      this.renderHeaderCell('Published', 4),
+    ]
+    if (this.directSelect) {
+      result.push(this.renderHeaderCell('', 5, { classes: ['actions'], delegateFocus: true, ariaLabel: 'Actions' }))
+    }
+    return result
+  }
+
+  override renderRowValues(item: DataCatalogSchemaWithVersion, index: number): TemplateResult[] {
+    const result: TemplateResult[] = [
+      this.#nameCell(item, index, 0),
+      this.#versionCell(item, index, 1),
+      this.#lifecycleCell(item, index, 2),
+      this.#organizationCell(item, index, 3),
+      this.#publishedCell(item, index, 4),
+    ]
+    if (this.directSelect) {
+      result.push(this.#actionCell(item, index, 5))
+    }
+    return result
+  }
+
+  #nameCell(item: DataCatalogSchemaWithVersion, row: number, col: number): TemplateResult {
+    const content = html`<ui-icon class="cell-icon" role="presentation">${schemaIcon}</ui-icon> ${item.name}`
+    return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true })
+  }
+
+  #versionCell(item: DataCatalogSchemaWithVersion, row: number, col: number): TemplateResult {
+    if (item.versions.length === 1) {
+      return this.renderCell(item.versions[0].version, row, col, { classes: ['version'] })
+    }
+    const selectedVersion = this.selectedVersions.get(item.key) || item.versions[0].version
+    const content = html`<ui-button
+        size="xs"
+        color="text"
+        class="version-label"
+        trailingIcon
+        popovertarget="select-${item.key}"
+        style="${styleMap({ 'anchor-name': `--select-${item.key}` })}"
+        part="version-button"
+        ><ui-icon slot="icon">arrow_drop_down</ui-icon>${selectedVersion}</ui-button
+      ><ui-listbox
+        popover="auto"
+        id="select-${item.key}"
+        class="version-listbox"
+        role="listbox"
+        aria-label="Select version"
+        style="${styleMap({ 'position-anchor': `--select-${item.key}` })}"
+        part="version-listbox"
+        @select="${this.handleVersionSelect}"
+      >
+        ${item.versions.map(
+          (version) =>
+            html`<ui-list-item
+              class="version-item"
+              role="option"
+              lines="two"
+              data-value="${version.version}"
+              data-key="${item.key}"
+              aria-selected="${version.version === selectedVersion}"
+              part="version-item"
+            >
+              ${version.version}
+              <span slot="supporting-text">${version.lifecycle}</span>
+            </ui-list-item>`
+        )}
+      </ui-listbox>`
+    return this.renderCell(content, row, col, { classes: ['version'], delegateFocus: true })
+  }
+
+  #lifecycleCell(item: DataCatalogSchemaWithVersion, row: number, col: number): TemplateResult {
+    const selectedVersion = this.selectedVersions.get(item.key) || item.versions[0].version
+    const info = item.versions.find((v) => v.version === selectedVersion)
+    if (!info) {
+      return this.renderCell('Unknown', row, col, { classes: ['lifecycle'] })
+    }
+    const lifecycle = info.lifecycle.charAt(0).toUpperCase() + info.lifecycle.slice(1)
+    return this.renderCell(lifecycle, row, col, {
+      classes: ['lifecycle'],
+    })
+  }
+
+  #organizationCell(item: DataCatalogSchemaWithVersion, row: number, col: number): TemplateResult {
+    return this.renderCell(item.organization, row, col, {
+      classes: ['organization'],
+    })
+  }
+
+  #publishedCell(item: DataCatalogSchemaWithVersion, row: number, col: number): TemplateResult {
+    return this.renderCell(html`<ui-date-time date="${item.publishedAt}"></ui-date-time>`, row, col, {
+      classes: ['published'],
+    })
+  }
+
+  #actionCell(item: DataCatalogSchemaWithVersion, row: number, col: number): TemplateResult {
+    return this.renderCell(
+      html`<ui-button
+        size="xs"
+        color="outlined"
+        class="select-button"
+        @click="${() => this.notifySelect([item])}"
+        aria-label="Select ${item.name}"
+        >Select</ui-button
+      >`,
+      row,
+      col,
+      { classes: ['actions'], delegateFocus: true }
+    )
+  }
+}

package/src/elements/data-table/internals/Filesystem.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit'
+
+export default css`
+  .grid-cell.actions {
+    width: 48px;
+  }
+
+  .grid-cell.updated,
+  .grid-cell.owner {
+    width: 200px;
+    box-sizing: border-box;
+  }
+
+  .item-menu {
+    min-width: 200px;
+  }
+
+  .avatar {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+  }
+`

package/src/elements/data-table/internals/FilesystemDataTable.ts

@@ -0,0 +1,227 @@
+import { html, TemplateResult } from 'lit'
+import { type CellRenderOptions, DataTable } from '../DataTable.js'
+import { property } from 'lit/decorators.js'
+import { until } from 'lit/directives/until.js'
+import type { IFile } from '@api-client/core/models/store/File.js'
+import type { IUser } from '@api-client/core/models/store/User.js'
+import { FolderKind } from '@api-client/core/models/kinds.js'
+import { LiveData } from '../../../reactive/LiveData.js'
+import { relativeDay } from '../../../lib/time/Conversion.js'
+import type { UiMenuElement } from '../../../md/menu/ui-menu.js'
+import { fileIcon } from '../../../lib/files/Utils.js'
+import services from '../../../services/api_service.js'
+import type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js'
+
+/**
+ * A class that render QuickAPI file system.
+ * The user can browse files and perform actions on them.
+ *
+ * @fires rowaction Dispatched when the user triggers an action on the file.
+ *     - `detail`: An object with a `key` and `action` property
+ *     - Example: `{ key: 'abc', action: 'delete' }`
+ * @attribute sort
+ * @attribute sortDirection
+ */
+export default class FilesystemDataTable extends DataTable<IFile> {
+  /**
+   * The currently logged in user.
+   */
+  @property({ type: Object }) accessor user: IUser | undefined
+  /**
+   * The organization ID these files belongs to.
+   * @attribute
+   */
+  @property({ type: String }) accessor oid: string | undefined
+
+  // @ts-expect-error This is to explicitly declare the type as LitPlugin does not handle this situation.
+  declare items: LiveData<IFile[]> | undefined
+
+  protected handleFileMenuSelect(e: CustomEvent<{ item: UiMenuItemElement }>): void {
+    const { item } = e.detail
+    const menu = e.currentTarget as UiMenuElement
+    const { key } = menu.dataset
+    if (!key) {
+      return
+    }
+    if (!item.value) {
+      return
+    }
+    this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, action: item.value } }))
+  }
+
+  override renderEmpty(): TemplateResult {
+    return html`<slot name="empty"><p class="empty">You have no files.</p></slot>`
+  }
+
+  override renderHeader(): TemplateResult[] {
+    return [
+      this.renderHeaderCell('Name', 0, { sort: 'name' }),
+      this.renderHeaderCell('Owner', 1),
+      this.renderHeaderCell('Updated', 2),
+      this.renderHeaderCell(html`<span hidden aria-label="Row options">Menu</span>`, 3, { delegateFocus: true }),
+    ]
+  }
+
+  override renderRowValues(item: IFile, index: number): TemplateResult[] {
+    return [
+      this.#nameCell(item, index, 0),
+      this.#ownerCell(item, index, 1),
+      this.#updatedCell(item, index, 2),
+      this.renderCell(this.#renderFileMenu(item), index, 3, { classes: ['actions'], delegateFocus: true }),
+    ]
+  }
+
+  #nameCell(item: IFile, row: number, col: number): TemplateResult {
+    const icon = fileIcon(item)
+    const content = html`<ui-icon class="cell-icon" role="presentation">${icon}</ui-icon> ${item.info.name}`
+    return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true })
+  }
+
+  #ownerCell(item: IFile, row: number, col: number): TemplateResult {
+    const opts: CellRenderOptions = {
+      classes: ['owner'],
+    }
+    const { user } = this
+    if (!user) {
+      return this.renderCell(html`--`, row, col, opts)
+    }
+    const owner = item.permissions.find((p) => p.role === 'owner' && p.depth === 0)
+    if (!owner) {
+      return this.renderCell(html`<span aria-label="Unknown permission">--</span>`, row, col, opts)
+    }
+    if (owner.granteeId === user.key) {
+      return this.renderCell(
+        html`<ui-user-avatar role="presentation" class="avatar body-small" .user="${user}" type="icon"></ui-user-avatar
+          ><span aria-label="Owned by me" class="user-label">me</span>`,
+        row,
+        col,
+        opts
+      )
+    }
+    const content = this.#ownerCellAsync(owner.granteeId)
+    const loader = html`<span class="owner-loading">loading...</span>`
+    return this.renderCell(html`${until(content, loader)}`, row, col, opts)
+  }
+
+  async #ownerCellAsync(key: string): Promise<TemplateResult> {
+    if (!key) {
+      return html` <span aria-label="Owned by unknown user">invalid state</span> `
+    }
+    // @TODO: Use a context provider and decouple from services singleton
+    const cache = await services.get('userCache')
+    const user = await cache.getUser(key)
+    if (!user) {
+      return html` <span aria-label="Owned by unknown user">unknown</span> `
+    }
+    return html`<ui-user-avatar
+        role="presentation"
+        class="avatar body-small"
+        .user="${user}"
+        type="icon"
+      ></ui-user-avatar
+      ><span aria-label="Owned by ${user.name}" class="user-label">${user.name}</span>`
+  }
+
+  #updatedCell(item: IFile, row: number, col: number): TemplateResult {
+    const opts: CellRenderOptions = {
+      classes: ['updated'],
+    }
+    const { lastModified } = item
+    const relative = relativeDay(lastModified.time)
+    return this.renderCell(html`<span>${relative}</span>`, row, col, opts)
+  }
+
+  #renderFileMenu(item: IFile): TemplateResult {
+    return item.kind === FolderKind ? this.#renderFolderOptions(item) : this.#renderFileOptions(item)
+  }
+
+  #renderFolderOptions(item: IFile): TemplateResult {
+    const { key } = item
+    return html`
+      <ui-icon-button
+        data-key="${key}"
+        id="anchor-${key}"
+        aria-controls="menu-${key}"
+        tabindex="-1"
+        popoverTarget="menu-${key}"
+      >
+        <ui-icon>more_vert</ui-icon>
+      </ui-icon-button>
+      <ui-menu
+        class="item-menu"
+        popover="auto"
+        id="menu-${key}"
+        data-key="${key}"
+        @select="${this.handleFileMenuSelect}"
+      >
+        <ui-menu-item value="open">
+          <div>Open</div>
+          <ui-icon slot="start">folder_open</ui-icon>
+        </ui-menu-item>
+        <ui-menu-item value="share">
+          <div>Share</div>
+          <ui-icon slot="start">person_add</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <!-- <ui-menu-item value="move">
+          <div>Move</div>
+          <ui-icon slot="start">drive_file_move</ui-icon>
+        </ui-menu-item> -->
+        <ui-menu-item value="rename">
+          <div>Rename</div>
+          <ui-icon slot="start">edit</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <ui-menu-item value="delete">
+          <div>Delete</div>
+          <ui-icon slot="start">delete</ui-icon>
+        </ui-menu-item>
+      </ui-menu>
+    `
+  }
+
+  #renderFileOptions(item: IFile): TemplateResult {
+    const { key } = item
+    return html`
+      <ui-icon-button
+        data-key="${key}"
+        id="anchor-${key}"
+        aria-controls="menu-${key}"
+        tabindex="-1"
+        popoverTarget="menu-${key}"
+      >
+        <ui-icon>more_vert</ui-icon>
+      </ui-icon-button>
+      <ui-menu
+        class="item-menu"
+        popover="auto"
+        id="menu-${key}"
+        data-key="${key}"
+        @select="${this.handleFileMenuSelect}"
+      >
+        <ui-menu-item value="open">
+          <div>Open</div>
+          <ui-icon slot="start">open_in_new</ui-icon>
+        </ui-menu-item>
+        <ui-menu-item value="share">
+          <div>Share</div>
+          <ui-icon slot="start">person_add</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <!-- <ui-menu-item value="move">
+          <div>Move</div>
+          <ui-icon slot="start">drive_file_move</ui-icon>
+        </ui-menu-item> -->
+        <ui-menu-item value="rename">
+          <div>Rename</div>
+          <ui-icon slot="start">edit</ui-icon>
+        </ui-menu-item>
+        <ui-divider role="separator"></ui-divider>
+        <ui-menu-item value="delete">
+          <div>Delete</div>
+          <ui-icon slot="start">delete</ui-icon>
+        </ui-menu-item>
+      </ui-menu>
+    `
+  }
+}

package/src/elements/data-table/internals/TrashDataTable.ts

@@ -0,0 +1,157 @@
+import { html, TemplateResult } from 'lit'
+import { type CellRenderOptions, DataTable } from '../DataTable.js'
+import { property } from 'lit/decorators.js'
+import { until } from 'lit/directives/until.js'
+import { LiveData } from '../../../reactive/LiveData.js'
+import type { TrashEntry } from '@api-client/core/models/TrashEntry.js'
+import type { IUser } from '@api-client/core/models/store/User.js'
+import { relativeDay } from '../../../lib/time/Conversion.js'
+import type { UiMenuElement } from '../../../md/menu/ui-menu.js'
+import { fileIcon } from '../../../lib/files/Utils.js'
+import services from '../../../services/api_service.js'
+import type { UiMenuItemElement } from '../../../md/menu/ui-menu-item.js'
+
+import '../../../md/icon-button/ui-icon-button.js'
+import '../../../md/icons/ui-icon.js'
+import '../../../md/menu/ui-menu.js'
+import '../../../md/menu/ui-menu-item.js'
+
+/**
+ * A class that render QuickAPI file's trash.
+ *
+ * @fires rowaction - Dispatched when the user triggers an action on the item.
+ *     - `detail`: An object with a `key` and `action` property
+ *     - Example: `{ key: 'abc', action: 'delete' }`
+ * @attribute sort
+ * @attribute sortDirection
+ */
+export default class TrashDataTable extends DataTable<TrashEntry> {
+  @property({ type: Object }) accessor user: IUser | undefined
+  @property({ type: String }) accessor oid: string | undefined
+
+  // @ts-expect-error This is to explicitly declare a type as LitPlugin does not handle this situation.
+  declare items: LiveData<TrashEntry[]> | undefined
+
+  handleFileMenuSelect(e: CustomEvent<{ item: UiMenuItemElement }>): void {
+    const menu = e.currentTarget as UiMenuElement
+    const { key } = menu.dataset
+    if (!key) {
+      return
+    }
+    const action = e.detail.item.value
+    if (!action) {
+      return
+    }
+    this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, action } }))
+  }
+
+  override renderEmpty(): TemplateResult {
+    return html`<slot name="empty"><p class="empty">You have no trash.</p></slot>`
+  }
+
+  override renderHeader(): TemplateResult[] {
+    return [
+      this.renderHeaderCell('Name', 0, { sort: 'name' }),
+      this.renderHeaderCell('Owner', 1),
+      this.renderHeaderCell('Trashed date', 2),
+      this.renderHeaderCell(html`<span hidden aria-label="Row options">Menu</span>`, 3, { delegateFocus: true }),
+    ]
+  }
+
+  override renderRowValues(item: TrashEntry, index: number): TemplateResult[] {
+    return [
+      this.#nameCell(item, index, 0),
+      this.#ownerCell(item, index, 1),
+      this.#updatedCell(item, index, 2),
+      this.renderCell(this.#renderEntryMenu(item), index, 3, { classes: ['actions'], delegateFocus: true }),
+    ]
+  }
+
+  #nameCell(item: TrashEntry, row: number, col: number): TemplateResult {
+    const icon = fileIcon(item)
+    const content = html`<ui-icon class="cell-icon" role="presentation">${icon}</ui-icon> ${item.info.name}`
+    return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true })
+  }
+
+  #ownerCell(item: TrashEntry, row: number, col: number): TemplateResult {
+    const opts: CellRenderOptions = {
+      classes: ['owner'],
+    }
+    const { user } = this
+    if (!user) {
+      return this.renderCell(html`--`, row, col, opts)
+    }
+    if (item.info.byMe) {
+      return this.renderCell(
+        html`<ui-user-avatar role="presentation" class="avatar body-small" .user="${user}" type="icon"></ui-user-avatar
+          ><span aria-label="Owned by me" class="user-label">me</span>`,
+        row,
+        col,
+        opts
+      )
+    }
+    const content = this.#ownerCellAsync(item.info.user)
+    const loader = html`<span class="owner-loading">loading...</span>`
+    return this.renderCell(html`${until(content, loader)}`, row, col, opts)
+  }
+
+  async #ownerCellAsync(key?: string): Promise<TemplateResult> {
+    if (!key) {
+      return html` <span aria-label="Owned by unknown user">unknown</span> `
+    }
+    // @TODO: Use a context provider and decouple from services singleton
+    const cache = await services.get('userCache')
+    const user = await cache.getUser(key)
+    if (!user) {
+      return html` <span aria-label="Owned by unknown user">unknown</span> `
+    }
+    return html`<ui-user-avatar
+        role="presentation"
+        class="avatar body-small"
+        .user="${user}"
+        type="icon"
+      ></ui-user-avatar
+      ><span aria-label="Owned by ${user.name}" class="user-label">${user.name}</span>`
+  }
+
+  #updatedCell(item: TrashEntry, row: number, col: number): TemplateResult {
+    const opts: CellRenderOptions = {
+      classes: ['updated'],
+    }
+    const { time } = item.info
+    const relative = relativeDay(time)
+    return this.renderCell(html`<span>${relative}</span>`, row, col, opts)
+  }
+
+  #renderEntryMenu(item: TrashEntry): TemplateResult {
+    const { key } = item
+    return html`
+      <ui-icon-button
+        data-key="${key}"
+        id="anchor-${key}"
+        aria-controls="menu-${key}"
+        tabindex="-1"
+        popoverTarget="menu-${key}"
+        aria-label="More options for ${item.info.name}"
+      >
+        <ui-icon>more_vert</ui-icon>
+      </ui-icon-button>
+      <ui-menu
+        class="item-menu"
+        popover="auto"
+        id="menu-${key}"
+        data-key="${key}"
+        @select="${this.handleFileMenuSelect}"
+      >
+        <ui-menu-item value="restore">
+          <div>Restore</div>
+          <ui-icon slot="start">restore_page</ui-icon>
+        </ui-menu-item>
+        <ui-menu-item value="delete">
+          <div>Delete forever</div>
+          <ui-icon slot="start">delete_forever</ui-icon>
+        </ui-menu-item>
+      </ui-menu>
+    `
+  }
+}

package/src/elements/data-table/internals/UserData.styles.ts

@@ -0,0 +1,16 @@
+import { css } from 'lit'
+
+export default css`
+  .user-link,
+  .email-link {
+    color: var(--md-sys-color-primary);
+  }
+
+  .grid-cell.actions {
+    width: 48px;
+  }
+
+  .item-menu {
+    min-width: 200px;
+  }
+`