From cdc1978f4ddc8d26f8f0ce85bf1b780ac9aeb3b5 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 18 Dec 2024 22:35:31 +0000
Subject: [PATCH] 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"
/>
---
 .../Breadcrumb/Breadcrumb.stories.tsx         |  47 +++++++
 site/src/components/Breadcrumb/Breadcrumb.tsx | 115 ++++++++++++++++++
 .../management/DeploymentSettingsLayout.tsx   |  39 ++++--
 .../management/OrganizationSettingsLayout.tsx |  57 +++++++--
 4 files changed, 242 insertions(+), 16 deletions(-)
 create mode 100644 site/src/components/Breadcrumb/Breadcrumb.stories.tsx
 create mode 100644 site/src/components/Breadcrumb/Breadcrumb.tsx

diff --git a/site/src/components/Breadcrumb/Breadcrumb.stories.tsx b/site/src/components/Breadcrumb/Breadcrumb.stories.tsx
new file mode 100644
index 0000000000..0b02b2ebb9
--- /dev/null
+++ b/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>
+		),
+	},
+};
diff --git a/site/src/components/Breadcrumb/Breadcrumb.tsx b/site/src/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 0000000000..cd6625a42c
--- /dev/null
+++ b/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>
+);
diff --git a/site/src/modules/management/DeploymentSettingsLayout.tsx b/site/src/modules/management/DeploymentSettingsLayout.tsx
index f2988e5824..2a0a999ac9 100644
--- a/site/src/modules/management/DeploymentSettingsLayout.tsx
+++ b/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,14 +24,30 @@ const DeploymentSettingsLayout: FC = () => {
 
 	return (
 		<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
-			<div className="px-10 max-w-screen-2xl">
-				<div className="flex flex-row gap-12 py-10">
-					<DeploymentSidebar />
-					<main css={{ flexGrow: 1 }}>
-						<Suspense fallback={<Loader />}>
-							<Outlet />
-						</Suspense>
-					</main>
+			<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 />
+						<main css={{ flexGrow: 1 }}>
+							<Suspense fallback={<Loader />}>
+								<Outlet />
+							</Suspense>
+						</main>
+					</div>
 				</div>
 			</div>
 		</RequirePermission>
diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx
index ed987910ed..59332e6f07 100644
--- a/site/src/modules/management/OrganizationSettingsLayout.tsx
+++ b/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,14 +73,46 @@ const OrganizationSettingsLayout: FC = () => {
 					organization,
 				}}
 			>
-				<div className="px-10 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>
+					<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 />
+							<main css={{ flexGrow: 1 }}>
+								<Suspense fallback={<Loader />}>
+									<Outlet />
+								</Suspense>
+							</main>
+						</div>
 					</div>
 				</div>
 			</OrganizationSettingsContext.Provider>