Update filter design (#13243)

In this PR: - Adjust the edges to match the new Figma design - Properly display the filters for workflows and workflow versions (replaced shouldDisplayEdgeOptions with isEdgeEditable as we want to display configured filters on workflow versions, but want to disallow editing them) - Wrote a few tests to make coverage pass https://github.com/user-attachments/assets/d303d338-1938-4efe-b489-5a530d65fb30
2025-07-17 15:36:46 +02:00
parent fca39d317f
commit 0752f24638
20 changed files with 852 additions and 209 deletions
@@ -1,5 +1,6 @@
 import { WorkflowDiagramEdgeV1 } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV1';
-import { WorkflowDiagramEdgeV2 } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2';
+import { WorkflowDiagramEdgeV2Empty } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Empty';
+import { WorkflowDiagramEdgeV2Filter } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Filter';
 import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
 import { WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@@ -10,6 +11,7 @@ import {
  EdgeProps,
  getStraightPath,
 } from '@xyflow/react';
+import { isDefined } from 'twenty-shared/utils';
 import { FeatureFlagKey } from '~/generated/graphql';

 type WorkflowDiagramDefaultEdgeProps = EdgeProps<WorkflowDiagramEdge>;
@@ -36,6 +38,18 @@ export const WorkflowDiagramDefaultEdge = ({
    targetY,
  });

+  if (!isDefined(data)) {
+    throw new Error('Edge data is not defined');
+  }
+
+  const displayEdgeV1 = !isWorkflowFilteringEnabled && data.isEdgeEditable;
+  const displayEmptyFilters =
+    isWorkflowFilteringEnabled &&
+    data.edgeType === 'default' &&
+    data.isEdgeEditable;
+  const displayFilters =
+    isWorkflowFilteringEnabled && data.edgeType === 'filter';
+
  return (
    <>
      <BaseEdge
@@ -44,26 +58,35 @@ export const WorkflowDiagramDefaultEdge = ({
        path={edgePath}
        style={{ stroke: theme.border.color.strong }}
      />
-      {data?.shouldDisplayEdgeOptions && (
-        <EdgeLabelRenderer>
-          {isWorkflowFilteringEnabled ? (
-            <WorkflowDiagramEdgeV2
-              labelX={labelX}
-              labelY={labelY}
-              stepId={data.stepId}
-              parentStepId={source}
-              nextStepId={target}
-              filter={data.filter}
-            />
-          ) : (
-            <WorkflowDiagramEdgeV1
-              labelY={labelY}
-              parentStepId={source}
-              nextStepId={target}
-            />
-          )}
-        </EdgeLabelRenderer>
-      )}
+
+      <EdgeLabelRenderer>
+        {displayEdgeV1 && (
+          <WorkflowDiagramEdgeV1
+            labelY={labelY}
+            parentStepId={source}
+            nextStepId={target}
+          />
+        )}
+        {displayEmptyFilters && (
+          <WorkflowDiagramEdgeV2Empty
+            labelX={labelX}
+            labelY={labelY}
+            parentStepId={source}
+            nextStepId={target}
+          />
+        )}
+        {displayFilters && (
+          <WorkflowDiagramEdgeV2Filter
+            labelX={labelX}
+            labelY={labelY}
+            stepId={data.stepId}
+            parentStepId={source}
+            nextStepId={target}
+            filterSettings={data.filterSettings}
+            isEdgeEditable={data.isEdgeEditable}
+          />
+        )}
+      </EdgeLabelRenderer>
    </>
  );
 };
@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div<{ labelX: number; labelY: number }>`
+  padding: ${({ theme }) => theme.spacing(1)};
+  pointer-events: all;
+  ${({ labelX, labelY }) => css`
+    transform: translate(-50%, -50%) translate(${labelX}px, ${labelY}px);
+  `}
+  position: absolute;
+`;
+
+export { StyledContainer as WorkflowDiagramEdgeV2Container };
@@ -2,29 +2,23 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
 import { assertWorkflowWithCurrentVersionIsDefined } from '@/workflow/utils/assertWorkflowWithCurrentVersionIsDefined';
-import { WorkflowDiagramEdgeV2Content } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Content';
+import { WorkflowDiagramEdgeV2EmptyContent } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2EmptyContent';
 import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
 import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
-import { useDeleteStep } from '@/workflow/workflow-steps/hooks/useDeleteStep';
-import { isDefined } from 'twenty-shared/utils';

-type WorkflowDiagramEdgeV2Props = {
+type WorkflowDiagramEdgeV2EmptyProps = {
  labelX: number;
  labelY: number;
-  stepId: string | undefined;
  parentStepId: string;
  nextStepId: string;
-  filter: Record<string, any> | undefined;
 };

-export const WorkflowDiagramEdgeV2 = ({
+export const WorkflowDiagramEdgeV2Empty = ({
  labelX,
  labelY,
-  stepId,
  parentStepId,
  nextStepId,
-  filter,
-}: WorkflowDiagramEdgeV2Props) => {
+}: WorkflowDiagramEdgeV2EmptyProps) => {
  const workflowVisualizerWorkflowId = useRecoilComponentValueV2(
    workflowVisualizerWorkflowIdComponentState,
  );
@@ -32,17 +26,14 @@ export const WorkflowDiagramEdgeV2 = ({
  assertWorkflowWithCurrentVersionIsDefined(workflow);

  const { createStep } = useCreateStep({ workflow });
-  const { deleteStep } = useDeleteStep({ workflow });
  const { startNodeCreation } = useStartNodeCreation();

  return (
-    <WorkflowDiagramEdgeV2Content
+    <WorkflowDiagramEdgeV2EmptyContent
      labelX={labelX}
      labelY={labelY}
-      stepId={stepId}
      parentStepId={parentStepId}
      nextStepId={nextStepId}
-      filter={filter}
      onCreateFilter={() => {
        return createStep({
          newStepType: 'FILTER',
@@ -50,21 +41,8 @@ export const WorkflowDiagramEdgeV2 = ({
          nextStepId,
        });
      }}
-      onDeleteFilter={() => {
-        if (!isDefined(stepId)) {
-          throw new Error(
-            'Step ID must be configured for the edge when rendering a filter',
-          );
-        }
-
-        return deleteStep(stepId);
-      }}
      onCreateNode={() => {
-        if (isDefined(filter)) {
-          startNodeCreation({ parentStepId: stepId, nextStepId });
-        } else {
-          startNodeCreation({ parentStepId, nextStepId });
-        }
+        startNodeCreation({ parentStepId, nextStepId });
      }}
    />
  );
@@ -0,0 +1,87 @@
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { WorkflowDiagramEdgeV2Container } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Container';
+import { WorkflowDiagramEdgeV2VisibilityContainer } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2VisibilityContainer';
+import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
+import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
+import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import { IconFilter, IconPlus } from 'twenty-ui/display';
+import { IconButtonGroup } from 'twenty-ui/input';
+
+const StyledIconButtonGroup = styled(IconButtonGroup)`
+  pointer-events: all;
+`;
+
+type WorkflowDiagramEdgeV2EmptyContentProps = {
+  labelX: number;
+  labelY: number;
+  parentStepId: string;
+  nextStepId: string;
+  onCreateFilter: () => Promise<void>;
+  onCreateNode: () => void;
+};
+
+export const WorkflowDiagramEdgeV2EmptyContent = ({
+  labelX,
+  labelY,
+  parentStepId,
+  nextStepId,
+  onCreateFilter,
+  onCreateNode,
+}: WorkflowDiagramEdgeV2EmptyContentProps) => {
+  const [hovered, setHovered] = useState(false);
+
+  const workflowInsertStepIds = useRecoilComponentValueV2(
+    workflowInsertStepIdsComponentState,
+  );
+
+  const isSelected =
+    workflowInsertStepIds.nextStepId === nextStepId &&
+    workflowInsertStepIds.parentStepId === parentStepId;
+
+  const handleCreateFilter = async () => {
+    await onCreateFilter();
+
+    setHovered(false);
+  };
+
+  const setWorkflowSelectedNode = useSetRecoilComponentStateV2(
+    workflowSelectedNodeComponentState,
+  );
+
+  const handleFilterButtonClick = () => {
+    setWorkflowSelectedNode(parentStepId);
+
+    handleCreateFilter();
+  };
+
+  return (
+    <WorkflowDiagramEdgeV2Container
+      data-click-outside-id={WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID}
+      labelX={labelX}
+      labelY={labelY}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <WorkflowDiagramEdgeV2VisibilityContainer
+        shouldDisplay={isSelected || hovered}
+      >
+        <StyledIconButtonGroup
+          className="nodrag nopan"
+          iconButtons={[
+            {
+              Icon: IconFilter,
+              onClick: handleFilterButtonClick,
+            },
+            {
+              Icon: IconPlus,
+              onClick: onCreateNode,
+            },
+          ]}
+        />
+      </WorkflowDiagramEdgeV2VisibilityContainer>
+    </WorkflowDiagramEdgeV2Container>
+  );
+};
@@ -0,0 +1,60 @@
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
+import { WorkflowDiagramEdgeV2FilterContent } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2FilterContent';
+import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
+import { useDeleteStep } from '@/workflow/workflow-steps/hooks/useDeleteStep';
+import { FilterSettings } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowEditActionFilter';
+import { isDefined } from 'twenty-shared/utils';
+
+type WorkflowDiagramEdgeV2FilterProps = {
+  labelX: number;
+  labelY: number;
+  stepId: string;
+  parentStepId: string;
+  nextStepId: string;
+  filterSettings: FilterSettings;
+  isEdgeEditable: boolean;
+};
+
+export const WorkflowDiagramEdgeV2Filter = ({
+  labelX,
+  labelY,
+  stepId,
+  parentStepId,
+  nextStepId,
+  filterSettings,
+  isEdgeEditable,
+}: WorkflowDiagramEdgeV2FilterProps) => {
+  const workflowVisualizerWorkflowId = useRecoilComponentValueV2(
+    workflowVisualizerWorkflowIdComponentState,
+  );
+  const workflow = useWorkflowWithCurrentVersion(workflowVisualizerWorkflowId);
+
+  const { deleteStep } = useDeleteStep({ workflow });
+  const { startNodeCreation } = useStartNodeCreation();
+
+  return (
+    <WorkflowDiagramEdgeV2FilterContent
+      labelX={labelX}
+      labelY={labelY}
+      stepId={stepId}
+      parentStepId={parentStepId}
+      nextStepId={nextStepId}
+      filterSettings={filterSettings}
+      isEdgeEditable={isEdgeEditable}
+      onDeleteFilter={() => {
+        if (!isDefined(stepId)) {
+          throw new Error(
+            'Step ID must be configured for the edge when rendering a filter',
+          );
+        }
+
+        return deleteStep(stepId);
+      }}
+      onCreateNode={() => {
+        startNodeCreation({ parentStepId: stepId, nextStepId });
+      }}
+    />
+  );
+};
@@ -9,11 +9,13 @@ import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDrop
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
+import { WorkflowDiagramEdgeV2Container } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Container';
+import { WorkflowDiagramEdgeV2VisibilityContainer } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2VisibilityContainer';
 import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
 import { workflowDiagramPanOnDragComponentState } from '@/workflow/workflow-diagram/states/workflowDiagramPanOnDragComponentState';
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
-import { css } from '@emotion/react';
+import { FilterSettings } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowEditActionFilter';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useState } from 'react';
@@ -21,9 +23,7 @@ import { isDefined } from 'twenty-shared/utils';
 import {
  IconDotsVertical,
  IconFilter,
-  IconFilterPlus,
  IconFilterX,
-  IconGitBranchDeleted,
  IconPlus,
 } from 'twenty-ui/display';
 import { IconButtonGroup } from 'twenty-ui/input';
@@ -33,49 +33,33 @@ const StyledIconButtonGroup = styled(IconButtonGroup)`
  pointer-events: all;
 `;

-const StyledRoundedIconButtonGroup = styled(IconButtonGroup)`
-  border-radius: 50px;
-  overflow: hidden;
-  pointer-events: all;
+const StyledConfiguredFilterContainer = styled.div`
+  height: 26px;
+  width: 26px;
 `;

-const StyledContainer = styled.div<{ labelX: number; labelY: number }>`
-  padding: ${({ theme }) => theme.spacing(1)};
-  pointer-events: all;
-  ${({ labelX, labelY }) => css`
-    transform: translate(-50%, -50%) translate(${labelX}px, ${labelY}px);
-  `}
-  position: absolute;
-`;
-
-const StyledOpacityOverlay = styled.div<{ shouldDisplay: boolean }>`
-  opacity: ${({ shouldDisplay }) => (shouldDisplay ? 1 : 0)};
-  position: relative;
-`;
-
-type WorkflowDiagramEdgeV2ContentProps = {
+type WorkflowDiagramEdgeV2FilterContentProps = {
  labelX: number;
  labelY: number;
-  stepId: string | undefined;
+  stepId: string;
  parentStepId: string;
  nextStepId: string;
-  filter: Record<string, any> | undefined;
-  onCreateFilter: () => Promise<void>;
+  filterSettings: FilterSettings;
  onDeleteFilter: () => Promise<void>;
  onCreateNode: () => void;
+  isEdgeEditable: boolean;
 };

-export const WorkflowDiagramEdgeV2Content = ({
+export const WorkflowDiagramEdgeV2FilterContent = ({
  labelX,
  labelY,
  stepId,
  parentStepId,
  nextStepId,
-  filter,
-  onCreateFilter,
  onDeleteFilter,
  onCreateNode,
-}: WorkflowDiagramEdgeV2ContentProps) => {
+  isEdgeEditable,
+}: WorkflowDiagramEdgeV2FilterContentProps) => {
  const { openDropdown } = useOpenDropdown();
  const { closeDropdown } = useCloseDropdown();

@@ -108,71 +92,74 @@ export const WorkflowDiagramEdgeV2Content = ({

  const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();

-  const handleCreateFilter = async () => {
-    await onCreateFilter();
-
-    closeDropdown(dropdownId);
-    setHovered(false);
-  };
-
  const setWorkflowSelectedNode = useSetRecoilComponentStateV2(
    workflowSelectedNodeComponentState,
  );

+  const handleMouseEnter = () => {
+    if (!isEdgeEditable) {
+      return;
+    }
+
+    setHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setHovered(false);
+  };
+
  const handleFilterButtonClick = () => {
    setWorkflowSelectedNode(stepId);
-    if (isDefined(filter) && isDefined(workflowVisualizerWorkflowId)) {
+
+    if (isDefined(workflowVisualizerWorkflowId)) {
      openWorkflowEditStepInCommandMenu(
        workflowVisualizerWorkflowId,
        'Filter',
        IconFilter,
      );
-    } else {
-      handleCreateFilter();
    }
  };

  return (
-    <StyledContainer
+    <WorkflowDiagramEdgeV2Container
      data-click-outside-id={WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID}
      labelX={labelX}
      labelY={labelY}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
    >
-      <StyledOpacityOverlay
-        shouldDisplay={
-          isSelected || hovered || isDropdownOpen || isDefined(filter)
-        }
-      >
-        {isDefined(filter) && !hovered && !isDropdownOpen && !isSelected ? (
-          <StyledRoundedIconButtonGroup
-            className="nodrag nopan"
-            iconButtons={[
-              {
-                Icon: IconFilterPlus,
-              },
-            ]}
-          />
-        ) : (
-          <StyledIconButtonGroup
-            className="nodrag nopan"
-            iconButtons={[
-              {
-                Icon: IconFilterPlus,
-                onClick: handleFilterButtonClick,
-              },
-              {
-                Icon: IconDotsVertical,
-                onClick: () => {
-                  openDropdown({
-                    dropdownComponentInstanceIdFromProps: dropdownId,
-                  });
+      <WorkflowDiagramEdgeV2VisibilityContainer shouldDisplay>
+        <StyledConfiguredFilterContainer>
+          {hovered || isDropdownOpen || isSelected ? (
+            <StyledIconButtonGroup
+              className="nodrag nopan"
+              iconButtons={[
+                {
+                  Icon: IconFilter,
+                  onClick: handleFilterButtonClick,
                },
-              },
-            ]}
-          />
-        )}
+                {
+                  Icon: IconDotsVertical,
+                  onClick: () => {
+                    openDropdown({
+                      dropdownComponentInstanceIdFromProps: dropdownId,
+                    });
+                  },
+                },
+              ]}
+            />
+          ) : (
+            <StyledIconButtonGroup
+              className="nodrag nopan"
+              iconButtons={[
+                {
+                  Icon: IconFilter,
+                  onClick: handleFilterButtonClick,
+                },
+              ]}
+            />
+          )}
+        </StyledConfiguredFilterContainer>

        <Dropdown
          dropdownId={dropdownId}
@@ -181,7 +168,7 @@ export const WorkflowDiagramEdgeV2Content = ({
          dropdownPlacement="bottom-start"
          dropdownStrategy="absolute"
          dropdownOffset={{
-            x: 0,
+            x: 24,
            y: 4,
          }}
          onOpen={() => {
@@ -196,7 +183,12 @@ export const WorkflowDiagramEdgeV2Content = ({
                <MenuItem
                  text="Filter"
                  LeftIcon={IconFilter}
-                  onClick={() => {}}
+                  onClick={() => {
+                    closeDropdown(dropdownId);
+                    setHovered(false);
+
+                    handleFilterButtonClick();
+                  }}
                />
                <MenuItem
                  text="Remove Filter"
@@ -218,16 +210,11 @@ export const WorkflowDiagramEdgeV2Content = ({
                    onCreateNode();
                  }}
                />
-                <MenuItem
-                  text="Delete branch"
-                  LeftIcon={IconGitBranchDeleted}
-                  onClick={() => {}}
-                />
              </DropdownMenuItemsContainer>
            </DropdownContent>
          }
        />
-      </StyledOpacityOverlay>
-    </StyledContainer>
+      </WorkflowDiagramEdgeV2VisibilityContainer>
+    </WorkflowDiagramEdgeV2Container>
  );
 };
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div<{ shouldDisplay: boolean }>`
+  opacity: ${({ shouldDisplay }) => (shouldDisplay ? 1 : 0)};
+  position: relative;
+`;
+
+export { StyledContainer as WorkflowDiagramEdgeV2VisibilityContainer };
@@ -0,0 +1,94 @@
+import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
+import { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import '@xyflow/react/dist/style.css';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { ReactflowDecorator } from '~/testing/decorators/ReactflowDecorator';
+import { WorkflowDiagramEdgeV2EmptyContent } from '../WorkflowDiagramEdgeV2EmptyContent';
+
+const meta: Meta<typeof WorkflowDiagramEdgeV2EmptyContent> = {
+  title: 'Modules/Workflow/WorkflowDiagramEdgeV2EmptyContent',
+  component: WorkflowDiagramEdgeV2EmptyContent,
+  decorators: [
+    ComponentDecorator,
+    ReactflowDecorator,
+    (Story) => {
+      const workflowVisualizerComponentInstanceId =
+        'workflow-visualizer-test-id';
+
+      return (
+        <WorkflowVisualizerComponentInstanceContext.Provider
+          value={{
+            instanceId: workflowVisualizerComponentInstanceId,
+          }}
+        >
+          <Story />
+        </WorkflowVisualizerComponentInstanceContext.Provider>
+      );
+    },
+  ],
+  args: {
+    labelX: 0,
+    labelY: 0,
+    parentStepId: 'parent-step-id',
+    nextStepId: 'next-step-id',
+    onCreateFilter: fn(),
+    onCreateNode: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkflowDiagramEdgeV2EmptyContent>;
+
+export const ButtonsAppearOnHover: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const buttons = await canvas.findAllByRole('button');
+    const filterButton = buttons[0];
+
+    userEvent.hover(filterButton);
+
+    await waitFor(() => {
+      expect(filterButton).toBeVisible();
+    });
+  },
+};
+
+export const CreateFilter: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const buttons = await canvas.findAllByRole('button');
+    const filterButton = buttons[0];
+
+    userEvent.hover(filterButton);
+
+    await waitFor(() => {
+      expect(filterButton).toBeVisible();
+    });
+
+    userEvent.click(filterButton);
+
+    await waitFor(() => {
+      expect(args.onCreateFilter).toHaveBeenCalledTimes(1);
+    });
+  },
+};
+
+export const AddNodeAction: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const buttons = await canvas.findAllByRole('button');
+    const addNodeButton = buttons[1];
+
+    userEvent.hover(addNodeButton);
+
+    userEvent.click(addNodeButton);
+
+    await waitFor(() => {
+      expect(args.onCreateNode).toHaveBeenCalledTimes(1);
+    });
+  },
+};
@@ -7,11 +7,11 @@ import {
  getCanvasElementForDropdownTesting,
 } from 'twenty-ui/testing';
 import { ReactflowDecorator } from '~/testing/decorators/ReactflowDecorator';
-import { WorkflowDiagramEdgeV2Content } from '../WorkflowDiagramEdgeV2Content';
+import { WorkflowDiagramEdgeV2FilterContent } from '../WorkflowDiagramEdgeV2FilterContent';

-const meta: Meta<typeof WorkflowDiagramEdgeV2Content> = {
-  title: 'Modules/Workflow/WorkflowDiagramEdgeV2Content',
-  component: WorkflowDiagramEdgeV2Content,
+const meta: Meta<typeof WorkflowDiagramEdgeV2FilterContent> = {
+  title: 'Modules/Workflow/WorkflowDiagramEdgeV2FilterContent',
+  component: WorkflowDiagramEdgeV2FilterContent,
  decorators: [
    ComponentDecorator,
    ReactflowDecorator,
@@ -35,14 +35,13 @@ const meta: Meta<typeof WorkflowDiagramEdgeV2Content> = {
    labelY: 0,
    parentStepId: 'parent-step-id',
    nextStepId: 'next-step-id',
-    onCreateFilter: fn(),
    onDeleteFilter: fn(),
    onCreateNode: fn(),
  },
 };

 export default meta;
-type Story = StoryObj<typeof WorkflowDiagramEdgeV2Content>;
+type Story = StoryObj<typeof WorkflowDiagramEdgeV2FilterContent>;

 export const ButtonsAppearOnHover: Story = {
  play: async ({ canvasElement }) => {
@@ -59,27 +58,6 @@ export const ButtonsAppearOnHover: Story = {
  },
 };

-export const CreateFilter: Story = {
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const buttons = await canvas.findAllByRole('button');
-    const filterButton = buttons[0];
-
-    userEvent.hover(filterButton);
-
-    await waitFor(() => {
-      expect(filterButton).toBeVisible();
-    });
-
-    userEvent.click(filterButton);
-
-    await waitFor(() => {
-      expect(args.onCreateFilter).toHaveBeenCalledTimes(1);
-    });
-  },
-};
-
 export const AddNodeAction: Story = {
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);