@api-client/ui 0.0.17 → 0.1.1

package/src/apps/activities/BrowseDataDomainActivity.ts

@@ -1,1073 +0,0 @@
-import { CSSResult, type TemplateResult, html, nothing } from 'lit'
-import { classMap } from 'lit/directives/class-map.js'
-import {
-  type DataDomainSchema,
-  type DomainEntity,
-  type DomainModel,
-  DomainNamespace,
-  DomainNamespaceKind,
-  Exception,
-  IFile,
-  FolderKind,
-  DataDomain,
-  DomainModelKind,
-  DomainEntityKind,
-  DomainFileKind,
-} from '@api-client/core/browser.js'
-import { Intent, IntentResult } from '../../core/ActivityManager.js'
-import { DATA_DOMAIN_BROWSE } from '../../apps/quick-api/Intents.js'
-import { ModalActivity } from '../../core/ModalActivity.js'
-import state from '../../decorators/state.js'
-import services from '../api_service.js'
-import type { TabSelectionDetail } from '../../md/tabs/internals/Tabs.js'
-import { adaptStatic } from '../../decorators/styles.js'
-import dialogStyles from './styles/BrowseDataDomain.styles.js'
-import FileLoadException from '../../exceptions/FileLoadException.js'
-import MisconfigurationException from '../../exceptions/MisconfigurationException.js'
-import { getDomainIconType } from '../quick-api/lib/UiLib.js'
-import FilesModel from '../../data/FilesModel.js'
-import { fileIcon } from '../quick-api/filesystem/FilesLib.js'
-
-import '../../md/tabs/ui-tabs.js'
-import '../../md/tabs/ui-tab.js'
-import '../../md/icons/ui-icon.js'
-import '../../md/button/ui-filled-button.js'
-import '@material/web/progress/circular-progress.js'
-import '@material/web/list/list.js'
-import '@material/web/list/list-item.js'
-import '@material/web/button/filled-button.js'
-import '@material/web/iconbutton/icon-button.js'
-import '@material/web/icon/icon.js'
-import '@material/web/divider/divider.js'
-
-interface SelectedItem {
-  key: string
-  kind: string
-  isParent?: boolean
-}
-
-interface BrowsingPartition {
-  /**
-   * The list of currently rendered items.
-   */
-  currentList: (DomainNamespace | DomainModel | DomainEntity)[]
-  /**
-   * The currently selected item.
-   */
-  selected?: SelectedItem
-  /**
-   * The parent object, if any
-   */
-  parent?: DomainNamespace | DomainModel | IFile
-  /**
-   * The source of the data.
-   */
-  root?: DataDomain
-}
-
-interface RecentPartition {
-  /**
-   * The list of recently picked items.
-   */
-  currentList: RecentItem[]
-  /**
-   * The currently selected item.
-   */
-  selected?: SelectedItem
-}
-
-/**
- * Items allowed to pick:
- *
- * - `entity` - allows to pick an entity from the local domain or external one
- *              when configured by the `withExternal` property.
- * - `data-model` - allows to pick a data model from the local domain or external one
- *                  when configured by the `withExternal` property.
- * - `data-namespace` - Only valid when `withExternal` is set.
- */
-type PickItem = 'entity' | 'data-model' | 'data-namespace'
-
-export interface BrowseDataDomainIntent {
-  /**
-   * The reason to open this dialog:
-   * - `pick` - to select a domain element specified in the `allowed` property.
-   * - `move` - Not yet implemented.
-   * - `link` - Not yet implemented.
-   */
-  reason: 'pick' | 'move' | 'link'
-  /**
-   * Specifies which items are allowed to select in the UI to return the result
-   * back to the application. By default all data domain items are allowed.
-   */
-  allowed?: PickItem[]
-  // /**
-  //  * When set, it allows to create new data models in the data namespace.
-  //  */
-  // allowCreate?: boolean
-  /**
-   * The key of the data namespace to render as "local" namespace.
-   * When not set, it will not render the "Local" tab.
-   */
-  namespaceKey?: string
-  /**
-   * When set it render the "Browse" tab that allows to browse other than the "local"
-   * namespace for the pick result.
-   */
-  withExternal?: boolean
-  /**
-   * When set, it presents the user with the list of recently picked
-   * values. This improves the user experience when the pick action
-   * happens multiple times in a workflow.
-   *
-   * Note, when `withExternal` is not set then it will filter out recent items
-   * belonging to other namespace.
-   */
-  withRecent?: boolean
-}
-
-export interface BrowseDataDomainResult {
-  /**
-   * - `ok` - the user has picked the value.
-   * - `canceled` - the user has canceled the dialog.
-   */
-  result: 'ok' | 'canceled'
-  /**
-   * The key of the selected item.
-   *
-   * Only and always populated when the `result` is `ok`.
-   */
-  selected?: string
-  /**
-   * The kind of the selected item.
-   *
-   * Only and always populated when the `result` is `ok`.
-   */
-  kind?: string
-  /**
-   * The key of the parent data namespace.
-   * When `withExternal` is set then it might be different than the
-   * "local" namespace. Otherwise, it is always set to the "local"
-   * namespace.
-   *
-   * Only and always populated when the `result` is `ok`.
-   */
-  namespace?: string
-}
-
-export interface RecentItem {
-  /**
-   * The key of the item.
-   */
-  key: string
-  /**
-   * The kind of the item.
-   */
-  kind: string
-  /**
-   * The label of the item.
-   */
-  label: string
-  /**
-   * The namespace key of the item.
-   */
-  namespace: string
-  /**
-   * The last time the item was picked represented as a timestamp.
-   * This is used to sort the items in the list.
-   * The most recent item is always at the top of the list.
-   */
-  used: number
-}
-
-export interface RecentItems {
-  /**
-   * The list of recent items.
-   */
-  items: RecentItem[]
-  /**
-   * The last time the list was updated.
-   * It is the timestamp of the last time the list was saved to the local storage.
-   */
-  updated: number
-}
-
-export const RECENT_ITEMS_KEY = 'com.api-client.schema.recent.items'
-export const RECENT_ITEMS_MAX = 10
-
-enum State {
-  /**
-   * When loading the data domain file.
-   */
-  loading,
-  /**
-   * When the data domain file is loaded and ready to be used.
-   * This is the state when the dialog content is shown.
-   */
-  ready,
-  /**
-   * A general error state.
-   */
-  error,
-}
-
-/**
- * A dialog activity that allows browsing data domains (data namespaces) and picking a domain element.
- * This dialog is used for selecting a data element for opening or saving.
- *
- * Depending on the intent configuration, it renders a different view.
- * For example, it can render the list of "recent" items picked by the user
- * in previous interactions.
- *
- * The activity should be initialized with a result. The activity makes no
- * sense if not called for a result.
- *
- * @class BrowseDataDomainActivity
- * @extends ModalActivity
- * @fires recent-error - Dispatched when there's an error saving a recent item.
- * @fires recent-updated - Dispatched when the recent items list is updated.
- */
-export default class BrowseDataDomainActivity extends ModalActivity {
-  /**
-   * The action name for this activity.
-   * @static
-   */
-  static override action = DATA_DOMAIN_BROWSE
-
-  files?: FilesModel
-
-  /**
-   * The styles for this activity.
-   * @static
-   */
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [dialogStyles]
-  }
-
-  /**
-   * The title of the dialog.
-   */
-  title = 'Browse data domain'
-
-  /**
-   * Whether to include external namespaces in the browsing.
-   */
-  withExternal = false
-  /**
-   * Whether to include recent items in the browsing.
-   */
-  withRecent = false
-  /**
-   * The key of the "local" data namespace.
-   */
-  namespaceKey: string | undefined
-
-  /**
-   * The reason for opening this dialog.
-   * @type {'pick' | 'move' | 'link'}
-   * @default 'pick'
-   */
-  reason: 'pick' | 'move' | 'link' = 'pick'
-
-  /**
-   * The types of items allowed to be picked.
-   * @type {PickItem[]}
-   * @default []
-   */
-  allowed: PickItem[] = []
-
-  /**
-   * The current state of the dialog.
-   * @type {State}
-   * @default State.loading
-   */
-  @state() accessor readyState: State = State.loading
-
-  /**
-   * The local browsing partition state.
-   * @type {BrowsingPartition}
-   */
-  local: BrowsingPartition = {
-    currentList: [],
-  }
-
-  /**
-   * The recent browsing partition state.
-   * @type {RecentPartition}
-   */
-  recent: RecentPartition = {
-    currentList: [],
-  }
-
-  external: BrowsingPartition = {
-    currentList: [],
-  }
-
-  /**
-   * The error message to display.
-   * @type {string | undefined}
-   */
-  @state() accessor errorMessage: string | undefined
-  /**
-   * The error title to display.
-   * @type {string | undefined}
-   */
-  @state() accessor errorTitle: string | undefined
-
-  /**
-   * The currently selected tab.
-   * @type {'recent' | 'local' | 'external'}
-   * @default 'local'
-   */
-  @state() accessor selectedTab: 'recent' | 'local' | 'external' = 'local'
-
-  /**
-   * Whether there is an allowed selection.
-   */
-  @state() accessor hasAllowedSelection = false
-
-  /**
-   * Returns the active browsing partition based on the selected tab.
-   * @readonly
-   * @type {BrowsingPartition | RecentPartition}
-   */
-  get activePartition(): BrowsingPartition | RecentPartition {
-    if (this.selectedTab === 'recent') {
-      return this.recent
-    }
-    if (this.selectedTab === 'local') {
-      return this.local
-    }
-    return this.external
-  }
-
-  override async onCreate(intent?: Intent): Promise<void> {
-    if (!intent || !intent.data) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    this.setIntentData(intent.data)
-    await super.onCreate(intent)
-    this.dialogClasses = {
-      picker: true,
-    }
-  }
-
-  override onNewIntent(intent: Intent): void | Promise<void> {
-    if (!intent) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    super.onNewIntent(intent)
-    this.setIntentData(intent.data)
-  }
-
-  /**
-   * Sets the intent data for this activity.
-   * @private
-   * @param input - The intent data.
-   */
-  private setIntentData(input: unknown): void {
-    const typed = input as BrowseDataDomainIntent
-    if (!typed) {
-      return
-    }
-    this.withExternal = typed.withExternal ?? false
-    this.withRecent = typed.withRecent ?? false
-    this.namespaceKey = typed.namespaceKey
-    this.reason = typed.reason ?? 'pick'
-    this.allowed = typed.allowed ?? []
-    this.setTitle()
-    this.prepareData()
-    if (typed.withRecent) {
-      this.selectedTab = 'recent'
-    } else if (this.namespaceKey) {
-      this.selectedTab = 'local'
-    } else if (this.withExternal) {
-      this.selectedTab = 'external'
-    } else {
-      throw new MisconfigurationException()
-    }
-  }
-
-  /**
-   * Computes the title of the dialog based on the `reason` and `allowed` properties.
-   * @private
-   */
-  private setTitle(): void {
-    const { reason, allowed } = this
-    if (reason === 'pick' || reason === 'link') {
-      if (!allowed) {
-        this.title = 'Select an object'
-      } else if (allowed.length === 1) {
-        const [item] = allowed
-        if (item === 'entity') {
-          this.title = 'Select an entity'
-        } else if (item === 'data-model') {
-          this.title = 'Select a data model'
-        } else if (item === 'data-namespace') {
-          this.title = 'Select a data namespace'
-        }
-      } else {
-        this.title = 'Select an object'
-      }
-    } else if (reason === 'move') {
-      this.title = 'Select a target'
-    }
-  }
-
-  /**
-   * Prepares the data for the dialog.
-   * @async
-   */
-  async prepareData(): Promise<void> {
-    this.readyState = State.loading
-    const logger = await services.get('logger')
-    try {
-      const tasks: Promise<void>[] = []
-      if (this.namespaceKey) {
-        tasks.push(this.loadLocalDomain(this.namespaceKey))
-      }
-      if (this.withRecent) {
-        tasks.push(this.loadRecent())
-      }
-      if (this.withExternal) {
-        tasks.push(this.loadExternal())
-      }
-      const result = await Promise.allSettled(tasks)
-      const errors = result.filter((item) => item.status === 'rejected')
-      if (errors.length > 0) {
-        const error = errors[0].reason
-        throw error
-      }
-      this.readyState = State.ready
-    } catch (e) {
-      logger.error(e)
-      const typed = e as Exception
-      this.errorTitle = typed.message
-      this.errorMessage = typed.help
-      this.readyState = State.error
-    }
-  }
-
-  /**
-   * Loads the local, meaning user opened, data domain.
-   * @private
-   * @async
-   * @param key - The key of the local data namespace.
-   */
-  private async loadLocalDomain(key: string): Promise<void> {
-    this.readyState = State.loading
-    const sdk = await services.get('sdk')
-    const org = await services.get('org')
-    const logger = await services.get('logger')
-    const currentOrganization = await org.currentOrganization()
-    if (!currentOrganization) {
-      logger.warn('Unable to fetch the data domain file. The organization is not set.')
-      return
-    }
-    try {
-      const contents = await sdk.file.readMedia(currentOrganization.key, key)
-      const domain = contents.media as DataDomainSchema
-      this.local.root = new DataDomain(domain)
-      if (this.selectedTab === 'local') {
-        this.local.parent = undefined
-        this.local.selected = undefined
-      }
-      this.setupAllowedSelection(this.local)
-      this.updateCurrentList(this.local)
-    } catch (e) {
-      if (e instanceof Exception) {
-        throw e
-      }
-      const ex = new FileLoadException((e as Error).message)
-      throw ex
-    }
-  }
-
-  /**
-   * Loads the recent items.
-   * @private
-   * @async
-   */
-  private async loadRecent(): Promise<void> {
-    const { allowed } = this
-    const config = await services.get('config')
-    const recent = (await config.local.get(RECENT_ITEMS_KEY)) as RecentItems | undefined
-    if (!recent) {
-      this.recent.currentList = []
-      return
-    }
-    let items: RecentItem[] = []
-    if (allowed.length) {
-      items = recent.items.filter((item) => {
-        if (item.kind === DomainEntityKind && allowed.includes('entity')) {
-          return true
-        }
-        if (item.kind === DomainModelKind && allowed.includes('data-model')) {
-          return true
-        }
-        if (item.kind === DomainNamespaceKind && allowed.includes('data-namespace')) {
-          return true
-        }
-        return false
-      })
-    } else {
-      items = recent.items
-    }
-    this.recent.currentList = items
-    this.recent.currentList.sort((a, b) => {
-      return a.used - b.used
-    })
-  }
-
-  private async loadExternal(): Promise<void> {
-    const sdk = await services.get('sdk')
-    const org = await services.get('org')
-    const current = await org.currentOrganization()
-    if (!current) {
-      throw new Error(`No current organization.`)
-    }
-    this.files = new FilesModel(current.key, sdk, 'own')
-    this.files.kinds = [DomainFileKind]
-    this.files.scheduleQuery()
-    await this.files.taskComplete
-  }
-
-  /**
-   * Updates the current list of items in a partition.
-   * @private
-   * @param partition - The partition to update.
-   */
-  private updateCurrentList(partition: BrowsingPartition): void {
-    partition.currentList = []
-    if (!partition.root) {
-      this.requestUpdate()
-      return
-    }
-    const { parent } = partition
-    if (!parent) {
-      partition.currentList = [...partition.root.listNamespaces(), ...partition.root.listModels()]
-    } else if (parent.kind === DomainModelKind) {
-      const model = partition.root.findModel(parent.key)
-      if (model) {
-        partition.currentList = [...model.listEntities()]
-      }
-    } else if (parent.kind === DomainNamespaceKind) {
-      const namespace = partition.root.findNamespace(parent.key)
-      if (namespace) {
-        partition.currentList = [...namespace.listNamespaces(), ...namespace.listModels()]
-      }
-    }
-    this.requestUpdate()
-  }
-
-  /**
-   * Handles the tab selection event.
-   * @param e - The tab selection event.
-   */
-  handleTabSelect(e: CustomEvent<TabSelectionDetail>): void {
-    const { item } = e.detail
-    const { key } = item.dataset
-    if (!key) {
-      return
-    }
-    this.selectedTab = key as 'recent' | 'local' | 'external'
-    this.requestUpdate()
-  }
-
-  /**
-   * Handles the click event on an item.
-   * @param e The click event.
-   */
-  handleItemClick(e: Event): void {
-    const item = e.currentTarget as HTMLElement
-    const { kind, key, parent } = item.dataset
-    if (!key || !kind || !parent) {
-      return
-    }
-    const state = this.activePartition
-    if (this.isSelected(key)) {
-      state.selected = undefined
-    } else {
-      state.selected = {
-        key,
-        kind,
-        isParent: parent === 'true',
-      }
-    }
-    this.setupAllowedSelection(state)
-    this.requestUpdate()
-  }
-
-  /**
-   * Sets up whether a selection is allowed based on the current state.
-   * @param partition - The partition to check.
-   */
-  setupAllowedSelection(partition: BrowsingPartition | RecentPartition): void {
-    const { allowed } = this
-    const { selected } = partition
-    if (allowed.length === 0) {
-      if (selected) {
-        this.hasAllowedSelection = true
-      }
-      return
-    }
-    if (!selected) {
-      this.hasAllowedSelection = false
-      return
-    }
-    const { kind } = selected
-    if (!kind) {
-      this.hasAllowedSelection = false
-      return
-    }
-    this.hasAllowedSelection = allowed.some((item) => {
-      if (item === 'entity') {
-        return kind === DomainEntityKind
-      }
-      if (item === 'data-model') {
-        return kind === DomainModelKind
-      }
-      if (item === 'data-namespace') {
-        return kind === DomainNamespaceKind || kind === DomainFileKind
-      }
-      return false
-    })
-  }
-
-  /**
-   * Handles the click event to open a parent item.
-   *
-   * @param e - The click event.
-   */
-  handleOpenParent(e: Event): void {
-    e.preventDefault()
-    e.stopPropagation()
-    const button = e.currentTarget as HTMLElement
-    const item = button.parentElement as HTMLElement
-    const { kind, key, parent } = item.dataset
-    if (!key || !kind || !parent || parent !== 'true') {
-      return
-    }
-    this.selectParent(this.local, key, kind)
-    this.updateCurrentList(this.local)
-  }
-
-  handleOpenFileParent(e: Event): void {
-    e.preventDefault()
-    e.stopPropagation()
-    const button = e.currentTarget as HTMLElement
-    const item = button.parentElement as HTMLElement
-    const { kind, key, parent } = item.dataset
-    if (!key || !kind || !parent || parent !== 'true') {
-      return
-    }
-    this.selectFileParent(key)
-  }
-
-  /**
-   * Handles the click event to go back to the parent.
-   */
-  handleParentBack(): void {
-    const source = this.activePartition as BrowsingPartition
-    const { parent } = source
-    if (!parent) {
-      return
-    }
-    if (this.selectedTab === 'local') {
-      const domainElement = parent as DomainNamespace | DomainModel
-      const ns = domainElement.getParentInstance()
-      if (!ns || ns.key === ns.domain.key) {
-        source.parent = undefined
-      } else {
-        this.selectParent(source, ns.key, ns.kind)
-      }
-      this.updateCurrentList(source)
-    } else if (this.selectedTab === 'external') {
-      // @TODO: Find a way to recognize the parent folder, if any.
-      this.selectFileParent()
-    }
-  }
-
-  /**
-   * Selects a parent item.
-   *
-   * @param partition - The partition to select the parent in.
-   * @param key - The key of the parent item.
-   * @param kind - The kind of the parent item.
-   * @throws {Error} If the root is not set or the item is not found.
-   */
-  selectParent(partition: BrowsingPartition, key: string, kind: string): void {
-    const { root } = partition
-    if (!root) {
-      throw new Error(`Unable to select parent. The root is not set.`)
-    }
-    if (kind === DomainModelKind) {
-      partition.parent = root.findModel(key)
-    } else if (kind === DomainNamespaceKind) {
-      partition.parent = root.findNamespace(key)
-    }
-    if (!partition.parent) {
-      throw new Error(`Unable to select parent. The item with key "${key}" was not found.`)
-    }
-  }
-
-  async selectFileParent(key?: string): Promise<void> {
-    this.readyState = State.loading
-    const { files } = this
-    if (!files) {
-      return
-    }
-    const info = this.activePartition as BrowsingPartition
-    info.parent = files.files.value.find((i) => i.key === key)
-    files.selectFolder(key)
-    await files.taskComplete
-    this.readyState = State.ready
-    this.requestUpdate()
-  }
-
-  /**
-   * Checks if an item is selected.
-   * @param key The key of the item to check.
-   * @returns True if the item is selected, false otherwise.
-   */
-  isSelected(key: string): boolean {
-    const local = this.activePartition
-    if (!local.selected) {
-      return false
-    }
-    return local.selected.key === key
-  }
-
-  /**
-   * Handles the negative action (cancel).
-   */
-  protected override handleNegativeAction(): void {
-    const result: BrowseDataDomainResult = {
-      result: 'canceled',
-    }
-    this.setResult(IntentResult.RESULT_CANCELED, result)
-    this.finish()
-  }
-
-  /**
-   * Handles the positive action (choose).
-   */
-  protected override handlePositiveAction(): void {
-    const source = this.activePartition
-    const { selected } = source
-    if (!selected) {
-      return
-    }
-    let nsKey: string | undefined
-    if (this.selectedTab === 'recent') {
-      const typedRecent = source as RecentPartition
-      const recent = typedRecent.currentList.find((item) => item.key === selected.key)
-      if (!recent) {
-        return
-      }
-      nsKey = recent.namespace
-    } else if (this.selectedTab === 'external') {
-      // ...
-    } else if (this.selectedTab === 'local') {
-      const typedOther = source as BrowsingPartition
-      if (typedOther.root) {
-        nsKey = typedOther.root.key
-        // we make it async as it's not as important in the user flow
-        // and we don't want to block the UI
-        this.saveRecent(typedOther.root, selected.key, selected.kind)
-      } else {
-        return
-      }
-    }
-    const result: BrowseDataDomainResult = {
-      result: 'ok',
-      selected: selected.key,
-      kind: selected.kind,
-      namespace: nsKey,
-    }
-    this.setResult(IntentResult.RESULT_OK, result)
-    this.finish()
-  }
-
-  /**
-   * Saves a recent item.
-   * @async
-   * @param root - The root data namespace.
-   * @param key - The key of the item.
-   * @param kind - The kind of the item.
-   * @fires recent-error - Dispatched when there's an error saving a recent item.
-   * @fires recent-updated - Dispatched when the recent items list is updated.
-   */
-  async saveRecent(root: DataDomain, key: string, kind: string): Promise<void> {
-    const config = await services.get('config')
-    let recent = (await config.local.get(RECENT_ITEMS_KEY)) as RecentItems | undefined
-    if (!recent) {
-      recent = {
-        items: [],
-        updated: Date.now(),
-      }
-    }
-    let item: DomainEntity | DomainModel | DomainNamespace | undefined
-    if (kind === DomainModelKind) {
-      item = root.findModel(key)
-    } else if (kind === DomainNamespaceKind) {
-      item = root.findNamespace(key)
-    } else if (kind === DomainEntityKind) {
-      item = root.findEntity(key)
-    }
-    if (!item) {
-      // This is mostly for testing.
-      this.dispatchEvent(new CustomEvent('recent-error', { detail: new Error(`Unable to find the domain object.`) }))
-      // This should not happen. It is to make the TS compiler happy.
-      return
-      // throw new Error(`Unable to find the item with key "${key}" and kind "${kind}".`)
-    }
-    const { items } = recent
-    const index = items.findIndex((item) => item.key === key)
-    if (index >= 0) {
-      items.splice(index, 1)
-    }
-    items.unshift({
-      key,
-      kind,
-      label: item.info.getLabel(),
-      namespace: root.key,
-      used: Date.now(),
-    })
-    if (items.length > RECENT_ITEMS_MAX) {
-      items.splice(RECENT_ITEMS_MAX, items.length - RECENT_ITEMS_MAX)
-    }
-    recent.items = items
-    recent.updated = Date.now()
-    await config.local.set(RECENT_ITEMS_KEY, recent)
-    this.dispatchEvent(new CustomEvent('recent-updated', { detail: recent }))
-  }
-
-  override render(): TemplateResult | typeof nothing {
-    const { readyState } = this
-    if (readyState === State.loading) {
-      return this.#renderContent(this.#renderLoader())
-    }
-    if (readyState === State.error) {
-      return this.#renderContent(this.#renderError())
-    }
-    return this.#renderContent(this.#renderBody())
-  }
-
-  /**
-   * Renders the content of the dialog.
-   * @private
-   * @param content - The content to render.
-   */
-  #renderContent(content: TemplateResult): TemplateResult {
-    return html`${this.renderTitle(this.title)} ${content} ${this.renderNegativeButton()}
-    ${this.renderPositiveButton({ label: 'Choose', disabled: !this.hasAllowedSelection })}`
-  }
-
-  #renderLoader(): TemplateResult {
-    return html`
-      <div class="browse-dialog centered">
-        <md-circular-progress indeterminate></md-circular-progress>
-        <p>One second...</p>
-      </div>
-    `
-  }
-
-  /**
-   * Renders the error state.
-   * @private
-   */
-  #renderError(): TemplateResult {
-    return html`
-      <div class="browse-dialog centered">
-        <h2>${this.errorTitle}</h2>
-        <p>${this.errorMessage}</p>
-      </div>
-    `
-  }
-
-  /**
-   * Renders the body of the dialog.
-   * @private
-   */
-  #renderBody(): TemplateResult {
-    const result: (TemplateResult | typeof nothing)[] = []
-    result.push(this.#renderHeader())
-    if (this.selectedTab === 'recent') {
-      result.push(this.#renderRecent())
-    } else if (this.selectedTab === 'local') {
-      result.push(this.#renderLocal())
-    } else if (this.selectedTab === 'external') {
-      result.push(this.#renderExternal())
-    }
-    return html`${result}`
-  }
-
-  /**
-   * Renders the header of the dialog.
-   * @private
-   */
-  #renderHeader(): TemplateResult {
-    if (this.selectedTab === 'recent') {
-      return this.#renderTabs()
-    }
-    const activePartition = this.activePartition as BrowsingPartition
-    const { parent } = activePartition
-    if (parent) {
-      return this.#renderParentHeader(parent)
-    }
-    return this.#renderTabs()
-  }
-
-  /**
-   * Renders the tabs.
-   * @private
-   */
-  #renderTabs(): TemplateResult {
-    const { withExternal, withRecent, selectedTab, namespaceKey } = this
-    return html`<ui-tabs .selected="${selectedTab}" @select="${this.handleTabSelect}">
-      ${withRecent ? html`<ui-tab aria-controls="recent" data-key="recent">Recent</ui-tab>` : nothing}
-      ${namespaceKey ? html`<ui-tab aria-controls="local" data-key="local">Local</ui-tab>` : nothing}
-      ${withExternal ? html`<ui-tab aria-controls="external" data-key="external">Browse</ui-tab>` : nothing}
-    </ui-tabs>`
-  }
-
-  /**
-   * Renders the parent header.
-   * @private
-   * @param parent - The parent item.
-   */
-  #renderParentHeader(parent: DomainNamespace | DomainModel | IFile): TemplateResult {
-    const label = parent.info.displayName || parent.info.name
-    return html`<div class="parent-header">
-        <md-icon-button @click="${this.handleParentBack}"><md-icon>arrow_back</md-icon></md-icon-button>
-        <h2 class="title-medium">${label}</h2>
-      </div>
-      <md-divider></md-divider>`
-  }
-
-  /**
-   * Renders the recent items.
-   * @private
-   */
-  #renderRecent(): TemplateResult {
-    const { recent } = this
-    return html`<div id="recent">${this.#renderRecentItems(recent.currentList)}</div>`
-  }
-
-  /**
-   * Renders the local items.
-   * @private
-   */
-  #renderLocal(): TemplateResult {
-    const { local } = this
-    if (!local.root) {
-      return html`<div id="local">
-        <p>The data domain file was not read.</p>
-      </div>`
-    }
-    const { currentList } = local
-    return html`<div id="local">${this.#renderDomainItems(currentList)}</div>`
-  }
-
-  /**
-   * Renders the domain items.
-   * @private
-   * @param items - The items to render.
-   */
-  #renderDomainItems(items: (DomainNamespace | DomainModel | DomainEntity)[]): TemplateResult {
-    const empty = items.length === 0
-    if (empty) {
-      return html`<p class="empty-list body-medium">No items found.</p>`
-    }
-    return html`<md-list class="domain-list"> ${items.map((item) => this.#renderDomainItem(item))} </md-list>`
-  }
-
-  #renderRecentItems(items: RecentItem[]): TemplateResult {
-    const empty = items.length === 0
-    if (empty) {
-      return html`<p class="empty-list body-medium">No items found.</p>`
-    }
-    return html`<md-list class="domain-list"> ${items.map((item) => this.#renderRecentItem(item))} </md-list>`
-  }
-
-  #renderExternal(): TemplateResult {
-    const { files } = this
-    return html`<div id="external">${this.#renderFileItems(files?.files.value)}</div>`
-  }
-
-  #renderDomainItem(item: DomainNamespace | DomainModel | DomainEntity): TemplateResult {
-    return this.#renderItem(item.key, item.kind, item.info.getLabel())
-  }
-
-  #renderRecentItem(item: RecentItem): TemplateResult {
-    const { key, kind, label } = item
-    return this.#renderItem(key, kind, label, { noParent: true })
-  }
-
-  #renderFileItems(files: IFile[] | undefined): TemplateResult {
-    const empty = !files || files.length === 0
-    if (empty) {
-      return html`<p class="empty-list body-medium">No items found.</p>`
-    }
-    return html`<md-list class="files-list">${files.map((file) => this.#renderFileItem(file))}</md-list>`
-  }
-
-  #renderFileItem(file: IFile): TemplateResult {
-    const icon = fileIcon(file)
-    const isParent = file.kind === FolderKind
-    const isSelected = this.isSelected(file.key)
-    const parentValue = isParent ? 'true' : 'false'
-    const classes = {
-      select: isSelected,
-    }
-    return html`<md-list-item
-      data-key="${file.key}"
-      data-kind="${file.kind}"
-      data-parent="${parentValue}"
-      type="button"
-      class="${classMap(classes)}"
-      @click="${this.handleItemClick}"
-    >
-      <ui-icon slot="start" class="icon">${icon}</ui-icon>
-      <span slot="headline">${file.info.name}</span>
-      ${isSelected && isParent
-        ? html`<ui-filled-button slot="end" @click="${this.handleOpenFileParent}">Open</ui-filled-button>`
-        : nothing}
-    </md-list-item>`
-  }
-
-  /**
-   * Renders a generic item.
-   * @private
-   * @param key - The key of the item.
-   * @param kind - The kind of the item.
-   * @param label - The label of the item.
-   * @param {{ noParent?: boolean }} opts - Additional options.
-   */
-  #renderItem(key: string, kind: string, label: string, opts: { noParent?: boolean } = {}): TemplateResult {
-    const isSelected = this.isSelected(key)
-    const isParent = !opts.noParent && [DomainModelKind, DomainNamespaceKind].includes(kind)
-    const parentValue = isParent ? 'true' : 'false'
-    const classes = {
-      select: isSelected,
-    }
-    const icon = getDomainIconType(kind)
-    return html`<md-list-item
-      data-kind="${kind}"
-      data-key="${key}"
-      data-parent="${parentValue}"
-      type="button"
-      class="${classMap(classes)}"
-      @click="${this.handleItemClick}"
-    >
-      <ui-icon slot="start" class="icon" icon="${icon}"></ui-icon>
-      <span slot="headline">${label}</span>
-      ${isSelected && isParent
-        ? html`<ui-filled-button slot="end" @click="${this.handleOpenParent}">Open</ui-filled-button>`
-        : nothing}
-    </md-list-item>`
-  }
-}