From efb2a59e06cd0535b22e54ddb0531a175705602a Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Thu, 9 Jan 2025 11:16:12 +0100
Subject: [PATCH] Force workflow step detail re-create (#9476)

When switching between the same step detail component, even if the props
is updated, component is not re-created.
This is an issue since form fields often keep an internal state. Which
means that even if form data are updated, the displayed value may still
be the value of the previous step detail.
Adding a key to for re-creation.
---
 .../workflow-steps/components/WorkflowStepDetail.tsx         | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepDetail.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepDetail.tsx
index aa67fdf6e..e01860ffb 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepDetail.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepDetail.tsx
@@ -90,6 +90,7 @@ export const WorkflowStepDetail = ({
           return (
             <Suspense fallback={<RightDrawerSkeletonLoader />}>
               <WorkflowEditActionFormServerlessFunction
+                key={stepId}
                 action={stepDefinition.definition}
                 actionOptions={props}
               />
@@ -99,6 +100,7 @@ export const WorkflowStepDetail = ({
         case 'SEND_EMAIL': {
           return (
             <WorkflowEditActionFormSendEmail
+              key={stepId}
               action={stepDefinition.definition}
               actionOptions={props}
             />
@@ -107,6 +109,7 @@ export const WorkflowStepDetail = ({
         case 'CREATE_RECORD': {
           return (
             <WorkflowEditActionFormCreateRecord
+              key={stepId}
               action={stepDefinition.definition}
               actionOptions={props}
             />
@@ -116,6 +119,7 @@ export const WorkflowStepDetail = ({
         case 'UPDATE_RECORD': {
           return (
             <WorkflowEditActionFormUpdateRecord
+              key={stepId}
               action={stepDefinition.definition}
               actionOptions={props}
             />
@@ -125,6 +129,7 @@ export const WorkflowStepDetail = ({
         case 'DELETE_RECORD': {
           return (
             <WorkflowEditActionFormDeleteRecord
+              key={stepId}
               action={stepDefinition.definition}
               actionOptions={props}
             />