Fix action selection design (#9748)

<img width="1512" alt="Capture d’écran 2025-01-20 à 16 24 22"
src="https://github.com/user-attachments/assets/fc1ce873-1b7b-49bc-9ab3-105e16adde2e"
/>

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx

@@ -1,6 +1,7 @@
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
-import { ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/Actions';
+import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
+import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 import styled from '@emotion/styled';
 import { MenuItem } from 'twenty-ui';
 
@@ -14,6 +15,16 @@ const StyledActionListContainer = styled.div`
   padding-inline: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledSectionTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
 export const RightDrawerWorkflowSelectActionContent = ({
   workflow,
 }: {
@@ -25,14 +36,22 @@ export const RightDrawerWorkflowSelectActionContent = ({
 
   return (
     <StyledActionListContainer>
-      {ACTIONS.map((action) => (
+      <StyledSectionTitle>Records</StyledSectionTitle>
+      {RECORD_ACTIONS.map((action) => (
         <MenuItem
           key={action.type}
           LeftIcon={action.icon}
           text={action.label}
-          onClick={() => {
+          onClick={() => createStep(action.type)}
-            return createStep(action.type);
+        />
-          }}
+      ))}
+      <StyledSectionTitle>Other</StyledSectionTitle>
+      {OTHER_ACTIONS.map((action) => (
+        <MenuItem
+          key={action.type}
+          LeftIcon={action.icon}
+          text={action.label}
+          onClick={() => createStep(action.type)}
         />
       ))}
     </StyledActionListContainer>

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/Actions.ts

@@ -1,38 +0,0 @@
-import { WorkflowStepType } from '@/workflow/types/Workflow';
-import {
-  IconAddressBook,
-  IconComponent,
-  IconSettingsAutomation,
-} from 'twenty-ui';
-
-export const ACTIONS: Array<{
-  label: string;
-  type: WorkflowStepType;
-  icon: IconComponent;
-}> = [
-  {
-    label: 'Serverless Function',
-    type: 'CODE',
-    icon: IconSettingsAutomation,
-  },
-  {
-    label: 'Send Email',
-    type: 'SEND_EMAIL',
-    icon: IconSettingsAutomation,
-  },
-  {
-    label: 'Create Record',
-    type: 'CREATE_RECORD',
-    icon: IconAddressBook,
-  },
-  {
-    label: 'Update Record',
-    type: 'UPDATE_RECORD',
-    icon: IconAddressBook,
-  },
-  {
-    label: 'Delete Record',
-    type: 'DELETE_RECORD',
-    icon: IconAddressBook,
-  },
-];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/OtherActions.ts

@@ -0,0 +1,19 @@
+import { WorkflowStepType } from '@/workflow/types/Workflow';
+import { IconCode, IconComponent, IconSend } from 'twenty-ui';
+
+export const OTHER_ACTIONS: Array<{
+  label: string;
+  type: WorkflowStepType;
+  icon: IconComponent;
+}> = [
+  {
+    label: 'Send Email',
+    type: 'SEND_EMAIL',
+    icon: IconSend,
+  },
+  {
+    label: 'Code',
+    type: 'CODE',
+    icon: IconCode,
+  },
+];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts

@@ -0,0 +1,24 @@
+import { WorkflowStepType } from '@/workflow/types/Workflow';
+import { IconComponent, IconPlus, IconRefreshDot, IconTrash } from 'twenty-ui';
+
+export const RECORD_ACTIONS: Array<{
+  label: string;
+  type: WorkflowStepType;
+  icon: IconComponent;
+}> = [
+  {
+    label: 'Create Record',
+    type: 'CREATE_RECORD',
+    icon: IconPlus,
+  },
+  {
+    label: 'Update Record',
+    type: 'UPDATE_RECORD',
+    icon: IconRefreshDot,
+  },
+  {
+    label: 'Delete Record',
+    type: 'DELETE_RECORD',
+    icon: IconTrash,
+  },
+];

packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx

@@ -26,8 +26,10 @@ const StyledSectionTitle = styled.span`
   color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(1)}
+  padding-top: ${({ theme }) => theme.spacing(2)};
-    ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
 `;
 
 export const RightDrawerWorkflowSelectTriggerTypeContent = ({

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerTypes.ts

@@ -1,6 +1,6 @@
 import { WorkflowTriggerType } from '@/workflow/types/Workflow';
 import { DatabaseTriggerName } from '@/workflow/workflow-trigger/constants/DatabaseTriggerName';
-import { IconClick, IconComponent, IconPlus, IconTrash } from 'twenty-ui';
+import { IconComponent, IconPlus, IconRefreshDot, IconTrash } from 'twenty-ui';
 
 export const DATABASE_TRIGGER_TYPES: Array<{
   name: DatabaseTriggerName;
@@ -15,7 +15,7 @@ export const DATABASE_TRIGGER_TYPES: Array<{
   {
     name: DatabaseTriggerName.RECORD_IS_UPDATED,
     type: 'DATABASE_EVENT',
-    icon: IconClick,
+    icon: IconRefreshDot,
   },
   {
     name: DatabaseTriggerName.RECORD_IS_DELETED,

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/OtherTriggerTypes.ts

@@ -1,5 +1,5 @@
 import { WorkflowTriggerType } from '@/workflow/types/Workflow';
-import { IconComponent, IconSettingsAutomation } from 'twenty-ui';
+import { IconClick, IconComponent } from 'twenty-ui';
 
 export const OTHER_TRIGGER_TYPES: Array<{
   name: string;
@@ -9,6 +9,6 @@ export const OTHER_TRIGGER_TYPES: Array<{
   {
     name: 'Launch manually',
     type: 'MANUAL',
-    icon: IconSettingsAutomation,
+    icon: IconClick,
   },
 ];

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -210,6 +210,7 @@ export {
   IconPuzzle,
   IconQuestionMark,
   IconRefresh,
+  IconRefreshDot,
   IconRelationManyToMany,
   IconRelationOneToMany,
   IconRelationOneToOne,