Aug 6, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 31, 2024
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
    queryFn: () => API.getProvisionerDaemonsByOrganization(organization),
  };
 };

 /**
 * 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
 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",
  createGroup: "createGroup",
  viewAllLicenses: "viewAllLicenses",
 } as const;

 export const permissionsToCheck = {
  [checks.readAllUsers]: {
  [checks.viewAllUsers]: {
    object: {
      resource_type: "user",
    },
    },
    action: "delete",
  },
  [checks.viewAuditLog]: {
  [checks.viewAnyAuditLog]: {
    object: {
      resource_type: "audit_log",
      any_org: true,
    },
    action: "read",
  },
    },
    action: "read",
  },
  [checks.createGroup]: {
  [checks.editDeploymentValues]: {
    object: {
      resource_type: "group",
      resource_type: "deployment_config",
    },
    action: "create",
    action: "update",
  },
  [checks.viewUpdateCheck]: {
    object: {
    },
    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.createGroup]: {
    object: {
      resource_type: "group",
    },
    action: "create",
  },
  [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
  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
 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";
  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
 import { AuditPageView } from "./AuditPageView";

 const AuditPage: FC = () => {
  const{ audit_log: isAuditLogVisible } = useFeatureVisibility();
  constfeats = useFeatureVisibility();
  const { experiments } = useDashboard();
  const location = useLocation();
  const isMultiOrg = experiments.includes("multi-organization");

  /**
   * There is an implicit link between auditsQuery and filter via the
  // 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 />;
  }

      <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
 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<
 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");

  returnmultiOrgExperimentEnabled ? (
  returncanViewOrganizations ? (
    <ManagementSettingsLayout />
  ) : (
    <DeploySettingsLayoutInner />
        <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
 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";
        <title>{pageTitle("External Authentication Settings")}</title>
      </Helmet>

      <ExternalAuthSettingsPageView config={deploymentValues.config} />
      {deploymentValues ? (
        <ExternalAuthSettingsPageView config={deploymentValues.config} />
      ) : (
        <Loader />
      )}
    </>
  );
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -120,3 +120,64 @@ export const provisionerDaemons = (organization: string) => {
		queryFn: () => API.getProvisionerDaemonsByOrganization(organization),
		};
		};

		/**
		* 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",
		},
		},
		}),
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -1,21 +1,26 @@
		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",
		createGroup: "createGroup",
		viewAllLicenses: "viewAllLicenses",
		} as const;

		export const permissionsToCheck = {
		[checks.readAllUsers]: {
		[checks.viewAllUsers]: {
		object: {
		resource_type: "user",
		},
Expand DownExpand Up		@@ -51,9 +56,10 @@ export const permissionsToCheck = {
		},
		action: "delete",
		},
		[checks.viewAuditLog]: {
		[checks.viewAnyAuditLog]: {
		object: {
		resource_type: "audit_log",
		any_org: true,
		},
		action: "read",
		},
Expand All		@@ -63,11 +69,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: {
Expand All		@@ -93,6 +99,38 @@ 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.createGroup]: {
		object: {
		resource_type: "group",
		},
		action: "create",
		},
		[checks.viewAllLicenses]: {
		object: {
		resource_type: "license",
		},
		action: "read",
		},
		} as const;

		export type Permissions = Record<keyof typeof permissionsToCheck, boolean>;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand All		@@ -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,
		},
		};

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,10 +17,9 @@ import {
		import { AuditPageView } from "./AuditPageView";

		const AuditPage: FC = () => {
		const{ audit_log: isAuditLogVisible } = useFeatureVisibility();
		constfeats = useFeatureVisibility();
		const { experiments } = useDashboard();
		const location = useLocation();
		const isMultiOrg = experiments.includes("multi-organization");

		/**
		* There is an implicit link between auditsQuery and filter via the
Expand DownExpand Up		@@ -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 />;
		}

Expand All		@@ -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,
		},
		}}
		/>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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<
Expand All		@@ -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");

		returnmultiOrgExperimentEnabled ? (
		returncanViewOrganizations ? (
		<ManagementSettingsLayout />
		) : (
		<DeploySettingsLayoutInner />
Expand All		@@ -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
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolved
		value={{
		deploymentValues: deploymentConfigQuery.data,
		}}
		>
		<Suspense fallback={<Loader />}>
		<Outlet />
		</Suspense>
		</DeploySettingsContext.Provider>
		</main>
		</Stack>
		</Margins>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand All		@@ -13,7 +14,11 @@ const ExternalAuthSettingsPage: FC = () => {
		<title>{pageTitle("External Authentication Settings")}</title>
		</Helmet>

		<ExternalAuthSettingsPageView config={deploymentValues.config} />
		{deploymentValues ? (
		<ExternalAuthSettingsPageView config={deploymentValues.config} />
		) : (
		<Loader />
		)}
		</>
		);
		};
Expand Down