From 38b8c11a6139e294d918b9084a27f2ff86d35fd9 Mon Sep 17 00:00:00 2001
From: Devin Villarosa <devinvillarosa92.business@gmail.com>
Date: Fri, 27 Dec 2024 09:04:05 -0800
Subject: [PATCH] [UI v2] feat: Adds active task runs component

---
 .../index.ts                                  |  1 +
 ...urrency-limit-active-task-runs.stories.tsx | 54 +++++++++++++++++++
 ...un-concurrency-limit-active-task-runs.tsx} | 13 +++--
 3 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.ts
 create mode 100644 ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.stories.tsx
 rename ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/{index.tsx => task-run-concurrency-limit-active-task-runs.tsx} (56%)

diff --git a/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.ts b/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.ts
new file mode 100644
index 000000000000..11ec8836f976
--- /dev/null
+++ b/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.ts
@@ -0,0 +1 @@
+export { TaskRunConcurrencyLimitActiveTaskRuns } from "./task-run-concurrency-limit-active-task-runs";
diff --git a/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.stories.tsx b/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.stories.tsx
new file mode 100644
index 000000000000..3b2b18a5769b
--- /dev/null
+++ b/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+	createFakeFlow,
+	createFakeFlowRun,
+	createFakeTaskRun,
+	routerDecorator,
+} from "@/storybook/utils";
+
+import { TaskRunConcurrencyLimitActiveTaskRuns } from "./task-run-concurrency-limit-active-task-runs";
+
+const MOCK_DATA = [
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun({ tags: ["foo", "bar", "baz"] }),
+	},
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		taskRun: createFakeTaskRun({ tags: ["foo", "bar", "baz"] }),
+	},
+];
+
+const meta: Meta<typeof TaskRunConcurrencyLimitActiveTaskRuns> = {
+	title:
+		"Components/Concurrency/TaskRunConcurrencyLimits/TaskRunConcurrencyLimitActiveTaskRuns",
+	component: TaskRunConcurrencyLimitActiveTaskRuns,
+	decorators: [routerDecorator],
+	args: { data: MOCK_DATA },
+};
+export default meta;
+
+type Story = StoryObj<typeof TaskRunConcurrencyLimitActiveTaskRuns>;
+
+export const story: Story = {
+	name: "TaskRunConcurrencyLimitActiveTaskRuns",
+};
diff --git a/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.tsx b/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.tsx
similarity index 56%
rename from ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.tsx
rename to ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.tsx
index 9afd91bd997b..05f2edb79e55 100644
--- a/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.tsx
+++ b/ui-v2/src/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.tsx
@@ -1,5 +1,5 @@
 import type { components } from "@/api/prefect";
-import { Typography } from "@/components/ui/typography";
+import { RunCard } from "@/components/ui/run-card";
 
 type Props = {
 	data: Array<{
@@ -11,9 +11,12 @@ type Props = {
 
 export const TaskRunConcurrencyLimitActiveTaskRuns = ({ data }: Props) => {
 	return (
-		<div>
-			<Typography>TODO: Active Task Runs</Typography>
-			{JSON.stringify(data)}
-		</div>
+		<ul className="flex flex-col gap-2">
+			{data.map((d) => (
+				<li key={d.taskRun.id}>
+					<RunCard flow={d.flow} flowRun={d.flowRun} taskRun={d.taskRun} />
+				</li>
+			))}
+		</ul>
 	);
 };