Reset step output schema when step is removed (#10762)

When a step is deleted in a draft version, its variable are still
available in the following steps. This is because step output schema was
not reset. We needed either to refresh or to change version so output
schema gets updated.

This PR:
- migrates to a family state global + context not linked to a component
- add a reset step output schema function
- reset when a step is removed

packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowEditStep.tsx

@@ -1,5 +1,5 @@
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import { WorkflowVersionComponentInstanceContext } from '@/workflow/states/context/WorkflowVersionComponentInstanceContext';
+import { WorkflowStepContextProvider } from '@/workflow/states/context/WorkflowStepContext';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { RightDrawerWorkflowEditStepContent } from '@/workflow/workflow-steps/components/RightDrawerWorkflowEditStepContent';
 import { useRecoilValue } from 'recoil';
@@ -14,10 +14,10 @@ export const RightDrawerWorkflowEditStep = () => {
   }
 
   return (
-    <WorkflowVersionComponentInstanceContext.Provider
-      value={{ instanceId: workflow.currentVersion.id }}
+    <WorkflowStepContextProvider
+      value={{ workflowVersionId: workflow.currentVersion.id }}
     >
       <RightDrawerWorkflowEditStepContent workflow={workflow} />
-    </WorkflowVersionComponentInstanceContext.Provider>
+    </WorkflowStepContextProvider>
   );
 };

packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx

@@ -4,7 +4,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
 import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
-import { WorkflowVersionComponentInstanceContext } from '@/workflow/states/context/WorkflowVersionComponentInstanceContext';
+import { WorkflowStepContextProvider } from '@/workflow/states/context/WorkflowStepContext';
 import { useWorkflowSelectedNodeOrThrow } from '@/workflow/workflow-diagram/hooks/useWorkflowSelectedNodeOrThrow';
 import { WorkflowRunStepInputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepInputDetail';
 import { WorkflowRunStepOutputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepOutputDetail';
@@ -66,8 +66,8 @@ export const RightDrawerWorkflowRunViewStep = () => {
   }
 
   return (
-    <WorkflowVersionComponentInstanceContext.Provider
-      value={{ instanceId: flow.workflowVersionId }}
+    <WorkflowStepContextProvider
+      value={{ workflowVersionId: flow.workflowVersionId }}
     >
       <StyledTabListContainer>
         <TabList
@@ -93,6 +93,6 @@ export const RightDrawerWorkflowRunViewStep = () => {
       {activeTabId === 'output' ? (
         <WorkflowRunStepOutputDetail stepId={workflowSelectedNode} />
       ) : null}
-    </WorkflowVersionComponentInstanceContext.Provider>
+    </WorkflowStepContextProvider>
   );
 };

packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowViewStep.tsx

@@ -1,5 +1,5 @@
 import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
-import { WorkflowVersionComponentInstanceContext } from '@/workflow/states/context/WorkflowVersionComponentInstanceContext';
+import { WorkflowStepContextProvider } from '@/workflow/states/context/WorkflowStepContext';
 import { useWorkflowSelectedNodeOrThrow } from '@/workflow/workflow-diagram/hooks/useWorkflowSelectedNodeOrThrow';
 import { WorkflowStepDetail } from '@/workflow/workflow-steps/components/WorkflowStepDetail';
 
@@ -8,8 +8,8 @@ export const RightDrawerWorkflowViewStep = () => {
   const workflowSelectedNode = useWorkflowSelectedNodeOrThrow();
 
   return (
-    <WorkflowVersionComponentInstanceContext.Provider
-      value={{ instanceId: flow.workflowVersionId }}
+    <WorkflowStepContextProvider
+      value={{ workflowVersionId: flow.workflowVersionId }}
     >
       <WorkflowStepDetail
         stepId={workflowSelectedNode}
@@ -17,6 +17,6 @@ export const RightDrawerWorkflowViewStep = () => {
         steps={flow.steps}
         readonly
       />
-    </WorkflowVersionComponentInstanceContext.Provider>
+    </WorkflowStepContextProvider>
   );
 };

packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteStep.ts

@@ -4,6 +4,7 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { useDeleteWorkflowVersionStep } from '@/workflow/hooks/useDeleteWorkflowVersionStep';
 import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
+import { useStepsOutputSchema } from '@/workflow/hooks/useStepsOutputSchema';
 import {
   WorkflowVersion,
   WorkflowWithCurrentVersion,
@@ -20,6 +21,7 @@ export const useDeleteStep = ({
     useUpdateOneRecord<WorkflowVersion>({
       objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
     });
+  const { deleteStepOutputSchema } = useStepsOutputSchema();
 
   const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
   const { closeRightDrawer } = useRightDrawer();
@@ -36,11 +38,15 @@ export const useDeleteStep = ({
           trigger: null,
         },
       });
-      return;
+    } else {
+      await deleteWorkflowVersionStep({
+        workflowVersionId,
+        stepId,
+      });
     }
-    await deleteWorkflowVersionStep({
-      workflowVersionId,
+    deleteStepOutputSchema({
       stepId,
+      workflowVersionId,
     });
   };