coder · code-asher · Aug 6, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -107,3 +107,64 @@ export const organizations = () => {
     queryFn: () => API.getOrganizations(),
   };
 };
+
+/**
+ * Fetch permissions for a single organization.
+ *
+ * If the ID is undefined, return a disabled query.
+ */
+export const organizationPermissions = (organizationId: string | undefined) => {
+  if (!organizationId) {
+    return { enabled: false };
+  }
+  return {
+    queryKey: ["organization", organizationId, "permissions"],
+    queryFn: () =>
+      API.checkAuthorization({
+        checks: {
+          viewMembers: {
+            object: {
+              resource_type: "organization_member",
+              organization_id: organizationId,
+            },
+            action: "read",
+          },
+          editMembers: {
+            object: {
+              resource_type: "organization_member",
+              organization_id: organizationId,
+            },
+            action: "update",
+          },
+          createGroup: {
+            object: {
+              resource_type: "group",
+              organization_id: organizationId,
+            },
+            action: "create",
+          },
+          viewGroups: {
+            object: {
+              resource_type: "group",
+              organization_id: organizationId,
+            },
+            action: "read",
+          },
+          editOrganization: {
+            object: {
+              resource_type: "organization",
+              organization_id: organizationId,
+            },
+            action: "update",
+          },
+          auditOrganization: {
+            object: {
+              resource_type: "audit_log",
+              organization_id: organizationId,
+            },
+            action: "read",
+          },
+        },
+      }),
+  };
+};
diff --git a/site/src/contexts/auth/permissions.tsx b/site/src/contexts/auth/permissions.tsx
@@ -1,21 +1,25 @@
 export const checks = {
-  readAllUsers: "readAllUsers",
+  viewAllUsers: "viewAllUsers",
   updateUsers: "updateUsers",
   createUser: "createUser",
   createTemplates: "createTemplates",
   updateTemplates: "updateTemplates",
   deleteTemplates: "deleteTemplates",
-  viewAuditLog: "viewAuditLog",
+  viewAnyAuditLog: "viewAnyAuditLog",
   viewDeploymentValues: "viewDeploymentValues",
-  createGroup: "createGroup",
+  editDeploymentValues: "editDeploymentValues",
   viewUpdateCheck: "viewUpdateCheck",
   viewExternalAuthConfig: "viewExternalAuthConfig",
   viewDeploymentStats: "viewDeploymentStats",
   editWorkspaceProxies: "editWorkspaceProxies",
+  createOrganization: "createOrganization",
+  editAnyOrganization: "editAnyOrganization",
+  viewAnyGroup: "viewAnyGroup",
+  viewAllLicenses: "viewAllLicenses",
 } as const;
 
 export const permissionsToCheck = {
-  [checks.readAllUsers]: {
+  [checks.viewAllUsers]: {
     object: {
       resource_type: "user",
     },
@@ -51,9 +55,10 @@ export const permissionsToCheck = {
     },
     action: "delete",
   },
-  [checks.viewAuditLog]: {
+  [checks.viewAnyAuditLog]: {
     object: {
       resource_type: "audit_log",
+      any_org: true,
     },
     action: "read",
   },
@@ -63,11 +68,11 @@ export const permissionsToCheck = {
     },
     action: "read",
   },
-  [checks.createGroup]: {
+  [checks.editDeploymentValues]: {
     object: {
-      resource_type: "group",
+      resource_type: "deployment_config",
     },
-    action: "create",
+    action: "update",
   },
   [checks.viewUpdateCheck]: {
     object: {
@@ -93,6 +98,32 @@ export const permissionsToCheck = {
     },
     action: "create",
   },
+  [checks.createOrganization]: {
+    object: {
+      resource_type: "organization",
+    },
+    action: "create",
+  },
+  [checks.editAnyOrganization]: {
+    object: {
+      resource_type: "organization",
+      any_org: true,
+    },
+    action: "update",
+  },
+  [checks.viewAnyGroup]: {
+    object: {
+      resource_type: "group",
+      org_id: "any",
+    },
+    action: "read",
+  },
+  [checks.viewAllLicenses]: {
+    object: {
+      resource_type: "license",
+    },
+    action: "read",
+  },
 } as const;
 
 export type Permissions = Record<keyof typeof permissionsToCheck, boolean>;
diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -16,12 +16,13 @@ export const Navbar: FC = () => {
   const { user: me, permissions, signOut } = useAuthenticated();
   const featureVisibility = useFeatureVisibility();
   const canViewAuditLog =
-    featureVisibility["audit_log"] && Boolean(permissions.viewAuditLog);
+    featureVisibility.audit_log && Boolean(permissions.viewAnyAuditLog);
   const canViewDeployment = Boolean(permissions.viewDeploymentValues);
   const canViewOrganizations =
+    Boolean(permissions.editAnyOrganization) &&
     featureVisibility.multiple_organizations &&
     experiments.includes("multi-organization");
-  const canViewAllUsers = Boolean(permissions.readAllUsers);
+  const canViewAllUsers = Boolean(permissions.viewAllUsers);
   const proxyContextValue = useProxy();
   const canViewHealth = canViewDeployment;
 

diff --git a/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx b/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { within, userEvent } from "@storybook/test";
 import { chromaticWithTablet } from "testHelpers/chromatic";
 import { MockUser, MockUser2 } from "testHelpers/entities";
 import { withDashboardProvider } from "testHelpers/storybook";
@@ -10,26 +11,63 @@ const meta: Meta<typeof NavbarView> = {
   component: NavbarView,
   args: {
     user: MockUser,
+    canViewAllUsers: true,
     canViewAuditLog: true,
     canViewDeployment: true,
-    canViewAllUsers: true,
     canViewHealth: true,
+    canViewOrganizations: true,
   },
   decorators: [withDashboardProvider],
 };
 
 export default meta;
 type Story = StoryObj<typeof NavbarView>;
 
-export const ForAdmin: Story = {};
+export const ForAdmin: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Deployment" }));
+  },
+};
+
+export const ForAuditor: Story = {
+  args: {
+    user: MockUser2,
+    canViewAllUsers: false,
+    canViewAuditLog: true,
+    canViewDeployment: false,
+    canViewHealth: false,
+    canViewOrganizations: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Deployment" }));
+  },
+};
+
+export const ForOrgAdmin: Story = {
+  args: {
+    user: MockUser2,
+    canViewAllUsers: false,
+    canViewAuditLog: true,
+    canViewDeployment: false,
+    canViewHealth: false,
+    canViewOrganizations: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Deployment" }));
+  },
+};
 
 export const ForMember: Story = {
   args: {
     user: MockUser2,
+    canViewAllUsers: false,
     canViewAuditLog: false,
     canViewDeployment: false,
-    canViewAllUsers: false,
     canViewHealth: false,
+    canViewOrganizations: false,
   },
 };
 

diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -17,10 +17,9 @@ import {
 import { AuditPageView } from "./AuditPageView";
 
 const AuditPage: FC = () => {
-  const { audit_log: isAuditLogVisible } = useFeatureVisibility();
+  const feats = useFeatureVisibility();
   const { experiments } = useDashboard();
   const location = useLocation();
-  const isMultiOrg = experiments.includes("multi-organization");
 
   /**
    * There is an implicit link between auditsQuery and filter via the
@@ -75,7 +74,9 @@ const AuditPage: FC = () => {
   // TODO: Once multi-org is stable, we should place this redirect into the
   //       router directly, if we still need to maintain it (for users who are
   //       typing the old URL manually or have it bookmarked).
-  if (isMultiOrg && location.pathname !== "/deployment/audit") {
+  const canViewOrganizations =
+    feats.multiple_organizations && experiments.includes("multi-organization");
+  if (canViewOrganizations && location.pathname !== "/deployment/audit") {
     return <Navigate to={`/deployment/audit${location.search}`} replace />;
   }
 
@@ -88,18 +89,18 @@ const AuditPage: FC = () => {
       <AuditPageView
         auditLogs={auditsQuery.data?.audit_logs}
         isNonInitialPage={isNonInitialPage(searchParams)}
-        isAuditLogVisible={isAuditLogVisible}
+        isAuditLogVisible={feats.audit_log}
         auditsQuery={auditsQuery}
         error={auditsQuery.error}
-        showOrgDetails={isMultiOrg}
+        showOrgDetails={canViewOrganizations}
         filterProps={{
           filter,
           error: auditsQuery.error,
           menus: {
             user: userMenu,
             action: actionMenu,
             resourceType: resourceTypeMenu,
-            organization: isMultiOrg ? organizationsMenu : undefined,
+            organization: canViewOrganizations ? organizationsMenu : undefined,
           },
         }}
       />

diff --git a/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx b/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx
@@ -9,11 +9,12 @@ import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout";
 import { Sidebar } from "./Sidebar";
 
 type DeploySettingsContextValue = {
-  deploymentValues: DeploymentConfig;
+  deploymentValues: DeploymentConfig | undefined;
 };
 
 export const DeploySettingsContext = createContext<
@@ -33,9 +34,11 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
 export const DeploySettingsLayout: FC = () => {
   const { experiments } = useDashboard();
 
-  const multiOrgExperimentEnabled = experiments.includes("multi-organization");
+  const feats = useFeatureVisibility();
+  const canViewOrganizations =
+    feats.multiple_organizations && experiments.includes("multi-organization");
 
-  return multiOrgExperimentEnabled ? (
+  return canViewOrganizations ? (
     <ManagementSettingsLayout />
   ) : (
     <DeploySettingsLayoutInner />
@@ -52,19 +55,15 @@ const DeploySettingsLayoutInner: FC = () => {
         <Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
           <Sidebar />
           <main css={{ maxWidth: 800, width: "100%" }}>
-            {deploymentConfigQuery.data ? (
-              <DeploySettingsContext.Provider
-                value={{
-                  deploymentValues: deploymentConfigQuery.data,
-                }}
-              >
-                <Suspense fallback={<Loader />}>
-                  <Outlet />
-                </Suspense>
-              </DeploySettingsContext.Provider>
-            ) : (
-              <Loader />
-            )}
+            <DeploySettingsContext.Provider
+              value={{
+                deploymentValues: deploymentConfigQuery.data,
+              }}
+            >
+              <Suspense fallback={<Loader />}>
+                <Outlet />
+              </Suspense>
+            </DeploySettingsContext.Provider>
           </main>
         </Stack>
       </Margins>

diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx
@@ -1,5 +1,6 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
+import { Loader } from "components/Loader/Loader";
 import { pageTitle } from "utils/page";
 import { useDeploySettings } from "../DeploySettingsLayout";
 import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView";
@@ -13,7 +14,11 @@ const ExternalAuthSettingsPage: FC = () => {
         <title>{pageTitle("External Authentication Settings")}</title>
       </Helmet>
 
-      <ExternalAuthSettingsPageView config={deploymentValues.config} />
+      {deploymentValues ? (
+        <ExternalAuthSettingsPageView config={deploymentValues.config} />
+      ) : (
+        <Loader />
+      )}
     </>
   );
 };