[UI v2] feat: Adds action details for work queues and work pools

ui-v2/src/components/automations/action-details/action-details.tsx

@@ -1,9 +1,16 @@
-import { Automation } from "@/api/automations";
-import { Deployment } from "@/api/deployments";
+import type { Automation } from "@/api/automations";
+import type { Deployment } from "@/api/deployments";
+import type { WorkPool } from "@/api/work-pools";
+import type { WorkQueue } from "@/api/work-queues";
 import { Card } from "@/components/ui/card";
 import { Icon, IconId } from "@/components/ui/icons";
 import { Typography } from "@/components/ui/typography";
-import { createFakeAutomation, createFakeDeployment } from "@/mocks";
+import {
+	createFakeAutomation,
+	createFakeDeployment,
+	createFakeWorkPool,
+	createFakeWorkQueue,
+} from "@/mocks";
 import { Link } from "@tanstack/react-router";
 
 const ACTION_TYPE_TO_STRING = {
@@ -68,7 +75,11 @@ export const ActionDetailsType = ({ action }: ActionDetailsProps) => {
 		case "pause-work-queue":
 		case "resume-work-queue":
 			return action.work_queue_id && action.source == "selected" ? (
-				"TODO"
+				// TODO: Pass a real work queue from API
+				<WorkQueueActionDetails
+					label={label}
+					workQueue={createFakeWorkQueue()}
+				/>
 			) : (
 				<InferredAction label={label} />
 			);
@@ -86,7 +97,8 @@ export const ActionDetailsType = ({ action }: ActionDetailsProps) => {
 		case "pause-work-pool":
 		case "resume-work-pool":
 			return action.work_pool_id && action.source == "selected" ? (
-				"TODO"
+				// TODO: Pass a real work pool from API
+				<WorkPoolActionDetails label={label} workPool={createFakeWorkPool()} />
 			) : (
 				<InferredAction label={label} />
 			);
@@ -170,3 +182,50 @@ export const AutomationActionDetails = ({
 		</ActionResource>
 	);
 };
+
+type WorkPoolActionDetailsProps = {
+	label: ActionLabel;
+	workPool: WorkPool;
+};
+export const WorkPoolActionDetails = ({
+	label,
+	workPool,
+}: WorkPoolActionDetailsProps) => {
+	return (
+		<ActionResource>
+			<label>{label}:</label>
+			<Link
+				to="/work-pools/work-pool/$workPoolName"
+				params={{ workPoolName: workPool.name }}
+				aria-label={workPool.name}
+			>
+				<ActionResourceName iconId="Cpu" name={workPool.name} />
+			</Link>
+		</ActionResource>
+	);
+};
+
+type WorkQueueActionDetailsProps = {
+	label: ActionLabel;
+	workQueue: WorkQueue;
+};
+export const WorkQueueActionDetails = ({
+	label,
+	workQueue,
+}: WorkQueueActionDetailsProps) => {
+	return (
+		<ActionResource>
+			<label>{label}:</label>
+			<Link
+				to="/work-pools/work-pool/$workPoolName/queue/$workQueueName"
+				params={{
+					workPoolName: workQueue.name,
+					workQueueName: workQueue.name,
+				}}
+				aria-label={workQueue.name}
+			>
+				<ActionResourceName iconId="Cpu" name={workQueue.name} />
+			</Link>
+		</ActionResource>
+	);
+};

ui-v2/src/mocks/create-fake-work-pool.ts

@@ -10,7 +10,7 @@ export const createFakeWorkPool = (
 		created: faker.date.past().toISOString(),
 		description: `${faker.word.adjective()} ${faker.word.noun()}`,
 		id: faker.string.uuid(),
-		name: `${faker.word.adjective()} automation`,
+		name: `${faker.word.adjective()} work pool`,
 		updated: faker.date.past().toISOString(),
 		base_job_template: {},
 		concurrency_limit: faker.number.int({ min: 0, max: 1_000 }),

ui-v2/src/routeTree.gen.ts

@@ -25,16 +25,15 @@ import { Route as DeploymentsIndexImport } from './routes/deployments/index'
 import { Route as ConcurrencyLimitsIndexImport } from './routes/concurrency-limits/index'
 import { Route as AutomationsIndexImport } from './routes/automations/index'
 import { Route as AutomationsCreateImport } from './routes/automations/create'
-import { Route as WorkPoolsWorkPoolWorkPoolIdImport } from './routes/work-pools/work-pool.$workPoolId'
-import { Route as WorkPoolsWorkPoolIdImport } from './routes/work-pools/work-pool.$id'
+import { Route as WorkPoolsWorkPoolWorkPoolNameImport } from './routes/work-pools/work-pool.$workPoolName'
 import { Route as RunsTaskRunIdImport } from './routes/runs/task-run.$id'
 import { Route as RunsFlowRunIdImport } from './routes/runs/flow-run.$id'
 import { Route as FlowsFlowIdImport } from './routes/flows/flow.$id'
 import { Route as DeploymentsDeploymentIdImport } from './routes/deployments/deployment.$id'
 import { Route as ConcurrencyLimitsConcurrencyLimitIdImport } from './routes/concurrency-limits/concurrency-limit.$id'
 import { Route as AutomationsAutomationIdImport } from './routes/automations/automation.$id'
 import { Route as AutomationsAutomationIdEditImport } from './routes/automations/automation.$id.edit'
-import { Route as WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdImport } from './routes/work-pools/work-pool.$workPoolId.queue.$workQueueId'
+import { Route as WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameImport } from './routes/work-pools/work-pool.$workPoolName.queue.$workQueueName'
 
 // Create/Update Routes
 
@@ -122,19 +121,13 @@ const AutomationsCreateRoute = AutomationsCreateImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const WorkPoolsWorkPoolWorkPoolIdRoute =
-  WorkPoolsWorkPoolWorkPoolIdImport.update({
-    id: '/work-pools/work-pool/$workPoolId',
-    path: '/work-pools/work-pool/$workPoolId',
+const WorkPoolsWorkPoolWorkPoolNameRoute =
+  WorkPoolsWorkPoolWorkPoolNameImport.update({
+    id: '/work-pools/work-pool/$workPoolName',
+    path: '/work-pools/work-pool/$workPoolName',
     getParentRoute: () => rootRoute,
   } as any)
 
-const WorkPoolsWorkPoolIdRoute = WorkPoolsWorkPoolIdImport.update({
-  id: '/work-pools/work-pool/$id',
-  path: '/work-pools/work-pool/$id',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const RunsTaskRunIdRoute = RunsTaskRunIdImport.update({
   id: '/runs/task-run/$id',
   path: '/runs/task-run/$id',
@@ -179,11 +172,11 @@ const AutomationsAutomationIdEditRoute =
     getParentRoute: () => AutomationsAutomationIdRoute,
   } as any)
 
-const WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute =
-  WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdImport.update({
-    id: '/queue/$workQueueId',
-    path: '/queue/$workQueueId',
-    getParentRoute: () => WorkPoolsWorkPoolWorkPoolIdRoute,
+const WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute =
+  WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameImport.update({
+    id: '/queue/$workQueueName',
+    path: '/queue/$workQueueName',
+    getParentRoute: () => WorkPoolsWorkPoolWorkPoolNameRoute,
   } as any)
 
 // Populate the FileRoutesByPath interface
@@ -330,18 +323,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RunsTaskRunIdImport
       parentRoute: typeof rootRoute
     }
-    '/work-pools/work-pool/$id': {
-      id: '/work-pools/work-pool/$id'
-      path: '/work-pools/work-pool/$id'
-      fullPath: '/work-pools/work-pool/$id'
-      preLoaderRoute: typeof WorkPoolsWorkPoolIdImport
-      parentRoute: typeof rootRoute
-    }
-    '/work-pools/work-pool/$workPoolId': {
-      id: '/work-pools/work-pool/$workPoolId'
-      path: '/work-pools/work-pool/$workPoolId'
-      fullPath: '/work-pools/work-pool/$workPoolId'
-      preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolIdImport
+    '/work-pools/work-pool/$workPoolName': {
+      id: '/work-pools/work-pool/$workPoolName'
+      path: '/work-pools/work-pool/$workPoolName'
+      fullPath: '/work-pools/work-pool/$workPoolName'
+      preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolNameImport
       parentRoute: typeof rootRoute
     }
     '/automations/automation/$id/edit': {
@@ -351,12 +337,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AutomationsAutomationIdEditImport
       parentRoute: typeof AutomationsAutomationIdImport
     }
-    '/work-pools/work-pool/$workPoolId/queue/$workQueueId': {
-      id: '/work-pools/work-pool/$workPoolId/queue/$workQueueId'
-      path: '/queue/$workQueueId'
-      fullPath: '/work-pools/work-pool/$workPoolId/queue/$workQueueId'
-      preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdImport
-      parentRoute: typeof WorkPoolsWorkPoolWorkPoolIdImport
+    '/work-pools/work-pool/$workPoolName/queue/$workQueueName': {
+      id: '/work-pools/work-pool/$workPoolName/queue/$workQueueName'
+      path: '/queue/$workQueueName'
+      fullPath: '/work-pools/work-pool/$workPoolName/queue/$workQueueName'
+      preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameImport
+      parentRoute: typeof WorkPoolsWorkPoolWorkPoolNameImport
     }
   }
 }
@@ -377,19 +363,19 @@ const AutomationsAutomationIdRouteWithChildren =
     AutomationsAutomationIdRouteChildren,
   )
 
-interface WorkPoolsWorkPoolWorkPoolIdRouteChildren {
-  WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute: typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute
+interface WorkPoolsWorkPoolWorkPoolNameRouteChildren {
+  WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute: typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute
 }
 
-const WorkPoolsWorkPoolWorkPoolIdRouteChildren: WorkPoolsWorkPoolWorkPoolIdRouteChildren =
+const WorkPoolsWorkPoolWorkPoolNameRouteChildren: WorkPoolsWorkPoolWorkPoolNameRouteChildren =
   {
-    WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute:
-      WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute,
+    WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute:
+      WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute,
   }
 
-const WorkPoolsWorkPoolWorkPoolIdRouteWithChildren =
-  WorkPoolsWorkPoolWorkPoolIdRoute._addFileChildren(
-    WorkPoolsWorkPoolWorkPoolIdRouteChildren,
+const WorkPoolsWorkPoolWorkPoolNameRouteWithChildren =
+  WorkPoolsWorkPoolWorkPoolNameRoute._addFileChildren(
+    WorkPoolsWorkPoolWorkPoolNameRouteChildren,
   )
 
 export interface FileRoutesByFullPath {
@@ -413,10 +399,9 @@ export interface FileRoutesByFullPath {
   '/flows/flow/$id': typeof FlowsFlowIdRoute
   '/runs/flow-run/$id': typeof RunsFlowRunIdRoute
   '/runs/task-run/$id': typeof RunsTaskRunIdRoute
-  '/work-pools/work-pool/$id': typeof WorkPoolsWorkPoolIdRoute
-  '/work-pools/work-pool/$workPoolId': typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren
+  '/work-pools/work-pool/$workPoolName': typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren
   '/automations/automation/$id/edit': typeof AutomationsAutomationIdEditRoute
-  '/work-pools/work-pool/$workPoolId/queue/$workQueueId': typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute
+  '/work-pools/work-pool/$workPoolName/queue/$workQueueName': typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute
 }
 
 export interface FileRoutesByTo {
@@ -440,10 +425,9 @@ export interface FileRoutesByTo {
   '/flows/flow/$id': typeof FlowsFlowIdRoute
   '/runs/flow-run/$id': typeof RunsFlowRunIdRoute
   '/runs/task-run/$id': typeof RunsTaskRunIdRoute
-  '/work-pools/work-pool/$id': typeof WorkPoolsWorkPoolIdRoute
-  '/work-pools/work-pool/$workPoolId': typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren
+  '/work-pools/work-pool/$workPoolName': typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren
   '/automations/automation/$id/edit': typeof AutomationsAutomationIdEditRoute
-  '/work-pools/work-pool/$workPoolId/queue/$workQueueId': typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute
+  '/work-pools/work-pool/$workPoolName/queue/$workQueueName': typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute
 }
 
 export interface FileRoutesById {
@@ -468,10 +452,9 @@ export interface FileRoutesById {
   '/flows/flow/$id': typeof FlowsFlowIdRoute
   '/runs/flow-run/$id': typeof RunsFlowRunIdRoute
   '/runs/task-run/$id': typeof RunsTaskRunIdRoute
-  '/work-pools/work-pool/$id': typeof WorkPoolsWorkPoolIdRoute
-  '/work-pools/work-pool/$workPoolId': typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren
+  '/work-pools/work-pool/$workPoolName': typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren
   '/automations/automation/$id/edit': typeof AutomationsAutomationIdEditRoute
-  '/work-pools/work-pool/$workPoolId/queue/$workQueueId': typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute
+  '/work-pools/work-pool/$workPoolName/queue/$workQueueName': typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute
 }
 
 export interface FileRouteTypes {
@@ -497,10 +480,9 @@ export interface FileRouteTypes {
     | '/flows/flow/$id'
     | '/runs/flow-run/$id'
     | '/runs/task-run/$id'
-    | '/work-pools/work-pool/$id'
-    | '/work-pools/work-pool/$workPoolId'
+    | '/work-pools/work-pool/$workPoolName'
     | '/automations/automation/$id/edit'
-    | '/work-pools/work-pool/$workPoolId/queue/$workQueueId'
+    | '/work-pools/work-pool/$workPoolName/queue/$workQueueName'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -523,10 +505,9 @@ export interface FileRouteTypes {
     | '/flows/flow/$id'
     | '/runs/flow-run/$id'
     | '/runs/task-run/$id'
-    | '/work-pools/work-pool/$id'
-    | '/work-pools/work-pool/$workPoolId'
+    | '/work-pools/work-pool/$workPoolName'
     | '/automations/automation/$id/edit'
-    | '/work-pools/work-pool/$workPoolId/queue/$workQueueId'
+    | '/work-pools/work-pool/$workPoolName/queue/$workQueueName'
   id:
     | '__root__'
     | '/'
@@ -549,10 +530,9 @@ export interface FileRouteTypes {
     | '/flows/flow/$id'
     | '/runs/flow-run/$id'
     | '/runs/task-run/$id'
-    | '/work-pools/work-pool/$id'
-    | '/work-pools/work-pool/$workPoolId'
+    | '/work-pools/work-pool/$workPoolName'
     | '/automations/automation/$id/edit'
-    | '/work-pools/work-pool/$workPoolId/queue/$workQueueId'
+    | '/work-pools/work-pool/$workPoolName/queue/$workQueueName'
   fileRoutesById: FileRoutesById
 }
 
@@ -577,8 +557,7 @@ export interface RootRouteChildren {
   FlowsFlowIdRoute: typeof FlowsFlowIdRoute
   RunsFlowRunIdRoute: typeof RunsFlowRunIdRoute
   RunsTaskRunIdRoute: typeof RunsTaskRunIdRoute
-  WorkPoolsWorkPoolIdRoute: typeof WorkPoolsWorkPoolIdRoute
-  WorkPoolsWorkPoolWorkPoolIdRoute: typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren
+  WorkPoolsWorkPoolWorkPoolNameRoute: typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren
 }
 
 const rootRouteChildren: RootRouteChildren = {
@@ -603,9 +582,8 @@ const rootRouteChildren: RootRouteChildren = {
   FlowsFlowIdRoute: FlowsFlowIdRoute,
   RunsFlowRunIdRoute: RunsFlowRunIdRoute,
   RunsTaskRunIdRoute: RunsTaskRunIdRoute,
-  WorkPoolsWorkPoolIdRoute: WorkPoolsWorkPoolIdRoute,
-  WorkPoolsWorkPoolWorkPoolIdRoute:
-    WorkPoolsWorkPoolWorkPoolIdRouteWithChildren,
+  WorkPoolsWorkPoolWorkPoolNameRoute:
+    WorkPoolsWorkPoolWorkPoolNameRouteWithChildren,
 }
 
 export const routeTree = rootRoute
@@ -638,8 +616,7 @@ export const routeTree = rootRoute
         "/flows/flow/$id",
         "/runs/flow-run/$id",
         "/runs/task-run/$id",
-        "/work-pools/work-pool/$id",
-        "/work-pools/work-pool/$workPoolId"
+        "/work-pools/work-pool/$workPoolName"
       ]
     },
     "/": {
@@ -705,22 +682,19 @@ export const routeTree = rootRoute
     "/runs/task-run/$id": {
       "filePath": "runs/task-run.$id.tsx"
     },
-    "/work-pools/work-pool/$id": {
-      "filePath": "work-pools/work-pool.$id.tsx"
-    },
-    "/work-pools/work-pool/$workPoolId": {
-      "filePath": "work-pools/work-pool.$workPoolId.tsx",
+    "/work-pools/work-pool/$workPoolName": {
+      "filePath": "work-pools/work-pool.$workPoolName.tsx",
       "children": [
-        "/work-pools/work-pool/$workPoolId/queue/$workQueueId"
+        "/work-pools/work-pool/$workPoolName/queue/$workQueueName"
       ]
     },
     "/automations/automation/$id/edit": {
       "filePath": "automations/automation.$id.edit.ts",
       "parent": "/automations/automation/$id"
     },
-    "/work-pools/work-pool/$workPoolId/queue/$workQueueId": {
-      "filePath": "work-pools/work-pool.$workPoolId.queue.$workQueueId.tsx",
-      "parent": "/work-pools/work-pool/$workPoolId"
+    "/work-pools/work-pool/$workPoolName/queue/$workQueueName": {
+      "filePath": "work-pools/work-pool.$workPoolName.queue.$workQueueName.tsx",
+      "parent": "/work-pools/work-pool/$workPoolName"
     }
   }
 }

ui-v2/src/routes/work-pools/work-pool.$workPoolId.queue.$workQueueId.tsx → ui-v2/src/routes/work-pools/work-pool.$workPoolName.queue.$workQueueName.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute(
-	"/work-pools/work-pool/$workPoolId/queue/$workQueueId",
+	"/work-pools/work-pool/$workPoolName/queue/$workQueueName",
 )({
 	component: RouteComponent,
 });

ui-v2/src/routes/work-pools/work-pool.$workPoolId.tsx → ui-v2/src/routes/work-pools/work-pool.$workPoolName.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/work-pools/work-pool/$workPoolId")({
+export const Route = createFileRoute("/work-pools/work-pool/$workPoolName")({
 	component: RouteComponent,
 });