coder · Parkreiner · Oct 29, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -175,6 +175,7 @@
 		"unauthenticate",
 		"unconvert",
 		"untar",
+		"userauth",
 		"userspace",
 		"VMID",
 		"walkthrough",

diff --git a/site/e2e/global.setup.ts b/site/e2e/global.setup.ts
@@ -35,6 +35,7 @@ test("setup deployment", async ({ page }) => {
 		expect(constants.license.split(".").length).toBe(3); // otherwise it's invalid
 
 		await page.goto("/deployment/licenses", { waitUntil: "domcontentloaded" });
+		await expect(page).toHaveTitle("License Settings - Coder");
 
 		await page.getByText("Add a license").click();
 		await page.getByRole("textbox").fill(constants.license);

diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import "jest-location-mock";
 import { cleanup } from "@testing-library/react";
-import crypto from "crypto";
+import crypto from "node:crypto";
 import { useMemo } from "react";
 import type { Region } from "api/typesGenerated";
 import type { ProxyLatencyReport } from "contexts/useProxyLatency";
@@ -48,9 +48,7 @@ global.ResizeObserver = require("resize-observer-polyfill");
 // Polyfill the getRandomValues that is used on utils/random.ts
 Object.defineProperty(global.self, "crypto", {
 	value: {
-		getRandomValues: function (buffer: Buffer) {
-			return crypto.randomFillSync(buffer);
-		},
+		getRandomValues: crypto.randomFillSync,
 	},
 });
 
@@ -72,5 +70,5 @@ afterEach(() => {
 // Clean up after the tests are finished.
 afterAll(() => server.close());
 
-// This is needed because we are compiling under `--isolatedModules`
+// biome-ignore lint/complexity/noUselessEmptyExport: This is needed because we are compiling under `--isolatedModules`
 export {};
diff --git a/site/src/contexts/auth/permissions.tsx b/site/src/contexts/auth/permissions.tsx
@@ -1,3 +1,5 @@
+import type { AuthorizationCheck } from "api/typesGenerated";
+
 export const checks = {
 	viewAllUsers: "viewAllUsers",
 	updateUsers: "updateUsers",
@@ -11,13 +13,20 @@ export const checks = {
 	viewUpdateCheck: "viewUpdateCheck",
 	viewExternalAuthConfig: "viewExternalAuthConfig",
 	viewDeploymentStats: "viewDeploymentStats",
+	readWorkspaceProxies: "readWorkspaceProxies",
 	editWorkspaceProxies: "editWorkspaceProxies",
 	createOrganization: "createOrganization",
 	editAnyOrganization: "editAnyOrganization",
 	viewAnyGroup: "viewAnyGroup",
 	createGroup: "createGroup",
 	viewAllLicenses: "viewAllLicenses",
-} as const;
+	viewNotificationTemplate: "viewNotificationTemplate",
+} as const satisfies Record<string, string>;
+
+// Type expression seems a little redundant (`keyof typeof checks` has the same
+// result), just because each key-value pair is currently symmetrical; this may
+// change down the line
+type PermissionValue = (typeof checks)[keyof typeof checks];
 
 export const permissionsToCheck = {
 	[checks.viewAllUsers]: {
@@ -94,6 +103,12 @@ export const permissionsToCheck = {
 		},
 		action: "read",
 	},
+	[checks.readWorkspaceProxies]: {
+		object: {
+			resource_type: "workspace_proxy",
+		},
+		action: "read",
+	},
 	[checks.editWorkspaceProxies]: {
 		object: {
 			resource_type: "workspace_proxy",
@@ -116,7 +131,6 @@ export const permissionsToCheck = {
 	[checks.viewAnyGroup]: {
 		object: {
 			resource_type: "group",
-			org_id: "any",
 		},
 		action: "read",
 	},
@@ -132,6 +146,12 @@ export const permissionsToCheck = {
 		},
 		action: "read",
 	},
-} as const;
+	[checks.viewNotificationTemplate]: {
+		object: {
+			resource_type: "notification_template",
+		},
+		action: "read",
+	},
+} as const satisfies Record<PermissionValue, AuthorizationCheck>;
 
-export type Permissions = Record<keyof typeof permissionsToCheck, boolean>;
+export type Permissions = Record<PermissionValue, boolean>;
diff --git a/site/src/modules/management/DeploymentSettingsProvider.tsx b/site/src/modules/management/DeploymentSettingsProvider.tsx
@@ -0,0 +1,64 @@
+import type { DeploymentConfig } from "api/api";
+import { deploymentConfig } from "api/queries/deployment";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Loader } from "components/Loader/Loader";
+import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { RequirePermission } from "contexts/auth/RequirePermission";
+import { type FC, createContext, useContext } from "react";
+import { useQuery } from "react-query";
+import { Outlet } from "react-router-dom";
+
+export const DeploymentSettingsContext = createContext<
+	DeploymentSettingsValue | undefined
+>(undefined);
+
+type DeploymentSettingsValue = Readonly<{
+	deploymentConfig: DeploymentConfig;
+}>;
+
+export const useDeploymentSettings = (): DeploymentSettingsValue => {
+	const context = useContext(DeploymentSettingsContext);
+	if (!context) {
+		throw new Error(
+			`${useDeploymentSettings.name} should be used inside of ${DeploymentSettingsProvider.name}`,
+		);
+	}
+
+	return context;
+};
+
+const DeploymentSettingsProvider: FC = () => {
+	const { permissions } = useAuthenticated();
+	const deploymentConfigQuery = useQuery(deploymentConfig());
+
+	// The deployment settings page also contains users, audit logs, groups and
+	// organizations, so this page must be visible if you can see any of these.
+	const canViewDeploymentSettingsPage =
+		permissions.viewDeploymentValues ||
+		permissions.viewAllUsers ||
+		permissions.editAnyOrganization ||
+		permissions.viewAnyAuditLog;
+
+	// Not a huge problem to unload the content in the event of an error,
+	// because the sidebar rendering isn't tied to this. Even if the user hits
+	// a 403 error, they'll still have navigation options
+	if (deploymentConfigQuery.error) {
+		return <ErrorAlert error={deploymentConfigQuery.error} />;
+	}
+
+	if (!deploymentConfigQuery.data) {
+		return <Loader />;
+	}
+
+	return (
+		<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
+			<DeploymentSettingsContext.Provider
+				value={{ deploymentConfig: deploymentConfigQuery.data }}
+			>
+				<Outlet />
+			</DeploymentSettingsContext.Provider>
+		</RequirePermission>
+	);
+};
+
+export default DeploymentSettingsProvider;
diff --git a/site/src/modules/management/ManagementSettingsLayout.tsx b/site/src/modules/management/ManagementSettingsLayout.tsx
@@ -1,15 +1,11 @@
-import type { DeploymentConfig } from "api/api";
-import { deploymentConfig } from "api/queries/deployment";
 import type { AuthorizationResponse, Organization } from "api/typesGenerated";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 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 { type FC, Suspense, createContext, useContext } from "react";
-import { useQuery } from "react-query";
 import { Outlet, useParams } from "react-router-dom";
 import { Sidebar } from "./Sidebar";
 
@@ -18,7 +14,6 @@ export const ManagementSettingsContext = createContext<
 >(undefined);
 
 type ManagementSettingsValue = Readonly<{
-	deploymentValues: DeploymentConfig;
 	organizations: readonly Organization[];
 	organization?: Organization;
 }>;
@@ -48,15 +43,8 @@ export const canEditOrganization = (
 	);
 };
 
-/**
- * A multi-org capable settings page layout.
- *
- * If multi-org is not enabled or licensed, this is the wrong layout to use.
- * See DeploySettingsLayoutInner instead.
- */
-export const ManagementSettingsLayout: FC = () => {
+const ManagementSettingsLayout: FC = () => {
 	const { permissions } = useAuthenticated();
-	const deploymentConfigQuery = useQuery(deploymentConfig());
 	const { organizations } = useDashboard();
 	const { organization: orgName } = useParams() as {
 		organization?: string;
@@ -70,14 +58,6 @@ export const ManagementSettingsLayout: FC = () => {
 		permissions.editAnyOrganization ||
 		permissions.viewAnyAuditLog;
 
-	if (deploymentConfigQuery.error) {
-		return <ErrorAlert error={deploymentConfigQuery.error} />;
-	}
-
-	if (!deploymentConfigQuery.data) {
-		return <Loader />;
-	}
-
 	const organization =
 		organizations && orgName
 			? organizations.find((org) => org.name === orgName)
@@ -87,15 +67,14 @@ export const ManagementSettingsLayout: FC = () => {
 		<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
 			<ManagementSettingsContext.Provider
 				value={{
-					deploymentValues: deploymentConfigQuery.data,
 					organizations,
 					organization,
 				}}
 			>
 				<Margins>
 					<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
 						<Sidebar />
-						<main css={{ width: "100%" }}>
+						<main css={{ flexGrow: 1 }}>
 							<Suspense fallback={<Loader />}>
 								<Outlet />
 							</Suspense>
@@ -106,3 +85,5 @@ export const ManagementSettingsLayout: FC = () => {
 		</RequirePermission>
 	);
 };
+
+export default ManagementSettingsLayout;
diff --git a/site/src/modules/management/SidebarView.stories.tsx b/site/src/modules/management/SidebarView.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import {
+	MockNoPermissions,
 	MockOrganization,
 	MockOrganization2,
 	MockPermissions,
@@ -96,7 +97,7 @@ export const NoDeploymentValues: Story = {
 
 export const NoPermissions: Story = {
 	args: {
-		permissions: {},
+		permissions: MockNoPermissions,
 	},
 };
 

diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx
@@ -2,19 +2,15 @@ import { cx } from "@emotion/css";
 import type { Interpolation, Theme } from "@emotion/react";
 import AddIcon from "@mui/icons-material/Add";
 import SettingsIcon from "@mui/icons-material/Settings";
-import type {
-	AuthorizationResponse,
-	Experiments,
-	Organization,
-} from "api/typesGenerated";
+import type { AuthorizationResponse, Organization } from "api/typesGenerated";
 import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { Loader } from "components/Loader/Loader";
 import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar";
 import { Stack } from "components/Stack/Stack";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import type { Permissions } from "contexts/auth/permissions";
 import { type ClassName, useClassName } from "hooks/useClassName";
 import { useDashboard } from "modules/dashboard/useDashboard";
-import { linkToUsers } from "modules/navigation";
 import type { FC, ReactNode } from "react";
 import { Link, NavLink } from "react-router-dom";
 
@@ -30,7 +26,7 @@ interface SidebarProps {
 	/** Organizations and their permissions or undefined if still fetching. */
 	organizations: OrganizationWithPermissions[] | undefined;
 	/** Site-wide permissions. */
-	permissions: AuthorizationResponse;
+	permissions: Permissions;
 }
 
 /**
@@ -72,7 +68,7 @@ interface DeploymentSettingsNavigationProps {
 	/** Whether a deployment setting page is being viewed. */
 	active: boolean;
 	/** Site-wide permissions. */
-	permissions: AuthorizationResponse;
+	permissions: Permissions;
 }
 
 /**
@@ -130,10 +126,11 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
 					{permissions.viewDeploymentValues && (
 						<SidebarNavSubItem href="network">Network</SidebarNavSubItem>
 					)}
-					{/* All users can view workspace regions.  */}
-					<SidebarNavSubItem href="workspace-proxies">
-						Workspace Proxies
-					</SidebarNavSubItem>
+					{permissions.readWorkspaceProxies && (
+						<SidebarNavSubItem href="workspace-proxies">
+							Workspace Proxies
+						</SidebarNavSubItem>
+					)}
 					{permissions.viewDeploymentValues && (
 						<SidebarNavSubItem href="security">Security</SidebarNavSubItem>
 					)}
@@ -145,12 +142,14 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
 					{permissions.viewAllUsers && (
 						<SidebarNavSubItem href="users">Users</SidebarNavSubItem>
 					)}
-					<SidebarNavSubItem href="notifications">
-						<Stack direction="row" alignItems="center" spacing={1}>
-							<span>Notifications</span>
-							<FeatureStageBadge contentType="beta" size="sm" />
-						</Stack>
-					</SidebarNavSubItem>
+					{permissions.viewNotificationTemplate && (
+						<SidebarNavSubItem href="notifications">
+							<Stack direction="row" alignItems="center" spacing={1}>
+								<span>Notifications</span>
+								<FeatureStageBadge contentType="beta" size="sm" />
+							</Stack>
+						</SidebarNavSubItem>
+					)}
 				</Stack>
 			)}
 		</div>
@@ -167,7 +166,7 @@ interface OrganizationsSettingsNavigationProps {
 	/** Organizations and their permissions or undefined if still fetching. */
 	organizations: OrganizationWithPermissions[] | undefined;
 	/** Site-wide permissions. */
-	permissions: AuthorizationResponse;
+	permissions: Permissions;
 }
 
 /**
@@ -241,8 +240,6 @@ interface OrganizationSettingsNavigationProps {
 const OrganizationSettingsNavigation: FC<
 	OrganizationSettingsNavigationProps
 > = ({ active, organization }) => {
-	const { experiments } = useDashboard();
-
 	return (
 		<>
 			<SidebarNavItem

diff --git a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx
@@ -1,24 +1,19 @@
 import { Loader } from "components/Loader/Loader";
-import { useManagementSettings } from "modules/management/ManagementSettingsLayout";
+import { useDeploymentSettings } from "modules/management/DeploymentSettingsProvider";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView";
 
 const ExternalAuthSettingsPage: FC = () => {
-	const { deploymentValues } = useManagementSettings();
+	const { deploymentConfig } = useDeploymentSettings();
 
 	return (
 		<>
 			<Helmet>
 				<title>{pageTitle("External Authentication Settings")}</title>
 			</Helmet>
-
-			{deploymentValues ? (
-				<ExternalAuthSettingsPageView config={deploymentValues.config} />
-			) : (
-				<Loader />
-			)}
+			<ExternalAuthSettingsPageView config={deploymentConfig.config} />
 		</>
 	);
 };