[UI v2] feat: Begins logic for creating UX based on an action type (#…

…16752)

ui-v2/src/api/deployments/use-list-deployments-with-flows/use-list-deployments-with-flows.ts

@@ -48,21 +48,22 @@ export const useListDeploymentsWithFlows = (
 		buildPaginateDeploymentsQuery(filter),
 	);
 
-	const deploymentsFlowIds = deploymentsData?.results.map(
-		(deployment) => deployment.flow_id,
+	// Creates a set of unique flow ids
+	const deploymentsFlowIds = new Set(
+		deploymentsData?.results.map((deployment) => deployment.flow_id),
 	);
 
 	const { data: flowsData, status: flowsStatus } = useQuery(
 		buildListFlowsQuery(
 			{
 				flows: {
 					operator: "or_",
-					id: { any_: deploymentsFlowIds },
+					id: { any_: Array.from(deploymentsFlowIds) },
 				},
 				sort: "NAME_DESC",
 				offset: 0,
 			},
-			{ enabled: Boolean(deploymentsFlowIds) },
+			{ enabled: deploymentsFlowIds.size > 0 },
 		),
 	);
 

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

@@ -0,0 +1,93 @@
+import { Automation } from "@/api/automations";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActionDetails } from "./action-details";
+
+const ACTIONS: Array<Automation["actions"][number]> = [
+	{ type: "do-nothing" },
+	{ type: "cancel-flow-run" },
+	{ type: "suspend-flow-run" },
+	{ type: "cancel-flow-run" },
+	{ type: "resume-flow-run" },
+	{ type: "run-deployment", deployment_id: null, source: "inferred" },
+	{ type: "run-deployment", deployment_id: "abc", source: "selected" },
+	{ type: "pause-deployment", deployment_id: null, source: "inferred" },
+	{ type: "resume-deployment", deployment_id: "abc", source: "selected" },
+	{ type: "pause-work-queue", work_queue_id: null, source: "inferred" },
+	{ type: "resume-work-queue", work_queue_id: "abc", source: "selected" },
+	{ type: "pause-work-pool", work_pool_id: null, source: "inferred" },
+	{ type: "resume-work-pool", work_pool_id: "abc", source: "selected" },
+	{ type: "pause-automation", automation_id: null, source: "inferred" },
+	{ type: "resume-automation", automation_id: "abc", source: "selected" },
+	{
+		type: "send-notification",
+		block_document_id: "abc",
+		body: "my_body",
+		subject: "my_subject",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "CANCELLED",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "CANCELLING",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "COMPLETED",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "CRASHED",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "FAILED",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "PAUSED",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "PENDING",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "RUNNING",
+		message: "My message",
+		name: "My name",
+	},
+	{
+		type: "change-flow-run-state",
+		state: "SCHEDULED",
+	},
+	{
+		type: "call-webhook",
+		block_document_id: "abc",
+		payload: "my_payload",
+	},
+];
+
+const meta = {
+	title: "Components/Automations/ActionDetails",
+	component: ActionDetailsStory,
+} satisfies Meta<typeof ActionDetails>;
+
+export default meta;
+
+export const Story: StoryObj = {
+	name: "ActionDetails",
+};
+
+function ActionDetailsStory() {
+	return (
+		<ul className="flex flex-col gap-4">
+			{ACTIONS.map((action, i) => (
+				<li key={i}>
+					<ActionDetails key={i} action={action} />
+				</li>
+			))}
+		</ul>
+	);
+}

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

