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-diagram/components/WorkflowDiagramEffect.tsx

@@ -1,4 +1,5 @@
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useStepsOutputSchema } from '@/workflow/hooks/useStepsOutputSchema';
 import { flowState } from '@/workflow/states/flowState';
 import { workflowLastCreatedStepIdState } from '@/workflow/states/workflowLastCreatedStepIdState';
 import {
@@ -22,6 +23,7 @@ export const WorkflowDiagramEffect = ({
 }) => {
   const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
   const setFlow = useSetRecoilState(flowState);
+  const { populateStepsOutputSchema } = useStepsOutputSchema();
 
   const computeAndMergeNewWorkflowDiagram = useRecoilCallback(
     ({ snapshot, set }) => {
@@ -66,8 +68,8 @@ export const WorkflowDiagramEffect = ({
     [],
   );
 
+  const currentVersion = workflowWithCurrentVersion?.currentVersion;
   useEffect(() => {
-    const currentVersion = workflowWithCurrentVersion?.currentVersion;
     if (!isDefined(currentVersion)) {
       setFlow(undefined);
       setWorkflowDiagram(undefined);
@@ -86,8 +88,16 @@ export const WorkflowDiagramEffect = ({
     computeAndMergeNewWorkflowDiagram,
     setFlow,
     setWorkflowDiagram,
-    workflowWithCurrentVersion?.currentVersion,
+    currentVersion,
   ]);
 
+  useEffect(() => {
+    if (!isDefined(currentVersion)) {
+      return;
+    }
+
+    populateStepsOutputSchema(currentVersion);
+  }, [currentVersion, populateStepsOutputSchema]);
+
   return null;
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunVisualizer.tsx

@@ -1,7 +1,5 @@
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
-import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { WorkflowRunDiagramCanvas } from '@/workflow/workflow-diagram/components/WorkflowRunDiagramCanvas';
-import { WorkflowVersionOutputSchemaEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionOutputSchemaEffect';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared';
 
@@ -15,15 +13,13 @@ export const WorkflowRunVisualizer = ({
   workflowRunId: string;
 }) => {
   const workflowRun = useWorkflowRun({ workflowRunId });
-  const workflowVersion = useWorkflowVersion(workflowRun?.workflowVersionId);
 
-  if (!isDefined(workflowRun) || !isDefined(workflowVersion)) {
+  if (!isDefined(workflowRun)) {
     return null;
   }
 
   return (
     <StyledContainer>
-      <WorkflowVersionOutputSchemaEffect workflowVersion={workflowVersion} />
       <WorkflowRunDiagramCanvas workflowRunStatus={workflowRun.status} />
     </StyledContainer>
   );

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunVisualizerEffect.tsx

@@ -1,4 +1,6 @@
+import { useStepsOutputSchema } from '@/workflow/hooks/useStepsOutputSchema';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
+import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { flowState } from '@/workflow/states/flowState';
 import { workflowRunIdState } from '@/workflow/states/workflowRunIdState';
 import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
@@ -13,10 +15,12 @@ export const WorkflowRunVisualizerEffect = ({
   workflowRunId: string;
 }) => {
   const workflowRun = useWorkflowRun({ workflowRunId });
+  const workflowVersion = useWorkflowVersion(workflowRun?.workflowVersionId);
 
   const setWorkflowRunId = useSetRecoilState(workflowRunIdState);
   const setFlow = useSetRecoilState(flowState);
   const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
+  const { populateStepsOutputSchema } = useStepsOutputSchema();
 
   useEffect(() => {
     setWorkflowRunId(workflowRunId);
@@ -50,5 +54,13 @@ export const WorkflowRunVisualizerEffect = ({
     workflowRun?.workflowVersionId,
   ]);
 
+  useEffect(() => {
+    if (!isDefined(workflowVersion)) {
+      return;
+    }
+
+    populateStepsOutputSchema(workflowVersion);
+  }, [populateStepsOutputSchema, workflowVersion]);
+
   return null;
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVersionOutputSchemaEffect.tsx

@@ -1,19 +0,0 @@
-import { usePopulateStepsOutputSchema } from '@/workflow/hooks/usePopulateStepsOutputSchema';
-import { WorkflowVersion } from '@/workflow/types/Workflow';
-import { useEffect } from 'react';
-
-export const WorkflowVersionOutputSchemaEffect = ({
-  workflowVersion,
-}: {
-  workflowVersion: WorkflowVersion;
-}) => {
-  const { populateStepsOutputSchema } = usePopulateStepsOutputSchema({
-    workflowVersionId: workflowVersion.id,
-  });
-
-  useEffect(() => {
-    populateStepsOutputSchema(workflowVersion);
-  }, [populateStepsOutputSchema, workflowVersion]);
-
-  return null;
-};

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVersionVisualizer.tsx

@@ -1,6 +1,5 @@
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { WorkflowDiagramCanvasReadonly } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly';
-import { WorkflowVersionOutputSchemaEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionOutputSchemaEffect';
 import '@xyflow/react/dist/style.css';
 import { isDefined } from 'twenty-shared';
 
@@ -11,10 +10,11 @@ export const WorkflowVersionVisualizer = ({
 }) => {
   const workflowVersion = useWorkflowVersion(workflowVersionId);
 
-  return isDefined(workflowVersion) ? (
-    <>
-      <WorkflowVersionOutputSchemaEffect workflowVersion={workflowVersion} />
-      <WorkflowDiagramCanvasReadonly versionStatus={workflowVersion.status} />
-    </>
-  ) : null;
+  if (!isDefined(workflowVersion)) {
+    return null;
+  }
+
+  return (
+    <WorkflowDiagramCanvasReadonly versionStatus={workflowVersion.status} />
+  );
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVersionVisualizerEffect.tsx

@@ -1,3 +1,4 @@
+import { useStepsOutputSchema } from '@/workflow/hooks/useStepsOutputSchema';
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { flowState } from '@/workflow/states/flowState';
 import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
@@ -16,7 +17,7 @@ export const WorkflowVersionVisualizerEffect = ({
 
   const setFlow = useSetRecoilState(flowState);
   const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
-
+  const { populateStepsOutputSchema } = useStepsOutputSchema();
   useEffect(() => {
     if (!isDefined(workflowVersion)) {
       setFlow(undefined);
@@ -45,5 +46,13 @@ export const WorkflowVersionVisualizerEffect = ({
     setWorkflowDiagram(nextWorkflowDiagram);
   }, [setWorkflowDiagram, workflowVersion]);
 
+  useEffect(() => {
+    if (!isDefined(workflowVersion)) {
+      return;
+    }
+
+    populateStepsOutputSchema(workflowVersion);
+  }, [populateStepsOutputSchema, workflowVersion]);
+
   return null;
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVisualizer.tsx

@@ -1,28 +1,24 @@
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { WorkflowDiagramCanvasEditable } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditable';
 import { WorkflowDiagramEffect } from '@/workflow/workflow-diagram/components/WorkflowDiagramEffect';
-import { WorkflowVersionOutputSchemaEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionOutputSchemaEffect';
 import '@xyflow/react/dist/style.css';
 import { isDefined } from 'twenty-shared';
 
 export const WorkflowVisualizer = ({ workflowId }: { workflowId: string }) => {
   const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(workflowId);
-  const workflowVersion = workflowWithCurrentVersion?.currentVersion;
+
+  if (!isDefined(workflowWithCurrentVersion)) {
+    return null;
+  }
 
   return (
     <>
       <WorkflowDiagramEffect
         workflowWithCurrentVersion={workflowWithCurrentVersion}
       />
-      {isDefined(workflowVersion) && (
-        <WorkflowVersionOutputSchemaEffect workflowVersion={workflowVersion} />
-      )}
-
-      {isDefined(workflowWithCurrentVersion) ? (
-        <WorkflowDiagramCanvasEditable
-          versionStatus={workflowWithCurrentVersion.currentVersion.status}
-        />
-      ) : null}
+      <WorkflowDiagramCanvasEditable
+        versionStatus={workflowWithCurrentVersion.currentVersion.status}
+      />
     </>
   );
 };