PrefectHQ · devinvillarosa · Jan 2, 2025 · Dec 26, 2024 · Dec 27, 2024 · Dec 27, 2024
@@ -1,7 +1,5 @@
-import {
-	createFakeGlobalConcurrencyLimit,
-	reactQueryDecorator,
-} from "@/storybook/utils";
+import { createFakeGlobalConcurrencyLimit } from "@/mocks";
+import { reactQueryDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { GlobalConcurrencyLimitsCreateOrEditDialog } from "./global-concurrency-limits-create-or-edit-dialog";

@@ -1,8 +1,5 @@
-import {
-	createFakeGlobalConcurrencyLimit,
-	reactQueryDecorator,
-	toastDecorator,
-} from "@/storybook/utils";
+import { createFakeGlobalConcurrencyLimit } from "@/mocks";
+import { reactQueryDecorator, toastDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { Table as GlobalConcurrencyLimitsDataTable } from "./global-concurrency-limits-data-table";

@@ -1,7 +1,5 @@
-import {
-	createFakeGlobalConcurrencyLimit,
-	reactQueryDecorator,
-} from "@/storybook/utils";
+import { createFakeGlobalConcurrencyLimit } from "@/mocks";
+import { reactQueryDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { GlobalConcurrencyLimitsDeleteDialog } from "./global-concurrency-limits-delete-dialog";

@@ -0,0 +1 @@
+export { TaskRunConcurrencyLimitActiveTaskRuns } from "./task-run-concurrency-limit-active-task-runs";
@@ -0,0 +1,49 @@
+import { createFakeFlow, createFakeFlowRun, createFakeTaskRun } from "@/mocks";
+import { routerDecorator } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/react";
+
+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",
+};
@@ -0,0 +1,22 @@
+import type { components } from "@/api/prefect";
+import { RunCard } from "@/components/ui/run-card";
+
+type Props = {
+	data: Array<{
+		taskRun: components["schemas"]["TaskRun"];
+		flowRun?: components["schemas"]["FlowRun"] | null;
+		flow?: components["schemas"]["Flow"] | null;
+	}>;
+};
+
+export const TaskRunConcurrencyLimitActiveTaskRuns = ({ data }: Props) => {
+	return (
+		<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>
+	);
+};
@@ -1,4 +1,4 @@
-import { createFakeTaskRunConcurrencyLimit } from "@/storybook/utils";
+import { createFakeTaskRunConcurrencyLimit } from "@/mocks";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { TaskRunConcurrencyLimitDetails } from "./task-run-concurrency-limit-details";

@@ -1,8 +1,5 @@
-import {
-	createFakeTaskRunConcurrencyLimit,
-	routerDecorator,
-	toastDecorator,
-} from "@/storybook/utils";
+import { createFakeTaskRunConcurrencyLimit } from "@/mocks";
+import { routerDecorator, toastDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { fn } from "@storybook/test";

@@ -1,9 +1,13 @@
 import { TaskRunConcurrencyLimitHeader } from "@/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-header";
-import { useGetTaskRunConcurrencyLimit } from "@/hooks/task-run-concurrency-limits";
+import { buildConcurrenyLimitDetailsActiveRunsQuery } from "@/hooks/task-run-concurrency-limits";
 import { useState } from "react";
 
 import { TaskRunConcurrencyLimitActiveTaskRuns } from "@/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs";
 import { TaskRunConcurrencyLimitDetails } from "@/components/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-details";
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Await } from "@tanstack/react-router";
 import {
 	type Dialogs,
 	TaskRunConcurrencyLimitDialog,
@@ -16,7 +20,9 @@ type Props = {
 
 export const TaskRunConcurrencyLimitPage = ({ id }: Props) => {
 	const [openDialog, setOpenDialog] = useState<Dialogs>(null);
-	const { data } = useGetTaskRunConcurrencyLimit(id);
+	const { data } = useSuspenseQuery(
+		buildConcurrenyLimitDetailsActiveRunsQuery(id),
+	);
 
 	const handleOpenDeleteDialog = () => setOpenDialog("delete");
 	const handleOpenResetDialog = () => setOpenDialog("reset");
@@ -29,27 +35,48 @@ export const TaskRunConcurrencyLimitPage = ({ id }: Props) => {
 		}
 	};
 
+	const { activeTaskRuns, taskRunConcurrencyLimit } = data;
+	const numActiveTaskRuns = taskRunConcurrencyLimit.active_slots?.length;
 	return (
 		<>
 			<div className="flex flex-col gap-4">
 				<TaskRunConcurrencyLimitHeader
-					data={data}
+					data={taskRunConcurrencyLimit}
 					onDelete={handleOpenDeleteDialog}
 					onReset={handleOpenResetDialog}
 				/>
 				<div className="grid gap-4" style={{ gridTemplateColumns: "3fr 1fr" }}>
-					<TaskRunConcurrencyLimitTabNavigation
-						activetaskRunsView={<TaskRunConcurrencyLimitActiveTaskRuns />}
-					/>
-					<TaskRunConcurrencyLimitDetails data={data} />
+					<TaskRunConcurrencyLimitTabNavigation>
+						<Await
+							promise={activeTaskRuns}
+							fallback={<SkeletonLoading length={numActiveTaskRuns} />}
+						>
+							{(promiseData) => (
+								<TaskRunConcurrencyLimitActiveTaskRuns data={promiseData} />
+							)}
+						</Await>
+					</TaskRunConcurrencyLimitTabNavigation>
+					<TaskRunConcurrencyLimitDetails data={taskRunConcurrencyLimit} />
 				</div>
 			</div>
 			<TaskRunConcurrencyLimitDialog
-				data={data}
+				data={taskRunConcurrencyLimit}
 				openDialog={openDialog}
 				onOpenChange={handleOpenChange}
 				onCloseDialog={handleCloseDialog}
 			/>
 		</>
 	);
 };
+
+type SkeletonLoadingProps = { length?: number };
+const SkeletonLoading = ({ length = 0 }: SkeletonLoadingProps) => (
+	<div className="flex flex-col gap-4">
+		{Array.from({ length }, (_, index) => (
+			<Card key={index} className="p-4 space-y-4">
+				<Skeleton className="h-4 w-[350px]" />
+				<Skeleton className="h-4 w-[400px]" />
+			</Card>
+		))}
+	</div>
+);
@@ -20,13 +20,12 @@ const TAB_OPTIONS: Record<TabOptions, TabOptionValues> = {
 } as const;
 
 type Props = {
-	activetaskRunsView: React.ReactNode;
+	/** Should add ActiveTaskRun component */
+	children: React.ReactNode;
 };
 
 // TODO: Move Tabs for navigation to a generic styled component
-export const TaskRunConcurrencyLimitTabNavigation = ({
-	activetaskRunsView,
-}: Props) => {
+export const TaskRunConcurrencyLimitTabNavigation = ({ children }: Props) => {
 	const { tab } = routeApi.useSearch();
 	const navigate = routeApi.useNavigate();
 
@@ -48,7 +47,7 @@ export const TaskRunConcurrencyLimitTabNavigation = ({
 				</TabsTrigger>
 			</TabsList>
 			<TabsContent value={TAB_OPTIONS["active-task-runs"].tabSearchValue}>
-				{activetaskRunsView}
+				{children}
 			</TabsContent>
 		</Tabs>
 	);

@@ -1,8 +1,5 @@
-import {
-	createFakeTaskRunConcurrencyLimit,
-	routerDecorator,
-	toastDecorator,
-} from "@/storybook/utils";
+import { createFakeTaskRunConcurrencyLimit } from "@/mocks";
+import { routerDecorator, toastDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { Table as TaskRunConcurrencyLimitsDataTable } from "./task-run-concurrency-limits-data-table";

@@ -1,7 +1,5 @@
-import {
-	createFakeTaskRunConcurrencyLimit,
-	reactQueryDecorator,
-} from "@/storybook/utils";
+import { createFakeTaskRunConcurrencyLimit } from "@/mocks";
+import { reactQueryDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { TaskRunConcurrencyLimitsDeleteDialog } from "./task-run-concurrency-limits-delete-dialog";

@@ -1,7 +1,5 @@
-import {
-	createFakeTaskRunConcurrencyLimit,
-	reactQueryDecorator,
-} from "@/storybook/utils";
+import { createFakeTaskRunConcurrencyLimit } from "@/mocks";
+import { reactQueryDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { TaskRunConcurrencyLimitsResetDialog } from "./task-run-concurrency-limits-reset-dialog";

@@ -1,12 +1,6 @@
+import { createFakeFlow, createFakeFlowRun, createFakeTaskRun } from "@/mocks";
+import { routerDecorator } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/react";
-
-import {
-	createFakeFlow,
-	createFakeFlowRun,
-	createFakeTaskRun,
-	routerDecorator,
-} from "@/storybook/utils";
-
 import { RunCard } from "./run-card";
 
 const meta: Meta<typeof RunCard> = {

@@ -18,8 +18,8 @@ const getValues = ({
 	flowRun,
 	taskRun,
 }: {
-	flowRun: undefined | components["schemas"]["FlowRun"];
-	taskRun: undefined | components["schemas"]["TaskRun"];
+	flowRun: null | undefined | components["schemas"]["FlowRun"];
+	taskRun: null | undefined | components["schemas"]["TaskRun"];
 }) => {
 	if (taskRun) {
 		const { state, start_time, tags, estimated_run_time } = taskRun;
@@ -34,10 +34,10 @@ const getValues = ({
 };
 
 type Props = {
-	flow?: components["schemas"]["Flow"];
-	flowRun?: components["schemas"]["FlowRun"];
+	flow?: components["schemas"]["Flow"] | null;
+	flowRun?: components["schemas"]["FlowRun"] | null;
 	/** If task run is included, uses fields from task run over flow run */
-	taskRun?: components["schemas"]["TaskRun"];
+	taskRun?: components["schemas"]["TaskRun"] | null;
 };
 
 export const RunCard = ({ flow, flowRun, taskRun }: Props) => {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { TaskRunConcurrencyLimitActiveTaskRuns } from "./task-run-concurrency-limit-active-task-runs";