From 5c3b24fbf9e7aa037fedc8ea4fd2266053382036 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Mon, 20 May 2024 19:27:19 -0700 Subject: [PATCH] Fix newly created org missing from user's org list (#1799) Resolves https://github.com/webrecorder/browsertrix/issues/1398 ### Changes - Updates org list in user info state after an org is created - Minor refactor to add `btrix` prefix to custom `update-user-info` event and replace unnecessary `defaultOrg` property --- frontend/src/components/orgs-list.ts | 24 +++++++++++++------ .../src/features/accounts/account-settings.ts | 8 +++---- frontend/src/index.ts | 8 +++---- frontend/src/pages/home.ts | 14 +++++++---- frontend/src/pages/org/index.ts | 4 ++-- 5 files changed, 37 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts index 0ae98c34..915a9f27 100644 --- a/frontend/src/components/orgs-list.ts +++ b/frontend/src/components/orgs-list.ts @@ -16,9 +16,6 @@ export class OrgsList extends LiteElement { @property({ type: Array }) orgList?: OrgData[] = []; - @property({ type: Object }) - defaultOrg?: UserOrg; - @property({ type: Boolean }) skeleton? = false; @@ -30,9 +27,12 @@ export class OrgsList extends LiteElement { return this.renderSkeleton(); } + const defaultOrg = this.userInfo?.orgs.find((org) => org.default === true); + return html` `; } @@ -125,9 +125,16 @@ export class OrgsList extends LiteElement { return stop; } - private readonly renderOrg = (org: OrgData) => { + private readonly renderOrg = (defaultOrg?: UserOrg) => (org: OrgData) => { + if (!this.userInfo) return; + + // There shouldn't really be a case where an org is in the org list but + // not in user info, but disable clicking into the org just in case + const isUserOrg = this.userInfo.orgs.some(({ id }) => id === org.id); + let defaultLabel: TemplateResult | undefined; - if (this.defaultOrg && org.id === this.defaultOrg.id) { + + if (defaultOrg && org.id === defaultOrg.id) { defaultLabel = html`${msg("Default")}`; @@ -136,9 +143,12 @@ export class OrgsList extends LiteElement { return html`
  • ${defaultLabel}${org.name} diff --git a/frontend/src/features/accounts/account-settings.ts b/frontend/src/features/accounts/account-settings.ts index 6237387a..7b9c277e 100644 --- a/frontend/src/features/accounts/account-settings.ts +++ b/frontend/src/features/accounts/account-settings.ts @@ -19,7 +19,7 @@ const { PASSWORD_MINLENGTH, PASSWORD_MAXLENGTH, PASSWORD_MIN_SCORE } = PasswordService; /** - * @fires update-user-info + * @fires btrix-update-user-info */ @localized() @customElement("btrix-request-verify") @@ -337,7 +337,7 @@ export class AccountSettings extends LiteElement { }), }); - this.dispatchEvent(new CustomEvent("update-user-info")); + this.dispatchEvent(new CustomEvent("btrix-update-user-info")); this.notify({ message: msg("Your name has been updated."), variant: "success", @@ -377,7 +377,7 @@ export class AccountSettings extends LiteElement { }), }); - this.dispatchEvent(new CustomEvent("update-user-info")); + this.dispatchEvent(new CustomEvent("btrix-update-user-info")); this.notify({ message: msg("Your email has been updated."), variant: "success", @@ -417,7 +417,7 @@ export class AccountSettings extends LiteElement { }); this.isChangingPassword = false; - this.dispatchEvent(new CustomEvent("update-user-info")); + this.dispatchEvent(new CustomEvent("btrix-update-user-info")); this.notify({ message: msg("Your password has been updated."), variant: "success", diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 9be7c181..fda402eb 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -365,7 +365,7 @@ export class App extends LiteElement { : { slug: "", name: msg("All Organizations") }; if (!selectedOption) { console.debug( - `Could't find organization with slug ${this.appState.orgSlug}`, + `Couldn't find organization with slug ${this.appState.orgSlug}`, orgs, ); return; @@ -575,7 +575,7 @@ export class App extends LiteElement { case "home": return html` { + @btrix-update-user-info=${(e: CustomEvent) => { e.stopPropagation(); void this.updateUserInfo(); }} @@ -601,7 +601,7 @@ export class App extends LiteElement { .split("/")[0] || "home"; return html` { + @btrix-update-user-info=${(e: CustomEvent) => { e.stopPropagation(); void this.updateUserInfo(); }} @@ -619,7 +619,7 @@ export class App extends LiteElement { case "accountSettings": return html` { + @btrix-update-user-info=${(e: CustomEvent) => { e.stopPropagation(); void this.updateUserInfo(); }} diff --git a/frontend/src/pages/home.ts b/frontend/src/pages/home.ts index 979c34ce..f8567233 100644 --- a/frontend/src/pages/home.ts +++ b/frontend/src/pages/home.ts @@ -12,6 +12,9 @@ import { maxLengthValidator } from "@/utils/form"; import LiteElement, { html } from "@/utils/LiteElement"; import type { OrgData } from "@/utils/orgs"; +/** + * @fires btrix-update-user-info + */ @localized() @customElement("btrix-home") export class Home extends LiteElement { @@ -153,9 +156,6 @@ export class Home extends LiteElement { org.default === true, - )} @update-quotas=${this.onUpdateOrgQuotas} > @@ -219,8 +219,9 @@ export class Home extends LiteElement { size="small" ?loading=${this.isSubmittingNewOrg} ?disabled=${this.isSubmittingNewOrg} - >${msg("Create Org")} + ${msg("Create Org")} +
    ` : ""} @@ -302,7 +303,12 @@ export class Home extends LiteElement { body: JSON.stringify(params), }); + // Update user info since orgs are checked against userInfo.orgs + this.dispatchEvent(new CustomEvent("btrix-update-user-info")); + + await this.updateComplete; void this.fetchOrgs(); + this.notify({ message: msg(str`Created new org named "${params.name}".`), variant: "success", diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts index 468000d7..3075c9b5 100644 --- a/frontend/src/pages/org/index.ts +++ b/frontend/src/pages/org/index.ts @@ -80,7 +80,7 @@ const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/; /** - * @fires update-user-info + * @fires btrix-update-user-info */ @localized() @customElement("btrix-org") @@ -725,7 +725,7 @@ export class Org extends LiteElement { }); await this.dispatchEvent( - new CustomEvent("update-user-info", { bubbles: true }), + new CustomEvent("btrix-update-user-info", { bubbles: true }), ); const newSlug = e.detail.slug; if (newSlug) {