[UI v2] feat: Adds EmptyState for Task Run Concurrency Limits (#16203)

ui-v2/src/components/concurrency/task-run-concurrency-limit-empty-state.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { TaskRunConcurrencyLimitEmptyState } from "./task-run-concurrency-limit-empty-state";
+
+describe("TaskRunConcurrencyLimitEmptyState", () => {
+	it("when adding task run concurrency limit, callback gets fired", async () => {
+		const user = userEvent.setup();
+
+		const mockFn = vi.fn();
+
+		render(<TaskRunConcurrencyLimitEmptyState onClick={mockFn} />);
+		await user.click(
+			screen.getByRole("button", { name: /Add Concurrency Limit/i }),
+		);
+		expect(mockFn).toHaveBeenCalledOnce();
+	});
+});

ui-v2/src/components/concurrency/task-run-concurrency-limit-empty-state.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/button";
+import { DocsLink } from "@/components/ui/docs-link";
+import {
+	EmptyState,
+	EmptyStateActions,
+	EmptyStateDescription,
+	EmptyStateIcon,
+	EmptyStateTitle,
+} from "@/components/ui/empty-state";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+	onClick: () => void;
+};
+export const TaskRunConcurrencyLimitEmptyState = ({ onClick }: Props) => (
+	<EmptyState>
+		<EmptyStateIcon id="CircleArrowOutUpRight" />
+		<EmptyStateTitle>
+			Add a concurrency limit for your task runs
+		</EmptyStateTitle>
+		<EmptyStateDescription>
+			Creating a limit allows you to limit the number of tasks running
+			simultaneously with a given tag.
+		</EmptyStateDescription>
+		<EmptyStateActions>
+			<Button onClick={onClick}>
+				Add Concurrency Limit <PlusIcon className="h-4 w-4 ml-2" />
+			</Button>
+			<DocsLink id="task-concurrency-guide" />
+		</EmptyStateActions>
+	</EmptyState>
+);

ui-v2/src/components/ui/docs-link.tsx

@@ -5,6 +5,8 @@ import { Button } from "./button";
 const DOCS_LINKS = {
 	"global-concurrency-guide":
 		"https://docs.prefect.io/v3/develop/global-concurrency-limits",
+	"task-concurrency-guide":
+		"https://docs.prefect.io/v3/develop/task-run-limits",
 	"variables-guide": "https://docs.prefect.io/latest/guides/variables/",
 } as const;