Create new steps in workflow editor

packages/twenty-front/setupTests.ts

@@ -3,3 +3,14 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+/**
+ * The structuredClone global function is not available in jsdom, it needs to be mocked for now.
+ *
+ * The most naive way to mock structuredClone is to use JSON.stringify and JSON.parse. This works
+ * for arguments with simple types like primitives, arrays and objects, but doesn't work with functions,
+ * Map, Set, etc.
+ */
+global.structuredClone = (val) => {
+  return JSON.parse(JSON.stringify(val));
+};

packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts

@@ -30,4 +30,5 @@ export enum CoreObjectNameSingular {
   MessageThreadSubscriber = 'messageThreadSubscriber',
   Workflow = 'workflow',
   MessageChannelMessageAssociation = 'messageChannelMessageAssociation',
+  WorkflowVersion = 'workflowVersion',
 }

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -9,10 +9,11 @@ import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isR
 
 import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
 import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
+import { RightDrawerWorkflowEditStep } from '@/workflow/components/RightDrawerWorkflowEditStep';
+import { RightDrawerWorkflowSelectAction } from '@/workflow/components/RightDrawerWorkflowSelectAction';
 import { isDefined } from 'twenty-ui';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
-import { RightDrawerWorkflow } from '@/workflow/components/RightDrawerWorkflow';
 
 const StyledRightDrawerPage = styled.div`
   display: flex;
@@ -36,7 +37,10 @@ const RIGHT_DRAWER_PAGES_CONFIG: ComponentByRightDrawerPage = {
   [RightDrawerPages.ViewCalendarEvent]: <RightDrawerCalendarEvent />,
   [RightDrawerPages.ViewRecord]: <RightDrawerRecord />,
   [RightDrawerPages.Copilot]: <RightDrawerAIChat />,
-  [RightDrawerPages.Workflow]: <RightDrawerWorkflow />,
+  [RightDrawerPages.WorkflowStepSelectAction]: (
+    <RightDrawerWorkflowSelectAction />
+  ),
+  [RightDrawerPages.WorkflowStepEdit]: <RightDrawerWorkflowEditStep />,
 };
 
 export const RightDrawerRouter = () => {

packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts

@@ -3,5 +3,6 @@ export enum RightDrawerPages {
   ViewCalendarEvent = 'view-calendar-event',
   ViewRecord = 'view-record',
   Copilot = 'copilot',
-  Workflow = 'workflow',
+  WorkflowStepSelectAction = 'workflow-step-select-action',
+  WorkflowStepEdit = 'workflow-step-edit',
 }

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

@@ -0,0 +1,10 @@
+import { showPageWorkflowSelectedNodeState } from '@/workflow/states/showPageWorkflowSelectedNodeState';
+import { useRecoilValue } from 'recoil';
+
+export const RightDrawerWorkflowEditStep = () => {
+  const showPageWorkflowSelectedNode = useRecoilValue(
+    showPageWorkflowSelectedNodeState,
+  );
+
+  return <p>{showPageWorkflowSelectedNode}</p>;
+};

packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectAction.tsx

@@ -0,0 +1,28 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { RightDrawerWorkflowSelectActionContent } from '@/workflow/components/RightDrawerWorkflowSelectActionContent';
+import { showPageWorkflowIdState } from '@/workflow/states/showPageWorkflowIdState';
+import { Workflow } from '@/workflow/types/Workflow';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+export const RightDrawerWorkflowSelectAction = () => {
+  const showPageWorkflowId = useRecoilValue(showPageWorkflowIdState);
+
+  const { record: workflow } = useFindOneRecord<Workflow>({
+    objectNameSingular: CoreObjectNameSingular.Workflow,
+    objectRecordId: showPageWorkflowId,
+    recordGqlFields: {
+      id: true,
+      name: true,
+      versions: true,
+      publishedVersionId: true,
+    },
+  });
+
+  if (!isDefined(workflow)) {
+    return null;
+  }
+
+  return <RightDrawerWorkflowSelectActionContent workflow={workflow} />;
+};

packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx

@@ -0,0 +1,60 @@
+import { TabList } from '@/ui/layout/tab/components/TabList';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { useRightDrawerWorkflowSelectAction } from '@/workflow/hooks/useRightDrawerWorkflowSelectAction';
+import { Workflow } from '@/workflow/types/Workflow';
+import styled from '@emotion/styled';
+
+// FIXME: copy-pasted
+const StyledTabListContainer = styled.div`
+  align-items: center;
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  box-sizing: border-box;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: 40px;
+`;
+
+const StyledActionListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+
+  padding-block: ${({ theme }) => theme.spacing(1)};
+  padding-inline: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const TAB_LIST_COMPONENT_ID =
+  'workflow-select-action-page-right-tab-list';
+
+export const RightDrawerWorkflowSelectActionContent = ({
+  workflow,
+}: {
+  workflow: Workflow;
+}) => {
+  const tabListId = `${TAB_LIST_COMPONENT_ID}`;
+
+  const { tabs, options, handleActionClick } =
+    useRightDrawerWorkflowSelectAction({ tabListId, workflow });
+
+  return (
+    <>
+      <StyledTabListContainer>
+        <TabList loading={false} tabListId={tabListId} tabs={tabs} />
+      </StyledTabListContainer>
+
+      <StyledActionListContainer>
+        {options.map((option) => (
+          <MenuItem
+            key={option.id}
+            LeftIcon={option.icon}
+            text={option.name}
+            onClick={() => {
+              handleActionClick(option.id);
+            }}
+          />
+        ))}
+      </StyledActionListContainer>
+    </>
+  );
+};

packages/twenty-front/src/modules/workflow/components/WorkflowShowPageDiagram.tsx

@@ -1,4 +1,5 @@
-import { WorkflowShowPageDiagramCreateStepNode } from '@/workflow/components/WorkflowShowPageDiagramCreateStepNode.tsx';
+import { WorkflowShowPageDiagramCreateStepNode } from '@/workflow/components/WorkflowShowPageDiagramCreateStepNode';
+import { WorkflowShowPageDiagramEffect } from '@/workflow/components/WorkflowShowPageDiagramEffect';
 import { WorkflowShowPageDiagramStepNode } from '@/workflow/components/WorkflowShowPageDiagramStepNode';
 import { showPageWorkflowDiagramState } from '@/workflow/states/showPageWorkflowDiagramState';
 import {
@@ -80,6 +81,8 @@ export const WorkflowShowPageDiagram = ({
       onNodesChange={handleNodesChange}
       onEdgesChange={handleEdgesChange}
     >
+      <WorkflowShowPageDiagramEffect />
+
       <Background color={GRAY_SCALE.gray25} size={2} />
     </ReactFlow>
   );

packages/twenty-front/src/modules/workflow/components/WorkflowShowPageDiagramCreateStepNode.tsx.tsx → packages/twenty-front/src/modules/workflow/components/WorkflowShowPageDiagramCreateStepNode.tsx

@@ -1,6 +1,4 @@
 import { IconButton } from '@/ui/input/button/components/IconButton';
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import { IconPlus } from 'twenty-ui';
@@ -10,17 +8,11 @@ export const StyledTargetHandle = styled(Handle)`
 `;
 
 export const WorkflowShowPageDiagramCreateStepNode = () => {
-  const { openRightDrawer } = useRightDrawer();
-
-  const handleCreateStepNodeButtonClick = () => {
-    openRightDrawer(RightDrawerPages.Workflow);
-  };
-
   return (
-    <div>
+    <>
       <StyledTargetHandle type="target" position={Position.Top} />
 
-      <IconButton Icon={IconPlus} onClick={handleCreateStepNodeButtonClick} />
-    </div>
+      <IconButton Icon={IconPlus} />
+    </>
   );
 };

packages/twenty-front/src/modules/workflow/components/WorkflowShowPageDiagramEffect.tsx

@@ -0,0 +1,94 @@
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { useStartNodeCreation } from '@/workflow/hooks/useStartNodeCreation';
+import { showPageWorkflowDiagramTriggerNodeSelectionState } from '@/workflow/states/showPageWorkflowDiagramTriggerNodeSelectionState';
+import { showPageWorkflowSelectedNodeState } from '@/workflow/states/showPageWorkflowSelectedNodeState';
+import {
+  WorkflowDiagramEdge,
+  WorkflowDiagramNode,
+} from '@/workflow/types/WorkflowDiagram';
+import {
+  OnSelectionChangeParams,
+  useOnSelectionChange,
+  useReactFlow,
+} from '@xyflow/react';
+import { useCallback, useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+export const WorkflowShowPageDiagramEffect = () => {
+  const reactflow = useReactFlow<WorkflowDiagramNode, WorkflowDiagramEdge>();
+
+  const { startNodeCreation } = useStartNodeCreation();
+
+  const { openRightDrawer, closeRightDrawer } = useRightDrawer();
+  const setShowPageWorkflowSelectedNode = useSetRecoilState(
+    showPageWorkflowSelectedNodeState,
+  );
+
+  const showPageWorkflowDiagramTriggerNodeSelection = useRecoilValue(
+    showPageWorkflowDiagramTriggerNodeSelectionState,
+  );
+
+  /**
+   * The callback executed when the selection state of nodes or edges changes.
+   * It's called when a node or an edge is selected or unselected.
+   *
+   * Relying on this callback is safer than listing to click events as nodes and edges
+   * can be selected in many ways, either via mouse click, tab key or even programatically.
+   *
+   * The callback is currently used to open right drawers for step creation or step editing.
+   */
+  const handleSelectionChange = useCallback(
+    ({ nodes }: OnSelectionChangeParams) => {
+      const selectedNode = nodes[0] as WorkflowDiagramNode;
+      const isClosingStep = isDefined(selectedNode) === false;
+
+      if (isClosingStep) {
+        closeRightDrawer();
+
+        return;
+      }
+
+      const isCreateStepNode = selectedNode.type === 'create-step';
+      if (isCreateStepNode) {
+        if (selectedNode.data.nodeType !== 'create-step') {
+          throw new Error('Expected selected node to be a create step node.');
+        }
+
+        startNodeCreation(selectedNode.data.parentNodeId);
+
+        return;
+      }
+
+      setShowPageWorkflowSelectedNode(selectedNode.id);
+      openRightDrawer(RightDrawerPages.WorkflowStepEdit);
+    },
+    [
+      closeRightDrawer,
+      openRightDrawer,
+      setShowPageWorkflowSelectedNode,
+      startNodeCreation,
+    ],
+  );
+
+  useOnSelectionChange({
+    onChange: handleSelectionChange,
+  });
+
+  /**
+   * We can't access the reactflow instance everywhere, only in children components of the <Reactflow /> component,
+   * so we use a useEffect and a Recoil state to trigger actions on the diagram, like programatically selecting a node.
+   */
+  useEffect(() => {
+    if (!isDefined(showPageWorkflowDiagramTriggerNodeSelection)) {
+      return;
+    }
+
+    reactflow.updateNode(showPageWorkflowDiagramTriggerNodeSelection, {
+      selected: true,
+    });
+  }, [reactflow, showPageWorkflowDiagramTriggerNodeSelection]);
+
+  return null;
+};

packages/twenty-front/src/modules/workflow/components/WorkflowShowPageEffect.tsx

@@ -2,6 +2,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { showPageWorkflowDiagramState } from '@/workflow/states/showPageWorkflowDiagramState';
 import { showPageWorkflowErrorState } from '@/workflow/states/showPageWorkflowErrorState';
+import { showPageWorkflowIdState } from '@/workflow/states/showPageWorkflowIdState';
 import { showPageWorkflowLoadingState } from '@/workflow/states/showPageWorkflowLoadingState';
 import { Workflow } from '@/workflow/types/Workflow';
 import { addCreateStepNodes } from '@/workflow/utils/addCreateStepNodes';
@@ -32,6 +33,7 @@ export const WorkflowShowPageEffect = ({
     },
   });
 
+  const setShowPageWorkflowId = useSetRecoilState(showPageWorkflowIdState);
   const setCurrentWorkflowData = useSetRecoilState(
     showPageWorkflowDiagramState,
   );
@@ -40,6 +42,10 @@ export const WorkflowShowPageEffect = ({
   );
   const setCurrentWorkflowError = useSetRecoilState(showPageWorkflowErrorState);
 
+  useEffect(() => {
+    setShowPageWorkflowId(workflowId);
+  }, [setShowPageWorkflowId, workflowId]);
+
   useEffect(() => {
     const flowLastVersion = getWorkflowLastDiagramVersion(workflow);
     const flowWithCreateStepNodes = addCreateStepNodes(flowLastVersion);