feat: apply View As to org-level permissions and tabs

cursoragent · ericokuma · cursoragent · commit e680498ab43c · 2026-02-14T01:29:27.000Z
When View As is active, also fetch the impersonated user's org membership
to get their org role, and use that to compute effective org permissions.

Changes:
- Added orgRoleToPermissions() and getEffectiveOrgPermissions() to map
  org roles (admin/editor/viewer) to org permissions
- Updated root layout to fetch view-as user's org role and compute
  effective org permissions
- OrganizationTabs now uses effective org permissions (Users/Settings
  tabs hidden for viewers)
- TopNavigationBar receives effective org permissions
- BillingBannerManager also receives effective org permissions

This ensures that when viewing as an org-level viewer:
- Org Users tab is hidden
- Org Settings tab is hidden
- Project-level admin features are also hidden based on their project role

Co-authored-by: ericokuma &lt;ericokuma@users.noreply.github.com&gt;
diff --git a/web-admin/src/features/view-as-user/getViewAsUserPermissions.ts b/web-admin/src/features/view-as-user/getViewAsUserPermissions.ts
@@ -1,15 +1,16 @@
-import { derived } from "svelte/store";
 import {
-  createAdminServiceGetProjectMemberUser,
   type V1ProjectPermissions,
+  type V1OrganizationPermissions,
 } from "../../client";
-import { viewAsUserStore, viewAsUserStateStore$ } from "./viewAsUserStore";
 
 /**
  * Project roles and their corresponding permissions.
  * Based on: https://docs.rilldata.com/guide/administration/users-and-access/roles-permissions
  */
