admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix side panel closing when clicking on workflow nodes or options (#12629)

Browse Source 
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
This commit is contained in:
Raphaël Bosi
2025-06-16 15:52:05 +02:00
committed by GitHub
parent b0cce3d74a
commit 79b8c4660c
7 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
View File

@ -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,
],
});

13
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
View File

@ -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 (
<StyledContainer>
<StyledContainer
data-click-outside-id={WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID}
>
<WorkflowDiagramBaseHandle type="target" position={Position.Top} />
<IconButton Icon={IconPlus} size="medium" ariaLabel="Add a step" />

15
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeOptions.tsx
View File

@ -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 (
<EdgeLabelRenderer>
<StyledContainer labelX={labelX} labelY={labelY}>
<StyledContainer
labelX={labelX}
labelY={labelY}
data-click-outside-id={WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID}
>
<StyledIconButtonGroup
className="nodrag nopan"
iconButtons={[

8
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
View File

@ -1,4 +1,6 @@
import { WorkflowDiagramBaseHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle';
import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant';
import { css } from '@emotion/react';
@ -8,7 +10,6 @@ import React from 'react';
import { capitalize, isDefined } from 'twenty-shared/utils';
import { Label, OverflowingTextWithTooltip } from 'twenty-ui/display';
import { Loader } from 'twenty-ui/feedback';
import { WorkflowDiagramBaseHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle';
const StyledStepNodeContainer = styled.div`
display: flex;
@ -185,7 +186,10 @@ export const WorkflowDiagramStepNodeBase = ({
RightFloatingElement?: React.ReactNode;
}) => {
return (
<StyledStepNodeContainer className="workflow-node-container">
<StyledStepNodeContainer
className="workflow-node-container"
data-click-outside-id={WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID}
>
{nodeType !== 'trigger' ? (
<WorkflowDiagramBaseHandle type="target" position={Position.Top} />
) : null}

2
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId.ts Normal file
View File

@ -0,0 +1,2 @@
export const WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID =
'workflow-diagram-create-step-node';

2
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId.ts Normal file
View File

@ -0,0 +1,2 @@
export const WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID =
'workflow-diagram-edge-options';

2
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId.ts Normal file
View File

@ -0,0 +1,2 @@
export const WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID =
'workflow-diagram-step-node-base';