From b12e5e84ce7dde79cfe03a8aa9171247487e79e3 Mon Sep 17 00:00:00 2001
From: Devin Villarosa <102188207+devinvillarosa@users.noreply.github.com>
Date: Sat, 25 Jan 2025 16:53:12 -0800
Subject: [PATCH] [UI v2] feat: Adds action details for send-notification type
 (#16849)

---
 .../action-details/action-details.tsx         | 52 +++++++++++++++++--
 ui-v2/src/components/ui/icons/constants.ts    |  2 +
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/ui-v2/src/components/automations/action-details/action-details.tsx b/ui-v2/src/components/automations/action-details/action-details.tsx
index da52aad89c9b..79a722008c0c 100644
--- a/ui-v2/src/components/automations/action-details/action-details.tsx
+++ b/ui-v2/src/components/automations/action-details/action-details.tsx
@@ -1,4 +1,5 @@
 import type { Automation } from "@/api/automations";
+import type { BlockDocument } from "@/api/block-documents";
 import type { Deployment } from "@/api/deployments";
 import type { components } from "@/api/prefect";
 import type { WorkPool } from "@/api/work-pools";
@@ -18,6 +19,7 @@ import { StateBadge } from "@/components/ui/state-badge";
 import { Typography } from "@/components/ui/typography";
 import {
 	createFakeAutomation,
+	createFakeBlockDocument,
 	createFakeDeployment,
 	createFakeWorkPool,
 	createFakeWorkQueue,
@@ -40,7 +42,8 @@ const ACTION_TYPE_TO_STRING = {
 	"pause-automation": "Pause automation",
 	"resume-automation": "Resume automation",
 	"call-webhook": "Call a custom webhook notification",
-	"send-notification": "Send a notification",
+	/** Default string if `block_type_name` is not found. */
+	"send-notification": "Send a notification using",
 	"do-nothing": "Do nothing",
 } as const;
 type ActionLabel =
@@ -61,10 +64,11 @@ export const ActionDetailsType = ({ action }: ActionDetailsProps) => {
 	const label = ACTION_TYPE_TO_STRING[action.type];
 	switch (action.type) {
 		// Non-inferrable Actions
-		case "do-nothing":
 		case "cancel-flow-run":
 		case "suspend-flow-run":
 		case "resume-flow-run":
+		case "call-webhook": // Not used
+		case "do-nothing": // not used
 			return <NoninferredAction label={label} />;
 		// Inferable actions
 		case "run-deployment":
@@ -121,7 +125,15 @@ export const ActionDetailsType = ({ action }: ActionDetailsProps) => {
 			);
 		// Other actions
 		case "send-notification":
-			return "TODO";
+			// TODO: Pass a real block document from API
+			return (
+				<BlockDocumentActionDetails
+					label={label}
+					blockDocument={createFakeBlockDocument({
+						block_type_name: "Mattermost Webhook",
+					})}
+				/>
+			);
 		case "change-flow-run-state":
 			return (
 				<ChangeFlowRunStateActionDetails
@@ -130,8 +142,8 @@ export const ActionDetailsType = ({ action }: ActionDetailsProps) => {
 					name={action.name}
 				/>
 			);
-		case "call-webhook":
-			return "TODO";
+		default:
+			return null;
 	}
 };
 
@@ -263,6 +275,36 @@ export const AutomationActionDetails = ({
 	);
 };
 
+type BlockDocumentActionDetailsProps = {
+	label: ActionLabel;
+	blockDocument: BlockDocument;
+};
+export const BlockDocumentActionDetails = ({
+	label,
+	blockDocument,
+}: BlockDocumentActionDetailsProps) => {
+	if (!blockDocument.name) {
+		return <Typography>Block not found</Typography>;
+	}
+
+	const _label = blockDocument.block_type_name
+		? `Send a ${blockDocument.block_type_name.toLowerCase()} using`
+		: label;
+
+	return (
+		<ActionResource>
+			<label>{_label}</label>
+			<Link
+				to="/blocks/block/$id"
+				params={{ id: blockDocument.id }}
+				aria-label={blockDocument.name}
+			>
+				<ActionResourceName iconId="Box" name={blockDocument.name} />
+			</Link>
+		</ActionResource>
+	);
+};
+
 type WorkPoolActionDetailsProps = {
 	label: ActionLabel;
 	workPool: WorkPool;
diff --git a/ui-v2/src/components/ui/icons/constants.ts b/ui-v2/src/components/ui/icons/constants.ts
index cbbb2dc4af2b..e61a7166d719 100644
--- a/ui-v2/src/components/ui/icons/constants.ts
+++ b/ui-v2/src/components/ui/icons/constants.ts
@@ -2,6 +2,7 @@ import {
 	AlignVerticalJustifyStart,
 	Ban,
 	Bot,
+	Box,
 	Calendar,
 	Check,
 	ChevronDown,
@@ -35,6 +36,7 @@ export const ICONS = {
 	AlignVerticalJustifyStart,
 	Ban,
 	Bot,
+	Box,
 	Calendar,
 	Check,
 	ChevronDown,