From 0822080105ea4dadf802bb83001e96e295769ad4 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Thu, 7 Aug 2025 15:32:37 +0200
Subject: [PATCH] Set flow after step creation (#13725)

## Before


https://github.com/user-attachments/assets/5f89e2c5-af59-46eb-a0af-6eb0ab103291

## After


https://github.com/user-attachments/assets/11accdc5-a49c-4479-8686-b01f44519d81

## The issue

`getStepDefinitionOrThrow` throws if the provided `steps` aren't
defined. With my recent refactor, the side panel is opened immediately,
as we no longer open it in the `useOnSelectionChange` hook. We use a
`useEffect` to set the `flowState` whenever the workflow version
definition changes. As the side panel is now opened faster,
`getStepDefinitionOrThrow` throws before the `flowState` could have been
set.

In this PR, I only fixed the bug I encountered. We might want to replace
the synchronization `useEffect` with explicit `setFlow` calls whenever
we change the workflow version.
---
 .../hooks/useCreateWorkflowVersionStep.ts         | 15 ++++++++++++++-
 .../hooks/useUpdateWorkflowVersionCache.ts        | 15 +++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep.ts
index 9473789431..4d08c2763a 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep.ts
@@ -7,12 +7,17 @@ import {
   CreateWorkflowVersionStepMutationVariables,
 } from '~/generated-metadata/graphql';
 import { useUpdateWorkflowVersionCache } from '@/workflow/workflow-steps/hooks/useUpdateWorkflowVersionCache';
+import { flowComponentState } from '@/workflow/states/flowComponentState';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { isDefined } from 'twenty-shared/utils';
 
 export const useCreateWorkflowVersionStep = () => {
   const apolloCoreClient = useApolloCoreClient();
 
   const { updateWorkflowVersionCache } = useUpdateWorkflowVersionCache();
 
+  const setFlow = useSetRecoilComponentState(flowComponentState);
+
   const [mutate] = useMutation<
     CreateWorkflowVersionStepMutation,
     CreateWorkflowVersionStepMutationVariables
@@ -29,11 +34,19 @@ export const useCreateWorkflowVersionStep = () => {
 
     const workflowVersionStepChanges = result?.data?.createWorkflowVersionStep;
 
-    updateWorkflowVersionCache({
+    const updatedWorkflowVersion = updateWorkflowVersionCache({
       workflowVersionStepChanges,
       workflowVersionId: input.workflowVersionId,
     });
 
+    if (isDefined(updatedWorkflowVersion)) {
+      setFlow({
+        workflowVersionId: updatedWorkflowVersion.id,
+        trigger: updatedWorkflowVersion.trigger,
+        steps: updatedWorkflowVersion.steps,
+      });
+    }
+
     return result;
   };
 
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useUpdateWorkflowVersionCache.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useUpdateWorkflowVersionCache.ts
index 9a3d5804a0..cfcd17cb2e 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useUpdateWorkflowVersionCache.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useUpdateWorkflowVersionCache.ts
@@ -5,12 +5,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
 import { updateRecordFromCache } from '@/object-record/cache/utils/updateRecordFromCache';
 import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
-import { WorkflowVersion } from '@/workflow/types/Workflow';
+import { WorkflowAction, WorkflowVersion } from '@/workflow/types/Workflow';
 import { isDefined } from 'twenty-shared/utils';
-import {
-  WorkflowAction,
-  WorkflowVersionStepChanges,
-} from '~/generated/graphql';
+import { WorkflowVersionStepChanges } from '~/generated/graphql';
 
 export const useUpdateWorkflowVersionCache = () => {
   const apolloCoreClient = useApolloCoreClient();
@@ -33,7 +30,7 @@ export const useUpdateWorkflowVersionCache = () => {
   }: {
     workflowVersionStepChanges: WorkflowVersionStepChanges | undefined;
     workflowVersionId: string;
-  }) => {
+  }): WorkflowVersion | undefined => {
     if (!isDefined(workflowVersionStepChanges)) {
       return;
     }
@@ -63,11 +60,11 @@ export const useUpdateWorkflowVersionCache = () => {
         ...step,
         nextStepIds: stepsNextStepIds[step.id] ?? step.nextStepIds,
       })),
-    };
+    } satisfies WorkflowVersion;
 
     if (isDefined(createdStep)) {
       const formattedCreatedStep = {
-        ...createdStep,
+        ...(createdStep as WorkflowAction),
         nextStepIds: createdStep.nextStepIds || [],
       };
 
@@ -99,6 +96,8 @@ export const useUpdateWorkflowVersionCache = () => {
       recordGqlFields,
       objectPermissionsByObjectMetadataId,
     });
+
+    return newCachedRecord;
   };
 
   return { updateWorkflowVersionCache };