-const ROLE_PERMISSIONS: Record<string, Partial<V1ProjectPermissions>> = {
+const PROJECT_ROLE_PERMISSIONS: Record<
+  string,
+  Partial<V1ProjectPermissions>
+> = {
   admin: {
     readProject: true,
     manageProject: true,
@@ -34,9 +35,53 @@ const ROLE_PERMISSIONS: Record<string, Partial<V1ProjectPermissions>> = {
 };
 
 /**
- * Returns the default (most restrictive) permissions for unknown roles.
+ * Organization roles and their corresponding permissions.
+ * Based on: https://docs.rilldata.com/guide/administration/users-and-access/roles-permissions
+ */
+const ORG_ROLE_PERMISSIONS: Record<
+  string,
+  Partial<V1OrganizationPermissions>
+> = {
+  admin: {
+    admin: true,
+    readOrg: true,
+    manageOrg: true,
+    readProjects: true,
+    createProjects: true,
+    manageProjects: true,
+    readOrgMembers: true,
+    manageOrgMembers: true,
+    manageOrgAdmins: true,
+  },
+  editor: {
+    admin: false,
+    readOrg: true,
+    manageOrg: false,
+    readProjects: true,
+    createProjects: true,
+    manageProjects: false,
+    readOrgMembers: true,
+    manageOrgMembers: false,
+    manageOrgAdmins: false,
+  },
+  viewer: {
+    admin: false,
+    guest: false,
+    readOrg: true,
+    manageOrg: false,
+    readProjects: true,
+    createProjects: false,
+    manageProjects: false,
+    readOrgMembers: false,
+    manageOrgMembers: false,
+    manageOrgAdmins: false,
+  },
+};
+
+/**
+ * Returns the default (most restrictive) project permissions for unknown roles.
  */
-function getDefaultPermissions(): Partial<V1ProjectPermissions> {
+function getDefaultProjectPermissions(): Partial<V1ProjectPermissions> {
   return {
     readProject: true,
     manageProject: false,
@@ -46,47 +91,46 @@ function getDefaultPermissions(): Partial<V1ProjectPermissions> {
   };
 }
 
+/**
+ * Returns the default (most restrictive) org permissions for unknown roles.
+ */
+function getDefaultOrgPermissions(): Partial<V1OrganizationPermissions> {
+  return {
+    admin: false,
+    guest: false,
+    readOrg: true,
+    manageOrg: false,
+    readProjects: true,
+    createProjects: false,
+    manageProjects: false,
+    readOrgMembers: false,
+    manageOrgMembers: false,
+    manageOrgAdmins: false,
+  };
+}
+
 /**
  * Maps a role name to project permissions.
  */
 export function roleToPermissions(
   roleName: string | undefined,
 ): Partial<V1ProjectPermissions> {
-  if (!roleName) return getDefaultPermissions();
+  if (!roleName) return getDefaultProjectPermissions();
   const normalizedRole = roleName.toLowerCase();
-  return ROLE_PERMISSIONS[normalizedRole] ?? getDefaultPermissions();
+  return (
+    PROJECT_ROLE_PERMISSIONS[normalizedRole] ?? getDefaultProjectPermissions()
+  );
 }
 
 /**
- * Creates a query to fetch the impersonated user's project membership.
- * Returns their role name which can be mapped to permissions.
+ * Maps an org role name to organization permissions.
  */
-export function useViewAsUserRole(organization: string, project: string) {
-  return derived(viewAsUserStore, ($viewAsUser, set) => {
-    if (!$viewAsUser?.email || !organization || !project) {
-      set(null);
-      return;
-    }
-
-    // Create the query - this will be reactive to viewAsUser changes
-    const query = createAdminServiceGetProjectMemberUser(
-      organization,
-      project,
-      $viewAsUser.email,
-      {
-        query: {
-          enabled: !!$viewAsUser?.email && !!organization && !!project,
-        },
-      },
-    );
-
-    // Subscribe to the query and update our derived store
-    const unsubscribe = query.subscribe((result) => {
-      set(result.data?.member?.roleName ?? null);
-    });
-
-    return unsubscribe;
-  });
+export function orgRoleToPermissions(
+  roleName: string | undefined,
+): Partial<V1OrganizationPermissions> {
+  if (!roleName) return getDefaultOrgPermissions();
+  const normalizedRole = roleName.toLowerCase();
+  return ORG_ROLE_PERMISSIONS[normalizedRole] ?? getDefaultOrgPermissions();
 }
 
 /**
@@ -122,3 +166,41 @@ export function getEffectivePermissions(
       viewAsPermissions.manageProjectAdmins,
   };
 }
+
+/**
+ * Computes the effective organization permissions when View As is active.
+ * Returns the impersonated user's permissions based on their org role,
+ * or the actual permissions if View As is not active.
+ */
+export function getEffectiveOrgPermissions(
+  actualPermissions: V1OrganizationPermissions,
+  viewAsOrgRoleName: string | null | undefined,
+  isViewAsActive: boolean,
+): V1OrganizationPermissions {
+  if (!isViewAsActive || !viewAsOrgRoleName) {
+    return actualPermissions;
+  }
+
+  const viewAsPermissions = orgRoleToPermissions(viewAsOrgRoleName);
+
+  // Return permissions that are the intersection of actual and view-as permissions
+  // This ensures we never grant more permissions than the actual user has
+  return {
+    admin: actualPermissions.admin && viewAsPermissions.admin,
+    guest: actualPermissions.guest && viewAsPermissions.guest,
+    readOrg: actualPermissions.readOrg && viewAsPermissions.readOrg,
+    manageOrg: actualPermissions.manageOrg && viewAsPermissions.manageOrg,
+    readProjects:
+      actualPermissions.readProjects && viewAsPermissions.readProjects,
+    createProjects:
+      actualPermissions.createProjects && viewAsPermissions.createProjects,
+    manageProjects:
+      actualPermissions.manageProjects && viewAsPermissions.manageProjects,
+    readOrgMembers:
+      actualPermissions.readOrgMembers && viewAsPermissions.readOrgMembers,
+    manageOrgMembers:
+      actualPermissions.manageOrgMembers && viewAsPermissions.manageOrgMembers,
+    manageOrgAdmins:
+      actualPermissions.manageOrgAdmins && viewAsPermissions.manageOrgAdmins,
+  };
+}
diff --git a/web-admin/src/routes/+layout.svelte b/web-admin/src/routes/+layout.svelte
@@ -30,7 +30,12 @@
   import "@rilldata/web-common/app.css";
   import { themeControl } from "@rilldata/web-common/features/themes/theme-control";
   import { getThemedLogoUrl } from "@rilldata/web-admin/features/themes/organization-logo";
-  import type { V1Organization } from "@rilldata/web-admin/client";
+  import {
+    type V1Organization,
+    createAdminServiceGetOrganizationMemberUser,
+  } from "@rilldata/web-admin/client";
+  import { viewAsUserStore } from "@rilldata/web-admin/features/view-as-user/viewAsUserStore";
+  import { getEffectiveOrgPermissions } from "@rilldata/web-admin/features/view-as-user/getViewAsUserPermissions";
 
   export let data;
 
@@ -54,6 +59,26 @@
 
   $: organization = organizationName;
 
+  // Fetch the impersonated user's org membership to get their role
+  $: viewAsUserEmail = $viewAsUserStore?.email;
+  $: viewAsOrgMemberQuery = createAdminServiceGetOrganizationMemberUser(
+    organization ?? "",
+    viewAsUserEmail ?? "",
+    {
+      query: {
+        enabled: !!viewAsUserEmail && !!organization,
+      },
+    },
+  );
+  $: viewAsOrgRole = $viewAsOrgMemberQuery.data?.member?.roleName;
+
+  // Compute effective org permissions based on the impersonated user's role
+  $: effectiveOrgPermissions = getEffectiveOrgPermissions(
+    organizationPermissions ?? {},
+    viewAsOrgRole,
+    !!$viewAsUserStore,
+  );
+
   // Remember:
   // - https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#a-bad-api
   // - https://tkdodo.eu/blog/react-query-error-handling#the-global-callbacks
@@ -146,22 +171,29 @@
   >
     <BannerCenter />
     {#if !hideBillingManager}
-      <BillingBannerManager {organization} {organizationPermissions} />
+      <BillingBannerManager
+        {organization}
+        organizationPermissions={effectiveOrgPermissions}
+      />
     {/if}
     {#if !isEmbed && !hideTopBar}
       <TopNavigationBar
         createMagicAuthTokens={projectPermissions?.createMagicAuthTokens}
         manageProjectMembers={projectPermissions?.manageProjectMembers}
         manageProjectAdmins={projectPermissions?.manageProjectAdmins}
-        manageOrgAdmins={organizationPermissions?.manageOrgAdmins}
-        manageOrgMembers={organizationPermissions?.manageOrgMembers}
-        readProjects={organizationPermissions?.readProjects}
+        manageOrgAdmins={effectiveOrgPermissions?.manageOrgAdmins}
+        manageOrgMembers={effectiveOrgPermissions?.manageOrgMembers}
+        readProjects={effectiveOrgPermissions?.readProjects}
         {planDisplayName}
         {organizationLogoUrl}
       />
 
       {#if withinOnlyOrg}
-        <OrganizationTabs {organization} {organizationPermissions} {pathname} />
+        <OrganizationTabs
+          {organization}
+          organizationPermissions={effectiveOrgPermissions}
+          {pathname}
+        />
       {/if}
     {/if}
     <ErrorBoundary>
