@api-client/ui 0.6.6 → 0.6.7

package/package.json

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

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
-  }
 }