From 4f329d6005dcc5a16b6f67f702a8514fba499411 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Tue, 24 Dec 2024 14:43:10 +0100
Subject: [PATCH] Ensure step is selected after creation when a new version has
 to be created (#9218)

Fixes
https://discord.com/channels/1130383047699738754/1318606664202715156/1318606664202715156
---
 .../components/WorkflowDiagramEffect.tsx      | 21 +++++++++++++++++++
 .../modules/workflow/hooks/useCreateStep.ts   |  9 ++++++--
 .../states/workflowLastCreatedStepIdState.ts  |  6 ++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts

diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx
index a95b709e160e..011d93f600d0 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx
@@ -1,5 +1,6 @@
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
+import { workflowLastCreatedStepIdState } from '@/workflow/states/workflowLastCreatedStepIdState';
 import {
   WorkflowVersion,
   WorkflowWithCurrentVersion,
@@ -39,6 +40,26 @@ export const WorkflowDiagramEffect = ({
           );
         }
 
+        const lastCreatedStepId = getSnapshotValue(
+          snapshot,
+          workflowLastCreatedStepIdState,
+        );
+        if (isDefined(lastCreatedStepId)) {
+          mergedWorkflowDiagram.nodes = mergedWorkflowDiagram.nodes.map(
+            (node) => {
+              if (node.id === lastCreatedStepId) {
+                return {
+                  ...node,
+                  selected: true,
+                };
+              }
+              return node;
+            },
+          );
+
+          set(workflowLastCreatedStepIdState, undefined);
+        }
+
         set(workflowDiagramState, mergedWorkflowDiagram);
       };
     },
diff --git a/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts b/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts
index 8a36b6524f9a..c2678a4ed744 100644
--- a/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts
+++ b/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts
@@ -1,6 +1,9 @@
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { useCreateWorkflowVersionStep } from '@/workflow/hooks/useCreateWorkflowVersionStep';
+import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
 import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
+import { workflowLastCreatedStepIdState } from '@/workflow/states/workflowLastCreatedStepIdState';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import {
   WorkflowStepType,
@@ -8,8 +11,6 @@ import {
 } from '@/workflow/types/Workflow';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';
-import { useCreateWorkflowVersionStep } from '@/workflow/hooks/useCreateWorkflowVersionStep';
-import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
 
 export const useCreateStep = ({
   workflow,
@@ -19,6 +20,9 @@ export const useCreateStep = ({
   const { openRightDrawer } = useRightDrawer();
   const { createWorkflowVersionStep } = useCreateWorkflowVersionStep();
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
+  const setWorkflowLastCreatedStepId = useSetRecoilState(
+    workflowLastCreatedStepIdState,
+  );
 
   const workflowCreateStepFromParentStepId = useRecoilValue(
     workflowCreateStepFromParentStepIdState,
@@ -45,6 +49,7 @@ export const useCreateStep = ({
     }
 
     setWorkflowSelectedNode(createdStep.id);
+    setWorkflowLastCreatedStepId(createdStep.id);
     openRightDrawer(RightDrawerPages.WorkflowStepEdit);
   };
 
diff --git a/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts b/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
new file mode 100644
index 000000000000..e39718e9cc29
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const workflowLastCreatedStepIdState = createState<string | undefined>({
+  key: 'workflowLastCreatedStepIdState',
+  defaultValue: undefined,
+});