coder · jaaydenh · Jan 8, 2025 · Oct 2, 2024 · Oct 15, 2024 · Oct 16, 2024
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/e2e/tests/organizationGroups.spec.ts b/site/e2e/tests/organizationGroups.spec.ts
@@ -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 --git a/site/e2e/tests/organizationMembers.spec.ts b/site/e2e/tests/organizationMembers.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 --git a/site/e2e/tests/organizations.spec.ts b/site/e2e/tests/organizations.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 --git a/site/src/components/Command/Command.tsx b/site/src/components/Command/Command.tsx
@@ -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 --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.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 --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.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 --git a/site/src/modules/management/DeploymentSettingsLayout.tsx b/site/src/modules/management/DeploymentSettingsLayout.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 --git a/site/src/modules/management/DeploymentSidebarView.stories.tsx b/site/src/modules/management/DeploymentSidebarView.stories.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 --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.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 --git a/site/src/modules/management/OrganizationSidebar.tsx b/site/src/modules/management/OrganizationSidebar.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 --git a/site/src/modules/management/OrganizationSidebarLayout.tsx b/site/src/modules/management/OrganizationSidebarLayout.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;