@@ -0,0 +1,96 @@
+import { Automation } from "@/api/automations";
+import { Card } from "@/components/ui/card";
+import { Typography } from "@/components/ui/typography";
+type AutomationAction = Automation["actions"][number];
+
+type ActionDetailsProps = {
+	action: AutomationAction;
+};
+export const ActionDetails = ({ action }: ActionDetailsProps) => (
+	<Card className="p-4 border-r-8">
+		<ActionDetailsType action={action} />
+	</Card>
+);
+
+export const ActionDetailsType = ({ action }: ActionDetailsProps) => {
+	switch (action.type) {
+		// Non-inferrable Actions
+		case "do-nothing":
+		case "cancel-flow-run":
+		case "suspend-flow-run":
+		case "resume-flow-run":
+			return <NoninferredAction action={action} />;
+		// Inferable actions
+		case "run-deployment":
+			return action.deployment_id && action.source == "selected" ? (
+				"TODO"
+			) : (
+				<InferredAction action={action} />
+			);
+		case "pause-deployment":
+		case "resume-deployment":
+			return action.deployment_id && action.source == "selected" ? (
+				"TODO"
+			) : (
+				<InferredAction action={action} />
+			);
+		case "pause-work-queue":
+		case "resume-work-queue":
+			return action.work_queue_id && action.source == "selected" ? (
+				"TODO"
+			) : (
+				<InferredAction action={action} />
+			);
+		case "pause-automation":
+		case "resume-automation":
+			return action.automation_id && action.source == "selected" ? (
+				"TODO"
+			) : (
+				<InferredAction action={action} />
+			);
+		case "pause-work-pool":
+		case "resume-work-pool":
+			return action.work_pool_id && action.source == "selected" ? (
+				"TODO"
+			) : (
+				<InferredAction action={action} />
+			);
+		// Other actions
+		case "send-notification":
+			return "TODO";
+		case "change-flow-run-state":
+			return "TODO";
+		case "call-webhook":
+			return "TODO";
+	}
+};
+
+const ACTION_TYPE_TO_STRING: Record<AutomationAction["type"], string> = {
+	"cancel-flow-run": "Cancel flow run",
+	"suspend-flow-run": "Suspend flow run",
+	"resume-flow-run": "Resume a flow run",
+	"change-flow-run-state": "Change state of a flow run",
+	"run-deployment": "Run deployment",
+	"pause-deployment": "Pause deployment",
+	"resume-deployment": "Resume deployment",
+	"pause-work-queue": "Pause work queue",
+	"resume-work-queue": "Resume work queue",
+	"pause-work-pool": "Pause work queue",
+	"resume-work-pool": "Resume work queue",
+	"pause-automation": "Pause automation",
+	"resume-automation": "Resume automation",
+	"call-webhook": "Call a custom webhook notification",
+	"send-notification": "Send a notification",
+	"do-nothing": "Do nothing",
+} as const;
+
+const NoninferredAction = ({ action }: ActionDetailsProps) => (
+	<Typography variant="bodySmall">
+		{`${ACTION_TYPE_TO_STRING[action.type]} from the triggering event`}
+	</Typography>
+);
+const InferredAction = ({ action }: ActionDetailsProps) => (
+	<Typography variant="bodySmall">
+		{`${ACTION_TYPE_TO_STRING[action.type]} inferred from the triggering event`}
+	</Typography>
+);

ui-v2/src/components/automations/action-details/index.ts

@@ -0,0 +1 @@
+export { ActionDetails } from "./action-details";

ui-v2/src/components/automations/automation-page/automation-page.tsx

@@ -1,8 +1,8 @@
 import { Automation, buildGetAutomationQuery } from "@/api/automations";
+import { ActionDetails } from "@/components/automations/action-details";
 import { AutomationEnableToggle } from "@/components/automations/automation-enable-toggle";
 import { AutomationsActionsMenu } from "@/components/automations/automations-actions-menu";
 import { useDeleteAutomationConfirmationDialog } from "@/components/automations/use-delete-automation-confirmation-dialog";
-import { Card } from "@/components/ui/card";
 import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
 import { Typography } from "@/components/ui/typography";
 import { useSuspenseQuery } from "@tanstack/react-query";
@@ -98,9 +98,7 @@ const AutomationActions = ({ data }: AutomationActionsProps) => {
 			<ul className="flex flex-col gap-2">
 				{actions.map((action, i) => (
 					<li key={i}>
-						<Card className="p-4 border-r-8">
-							<div>TODO: {JSON.stringify(action)}</div>
-						</Card>
+						<ActionDetails action={action} />
 					</li>
 				))}
 			</ul>