Create new steps in workflow editor (#6764)

This PR adds the possibility of creating new steps. For now, only
actions are available. The steps are stored on the server, and the
visualizer is reloaded to include them.

Selecting a step opens the right drawer and shows its details. For now,
it's only the id of the step, but in the future, it will be the
parameters of the step.

In the future we'll want to let users add steps at any point in the
diagram. As a consequence, it's crucial to be able to walk in the tree
that make the steps to find the correct place where to put the new step.
I wrote a function that returns where the new step should be inserted.
This function will become recursive once we get branching implemented.

Things to mention:

- Reactflow needs every node and edge to have a unique identifier. In
this PR, I chose to use steps' id as nodes' id. That way, it's easy to
move from a node to a step, which helps make operations on a step
without resolving the step's id from the node's id.

packages/twenty-front/src/modules/workflow/hooks/useCreateNode.tsx

@@ -0,0 +1,47 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import {
+  Workflow,
+  WorkflowStep,
+  WorkflowVersion,
+} from '@/workflow/types/Workflow';
+import { getWorkflowLastVersion } from '@/workflow/utils/getWorkflowLastVersion';
+import { insertStep } from '@/workflow/utils/insertStep';
+import { isDefined } from 'twenty-ui';
+
+export const useCreateNode = ({ workflow }: { workflow: Workflow }) => {
+  const { updateOneRecord: updateOneWorkflowVersion } =
+    useUpdateOneRecord<WorkflowVersion>({
+      objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
+    });
+
+  const createNode = ({
+    parentNodeId,
+    nodeToAdd,
+  }: {
+    parentNodeId: string;
+    nodeToAdd: WorkflowStep;
+  }) => {
+    const lastVersion = getWorkflowLastVersion(workflow);
+    if (!isDefined(lastVersion)) {
+      throw new Error(
+        "Can't add a node when no version exists yet. Create a first workflow version before trying to add a node.",
+      );
+    }
+
+    return updateOneWorkflowVersion({
+      idToUpdate: lastVersion.id,
+      updateOneRecordInput: {
+        steps: insertStep({
+          steps: lastVersion.steps,
+          parentStepId: parentNodeId,
+          stepToAdd: nodeToAdd,
+        }),
+      },
+    });
+  };
+
+  return {
+    createNode,
+  };
+};

packages/twenty-front/src/modules/workflow/hooks/useRightDrawerWorkflowSelectAction.tsx

@@ -0,0 +1,117 @@
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { useCreateNode } from '@/workflow/hooks/useCreateNode';
+import { showPageWorkflowDiagramTriggerNodeSelectionState } from '@/workflow/states/showPageWorkflowDiagramTriggerNodeSelectionState';
+import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
+import { Workflow } from '@/workflow/types/Workflow';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import {
+  IconPlaystationSquare,
+  IconPlug,
+  IconPlus,
+  IconSearch,
+  IconSettingsAutomation,
+} from 'twenty-ui';
+import { v4 } from 'uuid';
+
+export const useRightDrawerWorkflowSelectAction = ({
+  tabListId,
+  workflow,
+}: {
+  tabListId: string;
+  workflow: Workflow;
+}) => {
+  const workflowCreateStepFromParentStepId = useRecoilValue(
+    workflowCreateStepFromParentStepIdState,
+  );
+
+  const setShowPageWorkflowDiagramTriggerNodeSelection = useSetRecoilState(
+    showPageWorkflowDiagramTriggerNodeSelectionState,
+  );
+
+  const { createNode } = useCreateNode({ workflow });
+
+  const allOptions: Array<{
+    id: string;
+    name: string;
+    type: 'standard' | 'custom';
+    icon: any;
+  }> = [
+    {
+      id: 'create-record',
+      name: 'Create Record',
+      type: 'standard',
+      icon: IconPlus,
+    },
+    {
+      id: 'find-records',
+      name: 'Find Records',
+      type: 'standard',
+      icon: IconSearch,
+    },
+  ];
+
+  const tabs = [
+    {
+      id: 'all',
+      title: 'All',
+      Icon: IconSettingsAutomation,
+    },
+    {
+      id: 'standard',
+      title: 'Standard',
+      Icon: IconPlaystationSquare,
+    },
+    {
+      id: 'custom',
+      title: 'Custom',
+      Icon: IconPlug,
+    },
+  ];
+
+  const { activeTabIdState } = useTabList(tabListId);
+  const activeTabId = useRecoilValue(activeTabIdState);
+
+  const options = allOptions.filter(
+    (option) => activeTabId === 'all' || option.type === activeTabId,
+  );
+
+  const handleActionClick = async (actionId: string) => {
+    if (workflowCreateStepFromParentStepId === undefined) {
+      throw new Error('Select a step to create a new step from first.');
+    }
+
+    const newNodeId = v4();
+
+    /**
+     * FIXME: For now, the data of the node to create are mostly static.
+     */
+    await createNode({
+      parentNodeId: workflowCreateStepFromParentStepId,
+      nodeToAdd: {
+        id: newNodeId,
+        name: actionId,
+        type: 'CODE_ACTION',
+        valid: true,
+        settings: {
+          serverlessFunctionId: '111',
+          errorHandlingOptions: {
+            continueOnFailure: {
+              value: true,
+            },
+            retryOnFailure: {
+              value: true,
+            },
+          },
+        },
+      },
+    });
+
+    setShowPageWorkflowDiagramTriggerNodeSelection(newNodeId);
+  };
+
+  return {
+    tabs,
+    options,
+    handleActionClick,
+  };
+};

packages/twenty-front/src/modules/workflow/hooks/useStartNodeCreation.tsx

@@ -0,0 +1,29 @@
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+export const useStartNodeCreation = () => {
+  const { openRightDrawer } = useRightDrawer();
+  const setWorkflowCreateStepFromParentStepId = useSetRecoilState(
+    workflowCreateStepFromParentStepIdState,
+  );
+
+  /**
+   * This function is used in a context where dependencies shouldn't change much.
+   * That's why its wrapped in a `useCallback` hook. Removing memoization might break the app unexpectedly.
+   */
+  const startNodeCreation = useCallback(
+    (parentNodeId: string) => {
+      setWorkflowCreateStepFromParentStepId(parentNodeId);
+
+      openRightDrawer(RightDrawerPages.WorkflowStepSelectAction);
+    },
+    [openRightDrawer, setWorkflowCreateStepFromParentStepId],
+  );
+
+  return {
+    startNodeCreation,
+  };
+};