diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx
new file mode 100644
index 000000000..88c97ea0e
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const StyledStepListContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+
+ padding-block: ${({ theme }) => theme.spacing(1)};
+ padding-inline: ${({ theme }) => theme.spacing(2)};
+`;
+
+export { StyledStepListContainer as RightDrawerStepListContainer };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx
new file mode 100644
index 000000000..43280c813
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const StyledSelectStepTitle = 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 { StyledSelectStepTitle as RightDrawerWorkflowSelectStepTitle };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
index c21e1b0e4..73fd1a4f6 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
@@ -2,28 +2,9 @@ import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
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 { MenuItemCommand, useIcons } from 'twenty-ui';
-
-const StyledActionListContainer = styled.div`
- display: flex;
- flex-direction: column;
- height: 100%;
- overflow-y: auto;
-
- padding-block: ${({ theme }) => theme.spacing(1)};
- 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)};
-`;
+import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
+import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
export const RightDrawerWorkflowSelectActionContent = ({
workflow,
@@ -36,8 +17,10 @@ export const RightDrawerWorkflowSelectActionContent = ({
});
return (
-
- Records
+
+
+ Records
+
{RECORD_ACTIONS.map((action) => (
createStep(action.type)}
/>
))}
- Other
+
+ Other
+
{OTHER_ACTIONS.map((action) => (
createStep(action.type)}
/>
))}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
index 676962e76..5a5cf5011 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
@@ -8,29 +8,10 @@ import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/Other
import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
-import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';
-import { MenuItem, useIcons } from 'twenty-ui';
-
-const StyledActionListContainer = styled.div`
- display: flex;
- flex-direction: column;
- height: 100%;
- overflow-y: auto;
-
- padding-block: ${({ theme }) => theme.spacing(1)};
- 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)};
-`;
+import { MenuItemCommand, useIcons } from 'twenty-ui';
+import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
+import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
export const RightDrawerWorkflowSelectTriggerTypeContent = ({
workflow,
@@ -46,10 +27,12 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
return (
-
- Data
+
+
+ Data
+
{DATABASE_TRIGGER_TYPES.map((action) => (
-
))}
- Others
+
+ Others
+
{OTHER_TRIGGER_TYPES.map((action) => (
-
))}
-
+
);
};