@api-client/ui 0.6.5 → 0.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/core/Activity.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { nothing, TemplateResult } from 'lit'
-import { ActivityLifecycle, IntentResult, type Intent } from './ActivityManager.js'
+import { ActivityLifecycle, IntentResult, type Intent, type ResolvedIntent } from './ActivityManager.js'
 import { FragmentManager } from './FragmentManager.js'
 import type { Fragment } from './Fragment.js'
 import type { Application, UpdateRequest } from './Application.js'
@@ -301,17 +301,19 @@ export class Activity extends EventTarget {
 
   /**
    * Starts a new activity for a result.
+   * @template T The type of the result data expected.
    * @param intent The intent to start.
-   * @returns A promise that resolves when the started activity finishes, returning the result Intent.
+   * @returns A promise that resolves when the started activity finishes, returning the result Intent with
+   * data of type T.
    * @example
    * ```typescript
-   * const resultIntent = await this.startActivityForResult({ action: 'pickFile' });
+   * const resultIntent = await this.startActivityForResult<{ userId: string }>({ action: 'pickUser' });
    * if (resultIntent.resultCode === IntentResult.RESULT_OK) {
-   *   // handle result
+   *   console.log(resultIntent.data?.userId);
    * }
    * ```
    */
-  async startActivityForResult(intent: Intent): Promise<Intent> {
+  async startActivityForResult<T>(intent: Intent): Promise<ResolvedIntent<T | undefined>> {
     const { manager } = this.getApplication()
     return manager.startActivityForResult(intent)
   }
@@ -355,7 +357,7 @@ export class Activity extends EventTarget {
     if (event.type === EventTypes.Intent.startActivityForResult) {
       const info = event.detail as ActivityWithResultDetail
       const result = await this.startActivityForResult(info.intent)
-      info.onResult(IntentResult.RESULT_OK, result)
+      info.onResult(result.result, result)
     } else if (event.type === EventTypes.Intent.startActivity) {
       await this.startActivity(event.detail.intent)
     } else {

package/src/core/ActivityManager.ts

@@ -59,9 +59,22 @@ export enum IntentFlags {
 }
 
 export interface Intent<T = unknown> {
+  /**
+   * The action name the activity is registered for.
+   */
   action: string
+  /**
+   * The data passed to the activity.
+   */
   data?: T
+  /**
+   * The category of the activity.
+   * Optional and currently not used.
+   */
   category?: string[]
+  /**
+   * The flags that control the behavior of the activity.
+   */
   flags?: number
   /**
    * The request code used to distinguish between different activities.
@@ -69,6 +82,17 @@ export interface Intent<T = unknown> {
   requestCode?: number
 }
 
+/**
+ * An intent returned by an activity after the activity result is ready.
+ * This object is only created when the activity is started with the `ForResult` flag.
+ */
+export interface ResolvedIntent<T = unknown> extends Intent<T> {
+  /**
+   * The result code returned by the activity.
+   */
+  result: IntentResult
+}
+
 export enum IntentResult {
   RESULT_CANCELED,
   RESULT_OK,
@@ -137,7 +161,7 @@ export class ActivityManager {
   /**
    * Stores the resolvers for activities started for result.
    */
-  private resultResolvers = new Map<Intent, (intent: Intent) => void>()
+  private resultResolvers = new Map<Intent, (intent: ResolvedIntent) => void>()
 
   /**
    * Represents the activity stack. It is used to manage
@@ -291,9 +315,19 @@ export class ActivityManager {
   /**
    * Starts an activity that should return a result to the calling activity.
    *
+   * @template T The type of the result data expected.
    * @param intent The intent to start the activity.
-   */
-  async startActivityForResult(intent: Intent): Promise<Intent> {
+   * @returns A promise that resolves when the started activity finishes, returning the result Intent with
+   * data of type T.
+   * @example
+   * ```typescript
+   * const resultIntent = await mgr.startActivityForResult<{ userId: string }>({ action: 'pickUser' });
+   * if (resultIntent.resultCode === IntentResult.RESULT_OK) {
+   *   console.log(resultIntent.data?.userId);
+   * }
+   * ```
+   */
+  async startActivityForResult<T>(intent: Intent): Promise<ResolvedIntent<T | undefined>> {
     const byReference = (intent.flags ?? 0) & IntentFlags.ByReference
     const shallowCopy = { ...intent }
     const data = shallowCopy.data
@@ -310,8 +344,8 @@ export class ActivityManager {
       deepCopy.flags = IntentFlags.ForResult
     }
 
-    return new Promise<Intent>((resolve, reject) => {
-      this.resultResolvers.set(deepCopy, resolve)
+    return new Promise<ResolvedIntent<T>>((resolve, reject) => {
+      this.resultResolvers.set(deepCopy, resolve as (intent: ResolvedIntent<unknown>) => void)
       this.startActivity(deepCopy).catch((e) => {
         this.resultResolvers.delete(deepCopy)
         reject(e)
@@ -374,9 +408,10 @@ export class ActivityManager {
       this.resultResolvers.delete(originalIntent)
       // We construct the result intent.
       // Ideally we would like to preserve the original intent structure but with new data.
-      const resultIntent: Intent = {
+      const resultIntent: ResolvedIntent = {
         ...originalIntent,
         data: activity.getResult(),
+        result: activity.resultCode,
       }
       resolver(resultIntent)
     }

package/src/core/Fragment.ts

@@ -3,7 +3,7 @@ import { Activity } from './Activity.js'
 import { FragmentState, type FragmentOptions, FragmentManager } from './FragmentManager.js'
 import type { Application, UpdateRequest } from './Application.js'
 import { FragmentRenderer } from './renderer/FragmentRenderer.js'
-import { Intent, IntentResult } from './ActivityManager.js'
+import { Intent, ResolvedIntent } from './ActivityManager.js'
 import { bound } from '../decorators/bound.js'
 import type { ActivityDetail, ActivityWithResultDetail } from '../events/IntentEvents.js'
 import { EventTypes } from '../events/EventTypes.js'
@@ -250,14 +250,24 @@ export class Fragment extends EventTarget {
 
   /**
    * Starts an activity for result.
+   * @template T The type of the result data expected.
    * @param intent The intent to start.
+   * @returns A promise that resolves when the started activity finishes, returning the result Intent with
+   * data of type T.
+   * @example
+   * ```typescript
+   * const resultIntent = await this.startActivityForResult<{ userId: string }>({ action: 'pickUser' });
+   * if (resultIntent.resultCode === IntentResult.RESULT_OK) {
+   *   console.log(resultIntent.data?.userId);
+   * }
+   * ```
    */
-  async startActivityForResult(intent: Intent): Promise<Intent> {
+  async startActivityForResult<T>(intent: Intent): Promise<ResolvedIntent<T | undefined>> {
     const activity = this.getActivity()
     if (!activity) {
       throw new Error('Fragment is not attached to an activity')
     }
-    return activity.startActivityForResult(intent)
+    return activity.startActivityForResult<T>(intent)
   }
 
   /**
@@ -296,7 +306,7 @@ export class Fragment extends EventTarget {
     if (event.type === EventTypes.Intent.startActivityForResult) {
       const info = event.detail as ActivityWithResultDetail
       const result = await this.startActivityForResult(info.intent)
-      info.onResult(IntentResult.RESULT_OK, result)
+      info.onResult(result.result, result)
     } else if (event.type === EventTypes.Intent.startActivity) {
       await activity.startActivity(event.detail.intent)
     } else {

package/src/elements/setup/internals/OrganizationSelector.ts

@@ -85,7 +85,7 @@ export default class OrganizationSelector extends LitElement {
   }
 
   protected override render(): unknown {
-    return html`<span class="container">${this.renderTrigger()} ${this.renderMenu()}</span>`
+    return html`${this.renderTrigger()} ${this.renderMenu()}`
   }
 
   protected renderTrigger(): TemplateResult {
@@ -97,7 +97,7 @@ export default class OrganizationSelector extends LitElement {
         aria-label="Current organization: ${orgName}"
         trailingicon
         color="tonal"
-        popoverTarget="org-selector-menu"
+        popovertarget="org-selector-menu"
       >
         ${orgName}
         <ui-icon slot="icon">arrow_drop_down</ui-icon>

package/src/md/button/internals/base.ts

@@ -131,6 +131,9 @@ export default class BaseButton extends UiElement {
   /**
    * Turns a `<ui-button>` element into a popover control button; takes the ID
    * of the popover element to control as its value.
+   *
+   * Note: this is required for now as the spec only allows to control popovers
+   * via buttons. Custom elements are not allowed to control popovers.
    * @attribute
    */
   @property({ type: String, reflect: true }) accessor popoverTarget: string | undefined
@@ -146,7 +149,7 @@ export default class BaseButton extends UiElement {
    *   it will be shown; if the popover is showing, it will be hidden. If popoverTargetAction is omitted,
    *   "toggle" is the default action that will be performed by the control button.
    */
-  @property({ type: String, reflect: true }) accessor popoverTargetAction: string | undefined
+  @property({ type: String, reflect: true }) accessor popoverTargetAction: 'hide' | 'show' | 'toggle' | undefined
   /**
    * When true, the focus ring effect will be constrained to the inside of the button's bounds.
    * @attribute
@@ -312,6 +315,7 @@ export default class BaseButton extends UiElement {
     } else if (action === 'show') {
       element.showPopover()
     } else {
+      // default to toggle
       element.togglePopover()
     }
     element.focus()

package/src/services/OrganizationService.ts

@@ -56,9 +56,74 @@ export default class OrganizationService extends Service {
   protected override async onCreate(): Promise<void> {
     const url = new URL(window.location.href)
     this.pendingOid = url.searchParams.get('oid')
+    this.revalidate()
   }
 
-  async getUserOrganization(id: string): Promise<IOrganization> {
+  /**
+   * @deprecated Use #setOrganization instead
+   */
+  setupUserOrganization(org: IOrganization): Promise<void> {
+    return this.setOrganization(org)
+  }
+
+  /**
+   * Sets an org as the current user org.
+   * @param org The organization to add.
+   */
+  async setOrganization(org: IOrganization): Promise<void> {
+    const hasOrg = this.organizations.some((i) => i.key === org.key)
+    if (!hasOrg) {
+      this.organizations.push(org)
+    }
+    const config = await services.get('config')
+    await config.local.set(CurrentOrganizationKey, org.key)
+    this.organizationId = org.key
+  }
+
+  /**
+   * Adds an organization to the list of organizations.
+   * It also updated the cache. Used when creating a new org.
+   * @param org The organization to add.
+   */
+  async addOrganization(org: IOrganization): Promise<void> {
+    const hasOrg = this.organizations.some((i) => i.key === org.key)
+    if (!hasOrg) {
+      this.organizations.push(org)
+      await this.#saveCache()
+    }
+  }
+
+  /**
+   * Removes an organization from the list of organizations.
+   * It also updated the cache. Used when deleting an org.
+   * @param org The organization to remove.
+   */
+  async removeOrganization(org: IOrganization): Promise<void> {
+    const idx = this.organizations.findIndex((i) => i.key === org.key)
+    if (idx !== -1) {
+      this.organizations.splice(idx, 1)
+      await this.#saveCache()
+      if (this.organizationId === org.key) {
+        this.organizationId = undefined
+        const config = await services.get('config')
+        await config.local.delete(CurrentOrganizationKey)
+      }
+    }
+  }
+
+  /**
+   * @deprecated Use #readOrganization instead
+   */
+  getUserOrganization(id: string): Promise<IOrganization> {
+    return this.readOrganization(id)
+  }
+
+  /**
+   * Reads an organization from the list of organizations.
+   * @param id The organization ID.
+   * @returns The organization.
+   */
+  async readOrganization(id: string): Promise<IOrganization> {
     await this.#updateComplete
     const org = this.organizations.find((i) => i.key === id)
     if (!org) {
@@ -67,6 +132,10 @@ export default class OrganizationService extends Service {
     return org
   }
 
+  /**
+   * Gets the current user organization.
+   * @returns The current organization or undefined if not set.
+   */
   async currentOrganization(): Promise<IOrganization | undefined> {
     if (this.state === State.Checking) {
       await this.#updateComplete
@@ -74,11 +143,14 @@ export default class OrganizationService extends Service {
     if (!this.organizationId) {
       return undefined
     }
-    // TODO: we will store the orgs list in the local/session store
-    // so we won't be pinging server with every page reload.
     return this.organizations.find((i) => i.key === this.organizationId)
   }
 
+  /**
+   * Checks if the user has a specific grant type in the current organization.
+   * @param grantType The grant type to check.
+   * @returns `true` if the user has the specified grant type, `false` otherwise.
+   */
   protected async hasGrantType(grantType: UserOrganizationGrantType): Promise<boolean> {
     const org = await this.currentOrganization()
     if (!org) {
@@ -87,6 +159,11 @@ export default class OrganizationService extends Service {
     return org.grantType === grantType
   }
 
+  /**
+   * Checks if the user has any of the specified grant types in the current organization.
+   * @param types The grant types to check.
+   * @returns `true` if the user has any of the specified grant types, `false` otherwise.
+   */
   async hasRoles(types: UserOrganizationGrantType[]): Promise<boolean> {
     const org = await this.currentOrganization()
     if (!org) {
@@ -135,9 +212,6 @@ export default class OrganizationService extends Service {
     if (this.state === State.Checking) {
       return this.#updateComplete as Promise<CompletionState>
     }
-    if (this.organizationId) {
-      return Promise.resolve(CompletionState.OK)
-    }
     this.state = State.Checking
     this.#updateComplete = new Promise<CompletionState>((resolver) => {
       this.#updateResolver = resolver
@@ -175,12 +249,12 @@ export default class OrganizationService extends Service {
     return false
   }
 
-  async #saveCache(orgs: IOrganization[]): Promise<void> {
+  async #saveCache(): Promise<void> {
     const cache = await services.get('cache')
-    if (orgs.length === 0) {
+    if (this.organizations.length === 0) {
       await cache.delete(OrgsCacheKey)
     } else {
-      await cache.set<IOrganization[]>(OrgsCacheKey, orgs, cache.TTL.OneHour)
+      await cache.set<IOrganization[]>(OrgsCacheKey, this.organizations, cache.TTL.OneHour)
     }
   }
 
@@ -188,7 +262,7 @@ export default class OrganizationService extends Service {
     const sdk = await services.get('sdk')
     const orgs = await sdk.organizations.list()
     this.organizations = orgs.items || []
-    await this.#saveCache(orgs.items)
+    await this.#saveCache()
   }
 
   #resolve(state: CompletionState): void {
@@ -220,19 +294,4 @@ export default class OrganizationService extends Service {
     }
     return result
   }
-
-  /**
-   * When the user has no organizations, it set the organization as the only one
-   * and persists the organization id as the selected organization.
-   * @param org The organization to add.
-   */
-  async setupUserOrganization(org: IOrganization): Promise<void> {
-    const hasOrg = this.organizations.some((i) => i.key === org.key)
-    if (!hasOrg) {
-      this.organizations.push(org)
-    }
-    const config = await services.get('config')
-    await config.local.set(CurrentOrganizationKey, org.key)
-    this.organizationId = org.key
-  }
 }