fix: Show 404 page for nonexistent org (#2620)

Renders 404 page if org in URL doesn't exist.

Author: SuaYoo

frontend/src/index.test.ts

@@ -85,7 +85,7 @@ describe("browsertrix-app", () => {
     expect(el.shadowRoot?.childElementCount).to.not.equal(0);
   });
 
-  it("renders org when authenticated", async () => {
+  it("renders 404 when not in org", async () => {
     stub(AuthService, "initSessionStorage").returns(
       Promise.resolve({
         headers: { Authorization: "_fake_headers_" },
@@ -95,7 +95,46 @@ describe("browsertrix-app", () => {
     );
     // @ts-expect-error checkFreshness is private
     stub(AuthService.prototype, "checkFreshness");
-    AppStateService.updateOrgSlug("fake-org");
+
+    AppStateService.updateUser(
+      formatAPIUser({
+        ...mockAPIUser,
+      }),
+    );
+    AppStateService.updateOrgSlug("nonexistent-org");
+    const el = await fixture<App>(
+      html` <browsertrix-app .settings=${mockAppSettings}></browsertrix-app>`,
+    );
+    await el.updateComplete;
+    expect(el.shadowRoot?.querySelector("btrix-not-found")).to.exist;
+  });
+
+  it("renders org when in org", async () => {
+    const id = self.crypto.randomUUID();
+    const mockOrg = {
+      id: id,
+      name: "test org 2",
+      slug: "test-org-2",
+      role: 10,
+    };
+
+    stub(AuthService, "initSessionStorage").returns(
+      Promise.resolve({
+        headers: { Authorization: "_fake_headers_" },
+        tokenExpiresAt: 0,
+        username: "[email protected]",
+      }),
+    );
+    // @ts-expect-error checkFreshness is private
+    stub(AuthService.prototype, "checkFreshness");
+
+    AppStateService.updateUser(
+      formatAPIUser({
+        ...mockAPIUser,
+        orgs: [...mockAPIUser.orgs, mockOrg],
+      }),
+    );
+    AppStateService.updateOrgSlug("test-org-2");
     const el = await fixture<App>(
       html` <browsertrix-app .settings=${mockAppSettings}></browsertrix-app>`,
     );

frontend/src/index.ts

@@ -521,7 +521,6 @@ export class App extends BtrixElement {
                       >
                     `
                   : nothing}
-                <div role="separator" class="mx-2.5 h-7 w-0 border-l"></div>
                 ${this.renderOrgs()}
               `,
             )}
@@ -639,19 +638,20 @@ export class App extends BtrixElement {
 
     const selectedOption = this.orgSlugInPath
       ? orgs.find(({ slug }) => slug === this.orgSlugInPath)
-      : { slug: "", name: msg("All Organizations") };
+      : {
+          slug: "",
+          name: msg("All Organizations"),
+        };
+
     if (!selectedOption) {
-      console.debug(
-        `Couldn't find organization with slug ${this.orgSlugInPath}`,
-        orgs,
-      );
       return;
     }
 
     // Limit org name display for orgs created before org name max length restriction
     const orgNameLength = 50;
 
     return html`
+      <div role="separator" class="mx-2.5 h-7 w-0 border-l"></div>
       <div class="max-w-32 truncate sm:max-w-52 md:max-w-none">
         ${selectedOption.slug
           ? html`
@@ -869,6 +869,10 @@ export class App extends BtrixElement {
         return html`<btrix-orgs class="w-full md:bg-neutral-50"></btrix-orgs>`;
 
       case "org": {
+        if (!this.isUserInCurrentOrg) {
+          return this.renderNotFoundPage();
+        }
+
         const slug = this.viewState.params.slug;
         const orgPath = this.viewState.pathname;
         const pathname = this.getLocationPathname();