coder · aslilac · Oct 3, 2024 · Sep 30, 2024 · Sep 30, 2024 · Sep 30, 2024
diff --git a/site/e2e/tests/users/createUserWithPassword.spec.ts b/site/e2e/tests/users/createUserWithPassword.spec.ts
@@ -5,7 +5,9 @@ import { beforeCoderTest } from "../../hooks";
 test.beforeEach(async ({ page }) => await beforeCoderTest(page));
 
 test("create user with password", async ({ page, baseURL }) => {
-	await page.goto(`${baseURL}/users`, { waitUntil: "domcontentloaded" });
+	await page.goto(`${baseURL}/deployment/users`, {
+		waitUntil: "domcontentloaded",
+	});
 	await expect(page).toHaveTitle("Users - Coder");
 
 	await page.getByRole("button", { name: "Create user" }).click();
@@ -37,7 +39,9 @@ test("create user with password", async ({ page, baseURL }) => {
 });
 
 test("create user without full name is optional", async ({ page, baseURL }) => {
-	await page.goto(`${baseURL}/users`, { waitUntil: "domcontentloaded" });
+	await page.goto(`${baseURL}/deployment/users`, {
+		waitUntil: "domcontentloaded",
+	});
 	await expect(page).toHaveTitle("Users - Coder");
 
 	await page.getByRole("button", { name: "Create user" }).click();

diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -114,7 +114,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 			{canViewAllUsers && (
 				<MenuItem
 					component={NavLink}
-					to={canViewOrganizations ? `/deployment${linkToUsers}` : linkToUsers}
+					to={linkToUsers}
 					css={styles.menuItem}
 					onClick={onPopoverClose}
 				>

diff --git a/...SettingsPage/ManagementSettingsLayout.tsx → ...s/management/ManagementSettingsLayout.tsx b/...SettingsPage/ManagementSettingsLayout.tsx → ...s/management/ManagementSettingsLayout.tsx
@@ -1,24 +1,37 @@
+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 } from "react";
+import { type FC, Suspense, createContext, useContext } from "react";
 import { useQuery } from "react-query";
-import { Outlet } from "react-router-dom";
-import { DeploySettingsContext } from "../DeploySettingsPage/DeploySettingsLayout";
+import { Outlet, useParams } from "react-router-dom";
 import { Sidebar } from "./Sidebar";
 
-type OrganizationSettingsValue = Readonly<{
+export const ManagementSettingsContext = createContext<
+	ManagementSettingsValue | undefined
+>(undefined);
+
+type ManagementSettingsValue = Readonly<{
+	deploymentValues: DeploymentConfig;
 	organizations: readonly Organization[];
+	organization?: Organization;
 }>;
 
-export const useOrganizationSettings = (): OrganizationSettingsValue => {
-	const { organizations } = useDashboard();
-	return { organizations };
+export const useManagementSettings = (): ManagementSettingsValue => {
+	const context = useContext(ManagementSettingsContext);
+	if (!context) {
+		throw new Error(
+			"useManagementSettings should be used inside of ManagementSettingsLayout",
+		);
+	}
+
+	return context;
 };
 
 /**
@@ -43,13 +56,11 @@ export const canEditOrganization = (
  */
 export const ManagementSettingsLayout: FC = () => {
 	const { permissions } = useAuthenticated();
-	const deploymentConfigQuery = useQuery(
-		// TODO: This is probably normally fine because we will not show links to
-		//       pages that need this data, but if you manually visit the page you
-		//       will see an endless loader when maybe we should show a "permission
-		//       denied" error or at least a 404 instead.
-		permissions.viewDeploymentValues ? deploymentConfig() : { enabled: false },
-	);
+	const deploymentConfigQuery = useQuery(deploymentConfig());
+	const { organizations } = useDashboard();
+	const { organization: orgName } = useParams() as {
+		organization?: string;
+	};
 
 	// 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.
@@ -59,24 +70,39 @@ 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)
+			: undefined;
+
 	return (
 		<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
-			<Margins>
-				<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
-					<Sidebar />
-					<main css={{ width: "100%" }}>
-						<DeploySettingsContext.Provider
-							value={{
-								deploymentValues: deploymentConfigQuery.data,
-							}}
-						>
+			<ManagementSettingsContext.Provider
+				value={{
+					deploymentValues: deploymentConfigQuery.data,
+					organizations,
+					organization,
+				}}
+			>
+				<Margins>
+					<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
+						<Sidebar />
+						<main css={{ width: "100%" }}>
 							<Suspense fallback={<Loader />}>
 								<Outlet />
 							</Suspense>
-						</DeploySettingsContext.Provider>
-					</main>
-				</Stack>
-			</Margins>
+						</main>
+					</Stack>
+				</Margins>
+			</ManagementSettingsContext.Provider>
 		</RequirePermission>
 	);
 };
diff --git a/.../pages/ManagementSettingsPage/Sidebar.tsx → site/src/modules/management/Sidebar.tsx b/.../pages/ManagementSettingsPage/Sidebar.tsx → site/src/modules/management/Sidebar.tsx
@@ -1,13 +1,13 @@
 import { organizationsPermissions } from "api/queries/organizations";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import {
+	canEditOrganization,
+	useManagementSettings,
+} from "modules/management/ManagementSettingsLayout";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { useLocation, useParams } from "react-router-dom";
-import {
-	canEditOrganization,
-	useOrganizationSettings,
-} from "./ManagementSettingsLayout";
 import { type OrganizationWithPermissions, SidebarView } from "./SidebarView";
 
 /**
@@ -20,8 +20,7 @@ import { type OrganizationWithPermissions, SidebarView } from "./SidebarView";
 export const Sidebar: FC = () => {
 	const location = useLocation();
 	const { permissions } = useAuthenticated();
-	const { experiments } = useDashboard();
-	const { organizations } = useOrganizationSettings();
+	const { organizations } = useManagementSettings();
 	const { organization: organizationName } = useParams() as {
 		organization?: string;
 	};
@@ -56,7 +55,6 @@ export const Sidebar: FC = () => {
 			activeOrganizationName={organizationName}
 			organizations={editableOrgs}
 			permissions={permissions}
-			experiments={experiments}
 		/>
 	);
 };
diff --git a/...ementSettingsPage/SidebarView.stories.tsx → ...odules/management/SidebarView.stories.tsx b/...ementSettingsPage/SidebarView.stories.tsx → ...odules/management/SidebarView.stories.tsx
@@ -8,9 +8,10 @@ import { withDashboardProvider } from "testHelpers/storybook";
 import { SidebarView } from "./SidebarView";
 
 const meta: Meta<typeof SidebarView> = {
-	title: "components/MultiOrgSidebarView",
+	title: "modules/management/SidebarView",
 	component: SidebarView,
 	decorators: [withDashboardProvider],
+	parameters: { showOrganizations: true },
 	args: {
 		activeSettings: true,
 		activeOrganizationName: undefined,
@@ -35,7 +36,6 @@ const meta: Meta<typeof SidebarView> = {
 			},
 		],
 		permissions: MockPermissions,
-		experiments: ["notifications"],
 	},
 };
 
@@ -223,3 +223,9 @@ export const SelectedMultiOrgAdminAndUserAdmin: Story = {
 		],
 	},
 };
+
+export const OrgsDisabled: Story = {
+	parameters: {
+		showOrganizations: false,
+	},
+};
diff --git a/...es/ManagementSettingsPage/SidebarView.tsx → site/src/modules/management/SidebarView.tsx b/...es/ManagementSettingsPage/SidebarView.tsx → site/src/modules/management/SidebarView.tsx
@@ -31,8 +31,6 @@ interface SidebarProps {
 	organizations: OrganizationWithPermissions[] | undefined;
 	/** Site-wide permissions. */
 	permissions: AuthorizationResponse;
-	/** Active experiments */
-	experiments: Experiments;
 }
 
 /**
@@ -43,25 +41,29 @@ export const SidebarView: FC<SidebarProps> = ({
 	activeOrganizationName,
 	organizations,
 	permissions,
-	experiments,
 }) => {
+	const { showOrganizations } = useDashboard();
+
 	// TODO: Do something nice to scroll to the active org.
 	return (
 		<BaseSidebar>
-			<header>
-				<h2 css={styles.sidebarHeader}>Deployment</h2>
-			</header>
+			{showOrganizations && (
+				<header>
+					<h2 css={styles.sidebarHeader}>Deployment</h2>
+				</header>
+			)}
 
 			<DeploymentSettingsNavigation
 				active={!activeOrganizationName && activeSettings}
-				experiments={experiments}
-				permissions={permissions}
-			/>
-			<OrganizationsSettingsNavigation
-				activeOrganizationName={activeOrganizationName}
-				organizations={organizations}
 				permissions={permissions}
 			/>
+			{showOrganizations && (
+				<OrganizationsSettingsNavigation
+					activeOrganizationName={activeOrganizationName}
+					organizations={organizations}
+					permissions={permissions}
+				/>
+			)}
 		</BaseSidebar>
 	);
 };
@@ -71,8 +73,6 @@ interface DeploymentSettingsNavigationProps {
 	active: boolean;
 	/** Site-wide permissions. */
 	permissions: AuthorizationResponse;
-	/** Active experiments */
-	experiments: Experiments;
 }
 
 /**
@@ -85,7 +85,6 @@ interface DeploymentSettingsNavigationProps {
 const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
 	active,
 	permissions,
-	experiments,
 }) => {
 	return (
 		<div css={{ paddingBottom: 12 }}>
@@ -144,16 +143,14 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
 						</SidebarNavSubItem>
 					)}
 					{permissions.viewAllUsers && (
-						<SidebarNavSubItem href={linkToUsers.slice(1)}>
-							Users
-						</SidebarNavSubItem>
+						<SidebarNavSubItem href="users">Users</SidebarNavSubItem>
 					)}
-					<Stack direction="row" alignItems="center" css={{ gap: 0 }}>
-						<SidebarNavSubItem href="notifications">
-							Notifications
-						</SidebarNavSubItem>
-						<FeatureStageBadge contentType="beta" size="sm" />
-					</Stack>
+					<SidebarNavSubItem href="notifications">
+						<Stack direction="row" alignItems="center" spacing={1}>
+							<span>Notifications</span>
+							<FeatureStageBadge contentType="beta" size="sm" />
+						</Stack>
+					</SidebarNavSubItem>
 				</Stack>
 			)}
 		</div>
@@ -387,49 +384,49 @@ const styles = {
 
 const classNames = {
 	link: (css, theme) => css`
-		color: inherit;
-		display: block;
-		font-size: 14px;
-		text-decoration: none;
-		padding: 10px 12px 10px 16px;
-		border-radius: 4px;
-		transition: background-color 0.15s ease-in-out;
-		position: relative;
-
-		&:hover {
-			background-color: ${theme.palette.action.hover};
-		}
-
-		border-left: 3px solid transparent;
-	`,
+    color: inherit;
+    display: block;
+    font-size: 14px;
+    text-decoration: none;
+    padding: 10px 12px 10px 16px;
+    border-radius: 4px;
+    transition: background-color 0.15s ease-in-out;
+    position: relative;
+
+    &:hover {
+      background-color: ${theme.palette.action.hover};
+    }
+
+    border-left: 3px solid transparent;
+  `,
 
 	activeLink: (css, theme) => css`
-		border-left-color: ${theme.palette.primary.main};
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-	`,
+    border-left-color: ${theme.palette.primary.main};
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  `,
 
 	subLink: (css, theme) => css`
-		color: ${theme.palette.text.secondary};
-		text-decoration: none;
-
-		display: block;
-		font-size: 13px;
-		margin-left: 44px;
-		padding: 4px 12px;
-		border-radius: 4px;
-		transition: background-color 0.15s ease-in-out;
-		margin-bottom: 1px;
-		position: relative;
-
-		&:hover {
-			color: ${theme.palette.text.primary};
-			background-color: ${theme.palette.action.hover};
-		}
-	`,
+    color: ${theme.palette.text.secondary};
+    text-decoration: none;
+
+    display: block;
+    font-size: 13px;
+    margin-left: 44px;
+    padding: 4px 12px;
+    border-radius: 4px;
+    transition: background-color 0.15s ease-in-out;
+    margin-bottom: 1px;
+    position: relative;
+
+    &:hover {
+	  color: ${theme.palette.text.primary};
+      background-color: ${theme.palette.action.hover};
+    }
+  `,
 
 	activeSubLink: (css, theme) => css`
-		color: ${theme.palette.text.primary};
-		font-weight: 600;
-	`,
+	color: ${theme.palette.text.primary};
+    font-weight: 600;
+  `,
 } satisfies Record<string, ClassName>;