From 79b8c4660c191e1d41c53901781072890035f561 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Mon, 16 Jun 2025 15:52:05 +0200 Subject: [PATCH] Fix side panel closing when clicking on workflow nodes or options (#12629) This bug was introduced by https://github.com/twentyhq/twenty/pull/12609. This previous PR was made to prevent interacting with elements behind the side panel when it is opened. But in the workflow visualizer we need to interact with the diagram nodes. Fix: add the workflow visualizer nodes and options to the excluded click outside ids of the side panel. https://github.com/user-attachments/assets/1fb770d6-1c17-4ac1-b1a9-ed162bdbe298 --- .../components/CommandMenuOpenContainer.tsx | 6 ++++++ .../components/WorkflowDiagramCreateStepNode.tsx | 13 ++++++++----- .../components/WorkflowDiagramEdgeOptions.tsx | 15 ++++++++++----- .../components/WorkflowDiagramStepNodeBase.tsx | 8 ++++++-- ...WorkflowDiagramCreateStepNodeClickOutsideId.ts | 2 ++ .../WorkflowDiagramEdgeOptionsClickOutsideId.ts | 2 ++ .../WorkflowDiagramStepNodeClickOutsideId.ts | 2 ++ 7 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId.ts create mode 100644 packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId.ts create mode 100644 packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId.ts diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx index 517e44a3a..b4b76a244 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx @@ -9,6 +9,9 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId'; +import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId'; +import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; @@ -74,6 +77,9 @@ export const CommandMenuOpenContainer = ({ LINK_CHIP_CLICK_OUTSIDE_ID, RECORD_CHIP_CLICK_OUTSIDE_ID, SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID, + WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID, + WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID, + WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID, ], }); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx index 50be5747c..dee203250 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx @@ -1,9 +1,10 @@ -import styled from '@emotion/styled'; -import { Position } from '@xyflow/react'; -import { IconButton } from 'twenty-ui/input'; -import { IconPlus } from 'twenty-ui/display'; import { WorkflowDiagramBaseHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle'; import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth'; +import { WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId'; +import styled from '@emotion/styled'; +import { Position } from '@xyflow/react'; +import { IconPlus } from 'twenty-ui/display'; +import { IconButton } from 'twenty-ui/input'; const StyledContainer = styled.div` left: ${CREATE_STEP_NODE_WIDTH / 2}px; @@ -13,7 +14,9 @@ const StyledContainer = styled.div` export const WorkflowDiagramCreateStepNode = () => { return ( - + diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeOptions.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeOptions.tsx index 22f0085da..70dedbcd3 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeOptions.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeOptions.tsx @@ -1,10 +1,11 @@ -import { EdgeLabelRenderer } from '@xyflow/react'; import { STEP_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth'; -import styled from '@emotion/styled'; -import { IconButtonGroup } from 'twenty-ui/input'; -import { IconPlus } from 'twenty-ui/display'; +import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId'; import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation'; +import styled from '@emotion/styled'; +import { EdgeLabelRenderer } from '@xyflow/react'; import { isDefined } from 'twenty-shared/utils'; +import { IconPlus } from 'twenty-ui/display'; +import { IconButtonGroup } from 'twenty-ui/input'; const EDGE_OPTION_BUTTON_LEFT_MARGIN = 8; @@ -38,7 +39,11 @@ export const WorkflowDiagramEdgeOptions = ({ return ( - + { return ( - + {nodeType !== 'trigger' ? ( ) : null} diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId.ts new file mode 100644 index 000000000..3a7706fa5 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId.ts @@ -0,0 +1,2 @@ +export const WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID = + 'workflow-diagram-create-step-node'; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId.ts new file mode 100644 index 000000000..59df20ba6 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId.ts @@ -0,0 +1,2 @@ +export const WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID = + 'workflow-diagram-edge-options'; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId.ts new file mode 100644 index 000000000..05449015f --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId.ts @@ -0,0 +1,2 @@ +export const WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID = + 'workflow-diagram-step-node-base';