Refacto workflow folders (#9302)

- Create separated folders for sections
- Add components
- Add utils and clean old ones
- Add constants
- Rename search variables folder and components

Next steps:
- clean hooks
- clean states

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx

@@ -5,7 +5,7 @@ import { TextVariableEditor } from '@/object-record/record-field/form-types/comp
 import { useTextVariableEditor } from '@/object-record/record-field/form-types/hooks/useTextVariableEditor';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { InputLabel } from '@/ui/input/components/InputLabel';
-import { parseEditorContent } from '@/workflow/search-variables/utils/parseEditorContent';
+import { parseEditorContent } from '@/workflow/workflow-variables/utils/parseEditorContent';
 import { useId } from 'react';
 import { isDefined } from 'twenty-ui';
 

packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx

@@ -1,5 +1,5 @@
 import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
-import { extractVariableLabel } from '@/workflow/search-variables/utils/extractVariableLabel';
+import { extractVariableLabel } from '@/workflow/workflow-variables/utils/extractVariableLabel';
 import styled from '@emotion/styled';
 
 export const StyledContainer = styled.div`

packages/twenty-front/src/modules/object-record/record-field/form-types/hooks/useTextVariableEditor.ts

@@ -1,5 +1,5 @@
-import { initializeEditorContent } from '@/workflow/search-variables/utils/initializeEditorContent';
+import { initializeEditorContent } from '@/workflow/workflow-variables/utils/initializeEditorContent';
-import { VariableTag } from '@/workflow/search-variables/utils/variableTag';
+import { VariableTag } from '@/workflow/workflow-variables/utils/variableTag';
 import Document from '@tiptap/extension-document';
 import HardBreak from '@tiptap/extension-hard-break';
 import Paragraph from '@tiptap/extension-paragraph';

packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx

@@ -10,10 +10,10 @@ import { CardType } from '@/object-record/record-show/types/CardType';
 import { ShowPageActivityContainer } from '@/ui/layout/show-page/components/ShowPageActivityContainer';
 import { WorkflowRunOutputVisualizer } from '@/workflow/components/WorkflowRunOutputVisualizer';
 import { WorkflowRunVersionVisualizer } from '@/workflow/components/WorkflowRunVersionVisualizer';
-import { WorkflowVersionVisualizer } from '@/workflow/components/WorkflowVersionVisualizer';
+import { WorkflowVersionVisualizer } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizer';
-import { WorkflowVersionVisualizerEffect } from '@/workflow/components/WorkflowVersionVisualizerEffect';
+import { WorkflowVersionVisualizerEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizerEffect';
-import { WorkflowVisualizer } from '@/workflow/components/WorkflowVisualizer';
+import { WorkflowVisualizer } from '@/workflow/workflow-diagram/components/WorkflowVisualizer';
-import { WorkflowVisualizerEffect } from '@/workflow/components/WorkflowVisualizerEffect';
+import { WorkflowVisualizerEffect } from '@/workflow/workflow-diagram/components/WorkflowVisualizerEffect';
 import styled from '@emotion/styled';
 
 const StyledGreyBox = styled.div<{ isInRightDrawer?: boolean }>`

packages/twenty-front/src/modules/serverless-functions/utils/getDefaultFunctionInputFromInputSchema.ts

@@ -1,5 +1,5 @@
 import { InputSchema } from '@/workflow/types/InputSchema';
-import { FunctionInput } from '@/workflow/types/FunctionInput';
+import { FunctionInput } from '@/workflow/workflow-actions/types/FunctionInput';
 import { isDefined } from '~/utils/isDefined';
 
 export const getDefaultFunctionInputFromInputSchema = (

packages/twenty-front/src/modules/serverless-functions/utils/getFunctionInputFromSourceCode.ts

@@ -1,6 +1,6 @@
 import { getDefaultFunctionInputFromInputSchema } from '@/serverless-functions/utils/getDefaultFunctionInputFromInputSchema';
 import { getFunctionInputSchema } from '@/serverless-functions/utils/getFunctionInputSchema';
-import { FunctionInput } from '@/workflow/types/FunctionInput';
+import { FunctionInput } from '@/workflow/workflow-actions/types/FunctionInput';
 import { isObject } from '@sniptt/guards';
 import { isDefined } from 'twenty-ui';
 

packages/twenty-front/src/modules/serverless-functions/utils/getFunctionOutputSchema.ts

@@ -1,6 +1,6 @@
-import { BaseOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
-import { isObject } from '@sniptt/guards';
 import { InputSchemaPropertyType } from '@/workflow/types/InputSchema';
+import { BaseOutputSchema } from '@/workflow/workflow-variables/types/StepOutputSchema';
+import { isObject } from '@sniptt/guards';
 import { isDefined } from 'twenty-ui';
 
 const getValueType = (value: any): InputSchemaPropertyType => {

packages/twenty-front/src/modules/serverless-functions/utils/mergeDefaultFunctionInputAndFunctionInput.ts

@@ -1,4 +1,4 @@
-import { FunctionInput } from '@/workflow/types/FunctionInput';
+import { FunctionInput } from '@/workflow/workflow-actions/types/FunctionInput';
 import { isObject } from '@sniptt/guards';
 
 export const mergeDefaultFunctionInputAndFunctionInput = ({

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -10,10 +10,10 @@ import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isR
 import { RightDrawerContainer } from '@/ui/layout/right-drawer/components/RightDrawerContainer';
 import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
 import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
-import { RightDrawerWorkflowEditStep } from '@/workflow/components/RightDrawerWorkflowEditStep';
+import { RightDrawerWorkflowSelectAction } from '@/workflow/workflow-actions/components/RightDrawerWorkflowSelectAction';
-import { RightDrawerWorkflowSelectAction } from '@/workflow/components/RightDrawerWorkflowSelectAction';
+import { RightDrawerWorkflowEditStep } from '@/workflow/workflow-step/components/RightDrawerWorkflowEditStep';
-import { RightDrawerWorkflowSelectTriggerType } from '@/workflow/components/RightDrawerWorkflowSelectTriggerType';
+import { RightDrawerWorkflowViewStep } from '@/workflow/workflow-step/components/RightDrawerWorkflowViewStep';
-import { RightDrawerWorkflowViewStep } from '@/workflow/components/RightDrawerWorkflowViewStep';
+import { RightDrawerWorkflowSelectTriggerType } from '@/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerType';
 import { isDefined } from 'twenty-ui';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeReadonly.tsx

@@ -1,10 +0,0 @@
-import { WorkflowDiagramStepNodeBase } from '@/workflow/components/WorkflowDiagramStepNodeBase';
-import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
-
-export const WorkflowDiagramStepNodeReadonly = ({
-  data,
-}: {
-  data: WorkflowDiagramStepNodeData;
-}) => {
-  return <WorkflowDiagramStepNodeBase data={data} />;
-};

packages/twenty-front/src/modules/workflow/components/WorkflowRunVersionVisualizer.tsx

@@ -1,6 +1,6 @@
-import { WorkflowVersionVisualizer } from '@/workflow/components/WorkflowVersionVisualizer';
-import { WorkflowVersionVisualizerEffect } from '@/workflow/components/WorkflowVersionVisualizerEffect';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
+import { WorkflowVersionVisualizer } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizer';
+import { WorkflowVersionVisualizerEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizerEffect';
 import { isDefined } from 'twenty-ui';
 
 export const WorkflowRunVersionVisualizer = ({

packages/twenty-front/src/modules/workflow/hooks/useDeleteStep.ts

@@ -1,13 +1,13 @@
-import {
-  WorkflowWithCurrentVersion,
-  WorkflowVersion,
-} from '@/workflow/types/Workflow';
-import { useDeleteWorkflowVersionStep } from '@/workflow/hooks/useDeleteWorkflowVersionStep';
-import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { useDeleteWorkflowVersionStep } from '@/workflow/hooks/useDeleteWorkflowVersionStep';
+import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
+import {
+  WorkflowVersion,
+  WorkflowWithCurrentVersion,
+} from '@/workflow/types/Workflow';
+import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
 
 export const useDeleteStep = ({
   workflow,

packages/twenty-front/src/modules/workflow/hooks/useTriggerNodeSelection.ts

@@ -2,7 +2,7 @@ import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/work
 import {
   WorkflowDiagramEdge,
   WorkflowDiagramNode,
-} from '@/workflow/types/WorkflowDiagram';
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { useReactFlow } from '@xyflow/react';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';

packages/twenty-front/src/modules/workflow/search-variables/constants/SearchVariablesDropdownId.ts

@@ -1 +0,0 @@
-export const SEARCH_VARIABLES_DROPDOWN_ID = 'search-variables';

packages/twenty-front/src/modules/workflow/utils/__tests__/insertStep.test.ts

@@ -1,265 +0,0 @@
-import { WorkflowStep, WorkflowVersion } from '@/workflow/types/Workflow';
-import { insertStep } from '../insertStep';
-
-describe('insertStep', () => {
-  it('returns a deep copy of the provided steps array instead of mutating it', () => {
-    const workflowVersionInitial = {
-      __typename: 'WorkflowVersion',
-      status: 'ACTIVE',
-      createdAt: '',
-      id: '1',
-      name: '',
-      steps: [],
-      trigger: {
-        name: 'Company created',
-        settings: { eventName: 'company.created', outputSchema: {} },
-        type: 'DATABASE_EVENT',
-      },
-      updatedAt: '',
-      workflowId: '',
-    } satisfies WorkflowVersion;
-    const stepToAdd: WorkflowStep = {
-      id: 'step-1',
-      name: '',
-      settings: {
-        errorHandlingOptions: {
-          retryOnFailure: { value: true },
-          continueOnFailure: { value: false },
-        },
-        input: {
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-          serverlessFunctionVersion: '1',
-          serverlessFunctionInput: {},
-        },
-        outputSchema: {},
-      },
-      type: 'CODE',
-      valid: true,
-    };
-
-    const stepsUpdated = insertStep({
-      steps: workflowVersionInitial.steps,
-      stepToAdd,
-      parentStepId: undefined,
-    });
-
-    expect(workflowVersionInitial.steps).not.toBe(stepsUpdated);
-  });
-
-  it('adds the step when the steps array is empty', () => {
-    const workflowVersionInitial = {
-      __typename: 'WorkflowVersion',
-      status: 'ACTIVE',
-      createdAt: '',
-      id: '1',
-      name: '',
-      steps: [],
-      trigger: {
-        name: 'Company created',
-        settings: { eventName: 'company.created', outputSchema: {} },
-        type: 'DATABASE_EVENT',
-      },
-      updatedAt: '',
-      workflowId: '',
-    } satisfies WorkflowVersion;
-    const stepToAdd: WorkflowStep = {
-      id: 'step-1',
-      name: '',
-      settings: {
-        errorHandlingOptions: {
-          retryOnFailure: { value: true },
-          continueOnFailure: { value: false },
-        },
-        input: {
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-          serverlessFunctionVersion: '1',
-          serverlessFunctionInput: {},
-        },
-        outputSchema: {},
-      },
-      type: 'CODE',
-      valid: true,
-    };
-
-    const stepsUpdated = insertStep({
-      steps: workflowVersionInitial.steps,
-      stepToAdd,
-      parentStepId: undefined,
-    });
-
-    const expectedUpdatedSteps: Array<WorkflowStep> = [stepToAdd];
-    expect(stepsUpdated).toEqual(expectedUpdatedSteps);
-  });
-
-  it('adds the step at the end of a non-empty steps array', () => {
-    const workflowVersionInitial = {
-      __typename: 'WorkflowVersion',
-      status: 'ACTIVE',
-      createdAt: '',
-      id: '1',
-      name: '',
-      steps: [
-        {
-          id: 'step-1',
-          name: '',
-          settings: {
-            errorHandlingOptions: {
-              retryOnFailure: { value: true },
-              continueOnFailure: { value: false },
-            },
-            input: {
-              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-              serverlessFunctionVersion: '1',
-              serverlessFunctionInput: {},
-            },
-            outputSchema: {},
-          },
-          type: 'CODE',
-          valid: true,
-        },
-        {
-          id: 'step-2',
-          name: '',
-          settings: {
-            errorHandlingOptions: {
-              retryOnFailure: { value: true },
-              continueOnFailure: { value: false },
-            },
-            input: {
-              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-              serverlessFunctionVersion: '1',
-              serverlessFunctionInput: {},
-            },
-            outputSchema: {},
-          },
-          type: 'CODE',
-          valid: true,
-        },
-      ],
-      trigger: {
-        name: 'Company created',
-        settings: { eventName: 'company.created', outputSchema: {} },
-        type: 'DATABASE_EVENT',
-      },
-      updatedAt: '',
-      workflowId: '',
-    } satisfies WorkflowVersion;
-    const stepToAdd: WorkflowStep = {
-      id: 'step-3',
-      name: '',
-      settings: {
-        errorHandlingOptions: {
-          retryOnFailure: { value: true },
-          continueOnFailure: { value: false },
-        },
-        input: {
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-          serverlessFunctionVersion: '1',
-          serverlessFunctionInput: {},
-        },
-        outputSchema: {},
-      },
-      type: 'CODE',
-      valid: true,
-    };
-
-    const stepsUpdated = insertStep({
-      steps: workflowVersionInitial.steps,
-      stepToAdd,
-      parentStepId: workflowVersionInitial.steps[1].id, // Note the selected step.
-    });
-
-    const expectedUpdatedSteps: Array<WorkflowStep> = [
-      workflowVersionInitial.steps[0],
-      workflowVersionInitial.steps[1],
-      stepToAdd,
-    ];
-    expect(stepsUpdated).toEqual(expectedUpdatedSteps);
-  });
-
-  it('adds the step in the middle of a non-empty steps array', () => {
-    const workflowVersionInitial = {
-      __typename: 'WorkflowVersion',
-      status: 'ACTIVE',
-      createdAt: '',
-      id: '1',
-      name: '',
-      steps: [
-        {
-          id: 'step-1',
-          name: '',
-          settings: {
-            errorHandlingOptions: {
-              retryOnFailure: { value: true },
-              continueOnFailure: { value: false },
-            },
-            input: {
-              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-              serverlessFunctionVersion: '1',
-              serverlessFunctionInput: {},
-            },
-            outputSchema: {},
-          },
-          type: 'CODE',
-          valid: true,
-        },
-        {
-          id: 'step-2',
-          name: '',
-          settings: {
-            errorHandlingOptions: {
-              retryOnFailure: { value: true },
-              continueOnFailure: { value: false },
-            },
-            input: {
-              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-              serverlessFunctionVersion: '1',
-              serverlessFunctionInput: {},
-            },
-            outputSchema: {},
-          },
-          type: 'CODE',
-          valid: true,
-        },
-      ],
-      trigger: {
-        name: 'Company created',
-        settings: { eventName: 'company.created', outputSchema: {} },
-        type: 'DATABASE_EVENT',
-      },
-      updatedAt: '',
-      workflowId: '',
-    } satisfies WorkflowVersion;
-    const stepToAdd: WorkflowStep = {
-      id: 'step-3',
-      name: '',
-      settings: {
-        errorHandlingOptions: {
-          retryOnFailure: { value: true },
-          continueOnFailure: { value: false },
-        },
-        input: {
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-          serverlessFunctionVersion: '1',
-          serverlessFunctionInput: {},
-        },
-        outputSchema: {},
-      },
-      type: 'CODE',
-      valid: true,
-    };
-
-    const stepsUpdated = insertStep({
-      steps: workflowVersionInitial.steps,
-      stepToAdd,
-      parentStepId: workflowVersionInitial.steps[0].id, // Note the selected step.
-    });
-
-    const expectedUpdatedSteps: Array<WorkflowStep> = [
-      workflowVersionInitial.steps[0],
-      stepToAdd,
-      workflowVersionInitial.steps[1],
-    ];
-    expect(stepsUpdated).toEqual(expectedUpdatedSteps);
-  });
-});

packages/twenty-front/src/modules/workflow/utils/__tests__/removeStep.test.ts

@@ -1,130 +0,0 @@
-import { WorkflowStep, WorkflowVersion } from '@/workflow/types/Workflow';
-import { removeStep } from '../removeStep';
-
-it('returns a deep copy of the provided steps array instead of mutating it', () => {
-  const stepToBeRemoved = {
-    id: 'step-1',
-    name: '',
-    settings: {
-      errorHandlingOptions: {
-        retryOnFailure: { value: true },
-        continueOnFailure: { value: false },
-      },
-      input: {
-        serverlessFunctionId: 'first',
-        serverlessFunctionVersion: '1',
-        serverlessFunctionInput: {},
-      },
-      outputSchema: {},
-    },
-    type: 'CODE',
-    valid: true,
-  } satisfies WorkflowStep;
-  const workflowVersionInitial = {
-    __typename: 'WorkflowVersion',
-    status: 'ACTIVE',
-    createdAt: '',
-    id: '1',
-    name: '',
-    steps: [stepToBeRemoved],
-    trigger: {
-      name: 'Company created',
-      settings: { eventName: 'company.created', outputSchema: {} },
-      type: 'DATABASE_EVENT',
-    },
-    updatedAt: '',
-    workflowId: '',
-  } satisfies WorkflowVersion;
-
-  const stepsUpdated = removeStep({
-    steps: workflowVersionInitial.steps,
-    stepId: stepToBeRemoved.id,
-  });
-
-  expect(workflowVersionInitial.steps).not.toBe(stepsUpdated);
-});
-
-it('removes a step in a non-empty steps array', () => {
-  const stepToBeRemoved: WorkflowStep = {
-    id: 'step-2',
-    name: '',
-    settings: {
-      errorHandlingOptions: {
-        retryOnFailure: { value: true },
-        continueOnFailure: { value: false },
-      },
-      input: {
-        serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-        serverlessFunctionVersion: '1',
-        serverlessFunctionInput: {},
-      },
-      outputSchema: {},
-    },
-    type: 'CODE',
-    valid: true,
-  };
-  const workflowVersionInitial = {
-    __typename: 'WorkflowVersion',
-    status: 'ACTIVE',
-    createdAt: '',
-    id: '1',
-    name: '',
-    steps: [
-      {
-        id: 'step-1',
-        name: '',
-        settings: {
-          errorHandlingOptions: {
-            retryOnFailure: { value: true },
-            continueOnFailure: { value: false },
-          },
-          input: {
-            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-            serverlessFunctionVersion: '1',
-            serverlessFunctionInput: {},
-          },
-          outputSchema: {},
-        },
-        type: 'CODE',
-        valid: true,
-      },
-      stepToBeRemoved,
-      {
-        id: 'step-3',
-        name: '',
-        settings: {
-          errorHandlingOptions: {
-            retryOnFailure: { value: true },
-            continueOnFailure: { value: false },
-          },
-          input: {
-            serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-            serverlessFunctionVersion: '1',
-            serverlessFunctionInput: {},
-          },
-          outputSchema: {},
-        },
-        type: 'CODE',
-        valid: true,
-      },
-    ],
-    trigger: {
-      name: 'Company created',
-      settings: { eventName: 'company.created', outputSchema: {} },
-      type: 'DATABASE_EVENT',
-    },
-    updatedAt: '',
-    workflowId: '',
-  } satisfies WorkflowVersion;
-
-  const stepsUpdated = removeStep({
-    steps: workflowVersionInitial.steps,
-    stepId: stepToBeRemoved.id,
-  });
-
-  const expectedUpdatedSteps: Array<WorkflowStep> = [
-    workflowVersionInitial.steps[0],
-    workflowVersionInitial.steps[2],
-  ];
-  expect(stepsUpdated).toEqual(expectedUpdatedSteps);
-});

packages/twenty-front/src/modules/workflow/utils/__tests__/replaceStep.test.ts

@@ -1,157 +0,0 @@
-import { WorkflowStep, WorkflowVersion } from '@/workflow/types/Workflow';
-import { replaceStep } from '../replaceStep';
-
-describe('replaceStep', () => {
-  it('returns a deep copy of the provided steps array instead of mutating it', () => {
-    const stepToBeReplaced = {
-      id: 'step-1',
-      name: '',
-      settings: {
-        errorHandlingOptions: {
-          retryOnFailure: { value: true },
-          continueOnFailure: { value: false },
-        },
-        input: {
-          serverlessFunctionId: 'first',
-          serverlessFunctionVersion: '1',
-          serverlessFunctionInput: {},
-        },
-        outputSchema: {},
-      },
-      type: 'CODE',
-      valid: true,
-    } satisfies WorkflowStep;
-    const workflowVersionInitial = {
-      __typename: 'WorkflowVersion',
-      status: 'ACTIVE',
-      createdAt: '',
-      id: '1',
-      name: '',
-      steps: [stepToBeReplaced],
-      trigger: {
-        name: 'Company created',
-        settings: { eventName: 'company.created', outputSchema: {} },
-        type: 'DATABASE_EVENT',
-      },
-      updatedAt: '',
-      workflowId: '',
-    } satisfies WorkflowVersion;
-
-    const stepsUpdated = replaceStep({
-      steps: workflowVersionInitial.steps,
-      stepToReplace: {
-        settings: {
-          errorHandlingOptions: {
-            retryOnFailure: { value: true },
-            continueOnFailure: { value: false },
-          },
-          input: {
-            serverlessFunctionId: 'second',
-            serverlessFunctionVersion: '1',
-            serverlessFunctionInput: {},
-          },
-          outputSchema: {},
-        },
-      },
-      stepId: stepToBeReplaced.id,
-    });
-
-    expect(workflowVersionInitial.steps).not.toBe(stepsUpdated);
-  });
-
-  it('replaces a step in a non-empty steps array', () => {
-    const stepToBeReplaced: WorkflowStep = {
-      id: 'step-2',
-      name: '',
-      settings: {
-        errorHandlingOptions: {
-          retryOnFailure: { value: true },
-          continueOnFailure: { value: false },
-        },
-        input: {
-          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-          serverlessFunctionVersion: '1',
-          serverlessFunctionInput: {},
-        },
-        outputSchema: {},
-      },
-      type: 'CODE',
-      valid: true,
-    };
-    const workflowVersionInitial = {
-      __typename: 'WorkflowVersion',
-      status: 'ACTIVE',
-      createdAt: '',
-      id: '1',
-      name: '',
-      steps: [
-        {
-          id: 'step-1',
-          name: '',
-          settings: {
-            errorHandlingOptions: {
-              retryOnFailure: { value: true },
-              continueOnFailure: { value: false },
-            },
-            input: {
-              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-              serverlessFunctionVersion: '1',
-              serverlessFunctionInput: {},
-            },
-            outputSchema: {},
-          },
-          type: 'CODE',
-          valid: true,
-        },
-        stepToBeReplaced,
-        {
-          id: 'step-3',
-          name: '',
-          settings: {
-            errorHandlingOptions: {
-              retryOnFailure: { value: true },
-              continueOnFailure: { value: false },
-            },
-            input: {
-              serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
-              serverlessFunctionVersion: '1',
-              serverlessFunctionInput: {},
-            },
-            outputSchema: {},
-          },
-          type: 'CODE',
-          valid: true,
-        },
-      ],
-      trigger: {
-        name: 'Company created',
-        settings: {
-          eventName: 'company.created',
-          outputSchema: {},
-        },
-        type: 'DATABASE_EVENT',
-      },
-      updatedAt: '',
-      workflowId: '',
-    } satisfies WorkflowVersion;
-
-    const updatedStepName = "that's another name";
-    const stepsUpdated = replaceStep({
-      stepId: stepToBeReplaced.id,
-      steps: workflowVersionInitial.steps,
-      stepToReplace: {
-        name: updatedStepName,
-      },
-    });
-
-    const expectedUpdatedSteps: Array<WorkflowStep> = [
-      workflowVersionInitial.steps[0],
-      {
-        ...stepToBeReplaced,
-        name: updatedStepName,
-      },
-      workflowVersionInitial.steps[2],
-    ];
-    expect(stepsUpdated).toEqual(expectedUpdatedSteps);
-  });
-});

packages/twenty-front/src/modules/workflow/utils/findStepPosition.ts

@@ -1,5 +1,5 @@
-import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 import { WorkflowStep } from '@/workflow/types/Workflow';
+import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
 import { isDefined } from 'twenty-ui';
 
 /**

packages/twenty-front/src/modules/workflow/utils/findStepPositionOrThrow.ts

@@ -1,21 +0,0 @@
-import { WorkflowStep } from '@/workflow/types/Workflow';
-import { findStepPosition } from '@/workflow/utils/findStepPosition';
-import { isDefined } from 'twenty-ui';
-
-/**
- * This function returns the reference of the array where the step should be positioned
- * and at which index.
- */
-export const findStepPositionOrThrow = (props: {
-  steps: Array<WorkflowStep>;
-  stepId: string | undefined;
-}): { steps: Array<WorkflowStep>; index: number } => {
-  const result = findStepPosition(props);
-  if (!isDefined(result)) {
-    throw new Error(
-      `Couldn't locate the step. Unreachable step id: ${props.stepId}.`,
-    );
-  }
-
-  return result;
-};

packages/twenty-front/src/modules/workflow/utils/getStepDefinitionOrThrow.ts

@@ -1,6 +1,6 @@
-import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 import { WorkflowVersion } from '@/workflow/types/Workflow';
 import { findStepPosition } from '@/workflow/utils/findStepPosition';
+import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
 import { isDefined } from 'twenty-ui';
 
 export const getStepDefinitionOrThrow = ({

packages/twenty-front/src/modules/workflow/utils/insertStep.ts

@@ -1,27 +0,0 @@
-import { WorkflowStep } from '@/workflow/types/Workflow';
-import { findStepPositionOrThrow } from '@/workflow/utils/findStepPositionOrThrow';
-
-export const insertStep = ({
-  steps: stepsInitial,
-  stepToAdd,
-  parentStepId,
-}: {
-  steps: Array<WorkflowStep>;
-  parentStepId: string | undefined;
-  stepToAdd: WorkflowStep;
-}): Array<WorkflowStep> => {
-  const steps = structuredClone(stepsInitial);
-
-  const parentStepPosition = findStepPositionOrThrow({
-    steps,
-    stepId: parentStepId,
-  });
-
-  parentStepPosition.steps.splice(
-    parentStepPosition.index + 1, // The "+ 1" means that we add the step after its parent and not before.
-    0,
-    stepToAdd,
-  );
-
-  return steps;
-};

packages/twenty-front/src/modules/workflow/utils/removeStep.ts

@@ -1,21 +0,0 @@
-import { WorkflowStep } from '@/workflow/types/Workflow';
-import { findStepPositionOrThrow } from '@/workflow/utils/findStepPositionOrThrow';
-
-export const removeStep = ({
-  steps: stepsInitial,
-  stepId,
-}: {
-  steps: Array<WorkflowStep>;
-  stepId: string | undefined;
-}) => {
-  const steps = structuredClone(stepsInitial);
-
-  const parentStepPosition = findStepPositionOrThrow({
-    steps,
-    stepId,
-  });
-
-  parentStepPosition.steps.splice(parentStepPosition.index, 1);
-
-  return steps;
-};

packages/twenty-front/src/modules/workflow/utils/replaceStep.ts

@@ -1,26 +0,0 @@
-import { WorkflowStep } from '@/workflow/types/Workflow';
-import { findStepPositionOrThrow } from '@/workflow/utils/findStepPositionOrThrow';
-
-export const replaceStep = <T extends WorkflowStep>({
-  steps: stepsInitial,
-  stepId,
-  stepToReplace,
-}: {
-  steps: Array<WorkflowStep>;
-  stepId: string;
-  stepToReplace: Partial<Omit<T, 'id'>>;
-}) => {
-  const steps = structuredClone(stepsInitial);
-
-  const parentStepPosition = findStepPositionOrThrow({
-    steps,
-    stepId,
-  });
-
-  parentStepPosition.steps[parentStepPosition.index] = {
-    ...parentStepPosition.steps[parentStepPosition.index],
-    ...stepToReplace,
-  };
-
-  return steps;
-};

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

@@ -1,6 +1,6 @@
-import { RightDrawerWorkflowSelectActionContent } from '@/workflow/components/RightDrawerWorkflowSelectActionContent';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { RightDrawerWorkflowSelectActionContent } from '@/workflow/workflow-actions/components/RightDrawerWorkflowSelectActionContent';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 

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

@@ -1,6 +1,6 @@
-import { ACTIONS } from '@/workflow/constants/Actions';
 import { useCreateStep } from '@/workflow/hooks/useCreateStep';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
+import { ACTIONS } from '@/workflow/workflow-actions/constants/Actions';
 import styled from '@emotion/styled';
 import { MenuItem } from 'twenty-ui';
 

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

@@ -3,10 +3,10 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
 import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
-import { WorkflowVariablePicker } from '@/workflow/components/WorkflowVariablePicker';
 import { WorkflowCreateRecordAction } from '@/workflow/types/Workflow';
+import { WorkflowStepBody } from '@/workflow/workflow-step/components/WorkflowStepBody';
+import { WorkflowStepHeader } from '@/workflow/workflow-step/components/WorkflowStepHeader';
+import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import {

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

@@ -1,8 +1,8 @@
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { WorkflowSingleRecordPicker } from '@/workflow/components/WorkflowSingleRecordPicker';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
 import { WorkflowDeleteRecordAction } from '@/workflow/types/Workflow';
+import { WorkflowSingleRecordPicker } from '@/workflow/workflow-actions/components/WorkflowSingleRecordPicker';
+import { WorkflowStepHeader } from '@/workflow/workflow-step/components/WorkflowStepHeader';
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import {
@@ -12,7 +12,7 @@ import {
   useIcons,
 } from 'twenty-ui';
 
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
+import { WorkflowStepBody } from '@/workflow/workflow-step/components/WorkflowStepBody';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 

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

@@ -5,11 +5,11 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
-import { WorkflowVariablePicker } from '@/workflow/components/WorkflowVariablePicker';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { WorkflowSendEmailAction } from '@/workflow/types/Workflow';
+import { WorkflowStepBody } from '@/workflow/workflow-step/components/WorkflowStepBody';
+import { WorkflowStepHeader } from '@/workflow/workflow-step/components/WorkflowStepHeader';
+import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';

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

@@ -1,12 +1,12 @@
 import { useGetAvailablePackages } from '@/settings/serverless-functions/hooks/useGetAvailablePackages';
 import { useServerlessFunctionUpdateFormState } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
 import { useUpdateOneServerlessFunction } from '@/settings/serverless-functions/hooks/useUpdateOneServerlessFunction';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
 import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { WorkflowCodeAction } from '@/workflow/types/Workflow';
-import { setNestedValue } from '@/workflow/utils/setNestedValue';
+import { setNestedValue } from '@/workflow/workflow-actions/utils/setNestedValue';
+import { WorkflowStepHeader } from '@/workflow/workflow-step/components/WorkflowStepHeader';
 
 import { CmdEnterActionButton } from '@/action-menu/components/CmdEnterActionButton';
 import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult';
@@ -19,11 +19,11 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
-import { WorkflowVariablePicker } from '@/workflow/components/WorkflowVariablePicker';
 import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
 import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields';
 import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
+import { WorkflowStepBody } from '@/workflow/workflow-step/components/WorkflowStepBody';
+import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Monaco } from '@monaco-editor/react';

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

@@ -1,11 +1,11 @@
-import { FunctionInput } from '@/workflow/types/FunctionInput';
-import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
-import { isObject } from '@sniptt/guards';
-import { InputLabel } from '@/ui/input/components/InputLabel';
-import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
-import styled from '@emotion/styled';
-import { ReactNode } from 'react';
 import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer';
+import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { InputLabel } from '@/ui/input/components/InputLabel';
+import { FunctionInput } from '@/workflow/workflow-actions/types/FunctionInput';
+import styled from '@emotion/styled';
+import { isObject } from '@sniptt/guards';
+import { ReactNode } from 'react';
 
 const StyledContainer = styled.div`
   display: inline-flex;

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

@@ -13,10 +13,10 @@ import {
 import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
 import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput';
 import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-types/components/FormMultiSelectFieldInput';
-import { WorkflowSingleRecordPicker } from '@/workflow/components/WorkflowSingleRecordPicker';
+import { WorkflowSingleRecordPicker } from '@/workflow/workflow-actions/components/WorkflowSingleRecordPicker';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
+import { WorkflowStepBody } from '@/workflow/workflow-step/components/WorkflowStepBody';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
+import { WorkflowStepHeader } from '@/workflow/workflow-step/components/WorkflowStepHeader';
-import { WorkflowVariablePicker } from '@/workflow/components/WorkflowVariablePicker';
+import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

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

@@ -2,11 +2,11 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { RecordChip } from '@/object-record/components/RecordChip';
 import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import {
   RecordId,
   Variable,
-} from '@/workflow/components/WorkflowSingleRecordPicker';
+} from '@/workflow/workflow-actions/components/WorkflowSingleRecordPicker';
-import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import styled from '@emotion/styled';
 
 const StyledRecordChip = styled(RecordChip)`

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

@@ -16,9 +16,9 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { WorkflowSingleRecordFieldChip } from '@/workflow/components/WorkflowSingleRecordFieldChip';
-import { SearchVariablesDropdown } from '@/workflow/search-variables/components/SearchVariablesDropdown';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
+import { WorkflowSingleRecordFieldChip } from '@/workflow/workflow-actions/components/WorkflowSingleRecordFieldChip';
+import { WorkflowVariablesDropdown } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdown';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useCallback } from 'react';
@@ -186,7 +186,7 @@ export const WorkflowSingleRecordPicker = ({
           </DropdownScope>
         </StyledFormSelectContainer>
         <StyledSearchVariablesDropdownContainer>
-          <SearchVariablesDropdown
+          <WorkflowVariablesDropdown
             inputId={variablesDropdownId}
             onVariableSelect={handleVariableTagInsert}
             disabled={false}

packages/twenty-front/src/modules/workflow/workflow-actions/utils/__tests__/setNestedValue.test.ts

@@ -1,4 +1,4 @@
-import { setNestedValue } from '@/workflow/utils/setNestedValue';
+import { setNestedValue } from '@/workflow/workflow-actions/utils/setNestedValue';
 
 describe('setNestedValue', () => {
   it('should set nested value properly', () => {

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

@@ -1,4 +1,4 @@
-import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
+import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx

@@ -1,16 +1,18 @@
+import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { WorkflowVersionStatusTag } from '@/workflow/components/WorkflowVersionStatusTag';
+import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
-import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
 import { WorkflowVersionStatus } from '@/workflow/types/Workflow';
+import { WorkflowVersionStatusTag } from '@/workflow/workflow-diagram/components/WorkflowVersionStatusTag';
+import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
 import {
   WorkflowDiagram,
   WorkflowDiagramEdge,
   WorkflowDiagramNode,
   WorkflowDiagramNodeType,
-} from '@/workflow/types/WorkflowDiagram';
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
-import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram';
+import { getOrganizedDiagram } from '@/workflow/workflow-diagram/utils/getOrganizedDiagram';
 import styled from '@emotion/styled';
 import {
   applyEdgeChanges,
@@ -28,8 +30,6 @@ import '@xyflow/react/dist/style.css';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { GRAY_SCALE, isDefined, THEME_COMMON } from 'twenty-ui';
-import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
-import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
 
 const StyledResetReactflowStyles = styled.div`
   height: 100%;

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable.tsx

@@ -1,10 +1,10 @@
-import { WorkflowDiagramCanvasBase } from '@/workflow/components/WorkflowDiagramCanvasBase';
-import { WorkflowDiagramCanvasEditableEffect } from '@/workflow/components/WorkflowDiagramCanvasEditableEffect';
-import { WorkflowDiagramCreateStepNode } from '@/workflow/components/WorkflowDiagramCreateStepNode';
-import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagramEmptyTrigger';
-import { WorkflowDiagramStepNodeEditable } from '@/workflow/components/WorkflowDiagramStepNodeEditable';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
-import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { WorkflowDiagramCanvasBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase';
+import { WorkflowDiagramCanvasEditableEffect } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect';
+import { WorkflowDiagramCreateStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode';
+import { WorkflowDiagramEmptyTrigger } from '@/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger';
+import { WorkflowDiagramStepNodeEditable } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditable';
+import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { ReactFlowProvider } from '@xyflow/react';
 
 export const WorkflowDiagramCanvasEditable = ({

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx

@@ -2,12 +2,12 @@ import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { CREATE_STEP_STEP_ID } from '@/workflow/constants/CreateStepStepId';
-import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/constants/EmptyTriggerStepId';
 import { useStartNodeCreation } from '@/workflow/hooks/useStartNodeCreation';
 import { useTriggerNodeSelection } from '@/workflow/hooks/useTriggerNodeSelection';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
-import { WorkflowDiagramNode } from '@/workflow/types/WorkflowDiagram';
+import { CREATE_STEP_STEP_ID } from '@/workflow/workflow-diagram/constants/CreateStepStepId';
+import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/workflow-diagram/constants/EmptyTriggerStepId';
+import { WorkflowDiagramNode } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly.tsx

@@ -1,9 +1,9 @@
-import { WorkflowDiagramCanvasBase } from '@/workflow/components/WorkflowDiagramCanvasBase';
-import { WorkflowDiagramCanvasReadonlyEffect } from '@/workflow/components/WorkflowDiagramCanvasReadonlyEffect';
-import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagramEmptyTrigger';
-import { WorkflowDiagramStepNodeReadonly } from '@/workflow/components/WorkflowDiagramStepNodeReadonly';
 import { WorkflowVersion } from '@/workflow/types/Workflow';
-import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { WorkflowDiagramCanvasBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase';
+import { WorkflowDiagramCanvasReadonlyEffect } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect';
+import { WorkflowDiagramEmptyTrigger } from '@/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger';
+import { WorkflowDiagramStepNodeReadonly } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly';
+import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { ReactFlowProvider } from '@xyflow/react';
 
 export const WorkflowDiagramCanvasReadonly = ({

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx

@@ -4,7 +4,7 @@ import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPage
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useTriggerNodeSelection } from '@/workflow/hooks/useTriggerNodeSelection';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
-import { WorkflowDiagramNode } from '@/workflow/types/WorkflowDiagram';
+import { WorkflowDiagramNode } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEffect.tsx

@@ -1,14 +1,14 @@
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
-import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
 import { workflowLastCreatedStepIdState } from '@/workflow/states/workflowLastCreatedStepIdState';
 import {
   WorkflowVersion,
   WorkflowWithCurrentVersion,
 } from '@/workflow/types/Workflow';
+import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
 
-import { addCreateStepNodes } from '@/workflow/utils/addCreateStepNodes';
+import { addCreateStepNodes } from '@/workflow/workflow-diagram/utils/addCreateStepNodes';
-import { getWorkflowVersionDiagram } from '@/workflow/utils/getWorkflowVersionDiagram';
+import { getWorkflowVersionDiagram } from '@/workflow/workflow-diagram/utils/getWorkflowVersionDiagram';
-import { mergeWorkflowDiagrams } from '@/workflow/utils/mergeWorkflowDiagrams';
+import { mergeWorkflowDiagrams } from '@/workflow/workflow-diagram/utils/mergeWorkflowDiagrams';
 import { useEffect } from 'react';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx

@@ -1,4 +1,4 @@
-import { WorkflowDiagramBaseStepNode } from '@/workflow/components/WorkflowDiagramBaseStepNode';
+import { WorkflowDiagramBaseStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconPlaylistAdd } from 'twenty-ui';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx

@@ -1,6 +1,6 @@
-import { WorkflowDiagramBaseStepNode } from '@/workflow/components/WorkflowDiagramBaseStepNode';
-import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
 import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
+import { WorkflowDiagramBaseStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode';
+import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditable.tsx

@@ -1,9 +1,9 @@
-import { WorkflowDiagramStepNodeBase } from '@/workflow/components/WorkflowDiagramStepNodeBase';
 import { useDeleteStep } from '@/workflow/hooks/useDeleteStep';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
-import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
 import { assertWorkflowWithCurrentVersionIsDefined } from '@/workflow/utils/assertWorkflowWithCurrentVersionIsDefined';
+import { WorkflowDiagramStepNodeBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase';
+import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { useRecoilValue } from 'recoil';
 import { FloatingIconButton, IconTrash } from 'twenty-ui';
 

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly.tsx

@@ -0,0 +1,10 @@
+import { WorkflowDiagramStepNodeBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase';
+import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+
+export const WorkflowDiagramStepNodeReadonly = ({
+  data,
+}: {
+  data: WorkflowDiagramStepNodeData;
+}) => {
+  return <WorkflowDiagramStepNodeBase data={data} />;
+};

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVersionVisualizer.tsx

@@ -1,6 +1,6 @@
-import { WorkflowDiagramCanvasReadonly } from '@/workflow/components/WorkflowDiagramCanvasReadonly';
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
-import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
+import { WorkflowDiagramCanvasReadonly } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly';
+import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
 import '@xyflow/react/dist/style.css';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVersionVisualizerEffect.tsx

@@ -1,7 +1,7 @@
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
-import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
 import { workflowVersionIdState } from '@/workflow/states/workflowVersionIdState';
-import { getWorkflowVersionDiagram } from '@/workflow/utils/getWorkflowVersionDiagram';
+import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
+import { getWorkflowVersionDiagram } from '@/workflow/workflow-diagram/utils/getWorkflowVersionDiagram';
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVisualizer.tsx

@@ -1,8 +1,8 @@
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { WorkflowDiagramCanvasEditable } from '@/workflow/components/WorkflowDiagramCanvasEditable';
-import { WorkflowDiagramEffect } from '@/workflow/components/WorkflowDiagramEffect';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
+import { WorkflowDiagramCanvasEditable } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable';
+import { WorkflowDiagramEffect } from '@/workflow/workflow-diagram/components/WorkflowDiagramEffect';
+import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
 import '@xyflow/react/dist/style.css';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';

packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts

@@ -1,5 +1,5 @@
-import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
 import { createState } from '@ui/utilities/state/utils/createState';
+import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 
 export const workflowDiagramState = createState<WorkflowDiagram | undefined>({
   key: 'workflowDiagramState',

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/addCreateStepNodes.test.ts

@@ -1,5 +1,5 @@
 import { WorkflowStep, WorkflowTrigger } from '@/workflow/types/Workflow';
-import { generateWorkflowDiagram } from '@/workflow/utils/generateWorkflowDiagram';
+import { generateWorkflowDiagram } from '@/workflow/workflow-diagram/utils/generateWorkflowDiagram';
 import { addCreateStepNodes } from '../addCreateStepNodes';
 
 describe('addCreateStepNodes', () => {

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/mergeWorkflowDiagrams.test.ts

@@ -1,4 +1,4 @@
-import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { mergeWorkflowDiagrams } from '../mergeWorkflowDiagrams';
 
 it('Preserves the properties defined in the previous version but not in the next one', () => {

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/addCreateStepNodes.ts

@@ -2,7 +2,7 @@ import {
   WorkflowDiagram,
   WorkflowDiagramEdge,
   WorkflowDiagramNode,
-} from '@/workflow/types/WorkflowDiagram';
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { MarkerType } from '@xyflow/react';
 import { v4 } from 'uuid';
 

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts

@@ -1,12 +1,13 @@
-import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 import { WorkflowStep, WorkflowTrigger } from '@/workflow/types/Workflow';
+import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
+import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
 import {
   WorkflowDiagram,
   WorkflowDiagramEdge,
   WorkflowDiagramNode,
-} from '@/workflow/types/WorkflowDiagram';
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
-import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
+
-import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
+import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
 import { MarkerType } from '@xyflow/react';
 import { isDefined } from 'twenty-ui';
 import { v4 } from 'uuid';

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getOrganizedDiagram.ts

@@ -1,4 +1,4 @@
-import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import Dagre from '@dagrejs/dagre';
 
 export const getOrganizedDiagram = (

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowVersionDiagram.ts

@@ -1,6 +1,6 @@
 import { WorkflowVersion } from '@/workflow/types/Workflow';
-import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
-import { generateWorkflowDiagram } from '@/workflow/utils/generateWorkflowDiagram';
+import { generateWorkflowDiagram } from '@/workflow/workflow-diagram/utils/generateWorkflowDiagram';
 import { isDefined } from 'twenty-ui';
 
 const EMPTY_DIAGRAM: WorkflowDiagram = {

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/mergeWorkflowDiagrams.ts

@@ -1,7 +1,7 @@
 import {
   WorkflowDiagram,
   WorkflowDiagramNode,
-} from '@/workflow/types/WorkflowDiagram';
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 
 const nodePropertiesToPreserve: Array<keyof WorkflowDiagramNode> = ['selected'];
 

packages/twenty-front/src/modules/workflow/workflow-step/components/RightDrawerWorkflowEditStep.tsx

@@ -1,6 +1,6 @@
-import { RightDrawerWorkflowEditStepContent } from '@/workflow/components/RightDrawerWorkflowEditStepContent';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { RightDrawerWorkflowEditStepContent } from '@/workflow/workflow-step/components/RightDrawerWorkflowEditStepContent';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 

packages/twenty-front/src/modules/workflow/workflow-step/components/RightDrawerWorkflowEditStepContent.tsx

@@ -1,8 +1,8 @@
-import { WorkflowStepDetail } from '@/workflow/components/WorkflowStepDetail';
 import { useUpdateStep } from '@/workflow/hooks/useUpdateStep';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/hooks/useUpdateWorkflowVersionTrigger';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
+import { WorkflowStepDetail } from '@/workflow/workflow-step/components/WorkflowStepDetail';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 

packages/twenty-front/src/modules/workflow/workflow-step/components/RightDrawerWorkflowViewStep.tsx

@@ -1,6 +1,6 @@
-import { RightDrawerWorkflowViewStepContent } from '@/workflow/components/RightDrawerWorkflowViewStepContent';
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { workflowVersionIdState } from '@/workflow/states/workflowVersionIdState';
+import { RightDrawerWorkflowViewStepContent } from '@/workflow/workflow-step/components/RightDrawerWorkflowViewStepContent';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 

packages/twenty-front/src/modules/workflow/workflow-step/components/RightDrawerWorkflowViewStepContent.tsx

@@ -1,6 +1,6 @@
-import { WorkflowStepDetail } from '@/workflow/components/WorkflowStepDetail';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import { WorkflowVersion } from '@/workflow/types/Workflow';
+import { WorkflowStepDetail } from '@/workflow/workflow-step/components/WorkflowStepDetail';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 

packages/twenty-front/src/modules/workflow/workflow-step/components/WorkflowStepDetail.tsx

@@ -1,5 +1,3 @@
-import { WorkflowEditTriggerDatabaseEventForm } from '@/workflow/components/WorkflowEditTriggerDatabaseEventForm';
-import { WorkflowEditTriggerManualForm } from '@/workflow/components/WorkflowEditTriggerManualForm';
 import {
   WorkflowAction,
   WorkflowTrigger,
@@ -10,8 +8,10 @@ import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrTh
 import { WorkflowEditActionFormCreateRecord } from '@/workflow/workflow-actions/components/WorkflowEditActionFormCreateRecord';
 import { WorkflowEditActionFormDeleteRecord } from '@/workflow/workflow-actions/components/WorkflowEditActionFormDeleteRecord';
 import { WorkflowEditActionFormSendEmail } from '@/workflow/workflow-actions/components/WorkflowEditActionFormSendEmail';
-import { Suspense, lazy } from 'react';
 import { WorkflowEditActionFormUpdateRecord } from '@/workflow/workflow-actions/components/WorkflowEditActionFormUpdateRecord';
+import { WorkflowEditTriggerDatabaseEventForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm';
+import { WorkflowEditTriggerManualForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm';
+import { Suspense, lazy } from 'react';
 import { isDefined } from 'twenty-ui';
 import { RightDrawerSkeletonLoader } from '~/loading/components/RightDrawerSkeletonLoader';
 

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

@@ -1,6 +1,6 @@
-import { RightDrawerWorkflowSelectTriggerTypeContent } from '@/workflow/components/RightDrawerWorkflowSelectTriggerTypeContent';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { RightDrawerWorkflowSelectTriggerTypeContent } from '@/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 

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

@@ -1,12 +1,12 @@
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
-import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
-import { TRIGGER_TYPES } from '@/workflow/constants/TriggerTypes';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/hooks/useUpdateWorkflowVersionTrigger';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
-import { getTriggerDefaultDefinition } from '@/workflow/utils/getTriggerDefaultDefinition';
+import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
+import { TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/TriggerTypes';
+import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 import { MenuItem } from 'twenty-ui';

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

@@ -1,12 +1,12 @@
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
-import { OBJECT_EVENT_TRIGGERS } from '@/workflow/constants/ObjectEventTriggers';
 import { WorkflowDatabaseEventTrigger } from '@/workflow/types/Workflow';
 import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
+import { WorkflowStepBody } from '@/workflow/workflow-step/components/WorkflowStepBody';
+import { WorkflowStepHeader } from '@/workflow/workflow-step/components/WorkflowStepHeader';
+import { OBJECT_EVENT_TRIGGERS } from '@/workflow/workflow-trigger/constants/ObjectEventTriggers';
 import { useTheme } from '@emotion/react';
 import { IconPlaylistAdd, isDefined } from 'twenty-ui';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
 
 type WorkflowEditTriggerDatabaseEventFormProps = {
   trigger: WorkflowDatabaseEventTrigger;

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

@@ -1,15 +1,15 @@
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { WorkflowStepHeader } from '@/workflow/components/WorkflowStepHeader';
-import { MANUAL_TRIGGER_AVAILABILITY_OPTIONS } from '@/workflow/constants/ManualTriggerAvailabilityOptions';
 import {
   WorkflowManualTrigger,
   WorkflowManualTriggerAvailability,
 } from '@/workflow/types/Workflow';
-import { getManualTriggerDefaultSettings } from '@/workflow/utils/getManualTriggerDefaultSettings';
+import { WorkflowStepBody } from '@/workflow/workflow-step/components/WorkflowStepBody';
+import { WorkflowStepHeader } from '@/workflow/workflow-step/components/WorkflowStepHeader';
+import { MANUAL_TRIGGER_AVAILABILITY_OPTIONS } from '@/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions';
+import { getManualTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings';
 import { useTheme } from '@emotion/react';
 import { IconHandMove, isDefined, useIcons } from 'twenty-ui';
-import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
 
 type WorkflowEditTriggerManualFormProps = {
   trigger: WorkflowManualTrigger;

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerDefaultDefinition.ts

@@ -1,11 +1,11 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { OBJECT_EVENT_TRIGGERS } from '@/workflow/constants/ObjectEventTriggers';
 import {
   WorkflowTrigger,
   WorkflowTriggerType,
 } from '@/workflow/types/Workflow';
 import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
-import { getManualTriggerDefaultSettings } from '@/workflow/utils/getManualTriggerDefaultSettings';
+import { OBJECT_EVENT_TRIGGERS } from '@/workflow/workflow-trigger/constants/ObjectEventTriggers';
+import { getManualTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings';
 
 export const getTriggerDefaultDefinition = ({
   type,

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx

@@ -1,5 +1,5 @@
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
-import { SearchVariablesDropdown } from '@/workflow/search-variables/components/SearchVariablesDropdown';
+import { WorkflowVariablesDropdown } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdown';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -47,7 +47,7 @@ export const WorkflowVariablePicker: VariablePickerComponent = ({
       multiline={multiline}
       readonly={disabled}
     >
-      <SearchVariablesDropdown
+      <WorkflowVariablesDropdown
         inputId={inputId}
         onVariableSelect={onVariableSelect}
         disabled={disabled}

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx

@@ -1,12 +1,13 @@
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { SearchVariablesDropdownFieldItems } from '@/workflow/search-variables/components/SearchVariablesDropdownFieldItems';
+import { WorkflowVariablesDropdownFieldItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems';
-import { SearchVariablesDropdownObjectItems } from '@/workflow/search-variables/components/SearchVariablesDropdownObjectItems';
+import { WorkflowVariablesDropdownObjectItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems';
-import { SearchVariablesDropdownWorkflowStepItems } from '@/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems';
+import { WorkflowVariablesDropdownWorkflowStepItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems';
-import { SEARCH_VARIABLES_DROPDOWN_ID } from '@/workflow/search-variables/constants/SearchVariablesDropdownId';
+import { SEARCH_VARIABLES_DROPDOWN_ID } from '@/workflow/workflow-variables/constants/SearchVariablesDropdownId';
-import { useAvailableVariablesInWorkflowStep } from '@/workflow/search-variables/hooks/useAvailableVariablesInWorkflowStep';
+
-import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
+import { useAvailableVariablesInWorkflowStep } from '@/workflow/workflow-variables/hooks/useAvailableVariablesInWorkflowStep';
+import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutputSchema';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
@@ -27,7 +28,7 @@ const StyledDropdownVariableButtonContainer = styled(
   }
 `;
 
-export const SearchVariablesDropdown = ({
+export const WorkflowVariablesDropdown = ({
   inputId,
   onVariableSelect,
   disabled,
@@ -104,19 +105,19 @@ export const SearchVariablesDropdown = ({
       }
       dropdownComponents={
         !isDefined(selectedStep) ? (
-          <SearchVariablesDropdownWorkflowStepItems
+          <WorkflowVariablesDropdownWorkflowStepItems
             dropdownId={dropdownId}
             steps={availableVariablesInWorkflowStep}
             onSelect={handleStepSelect}
           />
         ) : isDefined(objectNameSingularToSelect) ? (
-          <SearchVariablesDropdownObjectItems
+          <WorkflowVariablesDropdownObjectItems
             step={selectedStep}
             onSelect={handleSubItemSelect}
             onBack={handleBack}
           />
         ) : (
-          <SearchVariablesDropdownFieldItems
+          <WorkflowVariablesDropdownFieldItems
             step={selectedStep}
             onSelect={handleSubItemSelect}
             onBack={handleBack}

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx

@@ -7,11 +7,17 @@ import {
   LinkOutputSchema,
   OutputSchema,
   StepOutputSchema,
-} from '@/workflow/search-variables/types/StepOutputSchema';
+} from '@/workflow/workflow-variables/types/StepOutputSchema';
-import { isBaseOutputSchema } from '@/workflow/search-variables/utils/isBaseOutputSchema';
+import { isBaseOutputSchema } from '@/workflow/workflow-variables/utils/isBaseOutputSchema';
-import { isRecordOutputSchema } from '@/workflow/search-variables/utils/isRecordOutputSchema';
+import { isRecordOutputSchema } from '@/workflow/workflow-variables/utils/isRecordOutputSchema';
 
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
+import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
+import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
+import { isLinkOutputSchema } from '@/workflow/workflow-variables/utils/isLinkOutputSchema';
 import { useState } from 'react';
+import { useSetRecoilState } from 'recoil';
 import {
   IconChevronLeft,
   isDefined,
@@ -19,24 +25,18 @@ import {
   OverflowingTextWithTooltip,
   useIcons,
 } from 'twenty-ui';
-import { useSetRecoilState } from 'recoil';
-import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
-import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
-import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
-import { isLinkOutputSchema } from '@/workflow/search-variables/utils/isLinkOutputSchema';
-import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
 
-type SearchVariablesDropdownFieldItemsProps = {
+type WorkflowVariablesDropdownFieldItemsProps = {
   step: StepOutputSchema;
   onSelect: (value: string) => void;
   onBack: () => void;
 };
 
-export const SearchVariablesDropdownFieldItems = ({
+export const WorkflowVariablesDropdownFieldItems = ({
   step,
   onSelect,
   onBack,
-}: SearchVariablesDropdownFieldItemsProps) => {
+}: WorkflowVariablesDropdownFieldItemsProps) => {
   const [currentPath, setCurrentPath] = useState<string[]>([]);
   const [searchInputValue, setSearchInputValue] = useState('');
   const { getIcon } = useIcons();

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx

@@ -5,9 +5,9 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import {
   OutputSchema,
   StepOutputSchema,
-} from '@/workflow/search-variables/types/StepOutputSchema';
+} from '@/workflow/workflow-variables/types/StepOutputSchema';
-import { isBaseOutputSchema } from '@/workflow/search-variables/utils/isBaseOutputSchema';
+import { isBaseOutputSchema } from '@/workflow/workflow-variables/utils/isBaseOutputSchema';
-import { isRecordOutputSchema } from '@/workflow/search-variables/utils/isRecordOutputSchema';
+import { isRecordOutputSchema } from '@/workflow/workflow-variables/utils/isRecordOutputSchema';
 
 import { useState } from 'react';
 import {
@@ -17,17 +17,17 @@ import {
   useIcons,
 } from 'twenty-ui';
 
-type SearchVariablesDropdownObjectItemsProps = {
+type WorkflowVariablesDropdownObjectItemsProps = {
   step: StepOutputSchema;
   onSelect: (value: string) => void;
   onBack: () => void;
 };
 
-export const SearchVariablesDropdownObjectItems = ({
+export const WorkflowVariablesDropdownObjectItems = ({
   step,
   onSelect,
   onBack,
-}: SearchVariablesDropdownObjectItemsProps) => {
+}: WorkflowVariablesDropdownObjectItemsProps) => {
   const [currentPath, setCurrentPath] = useState<string[]>([]);
   const [searchInputValue, setSearchInputValue] = useState('');
   const { getIcon } = useIcons();

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx

@@ -3,7 +3,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
+import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutputSchema';
 import { useState } from 'react';
 import {
   IconX,
@@ -13,17 +13,17 @@ import {
   useIcons,
 } from 'twenty-ui';
 
-type SearchVariablesDropdownWorkflowStepItemsProps = {
+type WorkflowVariablesDropdownWorkflowStepItemsProps = {
   dropdownId: string;
   steps: StepOutputSchema[];
   onSelect: (value: string) => void;
 };
 
-export const SearchVariablesDropdownWorkflowStepItems = ({
+export const WorkflowVariablesDropdownWorkflowStepItems = ({
   dropdownId,
   steps,
   onSelect,
-}: SearchVariablesDropdownWorkflowStepItemsProps) => {
+}: WorkflowVariablesDropdownWorkflowStepItemsProps) => {
   const { getIcon } = useIcons();
   const [searchInputValue, setSearchInputValue] = useState('');
 

packages/twenty-front/src/modules/workflow/workflow-variables/constants/SearchVariablesDropdownId.ts

@@ -0,0 +1 @@
+export const SEARCH_VARIABLES_DROPDOWN_ID = 'workflow-variables';

packages/twenty-front/src/modules/workflow/workflow-variables/hooks/useAvailableVariablesInWorkflowStep.ts

@@ -1,13 +1,13 @@
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import {
-  OutputSchema,
-  StepOutputSchema,
-} from '@/workflow/search-variables/types/StepOutputSchema';
-import { filterOutputSchema } from '@/workflow/search-variables/utils/filterOutputSchema';
-import { getTriggerStepName } from '@/workflow/search-variables/utils/getTriggerStepName';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrThrow';
+import {
+  OutputSchema,
+  StepOutputSchema,
+} from '@/workflow/workflow-variables/types/StepOutputSchema';
+import { filterOutputSchema } from '@/workflow/workflow-variables/utils/filterOutputSchema';
+import { getTriggerStepName } from '@/workflow/workflow-variables/utils/getTriggerStepName';
 import isEmpty from 'lodash.isempty';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';

packages/twenty-front/src/modules/workflow/workflow-variables/utils/__tests__/filterOutputSchema.test.ts

@@ -1,4 +1,4 @@
-import { OutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
+import { OutputSchema } from '@/workflow/workflow-variables/types/StepOutputSchema';
 import { filterOutputSchema } from '../filterOutputSchema';
 
 describe('filterOutputSchema', () => {