feat: use server-side permissions for View As UI gating

Use the existing GetProjectWithBearerToken pattern to fetch the
impersonated user's projectPermissions from the server, rather than
reconstructing permissions client-side.

Changes:
- Project layout calls GetProjectWithBearerToken with the mocked user's
  JWT (from GetDeploymentCredentials) to get their actual permissions
- Created effectivePermissionsStore to share permissions with TopNavBar
- ProjectTabs uses effectiveProjectPermissions (impersonated user's
  permissions when View As is active)
- TopNavigationBar uses effective permissions for Share button visibility

This follows the existing architecture where the server is the single
source of truth for permissions, rather than duplicating permission
logic on the client.

Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>

Author: cursoragent

web-admin/src/features/navigation/TopNavigationBar.svelte

@@ -21,6 +21,7 @@
   } from "../../client";
   import ViewAsUserChip from "../../features/view-as-user/ViewAsUserChip.svelte";
   import { viewAsUserStore } from "../../features/view-as-user/viewAsUserStore";
+  import { effectiveProjectPermissionsStore } from "../../features/view-as-user/effectivePermissionsStore";
   import CreateAlert from "../alerts/CreateAlert.svelte";
   import { useAlerts } from "../alerts/selectors";
   import AvatarButton from "../authentication/AvatarButton.svelte";
@@ -69,6 +70,15 @@
   $: onPublicURLPage = isPublicURLPage($page);
   $: onOrgPage = isOrganizationPage($page);
 
+  // Use effective permissions when "View As" is active (from server)
+  // Otherwise fall back to the props passed from the root layout
+  $: effectiveManageProjectMembers =
+    $effectiveProjectPermissionsStore?.manageProjectMembers ??
+    manageProjectMembers;
+  $: effectiveCreateMagicAuthTokens =
+    $effectiveProjectPermissionsStore?.createMagicAuthTokens ??
+    createMagicAuthTokens;
+
   $: loggedIn = !!$user.data?.user;
   $: rillLogoHref = !loggedIn ? "https://www.rilldata.com" : "/";
   $: logoUrl = organizationLogoUrl;
@@ -231,7 +241,7 @@
     {/if}
     <!-- NOTE: only project admin and editor can manage project members -->
     <!-- https://docs.rilldata.com/guide/administration/users-and-access/roles-permissions -->
-    {#if onProjectPage && manageProjectMembers}
+    {#if onProjectPage && effectiveManageProjectMembers}
       <ShareProjectPopover
         {organization}
         {project}
@@ -264,7 +274,9 @@
               {#if $alertsFlag}
                 <CreateAlert />
               {/if}
-              <ShareDashboardPopover {createMagicAuthTokens} />
+              <ShareDashboardPopover
+                createMagicAuthTokens={effectiveCreateMagicAuthTokens}
+              />
             {/if}
           </StateManagersProvider>
         {/key}

web-admin/src/features/view-as-user/effectivePermissionsStore.ts

@@ -0,0 +1,10 @@
+import { writable } from "svelte/store";
+import type { V1ProjectPermissions } from "../../client";
+
+/**
+ * Store for effective project permissions when "View As" is active.
+ * When null, the actual user's permissions should be used.
+ * When set, these are the impersonated user's permissions (from server).
+ */
+export const effectiveProjectPermissionsStore =
+  writable<V1ProjectPermissions | null>(null);

web-admin/src/routes/[organization]/[project]/+layout.svelte

@@ -48,6 +48,7 @@
   import { createAdminServiceGetProjectWithBearerToken } from "@rilldata/web-admin/features/public-urls/get-project-with-bearer-token";
   import { cloudVersion } from "@rilldata/web-admin/features/telemetry/initCloudMetrics";
   import { viewAsUserStore } from "@rilldata/web-admin/features/view-as-user/viewAsUserStore";
+  import { effectiveProjectPermissionsStore } from "@rilldata/web-admin/features/view-as-user/effectivePermissionsStore";
   import ErrorPage from "@rilldata/web-common/components/ErrorPage.svelte";
   import { metricsService } from "@rilldata/web-common/metrics/initMetrics";
   import RuntimeProvider from "@rilldata/web-common/runtime-client/RuntimeProvider.svelte";
@@ -122,7 +123,41 @@
   $: ({ data: mockedUserDeploymentCredentials } =
     $mockedUserDeploymentCredentialsQuery);
 
+  /**
+   * When "View As" is active, fetch the project using the mocked user's JWT.
+   * This returns the impersonated user's `projectPermissions` from the server.
+   */
+  $: mockedUserProjectQuery = createAdminServiceGetProjectWithBearerToken(
+    organization,
+    project,
+    mockedUserDeploymentCredentials?.accessToken ?? "",
+    undefined,
+    {
+      query: {
+        enabled: !!mockedUserDeploymentCredentials?.accessToken,
+      },
+    },
+  );
+
   $: ({ data: projectData, error: projectError } = $projectQuery);
+
+  /**
+   * Compute effective project permissions.
+   * When "View As" is active, use the impersonated user's permissions (from server).
+   * Otherwise, use the actual user's permissions.
+   */
+  $: effectiveProjectPermissions =
+    mockedUserId && $mockedUserProjectQuery.data?.projectPermissions
+      ? $mockedUserProjectQuery.data.projectPermissions
+      : projectData?.projectPermissions;
+
+  // Update the global store so TopNavigationBar can access effective permissions
+  $: effectiveProjectPermissionsStore.set(
+    mockedUserId && $mockedUserProjectQuery.data?.projectPermissions
+      ? $mockedUserProjectQuery.data.projectPermissions
+      : null,
+  );
+
   $: deploymentStatus = projectData?.deployment?.status;
   // A re-deploy triggers `DEPLOYMENT_STATUS_UPDATING` status. But we can still show the project UI.
   $: isProjectAvailable =
@@ -168,7 +203,7 @@
 
 {#if onProjectPage && deploymentStatus === V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING}
   <ProjectTabs
-    projectPermissions={projectData.projectPermissions}
+    projectPermissions={effectiveProjectPermissions}
     {organization}
     {pathname}
     {project}