From 7fe979062ad2e0631c1388f51c8e06258a09c1ef Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 16 Jan 2025 10:18:08 -0800
Subject: [PATCH] Make email block parameterized (#1581)

---
 .../nodes/SendEmailNode/SendEmailNode.tsx     | 43 ++++++++-----------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
index 4743573a..52ace3cc 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
@@ -1,5 +1,4 @@
 import { HelpTooltip } from "@/components/HelpTooltip";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
@@ -12,6 +11,8 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import { type SendEmailNode } from "./types";
+import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
+import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 
 function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
   const { updateNodeData } = useReactFlow();
@@ -77,12 +78,10 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
         </div>
         <div className="space-y-2">
           <Label className="text-xs text-slate-300">Recipients</Label>
-          <Input
-            onChange={(event) => {
-              if (!data.editable) {
-                return;
-              }
-              handleChange("recipients", event.target.value);
+          <WorkflowBlockInput
+            nodeId={id}
+            onChange={(value) => {
+              handleChange("recipients", value);
             }}
             value={inputs.recipients}
             placeholder="example@gmail.com, example2@gmail.com..."
@@ -92,12 +91,10 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
         <Separator />
         <div className="space-y-2">
           <Label className="text-xs text-slate-300">Subject</Label>
-          <Input
-            onChange={(event) => {
-              if (!data.editable) {
-                return;
-              }
-              handleChange("subject", event.target.value);
+          <WorkflowBlockInput
+            nodeId={id}
+            onChange={(value) => {
+              handleChange("subject", value);
             }}
             value={inputs.subject}
             placeholder="What is the gist?"
@@ -106,12 +103,10 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
         </div>
         <div className="space-y-2">
           <Label className="text-xs text-slate-300">Body</Label>
-          <Input
-            onChange={(event) => {
-              if (!data.editable) {
-                return;
-              }
-              handleChange("body", event.target.value);
+          <WorkflowBlockInputTextarea
+            nodeId={id}
+            onChange={(value) => {
+              handleChange("body", value);
             }}
             value={inputs.body}
             placeholder="What would you like to say?"
@@ -126,13 +121,11 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
               content={helpTooltips["sendEmail"]["fileAttachments"]}
             />
           </div>
-          <Input
+          <WorkflowBlockInput
+            nodeId={id}
             value={inputs.fileAttachments}
-            onChange={(event) => {
-              if (!data.editable) {
-                return;
-              }
-              handleChange("fileAttachments", event.target.value);
+            onChange={(value) => {
+              handleChange("fileAttachments", value);
             }}
             disabled
             className="nopan text-xs"