Fix workflow icons

twentyhq · Jan 23, 2025 · a1c3a8e · a1c3a8e
1 parent 5e1402a
commit a1c3a8e
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 68 deletions.
diff --git a/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx b/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx
@@ -1,29 +1,23 @@
 import { WorkflowDiagramBaseStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconPlaylistAdd } from 'twenty-ui';
 
 const StyledStepNodeLabelIconContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.transparent.light};
   border-radius: ${({ theme }) => theme.spacing(1)};
   display: flex;
   justify-content: center;
-  padding: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(3)};
 `;
 
 export const WorkflowDiagramEmptyTrigger = () => {
-  const theme = useTheme();
-
   return (
     <WorkflowDiagramBaseStepNode
       name="Add a Trigger"
       nodeType="trigger"
       variant="placeholder"
       Icon={
-        <StyledStepNodeLabelIconContainer>
-          <IconPlaylistAdd size={16} color={theme.font.color.tertiary} />
-        </StyledStepNodeLabelIconContainer>
+        <StyledStepNodeLabelIconContainer/>
       }
     />
   );

diff --git a/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx b/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
@@ -4,6 +4,7 @@ import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/W
 import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconPlaylistAdd } from 'twenty-ui';
 
 const StyledStepNodeLabelIconContainer = styled.div`
   align-items: center;
