Migrate workflow states to component states (#11773)

- Migrated all workflow Recoil states to component states to isolate
each workflow visualizer instance. The use case of having two workflow
visualizers displayed at the same time appeared recently and will grow
in the near future.
- We chose to use the `recordId` as the value for the `instanceId` of
the component states. Currently, there are a few cases where two
workflows or two workflow runs are rendered at the same time. As a
consequence, relying on the `recordId` is enough for the moment.
- However, there is one case where it's necessary to have a component
state scoped to a workflow visualizer instance: the
`workflowVisualizerStatusState`. This component is tightly coupled to
the `<Reactflow />` component instance rendered in the workflow
visualizer, and it must be set to its default value when the component
first renders. I achieved that by using another component instance
context whose instanceId is an identifier returned by the `useId()` hook
in the Workflow Run Card component.

packages/twenty-front/src/modules/workflow/workflow-steps/hooks/__tests__/useCreateStep.test.ts

@@ -1,53 +0,0 @@
-import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
-import { renderHook } from '@testing-library/react';
-import { useCreateStep } from '../useCreateStep';
-
-const mockCreateDraftFromWorkflowVersion = jest.fn().mockResolvedValue('457');
-const mockCreateWorkflowVersionStep = jest.fn().mockResolvedValue({
-  data: { createWorkflowVersionStep: { id: '1', type: 'CODE' } },
-});
-
-jest.mock('recoil', () => ({
-  useRecoilValue: () => 'parent-step-id',
-  useSetRecoilState: () => jest.fn(),
-  atom: (params: any) => params,
-}));
-
-jest.mock(
-  '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep',
-  () => ({
-    useCreateWorkflowVersionStep: () => ({
-      createWorkflowVersionStep: mockCreateWorkflowVersionStep,
-    }),
-  }),
-);
-
-jest.mock('@/workflow/hooks/useCreateDraftFromWorkflowVersion', () => ({
-  useCreateDraftFromWorkflowVersion: () => ({
-    createDraftFromWorkflowVersion: mockCreateDraftFromWorkflowVersion,
-  }),
-}));
-
-describe('useCreateStep', () => {
-  const mockWorkflow = {
-    id: '123',
-    currentVersion: {
-      id: '456',
-      status: 'DRAFT',
-      steps: [],
-      trigger: { type: 'manual' },
-    },
-    versions: [],
-  };
-
-  it('should create step in draft version', async () => {
-    const { result } = renderHook(() =>
-      useCreateStep({
-        workflow: mockWorkflow as unknown as WorkflowWithCurrentVersion,
-      }),
-    );
-    await result.current.createStep('CODE');
-
-    expect(mockCreateWorkflowVersionStep).toHaveBeenCalled();
-  });
-});

packages/twenty-front/src/modules/workflow/workflow-steps/hooks/__tests__/useCreateStep.test.tsx

@@ -0,0 +1,80 @@
+import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
+import { workflowCreateStepFromParentStepIdComponentState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdComponentState';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+import { WorkflowVisualizerComponentInstanceContext } from '../../../workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
+import { useCreateStep } from '../useCreateStep';
+
+const mockCreateDraftFromWorkflowVersion = jest.fn().mockResolvedValue('457');
+const mockCreateWorkflowVersionStep = jest.fn().mockResolvedValue({
+  data: { createWorkflowVersionStep: { id: '1', type: 'CODE' } },
+});
+
+jest.mock(
+  '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep',
+  () => ({
+    useCreateWorkflowVersionStep: () => ({
+      createWorkflowVersionStep: mockCreateWorkflowVersionStep,
+    }),
+  }),
+);
+
+jest.mock('@/workflow/hooks/useCreateDraftFromWorkflowVersion', () => ({
+  useCreateDraftFromWorkflowVersion: () => ({
+    createDraftFromWorkflowVersion: mockCreateDraftFromWorkflowVersion,
+  }),
+}));
+
+const wrapper = ({ children }: { children: React.ReactNode }) => {
+  const workflowVisualizerComponentInstanceId =
+    'workflow-visualizer-instance-id';
+
+  return (
+    <RecoilRoot
+      initializeState={({ set }) => {
+        set(
+          workflowCreateStepFromParentStepIdComponentState.atomFamily({
+            instanceId: workflowVisualizerComponentInstanceId,
+          }),
+          'parent-step-id',
+        );
+      }}
+    >
+      <WorkflowVisualizerComponentInstanceContext.Provider
+        value={{
+          instanceId: workflowVisualizerComponentInstanceId,
+        }}
+      >
+        {children}
+      </WorkflowVisualizerComponentInstanceContext.Provider>
+    </RecoilRoot>
+  );
+};
+
+describe('useCreateStep', () => {
+  const mockWorkflow = {
+    id: '123',
+    currentVersion: {
+      id: '456',
+      status: 'DRAFT',
+      steps: [],
+      trigger: { type: 'manual' },
+    },
+    versions: [],
+  };
+
+  it('should create step in draft version', async () => {
+    const { result } = renderHook(
+      () =>
+        useCreateStep({
+          workflow: mockWorkflow as unknown as WorkflowWithCurrentVersion,
+        }),
+      {
+        wrapper,
+      },
+    );
+    await result.current.createStep('CODE');
+
+    expect(mockCreateWorkflowVersionStep).toHaveBeenCalled();
+  });
+});

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

@@ -1,13 +1,14 @@
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
-import { workflowLastCreatedStepIdState } from '@/workflow/states/workflowLastCreatedStepIdState';
+import { workflowLastCreatedStepIdComponentState } from '@/workflow/states/workflowLastCreatedStepIdComponentState';
 import {
   WorkflowStepType,
   WorkflowWithCurrentVersion,
 } from '@/workflow/types/Workflow';
-import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
+import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { useCreateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep';
-import { workflowCreateStepFromParentStepIdState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { workflowCreateStepFromParentStepIdComponentState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdComponentState';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useCreateStep = ({
@@ -16,13 +17,15 @@ export const useCreateStep = ({
   workflow: WorkflowWithCurrentVersion;
 }) => {
   const { createWorkflowVersionStep } = useCreateWorkflowVersionStep();
-  const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
-  const setWorkflowLastCreatedStepId = useSetRecoilState(
-    workflowLastCreatedStepIdState,
+  const setWorkflowSelectedNode = useSetRecoilComponentStateV2(
+    workflowSelectedNodeComponentState,
+  );
+  const setWorkflowLastCreatedStepId = useSetRecoilComponentStateV2(
+    workflowLastCreatedStepIdComponentState,
   );
 
-  const workflowCreateStepFromParentStepId = useRecoilValue(
-    workflowCreateStepFromParentStepIdState,
+  const workflowCreateStepFromParentStepId = useRecoilComponentValueV2(
+    workflowCreateStepFromParentStepIdComponentState,
   );
 
   const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();

packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdComponentState.ts

@@ -0,0 +1,9 @@
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
+
+export const workflowCreateStepFromParentStepIdComponentState =
+  createComponentStateV2<string | undefined>({
+    key: 'workflowCreateStepFromParentStepIdComponentState',
+    defaultValue: undefined,
+    componentInstanceContext: WorkflowVisualizerComponentInstanceContext,
+  });

packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts

@@ -1,7 +0,0 @@
-import { createState } from 'twenty-ui/utilities';
-export const workflowCreateStepFromParentStepIdState = createState<
-  string | undefined
->({
-  key: 'workflowCreateStepFromParentStepId',
-  defaultValue: undefined,
-});

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx

@@ -3,7 +3,7 @@ import { useServerlessFunctionUpdateFormState } from '@/settings/serverless-func
 import { useUpdateOneServerlessFunction } from '@/settings/serverless-functions/hooks/useUpdateOneServerlessFunction';
 import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
 import { WorkflowCodeAction } from '@/workflow/types/Workflow';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
 import { setNestedValue } from '@/workflow/workflow-steps/workflow-actions/code-action/utils/setNestedValue';
@@ -36,11 +36,11 @@ import { Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
 import { useEffect, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { useDebouncedCallback } from 'use-debounce';
+import { useRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { CodeEditor } from 'twenty-ui/input';
 import { IconCode, IconPlayerPlay, useIcons } from 'twenty-ui/display';
+import { CodeEditor } from 'twenty-ui/input';
+import { useDebouncedCallback } from 'use-debounce';
 
 const StyledCodeEditorContainer = styled.div`
   display: flex;
@@ -82,8 +82,10 @@ export const WorkflowEditActionServerlessFunction = ({
     useUpdateOneServerlessFunction(serverlessFunctionId);
   const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
 
-  const workflowId = useRecoilValue(workflowIdState);
-  const workflow = useWorkflowWithCurrentVersion(workflowId);
+  const workflowVisualizerWorkflowId = useRecoilComponentValueV2(
+    workflowVisualizerWorkflowIdComponentState,
+  );
+  const workflow = useWorkflowWithCurrentVersion(workflowVisualizerWorkflowId);
   const { availablePackages } = useGetAvailablePackages({
     id: serverlessFunctionId,
   });

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

@@ -8,7 +8,8 @@ import { FormTextFieldInput } from '@/object-record/record-field/form-types/comp
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Select } from '@/ui/input/components/Select';
-import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
 import { WorkflowSendEmailAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
@@ -20,11 +21,11 @@ import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
 import { assertUnreachable, isDefined } from 'twenty-shared/utils';
+import { IconPlus, useIcons } from 'twenty-ui/display';
+import { SelectOption } from 'twenty-ui/input';
 import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { IconPlus, useIcons } from 'twenty-ui/display';
-import { SelectOption } from 'twenty-ui/input';
 
 type WorkflowEditActionSendEmailProps = {
   action: WorkflowSendEmailAction;
@@ -53,8 +54,10 @@ export const WorkflowEditActionSendEmail = ({
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { triggerApisOAuth } = useTriggerApisOAuth();
 
-  const workflowId = useRecoilValue(workflowIdState);
-  const redirectUrl = `/object/workflow/${workflowId}`;
+  const workflowVisualizerWorkflowId = useRecoilComponentValueV2(
+    workflowVisualizerWorkflowIdComponentState,
+  );
+  const redirectUrl = `/object/workflow/${workflowVisualizerWorkflowId}`;
 
   const [formData, setFormData] = useState<SendEmailFormData>({
     connectedAccountId: action.settings.input.connectedAccountId,