Oct 29, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
 "unauthenticate",
 "unconvert",
 "untar",
 "userauth",
 "userspace",
 "VMID",
 "walkthrough",
diff --git a/site/e2e/global.setup.ts b/site/e2e/global.setup.ts
 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
 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";
 // 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,
 },
 });

 // 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
 import type { AuthorizationCheck } from "api/typesGenerated";

 export const checks = {
 viewAllUsers: "viewAllUsers",
 updateUsers: "updateUsers",
 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]: {
 },
 action: "read",
 },
 [checks.readWorkspaceProxies]: {
 object: {
 resource_type: "workspace_proxy",
 },
 action: "read",
 },
 [checks.editWorkspaceProxies]: {
 object: {
 resource_type: "workspace_proxy",
 [checks.viewAnyGroup]: {
 object: {
 resource_type: "group",
 org_id: "any",
 },
 action: "read",
 },
 },
 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
 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
 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";

 >(undefined);

 type ManagementSettingsValue = Readonly<{
 deploymentValues: DeploymentConfig;
 organizations: readonly Organization[];
 organization?: Organization;
 }>;
 );
 };

 /**
 * 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;
 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)
 <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>
 </RequirePermission>
 );
 };

 export default ManagementSettingsLayout;
diff --git a/site/src/modules/management/SidebarView.stories.tsx b/site/src/modules/management/SidebarView.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import {
 MockNoPermissions,
 MockOrganization,
 MockOrganization2,
 MockPermissions,

 export const NoPermissions: Story = {
 args: {
 permissions:{},
 permissions:MockNoPermissions,
 },
 };

diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx
 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";

 /** Organizations and their permissions or undefined if still fetching. */
 organizations: OrganizationWithPermissions[] | undefined;
 /** Site-wide permissions. */
 permissions:AuthorizationResponse;
 permissions:Permissions;
 }

 /**
 /** Whether a deployment setting page is being viewed. */
 active: boolean;
 /** Site-wide permissions. */
 permissions:AuthorizationResponse;
 permissions:Permissions;
 }

 /**
 {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>
 )}
 {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>
 /** Organizations and their permissions or undefined if still fetching. */
 organizations: OrganizationWithPermissions[] | undefined;
 /** Site-wide permissions. */
 permissions:AuthorizationResponse;
 permissions:Permissions;
 }

 /**
 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
 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} />
 </>
 );
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -175,6 +175,7 @@
		"unauthenticate",
		"unconvert",
		"untar",
		"userauth",
		"userspace",
		"VMID",
		"walkthrough",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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);
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand DownExpand Up		@@ -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,
		},
		});

Expand All		@@ -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 {};
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,5 @@
		import type { AuthorizationCheck } from "api/typesGenerated";

		export const checks = {
		viewAllUsers: "viewAllUsers",
		updateUsers: "updateUsers",
Expand All		@@ -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]: {
Expand DownExpand Up		@@ -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",
Expand All		@@ -116,7 +131,6 @@ export const permissionsToCheck = {
		[checks.viewAnyGroup]: {
		object: {
		resource_type: "group",
		org_id: "any",
Copy link ContributorAuthor buenos-nachosOct 25, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Ended up deleting this because the property wasn't compatible. It also didn't seem to be used anywhere @Emyrk Not sure if we should update the types so that this can be added back Copy link Member EmyrkOct 25, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Can you delete this unused check then? Copy link ContributorAuthor buenos-nachosOct 25, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Oh, sorry – I meant that the`org_id` property specifically didn't seem to be used anywhere
		},
		action: "read",
		},
Expand All		@@ -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>;
Original file line number	Diff line number	Diff line change
		@@ -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;
Original file line number	Diff line number	Diff line change
		@@ -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";

Expand All		@@ -18,7 +14,6 @@ export const ManagementSettingsContext = createContext<
		>(undefined);

		type ManagementSettingsValue = Readonly<{
		deploymentValues: DeploymentConfig;
		organizations: readonly Organization[];
		organization?: Organization;
		}>;
Expand DownExpand Up		@@ -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;
Expand All		@@ -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)
Expand All		@@ -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>
Expand All		@@ -106,3 +85,5 @@ export const ManagementSettingsLayout: FC = () => {
		</RequirePermission>
		);
		};

		export default ManagementSettingsLayout;
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import type { Meta, StoryObj } from "@storybook/react";
		import {
		MockNoPermissions,
		MockOrganization,
		MockOrganization2,
		MockPermissions,
Expand DownExpand Up		@@ -96,7 +97,7 @@ export const NoDeploymentValues: Story = {

		export const NoPermissions: Story = {
		args: {
		permissions:{},
		permissions:MockNoPermissions,
		},
		};

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

Expand All		@@ -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;
		}

		/**
Expand DownExpand Up		@@ -72,7 +68,7 @@ interface DeploymentSettingsNavigationProps {
		/** Whether a deployment setting page is being viewed. */
		active: boolean;
		/** Site-wide permissions. */
		permissions:AuthorizationResponse;
		permissions:Permissions;
		}

		/**
Expand DownExpand Up		@@ -130,10 +126,11 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
		{permissions.viewDeploymentValues && (
		<SidebarNavSubItem href="network">Network</SidebarNavSubItem>
		)}
		{/* All users can view workspace regions. */}
Copy link ContributorAuthor buenos-nachosOct 25, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. This actually wasn't true, so Steven and I had to put this behind a condition BrunoQuaresma and aslilac reacted with thumbs up emoji
		<SidebarNavSubItem href="workspace-proxies">
		Workspace Proxies
		</SidebarNavSubItem>
		{permissions.readWorkspaceProxies && (
		<SidebarNavSubItem href="workspace-proxies">
		Workspace Proxies
		</SidebarNavSubItem>
		)}
		{permissions.viewDeploymentValues && (
		<SidebarNavSubItem href="security">Security</SidebarNavSubItem>
		)}
Expand All		@@ -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>
Expand All		@@ -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;
		}

		/**
Expand DownExpand Up		@@ -241,8 +240,6 @@ interface OrganizationSettingsNavigationProps {
		const OrganizationSettingsNavigation: FC<
		OrganizationSettingsNavigationProps
		> = ({ active, organization }) => {
		const { experiments } = useDashboard();

		return (
		<>
		<SidebarNavItem
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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} />
		</>
		);
		};
Expand Down