diff --git a/frontend/src/index.test.ts b/frontend/src/index.test.ts index 10d0823f..5e478b57 100644 --- a/frontend/src/index.test.ts +++ b/frontend/src/index.test.ts @@ -13,7 +13,14 @@ describe("browsertrix-app", () => { name: "Test User", is_verified: false, is_superuser: false, - orgs: [{ id: "test_org_id", name: "test org" }], + orgs: [ + { + id: "test_org_id", + name: "test org", + role: 10, + email: "test@org.org", + }, + ], }) ); }); diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 298ed5b9..21e7ece5 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -15,7 +15,7 @@ import APIRouter from "./utils/APIRouter"; import AuthService from "./utils/AuthService"; import type { LoggedInEvent } from "./utils/AuthService"; import type { ViewState } from "./utils/APIRouter"; -import type { CurrentUser } from "./types/user"; +import type { CurrentUser, UserOrg } from "./types/user"; import type { AuthStorageEventData } from "./utils/AuthService"; import type { OrgData } from "./utils/orgs"; import theme from "./theme"; @@ -39,7 +39,7 @@ type APIUser = { name: string; is_verified: boolean; is_superuser: boolean; - orgs: OrgData[]; + orgs: UserOrg[]; }; type UserSettings = { @@ -151,6 +151,7 @@ export class App extends LiteElement { name: userInfo.name, isVerified: userInfo.is_verified, isAdmin: userInfo.is_superuser, + orgs: userInfo.orgs, }; const settings = this.getPersistedUserSettings(userInfo.id); if (settings) { @@ -158,7 +159,7 @@ export class App extends LiteElement { } const orgs = userInfo.orgs; this.orgs = orgs; - if (orgs.length && !this.userInfo.isAdmin && !this.selectedOrgId) { + if (orgs.length && !this.userInfo!.isAdmin && !this.selectedOrgId) { const firstOrg = orgs[0].id; if (orgs.length === 1) { // Persist selected org ID since there's no diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts index 2b6125c2..c704f741 100644 --- a/frontend/src/pages/org/index.ts +++ b/frontend/src/pages/org/index.ts @@ -6,7 +6,7 @@ import type { ViewState } from "../../utils/APIRouter"; import type { AuthState } from "../../utils/AuthService"; import type { CurrentUser } from "../../types/user"; import type { OrgData } from "../../utils/orgs"; -import { isOwner } from "../../utils/orgs"; +import { isOwner, isCrawler } from "../../utils/orgs"; import LiteElement, { html } from "../../utils/LiteElement"; import { needLogin } from "../../utils/auth"; import "./crawl-configs-detail"; @@ -62,6 +62,23 @@ export class Org extends LiteElement { @state() private org?: OrgData | null; + get userOrg() { + if (!this.userInfo) return null; + return this.userInfo.orgs.find(({ id }) => id === this.orgId)!; + } + + get isOwner() { + const userOrg = this.userOrg; + if (userOrg) return isOwner(userOrg.role); + return false; + } + + get isCrawler() { + const userOrg = this.userOrg; + if (userOrg) return isCrawler(userOrg.role); + return false; + } + async willUpdate(changedProperties: Map) { if (changedProperties.has("orgId") && this.orgId) { try { @@ -95,8 +112,6 @@ export class Org extends LiteElement { `; } - const memberInfo = (this.org.users ?? {})[this.userInfo.id]; - const isOrgOwner = memberInfo && isOwner(memberInfo.role); let tabPanelContent = "" as any; switch (this.orgTab) { @@ -110,7 +125,7 @@ export class Org extends LiteElement { tabPanelContent = this.renderBrowserProfiles(); break; case "settings": { - if (isOrgOwner) { + if (this.isOwner) { tabPanelContent = this.renderOrgSettings(); break; } @@ -123,7 +138,7 @@ export class Org extends LiteElement { } return html` - ${this.renderOrgNavBar(isOrgOwner)} + ${this.renderOrgNavBar()}