Ensure step is selected after creation when a new version has to be created (#9218)

Fixes
https://discord.com/channels/1130383047699738754/1318606664202715156/1318606664202715156

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);
       };
     },

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);
   };
 

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,
+});