feat: add redesigned organization settings sidebar (coder#15932)

resolves coder/internal#173, coder/internal#175

This PR does the following
1. Updates the left sidebar for organizations to use a dropdown to
select the organization
2. Move the create organization button inside the dropdown
3. Update the design of the create organization page
4. Do not display the organization in the dropdown if there is only 1
org to display

Figma:
https://www.figma.com/design/OR75XeUI0Z3ksqt1mHsNQw/Dashboard-v1?node-id=139-1380&m=dev

The loading state for the save button in the create organization form
will be handled separately after coder#14978 is completed.

Note: Since the dropdown is based off the cmdk component, navigation in
the dropdown is handled by the arrow keys, https://cmdk.paco.me/

<img width="560" alt="Screenshot 2025-01-03 at 21 11 26"
src="https://github.com/user-attachments/assets/ff6e61ab-c8d4-4f97-b603-306492e9bfec"
/>
<img width="641" alt="Screenshot 2025-01-03 at 21 11 39"
src="https://github.com/user-attachments/assets/fedb28e0-9ef3-4b0f-8665-06215338f351"
/>
<img width="1178" alt="Screenshot 2025-01-03 at 21 12 05"
src="https://github.com/user-attachments/assets/ee672533-2689-4b2e-a7bf-471ea72e1095"
/>
<img width="1177" alt="Screenshot 2025-01-03 at 21 12 39"
src="https://github.com/user-attachments/assets/f13824a6-2581-4bff-b5b6-2024c2e145a4"
/>

Author: jaaydenh

Diff for: pnpm-lock.yaml

@@ -23,7 +23,7 @@ test("create group", async ({ page }) => {
 	await page.goto(`/organizations/${org.name}`);
 
 	// Navigate to groups page
-	await page.getByText("Groups").click();
+	await page.getByRole("link", { name: "Groups" }).click();
 	await expect(page).toHaveTitle(`Groups - Org ${org.name} - Coder`);
 
 	// Create a new group

Diff for: site/e2e/tests/organizationGroups.spec.ts

@@ -21,7 +21,7 @@ test("add and remove organization member", async ({ page }) => {
 	const { displayName } = await createOrganization(page);
 
 	// Navigate to members page
-	await page.getByText("Members").click();
+	await page.getByRole("link", { name: "Members" }).click();
 	await expect(page).toHaveTitle(`Members - ${displayName} - Coder`);
 
 	// Add a user to the org

Diff for: site/e2e/tests/organizationMembers.spec.ts

@@ -29,15 +29,25 @@ test("create and delete organization", async ({ page }) => {
 	await expectUrl(page).toHavePathName(`/organizations/${name}`);
 	await expect(page.getByText("Organization created.")).toBeVisible();
 
+	await page.goto(`/organizations/${name}/settings`, {
+		waitUntil: "domcontentloaded",
+	});
+
 	const newName = randomName();
 	await page.getByLabel("Slug").fill(newName);
 	await page.getByLabel("Description").fill(`Org description ${newName}`);
 	await page.getByRole("button", { name: /save/i }).click();
 
 	// Expect to be redirected when renaming the organization
-	await expectUrl(page).toHavePathName(`/organizations/${newName}`);
+	await expectUrl(page).toHavePathName(`/organizations/${newName}/settings`);
 	await expect(page.getByText("Organization settings updated.")).toBeVisible();
 
+	await page.goto(`/organizations/${newName}/settings`, {
+		waitUntil: "domcontentloaded",
+	});
+	// Expect to be redirected when renaming the organization
+	await expectUrl(page).toHavePathName(`/organizations/${newName}/settings`);
+
 	await page.getByRole("button", { name: "Delete this organization" }).click();
 	const dialog = page.getByTestId("dialog");
 	await dialog.getByLabel("Name").fill(newName);

Diff for: site/e2e/tests/organizations.spec.ts

@@ -69,7 +69,7 @@ export const CommandList = forwardRef<
 >(({ className, ...props }, ref) => (
 	<CommandPrimitive.List
 		ref={ref}
-		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		className={cn("max-h-96 overflow-y-auto overflow-x-hidden", className)}
 		{...props}
 	/>
 ));
@@ -92,7 +92,7 @@ export const CommandGroup = forwardRef<
 	<CommandPrimitive.Group
 		ref={ref}
 		className={cn(
-			`overflow-hidden p-1 text-content-primary
+			`overflow-hidden p-2 text-content-primary
 			[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs
 			[&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-content-secondary`,
 			className,
@@ -119,7 +119,7 @@ export const CommandItem = forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			`relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none
+			`relative flex cursor-default gap-2 select-none text-content-secondary items-center rounded-sm px-2 py-2 text-sm font-medium outline-none
 			data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50
 			data-[selected=true]:bg-surface-secondary data-[selected=true]:text-content-primary
 			[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,

Diff for: site/src/components/Command/Command.tsx

@@ -24,7 +24,7 @@ export const PopoverContent = forwardRef<
 			align={align}
 			sideOffset={sideOffset}
 			className={cn(
-				`z-50 w-72 rounded-md border border-solid bg-surface-primary p-4
+				`z-50 w-72 rounded-md border border-solid bg-surface-primary
 				text-content-primary shadow-md outline-none
 				data-[state=open]:animate-in data-[state=closed]:animate-out
 				data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0

Diff for: site/src/components/Popover/Popover.tsx

@@ -67,7 +67,7 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
 			to={href}
 			className={({ isActive }) =>
 				cn(
-					"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150	",
+					"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150",
 					{
 						"font-semibold text-content-primary": isActive,
 					},

Diff for: site/src/components/Sidebar/Sidebar.tsx

@@ -39,8 +39,8 @@ const DeploymentSettingsLayout: FC = () => {
 					</BreadcrumbList>
 				</Breadcrumb>
 				<hr className="h-px border-none bg-border" />
-				<div className="px-6 max-w-screen-2xl">
-					<div className="flex flex-row gap-12 py-10">
+				<div className="px-10 max-w-screen-2xl">
+					<div className="flex flex-row gap-28 py-10">
 						<DeploymentSidebar />
 						<main css={{ flexGrow: 1 }}>
 							<Suspense fallback={<Loader />}>

Diff for: site/src/modules/management/DeploymentSettingsLayout.tsx

@@ -4,7 +4,7 @@ import { withDashboardProvider } from "testHelpers/storybook";
 import { DeploymentSidebarView } from "./DeploymentSidebarView";
 
 const meta: Meta<typeof DeploymentSidebarView> = {
-	title: "modules/management/SidebarView",
+	title: "modules/management/DeploymentSidebarView",
 	component: DeploymentSidebarView,
 	decorators: [withDashboardProvider],
 	parameters: { showOrganizations: true },

Diff for: site/src/modules/management/DeploymentSidebarView.stories.tsx

@@ -15,7 +15,6 @@ import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, Suspense, createContext, useContext } from "react";
 import { Outlet, useParams } from "react-router-dom";
-import { OrganizationSidebar } from "./OrganizationSidebar";
 
 export const OrganizationSettingsContext = createContext<
 	OrganizationSettingsValue | undefined
@@ -82,13 +81,10 @@ const OrganizationSettingsLayout: FC = () => {
 							</BreadcrumbItem>
 							<BreadcrumbSeparator />
 							<BreadcrumbItem>
-								<BreadcrumbLink
-									href="/organizations"
-									className="flex items-center gap-2"
-								>
+								<BreadcrumbPage className="flex items-center gap-2">
 									Organizations
 									<FeatureStageBadge contentType="beta" size="sm" />
-								</BreadcrumbLink>
+								</BreadcrumbPage>
 							</BreadcrumbItem>
 							{organization && (
 								<>
@@ -109,15 +105,10 @@ const OrganizationSettingsLayout: FC = () => {
 						</BreadcrumbList>
 					</Breadcrumb>
 					<hr className="h-px border-none bg-border" />
-					<div className="px-6 max-w-screen-2xl">
-						<div className="flex flex-row gap-12 py-10">
-							<OrganizationSidebar />
-							<main css={{ flexGrow: 1 }}>
-								<Suspense fallback={<Loader />}>
-									<Outlet />
-								</Suspense>
-							</main>
-						</div>
+					<div className="px-10 max-w-screen-2xl">
+						<Suspense fallback={<Loader />}>
+							<Outlet />
+						</Suspense>
 					</div>
 				</div>
 			</OrganizationSettingsContext.Provider>

Diff for: site/src/modules/management/OrganizationSettingsLayout.tsx

@@ -47,9 +47,11 @@ export const OrganizationSidebar: FC = () => {
 			return canEditOrganization(org.permissions);
 		});
 
+	const organization = editableOrgs?.find((o) => o.name === organizationName);
+
 	return (
 		<OrganizationSidebarView
-			activeOrganizationName={organizationName}
+			activeOrganization={organization}
 			organizations={editableOrgs}
 			permissions={permissions}
 		/>

Diff for: site/src/modules/management/OrganizationSidebar.tsx

@@ -0,0 +1,19 @@
+import { Loader } from "components/Loader/Loader";
+import { type FC, Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import { OrganizationSidebar } from "./OrganizationSidebar";
+
+const OrganizationSidebarLayout: FC = () => {
+	return (
+		<div className="flex flex-row gap-28 py-10">
+			<OrganizationSidebar />
+			<main css={{ flexGrow: 1 }}>
+				<Suspense fallback={<Loader />}>
+					<Outlet />
+				</Suspense>
+			</main>
+		</div>
+	);
+};
+
+export default OrganizationSidebarLayout;