diff --git a/CHANGELOG.md b/CHANGELOG.md index af20b6b7..7f4c83a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - border of the BlueprintJS `Tag` elements were fixed +- `extendedTooltip` of a handle in the ReactFlow (v12) component does not show the tooltip. ### Changed diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx index d253a0bd..8c80b665 100644 --- a/src/components/Icon/canonicalIconNames.tsx +++ b/src/components/Icon/canonicalIconNames.tsx @@ -63,6 +63,7 @@ const canonicalIcons = { "artefact-report": icons.Report, "artefact-task": icons.Script, "artefact-transform": icons.DataRefinery, + "artefact-ruleblock": icons.Fragments, "artefact-uncategorized": icons.Unknown, "artefact-workflow": icons.ModelBuilder, diff --git a/src/extensions/react-flow/handles/HandleDefault.tsx b/src/extensions/react-flow/handles/HandleDefault.tsx index 621bf9c9..09ddbf57 100644 --- a/src/extensions/react-flow/handles/HandleDefault.tsx +++ b/src/extensions/react-flow/handles/HandleDefault.tsx @@ -89,21 +89,15 @@ export const HandleDefault = memo( isOpen: extendedTooltipDisplayed, }; - const handleContentProps = React.useMemo( - () => ({ - ...data, - tooltipProps: { - ...handleContentTooltipProps, - ...data?.tooltipProps, - } as TooltipProps, - }), - [intent, category, handleProps.isConnectable], - ); + const handleContentProps = { + ...data, + tooltipProps: { + ...handleContentTooltipProps, + ...data?.tooltipProps, + } as TooltipProps, + }; - const handleContent = React.useMemo( - () => {children}, - [], - ); + const handleContent = {children}; let switchTooltipTimerOn: ReturnType; let switchToolsTimerOff: ReturnType; @@ -119,7 +113,7 @@ export const HandleDefault = memo( if (handleProps.onClick) { handleProps.onClick(e); } - if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) { + if (toolsTarget.length > 0 && e.currentTarget === handleDefaultRef.current) { setExtendedTooltipDisplayed(false); (toolsTarget[0] as HTMLElement).click(); } @@ -127,7 +121,7 @@ export const HandleDefault = memo( "data-category": category, onMouseEnter: (e: React.MouseEvent) => { if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff); - if (e.target === handleDefaultRef.current) { + if (e.currentTarget === handleDefaultRef.current) { switchTooltipTimerOn = setTimeout( () => setExtendedTooltipDisplayed(true), data?.tooltipProps?.hoverOpenDelay ?? 500, @@ -142,7 +136,16 @@ export const HandleDefault = memo( setExtendedTooltipDisplayed(false); }, }), - [intent, category, tooltip, handleProps.isConnectable, handleProps.style], + [ + intent, + category, + tooltip, + flowVersionCheck, + handleProps.isConnectable, + handleProps.style, + handleProps.onClick, + data?.tooltipProps?.hoverOpenDelay, + ], ); switch (flowVersionCheck) { diff --git a/src/extensions/react-flow/handles/tests/HandleDefault.test.tsx b/src/extensions/react-flow/handles/tests/HandleDefault.test.tsx new file mode 100644 index 00000000..53f2f563 --- /dev/null +++ b/src/extensions/react-flow/handles/tests/HandleDefault.test.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { fireEvent, render, screen } from "@testing-library/react"; +import { OverlaysProvider } from "@blueprintjs/core"; +import "@testing-library/jest-dom"; + +import { HandleDefault } from "../HandleDefault"; + +jest.mock("react-flow-renderer", () => { + const React = require("react"); + return { + Handle: React.forwardRef( + ({ children, isConnectable, position, type, ...props }: any, ref: React.Ref) => ( +
+ {children} +
+ ), + ), + }; +}); + +jest.mock("@xyflow/react", () => { + const React = require("react"); + return { + Handle: React.forwardRef( + ({ children, isConnectable, position, type, ...props }: any, ref: React.Ref) => ( +
+ {children} +
+ ), + ), + }; +}); + +jest.mock("../../versionsupport", () => ({ + useReactFlowVersion: () => "v9", +})); + +describe("HandleDefault", () => { + it("shows the extended tooltip on handle hover", async () => { + render( + + + , + ); + + fireEvent.mouseEnter(screen.getByTestId("handle")); + + expect(await screen.findByText("This is another Tooltip")).toBeVisible(); + }); +});