From e44d525e839487312c41da449ff49a704fabca63 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Thu, 24 Oct 2024 17:27:56 +0200
Subject: [PATCH] Prevent workflow right drawer flickering when selecting an
 action type (#8028)

In this PR:

- Use a stable id for create-step nodes; it makes it possible to
preserve their selected attribute and keep them open even after the flow
is re-generated
- Preemptively open the WorkflowStepEdit right drawer for the created
action



https://github.com/user-attachments/assets/c19e6820-e198-4d06-98ae-898bd6e53e33

Fixes https://github.com/twentyhq/private-issues/issues/123
---
 .../workflow/components/WorkflowDiagramEffect.tsx      | 10 ++++------
 .../src/modules/workflow/hooks/useCreateStep.ts        |  9 +++++++++
 .../src/modules/workflow/utils/addCreateStepNodes.ts   |  4 +++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx
index 8b714cc76..a95b709e1 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramEffect.tsx
@@ -27,7 +27,9 @@ export const WorkflowDiagramEffect = ({
           workflowDiagramState,
         );
 
-        const nextWorkflowDiagram = getWorkflowVersionDiagram(currentVersion);
+        const nextWorkflowDiagram = addCreateStepNodes(
+          getWorkflowVersionDiagram(currentVersion),
+        );
 
         let mergedWorkflowDiagram = nextWorkflowDiagram;
         if (isDefined(previousWorkflowDiagram)) {
@@ -37,11 +39,7 @@ export const WorkflowDiagramEffect = ({
           );
         }
 
-        const workflowDiagramWithCreateStepNodes = addCreateStepNodes(
-          mergedWorkflowDiagram,
-        );
-
-        set(workflowDiagramState, workflowDiagramWithCreateStepNodes);
+        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 e439edc2d..a9327a6e8 100644
--- a/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts
+++ b/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts
@@ -1,8 +1,11 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useCreateNewWorkflowVersion } from '@/workflow/hooks/useCreateNewWorkflowVersion';
 import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
 import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
+import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import {
   WorkflowStep,
   WorkflowStepType,
@@ -19,6 +22,9 @@ export const useCreateStep = ({
 }: {
   workflow: WorkflowWithCurrentVersion;
 }) => {
+  const { openRightDrawer } = useRightDrawer();
+  const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
+
   const workflowCreateStepFromParentStepId = useRecoilValue(
     workflowCreateStepFromParentStepIdState,
   );
@@ -84,6 +90,9 @@ export const useCreateStep = ({
       nodeToAdd: newStep,
     });
 
+    setWorkflowSelectedNode(newStep.id);
+    openRightDrawer(RightDrawerPages.WorkflowStepEdit);
+
     /**
      * After the step has been created, select it.
      * As the `insertNodeAndSave` function mutates the cached workflow before resolving,
diff --git a/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts b/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts
index 381d05889..ffde2d1d8 100644
--- a/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts
@@ -16,7 +16,9 @@ export const addCreateStepNodes = ({ nodes, edges }: WorkflowDiagram) => {
 
   for (const node of nodesWithoutTargets) {
     const newCreateStepNode: WorkflowDiagramNode = {
-      id: v4(),
+      // FIXME: We need a stable id for create step nodes to be able to preserve their selected status.
+      // FIXME: In the future, we'll have conditions and loops. We'll have to set an id to each branch so we can have this stable id.
+      id: 'branch-1__create-step',
       type: 'create-step',
       data: {
         nodeType: 'create-step',