Update trigger selection design (#9717)

https://github.com/user-attachments/assets/62bc705a-2f69-4ce7-986f-0208154c9965

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

@@ -3,8 +3,9 @@ import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
+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 { TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/TriggerTypes';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
 import styled from '@emotion/styled';
@@ -21,6 +22,14 @@ 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: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(1)}
+    ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(1)};
+`;
+
 export const RightDrawerWorkflowSelectTriggerTypeContent = ({
   workflow,
 }: {
@@ -35,14 +44,37 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
 
   return (
     <StyledActionListContainer>
-      {TRIGGER_TYPES.map((action) => (
+      <StyledSectionTitle>Data</StyledSectionTitle>
+      {DATABASE_TRIGGER_TYPES.map((action) => (
         <MenuItem
-          key={action.type}
+          key={action.name}
           LeftIcon={action.icon}
           text={action.name}
           onClick={async () => {
             await updateTrigger(
               getTriggerDefaultDefinition({
+                name: action.name,
+                type: action.type,
+                activeObjectMetadataItems,
+              }),
+            );
+
+            setWorkflowSelectedNode(TRIGGER_STEP_ID);
+
+            openRightDrawer(RightDrawerPages.WorkflowStepEdit);
+          }}
+        />
+      ))}
+      <StyledSectionTitle>Others</StyledSectionTitle>
+      {OTHER_TRIGGER_TYPES.map((action) => (
+        <MenuItem
+          key={action.name}
+          LeftIcon={action.icon}
+          text={action.name}
+          onClick={async () => {
+            await updateTrigger(
+              getTriggerDefaultDefinition({
+                name: action.name,
                 type: action.type,
                 activeObjectMetadataItems,
               }),

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

@@ -4,7 +4,7 @@ import { WorkflowDatabaseEventTrigger } from '@/workflow/types/Workflow';
 import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
-import { OBJECT_EVENT_TRIGGERS } from '@/workflow/workflow-trigger/constants/ObjectEventTriggers';
+import { DATABASE_TRIGGER_EVENTS } from '@/workflow/workflow-trigger/constants/DatabaseTriggerEvents';
 import { useTheme } from '@emotion/react';
 import { IconPlaylistAdd, isDefined } from 'twenty-ui';
 
@@ -29,35 +29,30 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
 
   const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
 
-  const triggerEvent = isDefined(trigger)
-    ? splitWorkflowTriggerEventName(trigger.settings.eventName)
-    : undefined;
+  const triggerEvent = splitWorkflowTriggerEventName(
+    trigger.settings.eventName,
+  );
 
   const availableMetadata: Array<SelectOption<string>> =
     activeObjectMetadataItems.map((item) => ({
       label: item.labelPlural,
       value: item.nameSingular,
     }));
-  const recordTypeMetadata = isDefined(triggerEvent)
-    ? activeObjectMetadataItems.find(
-        (item) => item.nameSingular === triggerEvent.objectType,
-      )
-    : undefined;
 
   const selectedEvent = isDefined(triggerEvent)
-    ? OBJECT_EVENT_TRIGGERS.find(
+    ? DATABASE_TRIGGER_EVENTS.find(
         (availableEvent) => availableEvent.value === triggerEvent.event,
       )
     : undefined;
 
   const headerTitle = isDefined(trigger.name)
     ? trigger.name
-    : isDefined(recordTypeMetadata) && isDefined(selectedEvent)
-      ? `When a ${recordTypeMetadata.labelSingular} is ${selectedEvent.label}`
+    : isDefined(selectedEvent)
+      ? selectedEvent.label
       : '-';
 
   const headerType = isDefined(selectedEvent)
-    ? `Trigger · Record is ${selectedEvent.label}`
+    ? `Trigger · ${selectedEvent.label}`
     : '-';
 
   return (
@@ -92,57 +87,13 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
               return;
             }
 
-            triggerOptions.onTriggerUpdate(
-              isDefined(trigger) && isDefined(triggerEvent)
-                ? {
-                    ...trigger,
-                    settings: {
-                      ...trigger.settings,
-                      eventName: `${updatedRecordType}.${triggerEvent.event}`,
-                    },
-                  }
-                : {
-                    name: headerTitle,
-                    type: 'DATABASE_EVENT',
-                    settings: {
-                      eventName: `${updatedRecordType}.${OBJECT_EVENT_TRIGGERS[0].value}`,
-                      outputSchema: {},
-                    },
-                  },
-            );
-          }}
-        />
-        <Select
-          dropdownId="workflow-edit-trigger-event-type"
-          label="Event type"
-          fullWidth
-          value={triggerEvent?.event}
-          emptyOption={{ label: 'Select an option', value: '' }}
-          options={OBJECT_EVENT_TRIGGERS}
-          disabled={triggerOptions.readonly}
-          onChange={(updatedEvent) => {
-            if (triggerOptions.readonly === true) {
-              return;
-            }
-
-            triggerOptions.onTriggerUpdate(
-              isDefined(trigger) && isDefined(triggerEvent)
-                ? {
-                    ...trigger,
-                    settings: {
-                      ...trigger.settings,
-                      eventName: `${triggerEvent.objectType}.${updatedEvent}`,
-                    },
-                  }
-                : {
-                    name: headerTitle,
-                    type: 'DATABASE_EVENT',
-                    settings: {
-                      eventName: `${availableMetadata?.[0].value}.${updatedEvent}`,
-                      outputSchema: {},
-                    },
-                  },
-            );
+            triggerOptions.onTriggerUpdate({
+              ...trigger,
+              settings: {
+                ...trigger.settings,
+                eventName: `${updatedRecordType}.${triggerEvent.event}`,
+              },
+            });
           }}
         />
       </WorkflowStepBody>