[UI v2] feat: Adds GlobalConcurrencyLimitEmptyState component to be u…

…sed in concurrency route development (#16195)

ui-v2/src/components/concurrency/global-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 { GlobalConcurrencyLimitEmptyState } from "./global-concurrency-limit-empty-state";
+
+describe("GlobalConcurrencyLimitEmptyState", () => {
+	it("when adding limit, callback gets fired", async () => {
+		const user = userEvent.setup();
+
+		const mockFn = vi.fn();
+
+		render(<GlobalConcurrencyLimitEmptyState onClick={mockFn} />);
+		await user.click(
+			screen.getByRole("button", { name: /Add Concurrency Limit/i }),
+		);
+		expect(mockFn).toHaveBeenCalledOnce();
+	});
+});

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

@@ -0,0 +1,30 @@
+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 GlobalConcurrencyLimitEmptyState = ({ onClick }: Props) => (
+	<EmptyState>
+		<EmptyStateIcon id="AlignVerticalJustifyStart" />
+		<EmptyStateTitle>Add a concurrency limit</EmptyStateTitle>
+		<EmptyStateDescription>
+			Global concurrency limits can be applied to flow runs, task runs and any
+			operation where you want to control concurrency.
+		</EmptyStateDescription>
+		<EmptyStateActions>
+			<Button onClick={onClick}>
+				Add Concurrency Limit <PlusIcon className="h-4 w-4 ml-2" />
+			</Button>
+			<DocsLink id="global-concurrency-guide" />
+		</EmptyStateActions>
+	</EmptyState>
+);