Add confirmation modal to workflows (#3267)

AWS - Terminate instance
The search of this workflow doesn't work on staging

AWS - Resize Autoscaling Group
![Screenshot 2025-03-28 at 10 48 43 a
m](https://github.com/user-attachments/assets/0ee63d8e-672c-415f-8638-7661f142a674)

Author: lucechal14

frontend/workflows/ec2/src/resize-asg.tsx

@@ -8,6 +8,7 @@ import {
   MetadataTable,
   NotePanel,
   Resolver,
+  Typography,
   useWizardContext,
 } from "@clutch-sh/core";
 import { useDataLayout } from "@clutch-sh/data-layout";
@@ -117,6 +118,14 @@ const Confirm: React.FC<ConfirmChild> = ({ notes }) => {
   );
 };
 
+const ConfirmResizeAutoscalingGroup = () => {
+  const group = useDataLayout("groupData").displayValue() as IClutch.aws.ec2.v1.AutoscalingGroup;
+
+  return (
+    <Typography variant="body1">{`You are about to resize autoscaling group ${group.name}, are you sure to proceed?`}</Typography>
+  );
+};
+
 const ResizeAutoscalingGroup: React.FC<WorkflowProps> = ({ heading, resolverType, notes = [] }) => {
   const dataLayout = {
     groupData: {},
@@ -136,7 +145,13 @@ const ResizeAutoscalingGroup: React.FC<WorkflowProps> = ({ heading, resolverType
   return (
     <Wizard dataLayout={dataLayout} heading={heading}>
       <GroupIdentifier name="Lookup" resolverType={resolverType} />
-      <GroupDetails name="Modify" />
+      <GroupDetails
+        name="Modify"
+        confirmActionSettings={{
+          title: "Resize Autoscaling Group",
+          description: <ConfirmResizeAutoscalingGroup />,
+        }}
+      />
       <Confirm name="Result" notes={notes} />
     </Wizard>
   );

frontend/workflows/ec2/src/terminate-instance.tsx

@@ -10,6 +10,7 @@ import {
   MetadataTable,
   NotePanel,
   Resolver,
+  Typography,
   useWizardContext,
 } from "@clutch-sh/core";
 import { useDataLayout } from "@clutch-sh/data-layout";
@@ -92,6 +93,15 @@ const Confirm: React.FC<ConfirmChild> = ({ notes }) => {
   );
 };
 
+const ConfirmTerminateInstance = () => {
+  const resourceData = useDataLayout("resourceData");
+  const instance = resourceData.displayValue() as IClutch.aws.ec2.v1.Instance;
+
+  return (
+    <Typography variant="body1">{`You are about to terminate instance ${instance?.tags?.Name}, are you sure to proceed?`}</Typography>
+  );
+};
+
 const TerminateInstance: React.FC<WorkflowProps> = ({ heading, resolverType, notes = [] }) => {
   const dataLayout = {
     resourceData: {},
@@ -110,7 +120,13 @@ const TerminateInstance: React.FC<WorkflowProps> = ({ heading, resolverType, not
   return (
     <Wizard dataLayout={dataLayout} heading={heading}>
       <InstanceIdentifier name="Lookup" resolverType={resolverType} />
-      <InstanceDetails name="Verify" />
+      <InstanceDetails
+        name="Verify"
+        confirmActionSettings={{
+          title: "Terminate Instance",
+          description: <ConfirmTerminateInstance />,
+        }}
+      />
       <Confirm name="Result" notes={notes} />
     </Wizard>
   );

frontend/workflows/k8s/src/cordon-node.tsx

@@ -82,7 +82,7 @@ const ConfirmCordonNode = () => {
   const node = useDataLayout("resourceData").displayValue() as IClutch.k8s.v1.Node;
 
   return (
-    <Typography variant="body1">{`You are about to ${node.unschedulable ? "uncordon" : "cordon"} ${
+    <Typography variant="body1">{`You are about to ${node.unschedulable ? "cordon" : "uncordon"} ${
       node.name
     }, are you sure to proceed?`}</Typography>
   );