Add icon for rule blocks

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - `<MultiSelect />`
     - border of the BlueprintJS `Tag` elements were fixed
+- `extendedTooltip` of a handle in the ReactFlow (v12) component does not show the tooltip.
 
 ### Changed
 

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,
 

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(
-            () => <HandleContent {...handleContentProps}>{children}</HandleContent>,
-            [],
-        );
+        const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
         let switchToolsTimerOff: ReturnType<typeof setTimeout>;
@@ -119,15 +113,15 @@ 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();
                     }
                 },
                 "data-category": category,
                 onMouseEnter: (e: React.MouseEvent<HTMLDivElement, 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) {

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<HTMLDivElement>) => (
+                <div ref={ref} {...props}>
+                    {children}
+                </div>
+            ),
+        ),
+    };
+});
+
+jest.mock("@xyflow/react", () => {
+    const React = require("react");
+    return {
+        Handle: React.forwardRef(
+            ({ children, isConnectable, position, type, ...props }: any, ref: React.Ref<HTMLDivElement>) => (
+                <div ref={ref} {...props}>
+                    {children}
+                </div>
+            ),
+        ),
+    };
+});
+
+jest.mock("../../versionsupport", () => ({
+    useReactFlowVersion: () => "v9",
+}));
+
+describe("HandleDefault", () => {
+    it("shows the extended tooltip on handle hover", async () => {
+        render(
+            <OverlaysProvider>
+                <HandleDefault
+                    type="target"
+                    isConnectable={true}
+                    data-testid="handle"
+                    data={{
+                        extendedTooltip: "This is another Tooltip",
+                        tooltipProps: {
+                            hoverOpenDelay: 0,
+                        },
+                    }}
+                />
+            </OverlaysProvider>,
+        );
+
+        fireEvent.mouseEnter(screen.getByTestId("handle"));
+
+        expect(await screen.findByText("This is another Tooltip")).toBeVisible();
+    });
+});