Add workflow email action (twentyhq#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.
harshit078 · Oct 14, 2024 · 3eba8ea · 3eba8ea
1 parent ef09475
commit 3eba8ea
Show file tree

Hide file tree

Showing 19 changed files with 512 additions and 106 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}
+    </>
+  );
+};