feat: add redesigned organization settings sidebar (#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 #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

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

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

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

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`,

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

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,
 					},

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 />}>

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 },

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>