@@ -23,7 +24,7 @@ export const WorkflowDiagramStepNodeBase = ({
 }) => {
   const theme = useTheme();
 
-  const Icon = getWorkflowNodeIcon(data);
+  const Icon = getWorkflowNodeIcon(data) ?? IconPlaylistAdd;
 
   const renderStepIcon = () => {
     switch (data.nodeType) {
@@ -69,9 +70,7 @@ export const WorkflowDiagramStepNodeBase = ({
               </StyledStepNodeLabelIconContainer>
             );
           }
-          case 'CREATE_RECORD':
-          case 'UPDATE_RECORD':
-          case 'DELETE_RECORD': {
+          default: {
             return (
               <StyledStepNodeLabelIconContainer>
                 <Icon
@@ -85,8 +84,6 @@ export const WorkflowDiagramStepNodeBase = ({
         }
       }
     }
-
-    return assertUnreachable(data);
   };
 
   return (

diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts
@@ -3,6 +3,7 @@ import {
   WorkflowTriggerType,
 } from '@/workflow/types/Workflow';
 import { Edge, Node } from '@xyflow/react';
+import { IconComponent } from 'twenty-ui';
 
 export type WorkflowDiagramNode = Node<WorkflowDiagramNodeData>;
 export type WorkflowDiagramEdge = Edge;
@@ -17,6 +18,7 @@ export type WorkflowDiagramStepNodeData =
       nodeType: 'trigger';
       triggerType: WorkflowTriggerType;
       name: string;
+      icon?: IconComponent;
     }
   | {
       nodeType: 'action';

diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts
@@ -8,9 +8,11 @@ import {
   WorkflowDiagramNode,
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { DATABASE_TRIGGER_EVENTS } from '@/workflow/workflow-trigger/constants/DatabaseTriggerEvents';
+import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes';
+import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes';
 
 import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
-import { isDefined } from 'twenty-ui';
+import { IconComponent, isDefined } from 'twenty-ui';
 import { v4 } from 'uuid';
 
 export const generateWorkflowDiagram = ({
@@ -58,10 +60,14 @@ export const generateWorkflowDiagram = ({
 
   if (isDefined(trigger)) {
     let triggerLabel: string;
+    let triggerIcon: IconComponent | undefined;
 
     switch (trigger.type) {
       case 'MANUAL': {
         triggerLabel = 'Manual Trigger';
+        triggerIcon = OTHER_TRIGGER_TYPES.find(
+          (item) => item.type === trigger.type,
+        )?.icon;
 
         break;
       }
@@ -75,6 +81,10 @@ export const generateWorkflowDiagram = ({
             (event) => event.value === triggerEvent.event,
           )?.label ?? '';
 
+        triggerIcon = DATABASE_TRIGGER_TYPES.find(
+          (event) => triggerLabel === event.name,
+        )?.icon;
+
         break;
       }
       default: {
@@ -91,6 +101,7 @@ export const generateWorkflowDiagram = ({
         nodeType: 'trigger',
         triggerType: trigger.type,
         name: isDefined(trigger.name) ? trigger.name : triggerLabel,
+        icon: triggerIcon,
       },
       position: {
         x: 0,

diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIcon.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIcon.ts
@@ -1,52 +1,29 @@
-import {
-  WorkflowActionType,
-  WorkflowTriggerType,
-} from '@/workflow/types/Workflow';
 import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
-import {
-  IconAddressBook,
-  IconCode,
-  IconHandMove,
-  IconMail,
-  IconPlaylistAdd,
-} from 'twenty-ui';
+import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
+import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 
 export const getWorkflowNodeIcon = (
-  data:
-    | {
-        nodeType: 'trigger';
-        triggerType: WorkflowTriggerType;
-      }
-    | {
-        nodeType: 'action';
-        actionType: WorkflowActionType;
-      },
+  data: WorkflowDiagramStepNodeData,
 ) => {
   switch (data.nodeType) {
     case 'trigger': {
-      switch (data.triggerType) {
-        case 'DATABASE_EVENT': {
-          return IconPlaylistAdd;
-        }
-        case 'MANUAL': {
-          return IconHandMove;
-        }
-      }
-
-      return assertUnreachable(data.triggerType);
+      return data.icon;
     }
     case 'action': {
       switch (data.actionType) {
-        case 'CODE': {
-          return IconCode;
-        }
+        case 'CODE':
         case 'SEND_EMAIL': {
-          return IconMail;
+          return OTHER_ACTIONS.find(
+            (action) => action.type === data.actionType,
+          )?.icon;
         }
         case 'CREATE_RECORD':
         case 'UPDATE_RECORD':
         case 'DELETE_RECORD': {
-          return IconAddressBook;
+          return RECORD_ACTIONS.find(
+            (action) => action.type === data.actionType,
+          )?.icon;
         }
       }
 

diff --git a/...orkflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx b/...orkflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx
@@ -7,14 +7,15 @@ import { useViewOrDefaultViewFromPrefetchedViews } from '@/views/hooks/useViewOr
 import { WorkflowCreateRecordAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
+import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import {
   HorizontalSeparator,
-  IconAddressBook,
+  IconPlus,
   isDefined,
-  useIcons,
+  useIcons
 } from 'twenty-ui';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
@@ -162,6 +163,9 @@ export const WorkflowEditActionFormCreateRecord = ({
   }, [saveAction]);
 
   const headerTitle = isDefined(action.name) ? action.name : `Create Record`;
+  const headerIcon = RECORD_ACTIONS.find(
+    (item) => item.type === action.type,
+  )?.icon ?? IconPlus;
 
   return (
     <>
@@ -176,7 +180,7 @@ export const WorkflowEditActionFormCreateRecord = ({
             name: newName,
           });
         }}
-        Icon={IconAddressBook}
+        Icon={headerIcon}
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType="Action"

diff --git a/...orkflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx b/...orkflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx
@@ -7,12 +7,13 @@ import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import {
   HorizontalSeparator,
-  IconAddressBook,
+  IconTrash,
   isDefined,
-  useIcons,
+  useIcons
 } from 'twenty-ui';
 
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
+import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -110,6 +111,9 @@ export const WorkflowEditActionFormDeleteRecord = ({
   }, [saveAction]);
 
   const headerTitle = isDefined(action.name) ? action.name : `Delete Record`;
+  const headerIcon = RECORD_ACTIONS.find(
+    (item) => item.type === action.type,
+  )?.icon ?? IconTrash;
 
   return (
     <>
@@ -124,7 +128,7 @@ export const WorkflowEditActionFormDeleteRecord = ({
             name: newName,
           });
         }}
-        Icon={IconAddressBook}
+        Icon={headerIcon}
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType="Action"

diff --git a/...s/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx b/...s/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx
@@ -9,11 +9,12 @@ import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { WorkflowSendEmailAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
+import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconMail, IconPlus, isDefined } from 'twenty-ui';
+import { IconPlus, IconSend, isDefined } from 'twenty-ui';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -165,6 +166,9 @@ export const WorkflowEditActionFormSendEmail = ({
   });
 
   const headerTitle = isDefined(action.name) ? action.name : 'Send Email';
+  const headerIcon = OTHER_ACTIONS.find(
+    (item) => item.type === action.type,
+  )?.icon ?? IconSend;
 
   return (
     !loading && (
@@ -180,7 +184,7 @@ export const WorkflowEditActionFormSendEmail = ({
               name: newName,
             });
           }}
-          Icon={IconMail}
+          Icon={headerIcon}
           iconColor={theme.color.blue}
           initialTitle={headerTitle}
           headerType="Email"

diff --git a/...w/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx b/...w/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx
@@ -22,6 +22,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields';
+import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
 import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
 import { getWrongExportedFunctionMarkers } from '@/workflow/workflow-steps/workflow-actions/utils/getWrongExportedFunctionMarkers';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
@@ -270,6 +271,11 @@ export const WorkflowEditActionFormServerlessFunction = ({
     setFunctionInput(action.settings.input.serverlessFunctionInput);
   }, [action]);
 
+  const headerTitle = isDefined(action.name) ? action.name : 'Code - Serverless Function';
+  const headerIcon = OTHER_ACTIONS.find(
+    (item) => item.type === action.type,
+  )?.icon ?? IconCode;
+
   return (
     !loading && (
       <StyledContainer>
@@ -284,9 +290,9 @@ export const WorkflowEditActionFormServerlessFunction = ({
           onTitleChange={(newName: string) => {
             updateAction({ name: newName });
           }}
-          Icon={IconCode}
+          Icon={headerIcon}
           iconColor={theme.color.orange}
-          initialTitle={action.name || 'Code - Serverless Function'}
+          initialTitle={headerTitle}
           headerType="Code"
         />
         <WorkflowStepBody>

diff --git a/...orkflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx b/...orkflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx
@@ -5,9 +5,9 @@ import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import {
   HorizontalSeparator,
-  IconAddressBook,
+  IconRefreshDot,
   isDefined,
-  useIcons,
+  useIcons
 } from 'twenty-ui';
 
 import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
@@ -16,6 +16,7 @@ import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-typ
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
 import { WorkflowSingleRecordPicker } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowSingleRecordPicker';
+import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
@@ -157,6 +158,9 @@ export const WorkflowEditActionFormUpdateRecord = ({
   }, [saveAction]);
 
   const headerTitle = isDefined(action.name) ? action.name : `Update Record`;
+  const headerIcon = RECORD_ACTIONS.find(
+    (item) => item.type === action.type,
+  )?.icon ?? IconRefreshDot;
 
   return (
     <>
@@ -171,7 +175,7 @@ export const WorkflowEditActionFormUpdateRecord = ({
             name: newName,
           });
         }}
-        Icon={IconAddressBook}
+        Icon={headerIcon}
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType="Action"