feat: add breadcrumbs to admin settings pages (#15865)

resolves coder/internal#174

Uses shadcn/ui for admin settings breadcrumbs

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

<img width="1180" alt="Screenshot 2024-12-13 at 21 37 18"
src="https://github.com/user-attachments/assets/7ab5faa0-dcc9-437e-9ecf-5365cea5d69e"
/>
<img width="1178" alt="Screenshot 2024-12-13 at 21 37 27"
src="https://github.com/user-attachments/assets/b0b55ec2-8a9e-4316-a850-a37480173f9c"
/>

site/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	Breadcrumb,
+	BreadcrumbEllipsis,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "components/Breadcrumb/Breadcrumb";
+import { MockOrganization } from "testHelpers/entities";
+
+const meta: Meta<typeof Breadcrumb> = {
+	title: "components/Breadcrumb",
+	component: Breadcrumb,
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+	args: {
+		children: (
+			<Breadcrumb>
+				<BreadcrumbList>
+					<BreadcrumbItem>
+						<BreadcrumbPage>Admin Settings</BreadcrumbPage>
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+					<BreadcrumbItem>
+						<BreadcrumbEllipsis />
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+					<BreadcrumbItem>
+						<BreadcrumbLink href="/organizations">Organizations</BreadcrumbLink>
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+					<BreadcrumbItem>
+						<BreadcrumbPage className="text-content-primary">
+							{MockOrganization.name}
+						</BreadcrumbPage>
+					</BreadcrumbItem>
+				</BreadcrumbList>
+			</Breadcrumb>
+		),
+	},
+};

site/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,115 @@
+/**
+ * Copied from shadc/ui on 12/13/2024
+ * @see {@link https://ui.shadcn.com/docs/components/breadcrumb}
+ */
+import { Slot } from "@radix-ui/react-slot";
+import { MoreHorizontal } from "lucide-react";
+import {
+	type ComponentProps,
+	type ComponentPropsWithoutRef,
+	type FC,
+	type ReactNode,
+	forwardRef,
+} from "react";
+import { cn } from "utils/cn";
+
+export const Breadcrumb = forwardRef<
+	HTMLElement,
+	ComponentPropsWithoutRef<"nav"> & {
+		separator?: ReactNode;
+	}
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+export const BreadcrumbList = forwardRef<
+	HTMLOListElement,
+	ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+	<ol
+		ref={ref}
+		className={cn(
+			"flex flex-wrap items-center text-sm pl-12 my-4 gap-1.5 break-words font-medium list-none sm:gap-2.5",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+export const BreadcrumbItem = forwardRef<
+	HTMLLIElement,
+	ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+	<li
+		ref={ref}
+		className={cn(
+			"inline-flex items-center gap-1.5 text-content-secondary",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+export const BreadcrumbLink = forwardRef<
+	HTMLAnchorElement,
+	ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
+>(({ asChild, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			className={cn(
+				"text-content-secondary transition-colors hover:text-content-primary no-underline hover:underline",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+
+export const BreadcrumbPage = forwardRef<
+	HTMLSpanElement,
+	ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+	<span
+		ref={ref}
+		aria-current="page"
+		className={cn("flex items-center gap-2 text-content-secondary", className)}
+		{...props}
+	/>
+));
+
+export const BreadcrumbSeparator: FC<ComponentProps<"li">> = ({
+	children,
+	className,
+	...props
+}) => (
+	<li
+		role="presentation"
+		aria-hidden="true"
+		className={cn(
+			"text-content-disabled [&>svg]:w-3.5 [&>svg]:h-3.5",
+			className,
+		)}
+		{...props}
+	>
+		{"/"}
+	</li>
+);
+
+export const BreadcrumbEllipsis: FC<ComponentProps<"span">> = ({
+	className,
+	...props
+}) => (
+	<span
+		role="presentation"
+		aria-hidden="true"
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More</span>
+	</span>
+);

site/src/modules/management/DeploymentSettingsLayout.tsx

@@ -1,3 +1,10 @@
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "components/Breadcrumb/Breadcrumb";
 import { Loader } from "components/Loader/Loader";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { RequirePermission } from "contexts/auth/RequirePermission";
@@ -17,6 +24,21 @@ const DeploymentSettingsLayout: FC = () => {
 
 	return (
 		<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
+			<div>
+				<Breadcrumb>
+					<BreadcrumbList>
+						<BreadcrumbItem>
+							<BreadcrumbPage>Admin Settings</BreadcrumbPage>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							<BreadcrumbPage className="text-content-primary">
+								Deployment
+							</BreadcrumbPage>
+						</BreadcrumbItem>
+					</BreadcrumbList>
+				</Breadcrumb>
+				<hr className="h-px border-none bg-border" />
 				<div className="px-10 max-w-screen-2xl">
 					<div className="flex flex-row gap-12 py-10">
 						<DeploymentSidebar />
@@ -27,6 +49,7 @@ const DeploymentSettingsLayout: FC = () => {
 						</main>
 					</div>
 				</div>
+			</div>
 		</RequirePermission>
 	);
 };

site/src/modules/management/OrganizationSettingsLayout.tsx

@@ -1,5 +1,14 @@
 import type { AuthorizationResponse, Organization } from "api/typesGenerated";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "components/Breadcrumb/Breadcrumb";
 import { Loader } from "components/Loader/Loader";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useDashboard } from "modules/dashboard/useDashboard";
@@ -64,6 +73,37 @@ const OrganizationSettingsLayout: FC = () => {
 					organization,
 				}}
 			>
+				<div>
+					<Breadcrumb>
+						<BreadcrumbList>
+							<BreadcrumbItem>
+								<BreadcrumbPage>Admin Settings</BreadcrumbPage>
+							</BreadcrumbItem>
+							<BreadcrumbSeparator />
+							<BreadcrumbItem>
+								<BreadcrumbLink href="/organizations">
+									Organizations
+								</BreadcrumbLink>
+							</BreadcrumbItem>
+							{organization && (
+								<>
+									<BreadcrumbSeparator />
+									<BreadcrumbItem>
+										<BreadcrumbPage className="text-content-primary">
+											<UserAvatar
+												key={organization.id}
+												size="xs"
+												username={organization.display_name}
+												avatarURL={organization.icon}
+											/>
+											{organization?.name}
+										</BreadcrumbPage>
+									</BreadcrumbItem>
+								</>
+							)}
+						</BreadcrumbList>
+					</Breadcrumb>
+					<hr className="h-px border-none bg-border" />
 					<div className="px-10 max-w-screen-2xl">
 						<div className="flex flex-row gap-12 py-10">
 							<OrganizationSidebar />
@@ -74,6 +114,7 @@ const OrganizationSettingsLayout: FC = () => {
 							</main>
 						</div>
 					</div>
+				</div>
 			</OrganizationSettingsContext.Provider>
 		</RequirePermission>
 	);