From cde255a03171cfbefb8c4449b7983524aea0d701 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Tue, 1 Oct 2024 14:22:14 +0200
Subject: [PATCH] Add workflow email action (#7279)

- Add the SAVE_EMAIL action. This action requires more setting
parameters than the Serverless Function action.
- Changed the way we computed the workflow diagram. It now preserves
some properties, like the `selected` property. That's necessary to not
close the right drawer when the workflow back-end data change.
- Added the possibility to set a label to a TextArea. This uses a
`<label>` HTML element and the `useId()` hook to create an id linking
the label with the input.
---
 .../modules/ui/input/components/TextArea.tsx  |  51 +++++---
 .../__stories__/TextArea.stories.tsx          |  21 +++-
 .../RightDrawerWorkflowEditStepContent.tsx    |  48 +++++---
 .../components/WorkflowDiagramStepNode.tsx    |  32 +++--
 .../components/WorkflowEditActionFormBase.tsx |  61 ++++++++++
 .../WorkflowEditActionFormSendEmail.tsx       | 109 ++++++++++++++++++
 ...kflowEditActionFormServerlessFunction.tsx} |  60 ++--------
 .../workflow/components/WorkflowEffect.tsx    |  50 ++++++--
 .../src/modules/workflow/constants/Actions.ts |   5 +
 .../hooks/useUpdateWorkflowVersionStep.tsx    |   2 +-
 .../src/modules/workflow/types/Workflow.ts    |  29 +++--
 .../modules/workflow/types/WorkflowDiagram.ts |  15 ++-
 .../__tests__/generateWorkflowDiagram.test.ts |   1 +
 .../__tests__/mergeWorkflowDiagrams.test.ts   |  72 ++++++++++++
 .../workflow/utils/assertUnreachable.ts       |   3 +
 .../workflow/utils/generateWorkflowDiagram.ts |   1 +
 .../utils/getStepDefaultDefinition.ts         |  21 ++++
 .../workflow/utils/mergeWorkflowDiagrams.ts   |  33 ++++++
 .../src/modules/workflow/utils/replaceStep.ts |   4 +-
 19 files changed, 512 insertions(+), 106 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormBase.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx
 rename packages/twenty-front/src/modules/workflow/components/{WorkflowEditActionForm.tsx => WorkflowEditActionFormServerlessFunction.tsx} (50%)
 create mode 100644 packages/twenty-front/src/modules/workflow/utils/__tests__/mergeWorkflowDiagrams.test.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/utils/assertUnreachable.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/utils/mergeWorkflowDiagrams.ts

