From ac6087203948cb31d3c1e559c2da8b4bff26a8a2 Mon Sep 17 00:00:00 2001 From: Devessier Date: Wed, 6 Nov 2024 15:44:15 +0100 Subject: [PATCH 01/11] feat: center the flow when the right drawer opens --- .../components/WorkflowDiagramCanvasBase.tsx | 102 ++++++++++++++++-- 1 file changed, 94 insertions(+), 8 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index 79273d062aa6..3b1057bd7ca8 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -1,3 +1,6 @@ +import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState'; +import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { WorkflowVersionStatusTag } from '@/workflow/components/WorkflowVersionStatusTag'; import { workflowDiagramState } from '@/workflow/states/workflowDiagramState'; import { WorkflowVersionStatus } from '@/workflow/types/Workflow'; @@ -8,6 +11,7 @@ import { WorkflowDiagramNodeType, } from '@/workflow/types/WorkflowDiagram'; import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram'; +import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { applyEdgeChanges, @@ -15,13 +19,15 @@ import { Background, EdgeChange, FitViewOptions, + getNodesBounds, NodeChange, NodeProps, ReactFlow, + Viewport, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; -import React, { useMemo } from 'react'; -import { useSetRecoilState } from 'recoil'; +import React, { useLayoutEffect, useMemo, useRef, useState } from 'react'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import { GRAY_SCALE, isDefined } from 'twenty-ui'; const StyledResetReactflowStyles = styled.div` @@ -51,10 +57,10 @@ const StyledStatusTagContainer = styled.div` padding: ${({ theme }) => theme.spacing(2)}; `; -const defaultFitViewOptions: FitViewOptions = { +const defaultFitViewOptions = { minZoom: 1.3, maxZoom: 1.3, -}; +} satisfies FitViewOptions; export const WorkflowDiagramCanvasBase = ({ diagram, @@ -77,11 +83,41 @@ export const WorkflowDiagramCanvasBase = ({ >; children?: React.ReactNode; }) => { + const theme = useTheme(); + const { nodes, edges } = useMemo( () => getOrganizedDiagram(diagram), [diagram], ); + const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState); + const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState); + const isMobile = useIsMobile(); + + const rightDrawerState = useMemo(() => { + return !isRightDrawerOpen + ? 'closed' + : isRightDrawerMinimized + ? 'minimized' + : isMobile + ? 'fullScreen' + : 'normal'; + }, [isMobile, isRightDrawerMinimized, isRightDrawerOpen]); + + const rightDrawerWidth = theme.rightDrawerWidth; + + const containerWidth = useMemo(() => { + if ( + rightDrawerState === 'closed' || + rightDrawerState === 'fullScreen' || + rightDrawerState === 'minimized' + ) { + return 'auto'; + } + + return `calc(100% - ${rightDrawerWidth})`; + }, [rightDrawerState, rightDrawerWidth]); + const setWorkflowDiagram = useSetRecoilState(workflowDiagramState); const handleNodesChange = ( @@ -118,18 +154,68 @@ export const WorkflowDiagramCanvasBase = ({ }); }; + const containerRef = useRef(null); + + const [viewport, setViewport] = useState({ + x: 0, + y: 0, + zoom: defaultFitViewOptions.maxZoom, + }); + + useLayoutEffect(() => { + if (!isDefined(containerRef.current)) { + return; + } + + const observer = new ResizeObserver(() => { + setViewport((viewport) => { + if (!isDefined(containerRef.current)) { + return viewport; + } + + return { + ...viewport, + x: containerRef.current.offsetWidth / 2 - 150 / 2, + }; + }); + }); + + observer.observe(containerRef.current); + + return () => { + observer.disconnect(); + }; + }, []); + return ( - + { - fitView(defaultFitViewOptions); + viewport={viewport} + onViewportChange={setViewport} + onInit={({ getNodes }) => { + if (!isDefined(containerRef.current)) { + throw new Error('Expect the container ref to be defined'); + } + + const rect = getNodesBounds(getNodes()); + + setViewport({ + x: containerRef.current.offsetWidth / 2 - rect.width / 2, + y: 150, + zoom: defaultFitViewOptions.maxZoom, + }); }} + minZoom={defaultFitViewOptions.minZoom} + maxZoom={defaultFitViewOptions.maxZoom} nodeTypes={nodeTypes} - fitView nodes={nodes.map((node) => ({ ...node, draggable: false }))} edges={edges} onNodesChange={handleNodesChange} onEdgesChange={handleEdgesChange} + proOptions={{ hideAttribution: true }} > From bc1c2e5daae13a338d44c1ea56fb12ee15398339 Mon Sep 17 00:00:00 2001 From: Devessier Date: Wed, 6 Nov 2024 16:34:11 +0100 Subject: [PATCH 02/11] feat: set that reactflow nodes don't have a fixed width --- .../modules/workflow/components/WorkflowDiagramCanvasBase.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index 3b1057bd7ca8..a3b89c079852 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -41,6 +41,7 @@ const StyledResetReactflowStyles = styled.div` .react-flow__node-output, .react-flow__node-group { padding: 0; + width: auto; } --xy-node-border-radius: none; From 57238c5a4fff2fa32be90b1b3d63199c3174dd9a Mon Sep 17 00:00:00 2001 From: Devessier Date: Wed, 6 Nov 2024 16:36:28 +0100 Subject: [PATCH 03/11] feat: increase the dimensions of the reactflow nodes to ditch the 1.3 zoom transform which made pixels computations hard --- .../WorkflowDiagramBaseStepNode.tsx | 12 ++++++--- .../components/WorkflowDiagramCanvasBase.tsx | 16 ++++++----- .../WorkflowDiagramCanvasEditable.tsx | 27 ++++++++++--------- .../WorkflowDiagramCanvasReadonly.tsx | 25 +++++++++-------- .../WorkflowDiagramCreateStepNode.tsx | 2 +- .../WorkflowDiagramStepNodeBase.tsx | 8 +++--- .../WorkflowDiagramStepNodeEditable.tsx | 1 + 7 files changed, 53 insertions(+), 38 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx index 9d8c6b39b303..09a5cbaa7ae9 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx @@ -21,7 +21,7 @@ const StyledStepNodeType = styled.div` ${({ theme }) => theme.border.radius.sm} 0 0; color: ${({ theme }) => theme.color.gray50}; - font-size: ${({ theme }) => theme.font.size.xs}; + font-size: ${({ theme }) => theme.font.size.md}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}; @@ -62,9 +62,9 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>` const StyledStepNodeLabel = styled.div<{ variant?: Variant }>` align-items: center; display: flex; - font-size: ${({ theme }) => theme.font.size.md}; + font-size: ${({ theme }) => theme.font.size.lg}; font-weight: ${({ theme }) => theme.font.weight.medium}; - column-gap: ${({ theme }) => theme.spacing(2)}; + column-gap: ${({ theme }) => theme.spacing(3)}; color: ${({ variant, theme }) => variant === 'placeholder' ? theme.font.color.extraLight @@ -80,9 +80,13 @@ export const StyledTargetHandle = styled(Handle)` `; const StyledRightFloatingElementContainer = styled.div` + display: flex; + align-items: center; position: absolute; + right: ${({ theme }) => theme.spacing(-3)}; + bottom: 0; + top: 0; transform: translateX(100%); - right: ${({ theme }) => theme.spacing(-2)}; `; export const WorkflowDiagramBaseStepNode = ({ diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index a3b89c079852..26834ad67720 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -23,6 +23,7 @@ import { NodeChange, NodeProps, ReactFlow, + useReactFlow, Viewport, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; @@ -59,8 +60,8 @@ const StyledStatusTagContainer = styled.div` `; const defaultFitViewOptions = { - minZoom: 1.3, - maxZoom: 1.3, + minZoom: 1, + maxZoom: 1, } satisfies FitViewOptions; export const WorkflowDiagramCanvasBase = ({ @@ -85,6 +86,7 @@ export const WorkflowDiagramCanvasBase = ({ children?: React.ReactNode; }) => { const theme = useTheme(); + const reactflow = useReactFlow(); const { nodes, edges } = useMemo( () => getOrganizedDiagram(diagram), @@ -174,9 +176,11 @@ export const WorkflowDiagramCanvasBase = ({ return viewport; } + const rect = getNodesBounds(reactflow.getNodes()); + return { ...viewport, - x: containerRef.current.offsetWidth / 2 - 150 / 2, + x: containerRef.current.offsetWidth / 2 - rect.width / 2, }; }); }); @@ -186,7 +190,7 @@ export const WorkflowDiagramCanvasBase = ({ return () => { observer.disconnect(); }; - }, []); + }, [reactflow]); return ( { + onInit={() => { if (!isDefined(containerRef.current)) { throw new Error('Expect the container ref to be defined'); } - const rect = getNodesBounds(getNodes()); + const rect = getNodesBounds(reactflow.getNodes()); setViewport({ x: containerRef.current.offsetWidth / 2 - rect.width / 2, diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasEditable.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasEditable.tsx index ed953f511fa3..fe866fa72697 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasEditable.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasEditable.tsx @@ -5,6 +5,7 @@ import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagr import { WorkflowDiagramStepNodeEditable } from '@/workflow/components/WorkflowDiagramStepNodeEditable'; import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow'; import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram'; +import { ReactFlowProvider } from '@xyflow/react'; export const WorkflowDiagramCanvasEditable = ({ diagram, @@ -14,17 +15,19 @@ export const WorkflowDiagramCanvasEditable = ({ workflowWithCurrentVersion: WorkflowWithCurrentVersion; }) => { return ( - - - + + + + + ); }; diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonly.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonly.tsx index d6c50fa9034e..5302046f22f9 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonly.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonly.tsx @@ -4,6 +4,7 @@ import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagr import { WorkflowDiagramStepNodeReadonly } from '@/workflow/components/WorkflowDiagramStepNodeReadonly'; import { WorkflowVersion } from '@/workflow/types/Workflow'; import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram'; +import { ReactFlowProvider } from '@xyflow/react'; export const WorkflowDiagramCanvasReadonly = ({ diagram, @@ -13,16 +14,18 @@ export const WorkflowDiagramCanvasReadonly = ({ workflowVersion: WorkflowVersion; }) => { return ( - - - + + + + + ); }; diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx index ec0614037889..98b93c689ada 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx @@ -11,7 +11,7 @@ export const WorkflowDiagramCreateStepNode = () => { <> - + ); }; diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx index 9cef1fbb47bd..04c6a62be931 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx @@ -31,7 +31,7 @@ export const WorkflowDiagramStepNodeBase = ({ return ( @@ -41,7 +41,7 @@ export const WorkflowDiagramStepNodeBase = ({ return ( @@ -57,7 +57,7 @@ export const WorkflowDiagramStepNodeBase = ({ return ( @@ -66,7 +66,7 @@ export const WorkflowDiagramStepNodeBase = ({ case 'SEND_EMAIL': { return ( - + ); } diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeEditable.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeEditable.tsx index 579e3c923491..9df7f0bbc42f 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeEditable.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeEditable.tsx @@ -32,6 +32,7 @@ export const WorkflowDiagramStepNodeEditable = ({ RightFloatingElement={ selected ? ( { return deleteOneStep(); From f9ff8d1e2f867a19769d057903830dcd24c86d2d Mon Sep 17 00:00:00 2001 From: Devessier Date: Wed, 6 Nov 2024 16:44:51 +0100 Subject: [PATCH 04/11] feat: ensure the text of the nodes never wraps --- .../modules/workflow/components/WorkflowDiagramCanvasBase.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index 26834ad67720..a922cbb1ff2c 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -43,6 +43,8 @@ const StyledResetReactflowStyles = styled.div` .react-flow__node-group { padding: 0; width: auto; + text-align: start; + white-space: nowrap; } --xy-node-border-radius: none; From 595fdfa49036bb578cd76a58731d6289d0962029 Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 16:08:49 +0100 Subject: [PATCH 05/11] feat: animate the workflow diagram when the right drawer is opened --- .../components/WorkflowDiagramCanvasBase.tsx | 79 +++++++------------ 1 file changed, 30 insertions(+), 49 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index a922cbb1ff2c..fe6e3dd014f9 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -24,10 +24,9 @@ import { NodeProps, ReactFlow, useReactFlow, - Viewport, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; -import React, { useLayoutEffect, useMemo, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { GRAY_SCALE, isDefined } from 'twenty-ui'; @@ -109,19 +108,7 @@ export const WorkflowDiagramCanvasBase = ({ : 'normal'; }, [isMobile, isRightDrawerMinimized, isRightDrawerOpen]); - const rightDrawerWidth = theme.rightDrawerWidth; - - const containerWidth = useMemo(() => { - if ( - rightDrawerState === 'closed' || - rightDrawerState === 'fullScreen' || - rightDrawerState === 'minimized' - ) { - return 'auto'; - } - - return `calc(100% - ${rightDrawerWidth})`; - }, [rightDrawerState, rightDrawerWidth]); + const rightDrawerWidth = 500; const setWorkflowDiagram = useSetRecoilState(workflowDiagramState); @@ -161,56 +148,50 @@ export const WorkflowDiagramCanvasBase = ({ const containerRef = useRef(null); - const [viewport, setViewport] = useState({ - x: 0, - y: 0, - zoom: defaultFitViewOptions.maxZoom, - }); - - useLayoutEffect(() => { - if (!isDefined(containerRef.current)) { + useEffect(() => { + if (!isDefined(containerRef.current) || !reactflow.viewportInitialized) { return; } - const observer = new ResizeObserver(() => { - setViewport((viewport) => { - if (!isDefined(containerRef.current)) { - return viewport; - } + const currentViewport = reactflow.getViewport(); - const rect = getNodesBounds(reactflow.getNodes()); + const flowBounds = getNodesBounds(reactflow.getNodes()); - return { - ...viewport, - x: containerRef.current.offsetWidth / 2 - rect.width / 2, - }; - }); - }); + let visibleRightDrawerWidth = 0; + if (rightDrawerState === 'normal') { + visibleRightDrawerWidth = rightDrawerWidth; + } - observer.observe(containerRef.current); + const viewportX = + (containerRef.current.offsetWidth + visibleRightDrawerWidth) / 2 - + flowBounds.width / 2; - return () => { - observer.disconnect(); - }; - }, [reactflow]); + let animationDuration = 0; + if (currentViewport.x !== viewportX) { + animationDuration = 300; + } + + reactflow.setViewport( + { + ...currentViewport, + x: viewportX - visibleRightDrawerWidth, + }, + { duration: animationDuration }, + ); + }, [reactflow, rightDrawerState, rightDrawerWidth]); return ( - + { if (!isDefined(containerRef.current)) { throw new Error('Expect the container ref to be defined'); } - const rect = getNodesBounds(reactflow.getNodes()); + const flowBounds = getNodesBounds(reactflow.getNodes()); - setViewport({ - x: containerRef.current.offsetWidth / 2 - rect.width / 2, + reactflow.setViewport({ + x: containerRef.current.offsetWidth / 2 - flowBounds.width / 2, y: 150, zoom: defaultFitViewOptions.maxZoom, }); From 5fef78d1094df5c6f43dfcb5b299e04c9c6af9c9 Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 16:10:14 +0100 Subject: [PATCH 06/11] chore: clean --- .../modules/workflow/components/WorkflowDiagramCanvasBase.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index fe6e3dd014f9..e1cba3bde019 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -11,7 +11,6 @@ import { WorkflowDiagramNodeType, } from '@/workflow/types/WorkflowDiagram'; import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram'; -import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { applyEdgeChanges, @@ -86,7 +85,6 @@ export const WorkflowDiagramCanvasBase = ({ >; children?: React.ReactNode; }) => { - const theme = useTheme(); const reactflow = useReactFlow(); const { nodes, edges } = useMemo( From 04ac16396ddc017328ecd89057499b58caf1674e Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 16:15:56 +0100 Subject: [PATCH 07/11] refactor: delete condition that doesn't work --- .../workflow/components/WorkflowDiagramCanvasBase.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index e1cba3bde019..264cd5747bde 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -164,17 +164,12 @@ export const WorkflowDiagramCanvasBase = ({ (containerRef.current.offsetWidth + visibleRightDrawerWidth) / 2 - flowBounds.width / 2; - let animationDuration = 0; - if (currentViewport.x !== viewportX) { - animationDuration = 300; - } - reactflow.setViewport( { ...currentViewport, x: viewportX - visibleRightDrawerWidth, }, - { duration: animationDuration }, + { duration: 300 }, ); }, [reactflow, rightDrawerState, rightDrawerWidth]); From 9d7ca617e3053ea824eef6063e35f0ebc2f518c3 Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 16:20:09 +0100 Subject: [PATCH 08/11] fix: ensure the workflow status goes on top of the workflow diagram --- .../workflow/components/WorkflowDiagramCanvasBase.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index 264cd5747bde..a9a24c1bde41 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -201,11 +201,11 @@ export const WorkflowDiagramCanvasBase = ({ {children} - - - - + + + + ); }; From c46c6d588bbe8efc98f30f72b2d3994bd21588f9 Mon Sep 17 00:00:00 2001 From: Devessier Date: Tue, 12 Nov 2024 14:48:09 +0100 Subject: [PATCH 09/11] feat: make edges non deletable --- .../src/modules/workflow/utils/addCreateStepNodes.ts | 1 + .../src/modules/workflow/utils/generateWorkflowDiagram.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts b/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts index ffde2d1d88aa..1e76140993f4 100644 --- a/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts +++ b/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts @@ -36,6 +36,7 @@ export const addCreateStepNodes = ({ nodes, edges }: WorkflowDiagram) => { markerEnd: { type: MarkerType.ArrowClosed, }, + deletable: false, }); } diff --git a/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts index 971e996684f3..93fdaae51b0b 100644 --- a/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts +++ b/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts @@ -51,6 +51,7 @@ export const generateWorkflowDiagram = ({ markerEnd: { type: MarkerType.ArrowClosed, }, + deletable: false, }); return nodeId; From 13aeb8a8c05ebeb2e2473f117e8d654fcab3d6e3 Mon Sep 17 00:00:00 2001 From: Devessier Date: Tue, 12 Nov 2024 14:48:36 +0100 Subject: [PATCH 10/11] refactor: simplify code and remove duplication --- .../components/WorkflowDiagramCanvasBase.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx index a9a24c1bde41..55aab89ae27d 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx @@ -27,7 +27,7 @@ import { import '@xyflow/react/dist/style.css'; import React, { useEffect, useMemo, useRef } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { GRAY_SCALE, isDefined } from 'twenty-ui'; +import { GRAY_SCALE, isDefined, THEME_COMMON } from 'twenty-ui'; const StyledResetReactflowStyles = styled.div` height: 100%; @@ -96,17 +96,17 @@ export const WorkflowDiagramCanvasBase = ({ const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState); const isMobile = useIsMobile(); - const rightDrawerState = useMemo(() => { - return !isRightDrawerOpen - ? 'closed' - : isRightDrawerMinimized - ? 'minimized' - : isMobile - ? 'fullScreen' - : 'normal'; - }, [isMobile, isRightDrawerMinimized, isRightDrawerOpen]); - - const rightDrawerWidth = 500; + const rightDrawerState = !isRightDrawerOpen + ? 'closed' + : isRightDrawerMinimized + ? 'minimized' + : isMobile + ? 'fullScreen' + : 'normal'; + + const rightDrawerWidth = Number( + THEME_COMMON.rightDrawerWidth.replace('px', ''), + ); const setWorkflowDiagram = useSetRecoilState(workflowDiagramState); From 9b0c422b0f108563d0390bfa13641c6c6cdcbd2d Mon Sep 17 00:00:00 2001 From: Devessier Date: Tue, 12 Nov 2024 15:05:22 +0100 Subject: [PATCH 11/11] feat: stop positioning the node action type absolutely and include it to the height of the element --- .../workflow/components/WorkflowDiagramBaseStepNode.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx index 09a5cbaa7ae9..0318f61a6bf4 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx @@ -24,10 +24,9 @@ const StyledStepNodeType = styled.div` font-size: ${({ theme }) => theme.font.size.md}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; + margin-left: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}; - position: absolute; - top: 0; - transform: translateY(-100%); + align-self: flex-start; .selectable.selected &, .selectable:focus &, @@ -108,9 +107,9 @@ export const WorkflowDiagramBaseStepNode = ({ ) : null} - - {capitalize(nodeType)} + {capitalize(nodeType)} + {Icon}