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.

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>
   );
 };