diff --git a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
index 9b50504c7..b6bb9d545 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { FocusEventHandler } from 'react';
+import { FocusEventHandler, useId } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
@@ -10,6 +10,7 @@ import { InputHotkeyScope } from '../types/InputHotkeyScope';
 const MAX_ROWS = 5;
 
 export type TextAreaProps = {
+  label?: string;
   disabled?: boolean;
   minRows?: number;
   onChange?: (value: string) => void;
@@ -18,6 +19,20 @@ export type TextAreaProps = {
   className?: string;
 };
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.font.color.light};
+  display: block;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
 const StyledTextArea = styled(TextareaAutosize)`
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -48,6 +63,7 @@ const StyledTextArea = styled(TextareaAutosize)`
 `;
 
 export const TextArea = ({
+  label,
   disabled,
   placeholder,
   minRows = 1,
@@ -57,6 +73,8 @@ export const TextArea = ({
 }: TextAreaProps) => {
   const computedMinRows = Math.min(minRows, MAX_ROWS);
 
+  const inputId = useId();
+
   const {
     goBackToPreviousHotkeyScope,
     setHotkeyScopeAndMemorizePreviousScope,
@@ -71,18 +89,23 @@ export const TextArea = ({
   };
 
   return (
-    <StyledTextArea
-      placeholder={placeholder}
-      maxRows={MAX_ROWS}
-      minRows={computedMinRows}
-      value={value}
-      onChange={(event) =>
-        onChange?.(turnIntoEmptyStringIfWhitespacesOnly(event.target.value))
-      }
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      disabled={disabled}
-      className={className}
-    />
+    <StyledContainer>
+      {label && <StyledLabel htmlFor={inputId}>{label}</StyledLabel>}
+
+      <StyledTextArea
+        id={inputId}
+        placeholder={placeholder}
+        maxRows={MAX_ROWS}
+        minRows={computedMinRows}
+        value={value}
+        onChange={(event) =>
+          onChange?.(turnIntoEmptyStringIfWhitespacesOnly(event.target.value))
+        }
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        disabled={disabled}
+        className={className}
+      />
+    </StyledContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
index 425ba4f4d..6583f9cbe 100644
--- a/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { ComponentDecorator } from 'twenty-ui';
 
+import { expect } from '@storybook/jest';
+import { userEvent, within } from '@storybook/test';
 import { TextArea, TextAreaProps } from '../TextArea';
 
 type RenderProps = TextAreaProps;
@@ -37,3 +39,20 @@ export const Filled: Story = {
 export const Disabled: Story = {
   args: { disabled: true, value: 'Lorem Ipsum' },
 };
+
+export const WithLabel: Story = {
+  args: { label: 'My Textarea' },
+  play: async () => {
+    const canvas = within(document.body);
+
+    const label = await canvas.findByText('My Textarea');
+
+    expect(label).toBeVisible();
+
+    await userEvent.click(label);
+
+    const input = await canvas.findByRole('textbox');
+
+    expect(input).toHaveFocus();
+  },
+};
diff --git a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStepContent.tsx b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStepContent.tsx
index 9fb362256..3f3734b07 100644
--- a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStepContent.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStepContent.tsx
@@ -1,10 +1,12 @@
-import { WorkflowEditActionForm } from '@/workflow/components/WorkflowEditActionForm';
+import { WorkflowEditActionFormSendEmail } from '@/workflow/components/WorkflowEditActionFormSendEmail';
+import { WorkflowEditActionFormServerlessFunction } from '@/workflow/components/WorkflowEditActionFormServerlessFunction';
 import { WorkflowEditTriggerForm } from '@/workflow/components/WorkflowEditTriggerForm';
 import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 import { useUpdateWorkflowVersionStep } from '@/workflow/hooks/useUpdateWorkflowVersionStep';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/hooks/useUpdateWorkflowVersionTrigger';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
+import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
 import { findStepPositionOrThrow } from '@/workflow/utils/findStepPositionOrThrow';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
@@ -75,19 +77,39 @@ export const RightDrawerWorkflowEditStepContent = ({
     workflow,
   });
 
-  if (stepDefinition.type === 'trigger') {
-    return (
-      <WorkflowEditTriggerForm
-        trigger={stepDefinition.definition}
-        onTriggerUpdate={updateTrigger}
-      />
-    );
+  switch (stepDefinition.type) {
+    case 'trigger': {
+      return (
+        <WorkflowEditTriggerForm
+          trigger={stepDefinition.definition}
+          onTriggerUpdate={updateTrigger}
+        />
+      );
+    }
+    case 'action': {
+      switch (stepDefinition.definition.type) {
+        case 'CODE': {
+          return (
+            <WorkflowEditActionFormServerlessFunction
+              action={stepDefinition.definition}
+              onActionUpdate={updateStep}
+            />
+          );
+        }
+        case 'SEND_EMAIL': {
+          return (
+            <WorkflowEditActionFormSendEmail
+              action={stepDefinition.definition}
+              onActionUpdate={updateStep}
+            />
+          );
+        }
+      }
+    }
   }
 
-  return (
-    <WorkflowEditActionForm
-      action={stepDefinition.definition}
-      onActionUpdate={updateStep}
-    />
+  return assertUnreachable(
+    stepDefinition,
+    `Unsupported step: ${JSON.stringify(stepDefinition)}`,
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNode.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNode.tsx
index 0c0e6ce94..cc5f1a94e 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNode.tsx
@@ -1,8 +1,9 @@
 import { WorkflowDiagramBaseStepNode } from '@/workflow/components/WorkflowDiagramBaseStepNode';
 import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
+import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCode, IconPlaylistAdd } from 'twenty-ui';
+import { IconCode, IconMail, IconPlaylistAdd } from 'twenty-ui';
 
 const StyledStepNodeLabelIconContainer = styled.div`
   align-items: center;
