Delete workflow step (#7373)

- Allows the deletion of triggers and steps in workflows. If the
workflow can not be edited right now, we create a new draft version.
- The workflow right drawer can now render nothing. It's necessary to
behave that way because a deleted step will still be displayed for a
short amount of time in the drawer. The drawer will be filled with blank
content when it disappears.


https://github.com/user-attachments/assets/abd5184e-d3db-4fe7-8870-ccc78ff23d41

Closes #7057

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

@@ -0,0 +1,108 @@
+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 },
+      },
+      serverlessFunctionId: 'first',
+    },
+    type: 'CODE',
+    valid: true,
+  } satisfies WorkflowStep;
+  const workflowVersionInitial = {
+    __typename: 'WorkflowVersion',
+    status: 'ACTIVE',
+    createdAt: '',
+    id: '1',
+    name: '',
+    steps: [stepToBeRemoved],
+    trigger: {
+      settings: { eventName: 'company.created' },
+      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 },
+      },
+      serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+    },
+    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 },
+          },
+          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        },
+        type: 'CODE',
+        valid: true,
+      },
+      stepToBeRemoved,
+      {
+        id: 'step-3',
+        name: '',
+        settings: {
+          errorHandlingOptions: {
+            retryOnFailure: { value: true },
+            continueOnFailure: { value: false },
+          },
+          serverlessFunctionId: 'a5434be2-c10b-465c-acec-46492782a997',
+        },
+        type: 'CODE',
+        valid: true,
+      },
+    ],
+    trigger: {
+      settings: { eventName: 'company.created' },
+      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/findStepPosition.ts

@@ -0,0 +1,41 @@
+import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
+import { WorkflowStep } from '@/workflow/types/Workflow';
+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 findStepPosition = ({
+  steps,
+  stepId,
+}: {
+  steps: Array<WorkflowStep>;
+  stepId: string | undefined;
+}): { steps: Array<WorkflowStep>; index: number } | undefined => {
+  if (!isDefined(stepId) || stepId === TRIGGER_STEP_ID) {
+    return {
+      steps,
+      index: 0,
+    };
+  }
+
+  for (const [index, step] of steps.entries()) {
+    if (step.id === stepId) {
+      return {
+        steps,
+        index,
+      };
+    }
+
+    // TODO: When condition will have been implemented, put recursivity here.
+    // if (step.type === "CONDITION") {
+    //     return findNodePosition({
+    //         workflowSteps: step.conditions,
+    //         stepId,
+    //     })
+    // }
+  }
+
+  return undefined;
+};

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

@@ -1,41 +1,21 @@
-import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 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 = ({
-  steps,
-  stepId,
-}: {
+export const findStepPositionOrThrow = (props: {
   steps: Array<WorkflowStep>;
   stepId: string | undefined;
 }): { steps: Array<WorkflowStep>; index: number } => {
-  if (!isDefined(stepId) || stepId === TRIGGER_STEP_ID) {
-    return {
-      steps,
-      index: 0,
-    };
+  const result = findStepPosition(props);
+  if (!isDefined(result)) {
+    throw new Error(
+      `Couldn't locate the step. Unreachable step id: ${props.stepId}.`,
+    );
   }
 
-  for (const [index, step] of steps.entries()) {
-    if (step.id === stepId) {
-      return {
-        steps,
-        index,
-      };
-    }
-
-    // TODO: When condition will have been implemented, put recursivity here.
-    // if (step.type === "CONDITION") {
-    //     return findNodePosition({
-    //         workflowSteps: step.conditions,
-    //         stepId,
-    //     })
-    // }
-  }
-
-  throw new Error(`Couldn't locate the step. Unreachable step id: ${stepId}.`);
+  return result;
 };

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

@@ -0,0 +1,21 @@
+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;
+};