[UI v2] fix: Create consistent concurrency limit nav title (#16559)

PrefectHQ · Jan 2, 2025 · 50dfa9a · 50dfa9a
1 parent 1c801c7
commit 50dfa9a
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 20 deletions.
diff --git a/ui-v2/src/components/automations/automations-header/automations-header.tsx b/ui-v2/src/components/automations/automations-header/automations-header.tsx
@@ -1,17 +1,38 @@
+import {
+	Breadcrumb,
+	BreadcrumbLink,
+	BreadcrumbList,
+} from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
+import { DocsLink } from "@/components/ui/docs-link";
 import { Icon } from "@/components/ui/icons";
-import { Typography } from "@/components/ui/typography";
 import { Link } from "@tanstack/react-router";
 
 export const AutomationsHeader = () => {
 	return (
-		<div className="flex items-center gap-2">
-			<Typography variant="h4">Automations</Typography>
-			<Button size="icon" className="h-7 w-7" variant="outline">
-				<Link to="/automations/create">
-					<Icon id="Plus" className="h-4 w-4" />
-				</Link>
-			</Button>
+		<div className="flex items-center justify-between">
+			<Header />
+			<DocsLink id="automations-guide" label="Documentation" />
 		</div>
 	);
 };
+
+const Header = () => (
+	<div className="flex items-center gap-2">
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbLink
+					to="/concurrency-limits"
+					className="text-xl font-semibold"
+				>
+					Automations
+				</BreadcrumbLink>
+			</BreadcrumbList>
+		</Breadcrumb>
+		<Button size="icon" className="h-7 w-7" variant="outline">
+			<Link to="/automations/create">
+				<Icon id="Plus" className="h-4 w-4" />
+			</Link>
+		</Button>
+	</div>
+);
diff --git a/ui-v2/src/components/concurrency/concurrency-limits-page.tsx b/ui-v2/src/components/concurrency/concurrency-limits-page.tsx
@@ -1,17 +1,31 @@
-import { Typography } from "@/components/ui/typography";
-
 import { GlobalConcurrencyLimitsView } from "@/components/concurrency/global-concurrency-limits/global-concurrency-limits-view";
 import { TaskRunConcurrencyLimitsView } from "@/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limits-view";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbList,
+} from "@/components/ui/breadcrumb";
+
 import { ConcurrencyLimitsTabs } from "./concurrency-limits-tabs";
 
 export const ConcurrencyLimitsPage = () => {
 	return (
 		<div className="flex flex-col gap-4">
-			<Typography variant="h2">Concurrency</Typography>
+			<ConcurrencyLimitTitle />
 			<ConcurrencyLimitsTabs
 				globalView={<GlobalConcurrencyLimitsView />}
 				taskRunView={<TaskRunConcurrencyLimitsView />}
 			/>
 		</div>
 	);
 };
+
+const ConcurrencyLimitTitle = () => (
+	<Breadcrumb>
+		<BreadcrumbList>
+			<BreadcrumbItem className="text-xl font-semibold">
+				Concurrency
+			</BreadcrumbItem>
+		</BreadcrumbList>
+	</Breadcrumb>
+);
diff --git a/ui-v2/src/components/concurrency/concurrency-limits-tabs.tsx b/ui-v2/src/components/concurrency/concurrency-limits-tabs.tsx
@@ -39,8 +39,8 @@ export const ConcurrencyLimitsTabs = ({
 	const navigate = routeApi.useNavigate();
 
 	return (
-		<Tabs className="flex flex-col gap-4" defaultValue="Global" value={tab}>
-			<TabsList className="grid w-full grid-cols-2">
+		<Tabs defaultValue="Global" value={tab}>
+			<TabsList>
 				<TabsTrigger
 					value={TAB_OPTIONS.global.tabSearchValue}
 					onClick={() => {

diff --git a/...urrency-limits/global-concurrency-limits-header/global-concurrency-limits-header.test.tsx b/...urrency-limits/global-concurrency-limits-header/global-concurrency-limits-header.test.tsx
@@ -12,9 +12,7 @@ test("GlobalConcurrencyLimitsHeader can successfully call onAdd", async () => {
 	render(<GlobalConcurrencyLimitsHeader onAdd={mockOnAddFn} />);
 
 	// ------------ Act
-	expect(
-		screen.getByRole("heading", { name: /global concurrency limits/i }),
-	).toBeVisible();
+	expect(screen.getByText(/global concurrency limits/i)).toBeVisible();
 	await user.click(
 		screen.getByRole("button", {
 			name: /add global concurrency limit/i,

diff --git a/...-concurrency-limits/global-concurrency-limits-header/global-concurrency-limits-header.tsx b/...-concurrency-limits/global-concurrency-limits-header/global-concurrency-limits-header.tsx
@@ -9,7 +9,9 @@ type Props = {
 export const GlobalConcurrencyLimitsHeader = ({ onAdd }: Props) => {
 	return (
 		<div className="flex gap-2 items-center">
-			<Typography variant="h4">Global Concurrency Limits</Typography>
+			<Typography className="font-semibold">
+				Global Concurrency Limits
+			</Typography>
 			<Button
 				onClick={onAdd}
 				size="icon"

diff --git a/...currency-limits/task-run-concurrency-limits-header/task-run-concurrency-limits-header.tsx b/...currency-limits/task-run-concurrency-limits-header/task-run-concurrency-limits-header.tsx
@@ -9,7 +9,9 @@ type Props = {
 export const TaskRunConcurrencyLimitsHeader = ({ onAdd }: Props) => {
 	return (
 		<div className="flex gap-2 items-center">
-			<Typography variant="h4">Task Run Concurrency Limits</Typography>
+			<Typography className="font-semibold">
+				Task Run Concurrency Limits
+			</Typography>
 			<Button
 				onClick={onAdd}
 				size="icon"

diff --git a/...rency-limits/task-run-concurrency-limits-header/task-run-conrrency-limits-header.test.tsx b/...rency-limits/task-run-concurrency-limits-header/task-run-conrrency-limits-header.test.tsx
@@ -13,8 +13,9 @@ test("TaskRunConcurrencyLimitsHeader can successfully call onAdd", async () => {
 
 	// ------------ Act
 	expect(
-		screen.getByRole("heading", { name: /task run concurrency limits/i }),
-	).toBeVisible();
+		expect(screen.getByText(/task run concurrency limits/i)).toBeVisible(),
+	);
+
 	await user.click(
 		screen.getByRole("button", {
 			name: /add task run concurrency limit/i,