diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdgeEditable.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdgeEditable.tsx index 6f74a25df63..2129f7cce0d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdgeEditable.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdgeEditable.tsx @@ -13,15 +13,16 @@ import { useOpenWorkflowEditFilterInCommandMenu } from '@/workflow/workflow-diag import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation'; import { type WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep'; +import { useDeleteEdge } from '@/workflow/workflow-steps/hooks/useDeleteEdge'; import { EdgeLabelRenderer, type EdgeProps, getBezierPath, } from '@xyflow/react'; -import { useContext } from 'react'; +import { type MouseEvent, useContext } from 'react'; import { useSetRecoilState } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; -import { IconFilter, IconPlus } from 'twenty-ui/display'; +import { IconFilter, IconPlus, IconTrash } from 'twenty-ui/display'; type WorkflowDiagramDefaultEdgeEditableProps = EdgeProps; @@ -54,6 +55,8 @@ export const WorkflowDiagramDefaultEdgeEditable = ({ const { createStep } = useCreateStep({ workflow }); + const { deleteEdge } = useDeleteEdge({ workflow }); + const { startNodeCreation, isNodeCreationStarted } = useStartNodeCreation(); const nodeCreationStarted = isNodeCreationStarted({ @@ -97,6 +100,12 @@ export const WorkflowDiagramDefaultEdgeEditable = ({ }); }; + const handleDeleteBranch = async (event: MouseEvent) => { + event.stopPropagation(); + + await deleteEdge({ source, target }); + }; + return ( <> diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilterEdgeEditable.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilterEdgeEditable.tsx index 725ed6fd6d7..9332547de23 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilterEdgeEditable.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramFilterEdgeEditable.tsx @@ -26,9 +26,11 @@ import { type WorkflowDiagramEdgeData, } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; import { getWorkflowDiagramNodeSelectedColors } from '@/workflow/workflow-diagram/utils/getWorkflowDiagramNodeSelectedColors'; +import { useDeleteEdge } from '@/workflow/workflow-steps/hooks/useDeleteEdge'; import { useDeleteStep } from '@/workflow/workflow-steps/hooks/useDeleteStep'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { useLingui } from '@lingui/react/macro'; import { isNonEmptyString } from '@sniptt/guards'; import { EdgeLabelRenderer, @@ -37,12 +39,12 @@ import { } from '@xyflow/react'; import { useContext } from 'react'; import { useSetRecoilState } from 'recoil'; -import { isDefined } from 'twenty-shared/utils'; import { IconDotsVertical, IconFilter, IconFilterX, IconPlus, + IconTrash, } from 'twenty-ui/display'; import { IconButtonGroup } from 'twenty-ui/input'; import { MenuItem } from 'twenty-ui/navigation'; @@ -91,6 +93,8 @@ export const WorkflowDiagramFilterEdgeEditable = ({ }: WorkflowDiagramFilterEdgeEditableProps) => { assertFilterEdgeDataOrThrow(data); + const { t } = useLingui(); + const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, @@ -102,9 +106,11 @@ export const WorkflowDiagramFilterEdgeEditable = ({ workflowVisualizerWorkflowIdComponentState, ); const workflow = useWorkflowWithCurrentVersion(workflowVisualizerWorkflowId); + const { isInRightDrawer } = useContext(ActionMenuContext); const { deleteStep } = useDeleteStep({ workflow }); + const { deleteEdge } = useDeleteEdge({ workflow }); const { startNodeCreation, isNodeCreationStarted } = useStartNodeCreation(); const setCommandMenuNavigationStack = useSetRecoilState( @@ -153,6 +159,12 @@ export const WorkflowDiagramFilterEdgeEditable = ({ }); }; + const handleRemoveFilterButtonClick = async () => { + closeDropdown(dropdownId); + + await deleteStep(data.stepId); + }; + const handleAddNodeButtonClick = () => { closeDropdown(dropdownId); @@ -163,6 +175,12 @@ export const WorkflowDiagramFilterEdgeEditable = ({ }); }; + const handleDeleteBranchClick = async () => { + closeDropdown(dropdownId); + + await deleteEdge({ source, target }); + }; + return ( <> { - closeDropdown(dropdownId); - - if (!isDefined(data.stepId)) { - throw new Error( - 'Step ID must be configured for the edge when rendering a filter', - ); - } - - return deleteStep(data.stepId); - }} + onClick={handleRemoveFilterButtonClick} /> + } diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteEdge.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteEdge.ts index a18f2eee21a..aa4bfd60453 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteEdge.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteEdge.ts @@ -1,14 +1,15 @@ import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion'; import { type WorkflowWithCurrentVersion } from '@/workflow/types/Workflow'; +import { assertWorkflowWithCurrentVersionIsDefined } from '@/workflow/utils/assertWorkflowWithCurrentVersionIsDefined'; +import { type WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagramEdge'; import { useDeleteWorkflowVersionEdge } from '@/workflow/workflow-steps/hooks/useDeleteWorkflowVersionEdge'; import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { type WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagramEdge'; export const useDeleteEdge = ({ workflow, }: { - workflow: WorkflowWithCurrentVersion; + workflow: WorkflowWithCurrentVersion | undefined; }) => { const [isLoading, setIsLoading] = useState(false); @@ -17,6 +18,8 @@ export const useDeleteEdge = ({ const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion(); const deleteEdge = async ({ source, target }: WorkflowDiagramEdge) => { + assertWorkflowWithCurrentVersionIsDefined(workflow); + if (isLoading) { return; }