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

@@ -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`
       <ul class="overflow-hidden rounded-lg border">
-        ${this.orgList?.map(this.renderOrg)} ${this.renderOrgQuotas()}
+        ${this.orgList?.map(this.renderOrg(defaultOrg))}
+        ${this.renderOrgQuotas()}
       </ul>
     `;
   }
@@ -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`<sl-tag size="small" variant="primary" class="mr-2"
         >${msg("Default")}</sl-tag
       >`;
@@ -136,9 +143,12 @@ export class OrgsList extends LiteElement {
 
     return html`
       <li
-        class="flex items-center justify-between border-t bg-white p-3 text-primary first:border-t-0 hover:text-indigo-400"
+        class="${isUserOrg
+          ? ""
+          : "select-none cursor-not-allowed opacity-50"} flex items-center justify-between border-t bg-white p-3 text-primary first:border-t-0 hover:text-indigo-400"
         role="button"
         @click=${this.makeOnOrgClick(org)}
+        aria-disabled="${isUserOrg}"
       >
         <div class="mr-2 font-medium transition-colors">
           ${defaultLabel}${org.name}

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",

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-home
           class="w-full md:bg-neutral-50"
-          @update-user-info=${(e: CustomEvent) => {
+          @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-org
           class="w-full"
-          @update-user-info=${(e: CustomEvent) => {
+          @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-account-settings
           class="mx-auto box-border w-full max-w-screen-desktop p-2 md:py-8"
-          @update-user-info=${(e: CustomEvent) => {
+          @btrix-update-user-info=${(e: CustomEvent) => {
             e.stopPropagation();
             void this.updateUserInfo();
           }}

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 {
             <btrix-orgs-list
               .userInfo=${this.userInfo}
               .orgList=${this.orgList}
-              .defaultOrg=${this.userInfo?.orgs.find(
-                (org) => org.default === true,
-              )}
               @update-quotas=${this.onUpdateOrgQuotas}
             ></btrix-orgs-list>
           </section>
@@ -219,8 +219,9 @@ export class Home extends LiteElement {
                   size="small"
                   ?loading=${this.isSubmittingNewOrg}
                   ?disabled=${this.isSubmittingNewOrg}
-                  >${msg("Create Org")}</sl-button
                 >
+                  ${msg("Create Org")}
+                </sl-button>
               </div>
             `
           : ""}
@@ -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",

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) {