Continue workflow folders re-ordering (#9315)

- put actions in steps
- move hooks
- move states

packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/__tests__/useTriggerNodeSelection.test.tsx

@@ -0,0 +1,65 @@
+import { useTriggerNodeSelection } from '@/workflow/workflow-diagram/hooks/useTriggerNodeSelection';
+import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState';
+import { act, renderHook } from '@testing-library/react';
+import { useReactFlow } from '@xyflow/react';
+import { RecoilRoot, useRecoilState } from 'recoil';
+
+jest.mock('@xyflow/react', () => ({
+  useReactFlow: jest.fn(),
+}));
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <RecoilRoot>{children}</RecoilRoot>
+);
+
+describe('useTriggerNodeSelection', () => {
+  const mockSetNodes = jest.fn();
+
+  beforeEach(() => {
+    (useReactFlow as jest.Mock).mockReturnValue({
+      setNodes: mockSetNodes,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should trigger node selection', () => {
+    const { result } = renderHook(
+      () => {
+        const [
+          workflowDiagramTriggerNodeSelection,
+          setWorkflowDiagramTriggerNodeSelection,
+        ] = useRecoilState(workflowDiagramTriggerNodeSelectionState);
+
+        useTriggerNodeSelection();
+
+        return {
+          workflowDiagramTriggerNodeSelection,
+          setWorkflowDiagramTriggerNodeSelection,
+        };
+      },
+      {
+        wrapper,
+      },
+    );
+
+    const mockNodeId = 'test-node-id';
+
+    act(() => {
+      result.current.setWorkflowDiagramTriggerNodeSelection(mockNodeId);
+    });
+
+    expect(result.current.workflowDiagramTriggerNodeSelection).toBeUndefined();
+  });
+
+  it('should not trigger update if state is not defined', () => {
+    renderHook(() => useTriggerNodeSelection(), {
+      wrapper,
+    });
+
+    // Ensure updateNode is not called when state is undefined
+    expect(mockSetNodes).not.toHaveBeenCalled();
+  });
+});

packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts

@@ -0,0 +1,33 @@
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { workflowCreateStepFromParentStepIdState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState';
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+export const useStartNodeCreation = () => {
+  const { openRightDrawer } = useRightDrawer();
+  const setWorkflowCreateStepFromParentStepId = useSetRecoilState(
+    workflowCreateStepFromParentStepIdState,
+  );
+  const setHotkeyScope = useSetHotkeyScope();
+
+  /**
+   * This function is used in a context where dependencies shouldn't change much.
+   * That's why its wrapped in a `useCallback` hook. Removing memoization might break the app unexpectedly.
+   */
+  const startNodeCreation = useCallback(
+    (parentNodeId: string) => {
+      setWorkflowCreateStepFromParentStepId(parentNodeId);
+
+      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+      openRightDrawer(RightDrawerPages.WorkflowStepSelectAction);
+    },
+    [openRightDrawer, setWorkflowCreateStepFromParentStepId, setHotkeyScope],
+  );
+
+  return {
+    startNodeCreation,
+  };
+};

packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useTriggerNodeSelection.ts

@@ -0,0 +1,37 @@
+import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState';
+import {
+  WorkflowDiagramEdge,
+  WorkflowDiagramNode,
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { useReactFlow } from '@xyflow/react';
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+export const useTriggerNodeSelection = () => {
+  const reactflow = useReactFlow<WorkflowDiagramNode, WorkflowDiagramEdge>();
+
+  const [
+    workflowDiagramTriggerNodeSelection,
+    setWorkflowDiagramTriggerNodeSelection,
+  ] = useRecoilState(workflowDiagramTriggerNodeSelectionState);
+
+  useEffect(() => {
+    if (!isDefined(workflowDiagramTriggerNodeSelection)) {
+      return;
+    }
+
+    reactflow.setNodes((nodes) =>
+      nodes.map((node) => ({
+        ...node,
+        selected: workflowDiagramTriggerNodeSelection === node.id,
+      })),
+    );
+
+    setWorkflowDiagramTriggerNodeSelection(undefined);
+  }, [
+    reactflow,
+    setWorkflowDiagramTriggerNodeSelection,
+    workflowDiagramTriggerNodeSelection,
+  ]);
+};