@@ -32,16 +33,33 @@ export const WorkflowDiagramStepNode = ({
           </StyledStepNodeLabelIconContainer>
         );
       }
+      case 'condition': {
+        return null;
+      }
       case 'action': {
-        return (
-          <StyledStepNodeLabelIconContainer>
-            <IconCode size={theme.icon.size.sm} color={theme.color.orange} />
-          </StyledStepNodeLabelIconContainer>
-        );
+        switch (data.actionType) {
+          case 'CODE': {
+            return (
+              <StyledStepNodeLabelIconContainer>
+                <IconCode
+                  size={theme.icon.size.sm}
+                  color={theme.color.orange}
+                />
+              </StyledStepNodeLabelIconContainer>
+            );
+          }
+          case 'SEND_EMAIL': {
+            return (
+              <StyledStepNodeLabelIconContainer>
+                <IconMail size={theme.icon.size.sm} color={theme.color.blue} />
+              </StyledStepNodeLabelIconContainer>
+            );
+          }
+        }
       }
     }
 
-    return null;
+    return assertUnreachable(data);
   };
 
   return (
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormBase.tsx
new file mode 100644
index 000000000..77a50896c
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormBase.tsx
@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+const StyledTriggerHeader = styled.div`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(6)};
+`;
+
+const StyledTriggerHeaderTitle = styled.p`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  font-size: ${({ theme }) => theme.font.size.xl};
+
+  margin: ${({ theme }) => theme.spacing(3)} 0;
+`;
+
+const StyledTriggerHeaderType = styled.p`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  margin: 0;
+`;
+
+const StyledTriggerHeaderIconContainer = styled.div`
+  align-self: flex-start;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const WorkflowEditActionFormBase = ({
+  ActionIcon,
+  actionTitle,
+  actionType,
+  children,
+}: {
+  ActionIcon: React.ReactNode;
+  actionTitle: string;
+  actionType: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <>
+      <StyledTriggerHeader>
+        <StyledTriggerHeaderIconContainer>
+          {ActionIcon}
+        </StyledTriggerHeaderIconContainer>
+
+        <StyledTriggerHeaderTitle>{actionTitle}</StyledTriggerHeaderTitle>
+
+        <StyledTriggerHeaderType>{actionType}</StyledTriggerHeaderType>
+      </StyledTriggerHeader>
+
+      {children}
+    </>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx
new file mode 100644
index 000000000..0760e7d52
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx
@@ -0,0 +1,109 @@
+import { TextArea } from '@/ui/input/components/TextArea';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { WorkflowEditActionFormBase } from '@/workflow/components/WorkflowEditActionFormBase';
+import { WorkflowSendEmailStep } from '@/workflow/types/Workflow';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { IconMail } from 'twenty-ui';
+import { useDebouncedCallback } from 'use-debounce';
+
+const StyledTriggerSettings = styled.div`
+  padding: ${({ theme }) => theme.spacing(6)};
+  display: flex;
+  flex-direction: column;
+  row-gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+type SendEmailFormData = {
+  subject: string;
+  body: string;
+};
+
+export const WorkflowEditActionFormSendEmail = ({
+  action,
+  onActionUpdate,
+}: {
+  action: WorkflowSendEmailStep;
+  onActionUpdate: (action: WorkflowSendEmailStep) => void;
+}) => {
+  const theme = useTheme();
+
+  const form = useForm<SendEmailFormData>({
+    defaultValues: {
+      subject: '',
+      body: '',
+    },
+  });
+
+  useEffect(() => {
+    form.setValue('subject', action.settings.subject ?? '');
+    form.setValue('body', action.settings.template ?? '');
+  }, [action.settings.subject, action.settings.template, form]);
+
+  const saveAction = useDebouncedCallback((formData: SendEmailFormData) => {
+    onActionUpdate({
+      ...action,
+      settings: {
+        ...action.settings,
+        title: formData.subject,
+        subject: formData.subject,
+        template: formData.body,
+      },
+    });
+  }, 1_000);
+
+  useEffect(() => {
+    return () => {
+      saveAction.flush();
+    };
+  }, [saveAction]);
+
+  const handleSave = form.handleSubmit(saveAction);
+
+  return (
+    <WorkflowEditActionFormBase
+      ActionIcon={<IconMail color={theme.color.blue} />}
+      actionTitle="Send Email"
+      actionType="Email"
+    >
+      <StyledTriggerSettings>
+        <Controller
+          name="subject"
+          control={form.control}
+          render={({ field }) => (
+            <TextInput
+              label="Subject"
+              placeholder="Thank you for building such an awesome CRM!"
+              value={field.value}
+              onChange={(email) => {
+                field.onChange(email);
+
+                handleSave();
+              }}
+            />
+          )}
+        />
+
+        <Controller
+          name="body"
+          control={form.control}
+          render={({ field }) => (
+            <TextArea
+              label="Body"
+              placeholder="Thank you so much!"
+              value={field.value}
+              minRows={4}
+              onChange={(email) => {
+                field.onChange(email);
+
+                handleSave();
+              }}
+            />
+          )}
+        />
+      </StyledTriggerSettings>
+    </WorkflowEditActionFormBase>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionForm.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx
similarity index 50%
rename from packages/twenty-front/src/modules/workflow/components/WorkflowEditActionForm.tsx
rename to packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx
index 015952309..74be4c0e8 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionForm.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx
@@ -1,41 +1,11 @@
 import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { WorkflowAction } from '@/workflow/types/Workflow';
+import { WorkflowEditActionFormBase } from '@/workflow/components/WorkflowEditActionFormBase';
+import { WorkflowCodeStep } from '@/workflow/types/Workflow';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconCode, isDefined } from 'twenty-ui';
 
-const StyledTriggerHeader = styled.div`
-  background-color: ${({ theme }) => theme.background.secondary};
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
-  display: flex;
-  flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(6)};
-`;
-
-const StyledTriggerHeaderTitle = styled.p`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  font-size: ${({ theme }) => theme.font.size.xl};
-
-  margin: ${({ theme }) => theme.spacing(3)} 0;
-`;
-
-const StyledTriggerHeaderType = styled.p`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  margin: 0;
-`;
-
-const StyledTriggerHeaderIconContainer = styled.div`
-  align-self: flex-start;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${({ theme }) => theme.background.transparent.light};
-  border-radius: ${({ theme }) => theme.border.radius.xs};
-  padding: ${({ theme }) => theme.spacing(1)};
-`;
-
 const StyledTriggerSettings = styled.div`
   padding: ${({ theme }) => theme.spacing(6)};
   display: flex;
@@ -43,12 +13,12 @@ const StyledTriggerSettings = styled.div`
   row-gap: ${({ theme }) => theme.spacing(4)};
 `;
 
-export const WorkflowEditActionForm = ({
+export const WorkflowEditActionFormServerlessFunction = ({
   action,
   onActionUpdate,
 }: {
-  action: WorkflowAction;
-  onActionUpdate: (trigger: WorkflowAction) => void;
+  action: WorkflowCodeStep;
+  onActionUpdate: (trigger: WorkflowCodeStep) => void;
 }) => {
   const theme = useTheme();
 
@@ -67,19 +37,11 @@ export const WorkflowEditActionForm = ({
   ];
 
   return (
-    <>
-      <StyledTriggerHeader>
-        <StyledTriggerHeaderIconContainer>
-          <IconCode color={theme.color.orange} />
-        </StyledTriggerHeaderIconContainer>
-
-        <StyledTriggerHeaderTitle>
-          Code - Serverless Function
-        </StyledTriggerHeaderTitle>
-
-        <StyledTriggerHeaderType>Code</StyledTriggerHeaderType>
-      </StyledTriggerHeader>
-
+    <WorkflowEditActionFormBase
+      ActionIcon={<IconCode color={theme.color.orange} />}
+      actionTitle="Code - Serverless Function"
+      actionType="Code"
+    >
       <StyledTriggerSettings>
         <Select
           dropdownId="workflow-edit-action-function"
@@ -98,6 +60,6 @@ export const WorkflowEditActionForm = ({
           }}
         />
       </StyledTriggerSettings>
-    </>
+    </WorkflowEditActionFormBase>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx
index 6171f2d64..49e957d9f 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx
@@ -1,10 +1,16 @@
+import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
-import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
+import {
+  WorkflowVersion,
+  WorkflowWithCurrentVersion,
+} from '@/workflow/types/Workflow';
+
 import { addCreateStepNodes } from '@/workflow/utils/addCreateStepNodes';
 import { getWorkflowVersionDiagram } from '@/workflow/utils/getWorkflowVersionDiagram';
+import { mergeWorkflowDiagrams } from '@/workflow/utils/mergeWorkflowDiagrams';
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';
 
 type WorkflowEffectProps = {
@@ -23,6 +29,34 @@ export const WorkflowEffect = ({
     setWorkflowId(workflowId);
   }, [setWorkflowId, workflowId]);
 
+  const computeAndMergeNewWorkflowDiagram = useRecoilCallback(
+    ({ snapshot, set }) => {
+      return (currentVersion: WorkflowVersion) => {
+        const previousWorkflowDiagram = getSnapshotValue(
+          snapshot,
+          workflowDiagramState,
+        );
+
+        const nextWorkflowDiagram = getWorkflowVersionDiagram(currentVersion);
+
+        let mergedWorkflowDiagram = nextWorkflowDiagram;
+        if (isDefined(previousWorkflowDiagram)) {
+          mergedWorkflowDiagram = mergeWorkflowDiagrams(
+            previousWorkflowDiagram,
+            nextWorkflowDiagram,
+          );
+        }
+
+        const workflowDiagramWithCreateStepNodes = addCreateStepNodes(
+          mergedWorkflowDiagram,
+        );
+
+        set(workflowDiagramState, workflowDiagramWithCreateStepNodes);
+      };
+    },
+    [],
+  );
+
   useEffect(() => {
     const currentVersion = workflowWithCurrentVersion?.currentVersion;
     if (!isDefined(currentVersion)) {
@@ -31,12 +65,12 @@ export const WorkflowEffect = ({
       return;
     }
 
-    const lastWorkflowDiagram = getWorkflowVersionDiagram(currentVersion);
-    const workflowDiagramWithCreateStepNodes =
-      addCreateStepNodes(lastWorkflowDiagram);
-
-    setWorkflowDiagram(workflowDiagramWithCreateStepNodes);
-  }, [setWorkflowDiagram, workflowWithCurrentVersion?.currentVersion]);
+    computeAndMergeNewWorkflowDiagram(currentVersion);
+  }, [
+    computeAndMergeNewWorkflowDiagram,
+    setWorkflowDiagram,
+    workflowWithCurrentVersion?.currentVersion,
+  ]);
 
   return null;
 };
diff --git a/packages/twenty-front/src/modules/workflow/constants/Actions.ts b/packages/twenty-front/src/modules/workflow/constants/Actions.ts
index 53c988420..b3415d391 100644
--- a/packages/twenty-front/src/modules/workflow/constants/Actions.ts
+++ b/packages/twenty-front/src/modules/workflow/constants/Actions.ts
@@ -11,4 +11,9 @@ export const ACTIONS: Array<{
     type: 'CODE',
     icon: IconSettingsAutomation,
   },
+  {
+    label: 'Send Email',
+    type: 'SEND_EMAIL',
+    icon: IconSettingsAutomation,
+  },
 ];
diff --git a/packages/twenty-front/src/modules/workflow/hooks/useUpdateWorkflowVersionStep.tsx b/packages/twenty-front/src/modules/workflow/hooks/useUpdateWorkflowVersionStep.tsx
index 91d9cd491..9ed7caa45 100644
--- a/packages/twenty-front/src/modules/workflow/hooks/useUpdateWorkflowVersionStep.tsx
+++ b/packages/twenty-front/src/modules/workflow/hooks/useUpdateWorkflowVersionStep.tsx
@@ -25,7 +25,7 @@ export const useUpdateWorkflowVersionStep = ({
     workflowId: workflow.id,
   });
 
-  const updateStep = async (updatedStep: WorkflowStep) => {
+  const updateStep = async <T extends WorkflowStep>(updatedStep: T) => {
     if (!isDefined(workflow.currentVersion)) {
       throw new Error('Can not update an undefined workflow version.');
     }
diff --git a/packages/twenty-front/src/modules/workflow/types/Workflow.ts b/packages/twenty-front/src/modules/workflow/types/Workflow.ts
index 45500e219..7eb1a4839 100644
--- a/packages/twenty-front/src/modules/workflow/types/Workflow.ts
+++ b/packages/twenty-front/src/modules/workflow/types/Workflow.ts
@@ -1,4 +1,4 @@
-type WorkflowBaseSettingsType = {
+type BaseWorkflowStepSettings = {
   errorHandlingOptions: {
     retryOnFailure: {
       value: boolean;
@@ -9,27 +9,42 @@ type WorkflowBaseSettingsType = {
   };
 };
 
-export type WorkflowCodeSettingsType = WorkflowBaseSettingsType & {
+export type WorkflowCodeStepSettings = BaseWorkflowStepSettings & {
   serverlessFunctionId: string;
 };
 
-export type WorkflowActionType = 'CODE';
+export type WorkflowSendEmailStepSettings = BaseWorkflowStepSettings & {
+  subject?: string;
+  template?: string;
+  title?: string;
+  callToAction?: {
+    value: string;
+    href: string;
+  };
+};
 
-type CommonWorkflowAction = {
+type BaseWorkflowStep = {
   id: string;
   name: string;
   valid: boolean;
 };
 
-type WorkflowCodeAction = CommonWorkflowAction & {
+export type WorkflowCodeStep = BaseWorkflowStep & {
   type: 'CODE';
-  settings: WorkflowCodeSettingsType;
+  settings: WorkflowCodeStepSettings;
 };
 
-export type WorkflowAction = WorkflowCodeAction;
+export type WorkflowSendEmailStep = BaseWorkflowStep & {
+  type: 'SEND_EMAIL';
+  settings: WorkflowSendEmailStepSettings;
+};
+
+export type WorkflowAction = WorkflowCodeStep | WorkflowSendEmailStep;
 
 export type WorkflowStep = WorkflowAction;
 
+export type WorkflowActionType = WorkflowAction['type'];
+
 export type WorkflowStepType = WorkflowStep['type'];
 
 export type WorkflowTriggerType = 'DATABASE_EVENT';
diff --git a/packages/twenty-front/src/modules/workflow/types/WorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/types/WorkflowDiagram.ts
index 237daab24..977c74d10 100644
--- a/packages/twenty-front/src/modules/workflow/types/WorkflowDiagram.ts
+++ b/packages/twenty-front/src/modules/workflow/types/WorkflowDiagram.ts
@@ -1,3 +1,4 @@
+import { WorkflowActionType } from '@/workflow/types/Workflow';
 import { Edge, Node } from '@xyflow/react';
 
 export type WorkflowDiagramNode = Node<WorkflowDiagramNodeData>;
@@ -8,10 +9,16 @@ export type WorkflowDiagram = {
   edges: Array<WorkflowDiagramEdge>;
 };
 
-export type WorkflowDiagramStepNodeData = {
-  nodeType: 'trigger' | 'condition' | 'action';
-  label: string;
-};
+export type WorkflowDiagramStepNodeData =
+  | {
+      nodeType: 'trigger' | 'condition';
+      label: string;
+    }
+  | {
+      nodeType: 'action';
+      actionType: WorkflowActionType;
+      label: string;
+    };
 
 export type WorkflowDiagramCreateStepNodeData = {
   nodeType: 'create-step';
diff --git a/packages/twenty-front/src/modules/workflow/utils/__tests__/generateWorkflowDiagram.test.ts b/packages/twenty-front/src/modules/workflow/utils/__tests__/generateWorkflowDiagram.test.ts
index ee4643fcb..ebf4f3c21 100644
--- a/packages/twenty-front/src/modules/workflow/utils/__tests__/generateWorkflowDiagram.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/__tests__/generateWorkflowDiagram.test.ts
@@ -72,6 +72,7 @@ describe('generateWorkflowDiagram', () => {
     for (const [index, step] of steps.entries()) {
       expect(stepNodes[index].data).toEqual({
         nodeType: 'action',
+        actionType: 'CODE',
         label: step.name,
       });
     }
diff --git a/packages/twenty-front/src/modules/workflow/utils/__tests__/mergeWorkflowDiagrams.test.ts b/packages/twenty-front/src/modules/workflow/utils/__tests__/mergeWorkflowDiagrams.test.ts
new file mode 100644
index 000000000..38e3baabd
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/utils/__tests__/mergeWorkflowDiagrams.test.ts
@@ -0,0 +1,72 @@
+import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { mergeWorkflowDiagrams } from '../mergeWorkflowDiagrams';
+
+it('Preserves the properties defined in the previous version but not in the next one', () => {
+  const previousDiagram: WorkflowDiagram = {
+    nodes: [
+      {
+        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        id: '1',
+        position: { x: 0, y: 0 },
+        selected: true,
+      },
+    ],
+    edges: [],
+  };
+  const nextDiagram: WorkflowDiagram = {
+    nodes: [
+      {
+        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        id: '1',
+        position: { x: 0, y: 0 },
+      },
+    ],
+    edges: [],
+  };
+
+  expect(mergeWorkflowDiagrams(previousDiagram, nextDiagram)).toEqual({
+    nodes: [
+      {
+        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        id: '1',
+        position: { x: 0, y: 0 },
+        selected: true,
+      },
+    ],
+    edges: [],
+  });
+});
+
+it('Replaces duplicated properties with the next value', () => {
+  const previousDiagram: WorkflowDiagram = {
+    nodes: [
+      {
+        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        id: '1',
+        position: { x: 0, y: 0 },
+      },
+    ],
+    edges: [],
+  };
+  const nextDiagram: WorkflowDiagram = {
+    nodes: [
+      {
+        data: { nodeType: 'action', label: '2', actionType: 'CODE' },
+        id: '1',
+        position: { x: 0, y: 0 },
+      },
+    ],
+    edges: [],
+  };
+
+  expect(mergeWorkflowDiagrams(previousDiagram, nextDiagram)).toEqual({
+    nodes: [
+      {
+        data: { nodeType: 'action', label: '2', actionType: 'CODE' },
+        id: '1',
+        position: { x: 0, y: 0 },
+      },
+    ],
+    edges: [],
+  });
+});
diff --git a/packages/twenty-front/src/modules/workflow/utils/assertUnreachable.ts b/packages/twenty-front/src/modules/workflow/utils/assertUnreachable.ts
new file mode 100644
index 000000000..042337aee
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/utils/assertUnreachable.ts
@@ -0,0 +1,3 @@
+export const assertUnreachable = (x: never, errorMessage?: string): never => {
+  throw new Error(errorMessage ?? "Didn't expect to get here.");
+};
diff --git a/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts
index 4d0aa8995..ff5a211e6 100644
--- a/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts
@@ -33,6 +33,7 @@ export const generateWorkflowDiagram = ({
       id: nodeId,
       data: {
         nodeType: 'action',
+        actionType: step.type,
         label: step.name,
       },
       position: {
diff --git a/packages/twenty-front/src/modules/workflow/utils/getStepDefaultDefinition.ts b/packages/twenty-front/src/modules/workflow/utils/getStepDefaultDefinition.ts
index 9cb8b27e8..0047ff139 100644
--- a/packages/twenty-front/src/modules/workflow/utils/getStepDefaultDefinition.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/getStepDefaultDefinition.ts
@@ -26,6 +26,27 @@ export const getStepDefaultDefinition = (
         },
       };
     }
+    case 'SEND_EMAIL': {
+      return {
+        id: newStepId,
+        name: 'Send Email',
+        type: 'SEND_EMAIL',
+        valid: false,
+        settings: {
+          subject: 'hello',
+          title: 'hello',
+          template: '{{title}}',
+          errorHandlingOptions: {
+            continueOnFailure: {
+              value: false,
+            },
+            retryOnFailure: {
+              value: false,
+            },
+          },
+        },
+      };
+    }
     default: {
       throw new Error(`Unknown type: ${type}`);
     }
diff --git a/packages/twenty-front/src/modules/workflow/utils/mergeWorkflowDiagrams.ts b/packages/twenty-front/src/modules/workflow/utils/mergeWorkflowDiagrams.ts
new file mode 100644
index 000000000..b52ca8f72
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/utils/mergeWorkflowDiagrams.ts
@@ -0,0 +1,33 @@
+import {
+  WorkflowDiagram,
+  WorkflowDiagramNode,
+} from '@/workflow/types/WorkflowDiagram';
+
+const nodePropertiesToPreserve: Array<keyof WorkflowDiagramNode> = ['selected'];
+
+export const mergeWorkflowDiagrams = (
+  previousDiagram: WorkflowDiagram,
+  nextDiagram: WorkflowDiagram,
+): WorkflowDiagram => {
+  const lastNodes = nextDiagram.nodes.map((nextNode) => {
+    const previousNode = previousDiagram.nodes.find(
+      (previousNode) => previousNode.id === nextNode.id,
+    );
+
+    const nodeWithPreservedProperties = nodePropertiesToPreserve.reduce(
+      (nodeToSet, propertyToPreserve) => {
+        return Object.assign(nodeToSet, {
+          [propertyToPreserve]: previousNode?.[propertyToPreserve],
+        });
+      },
+      {} as Partial<WorkflowDiagramNode>,
+    );
+
+    return Object.assign(nodeWithPreservedProperties, nextNode);
+  });
+
+  return {
+    nodes: lastNodes,
+    edges: nextDiagram.edges,
+  };
+};
diff --git a/packages/twenty-front/src/modules/workflow/utils/replaceStep.ts b/packages/twenty-front/src/modules/workflow/utils/replaceStep.ts
index b08e2d33c..0d4d47977 100644
--- a/packages/twenty-front/src/modules/workflow/utils/replaceStep.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/replaceStep.ts
@@ -1,14 +1,14 @@
 import { WorkflowStep } from '@/workflow/types/Workflow';
 import { findStepPositionOrThrow } from '@/workflow/utils/findStepPositionOrThrow';
 
-export const replaceStep = ({
+export const replaceStep = <T extends WorkflowStep>({
   steps: stepsInitial,
   stepId,
   stepToReplace,
 }: {
   steps: Array<WorkflowStep>;
   stepId: string;
-  stepToReplace: Partial<Omit<WorkflowStep, 'id'>>;
+  stepToReplace: Partial<Omit<T, 'id'>>;
 }) => {
   const steps = structuredClone(stepsInitial);