Add icon for rule blocks

CHANGELOG.md

@@ -18,11 +18,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - `searchListPredicate` property: Allows to filter the complete list of search options at once.
     - Following optional BlueprintJs properties are forwarded now to override default behaviour: `noResults`, `createNewItemRenderer` and `itemRenderer`
     - `isValidNewOption` property: Checks if an input string is or can be turned into a valid new option.
+- `ActivityControlWidge`
+    - Support `badge` on activity control menu button.
 
 ### Fixed
 
 - `<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/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -93,6 +93,8 @@ export interface ActivityControlWidgetProps extends TestableComponent {
 interface IActivityContextMenu extends TestableComponent {
     // Tooltip for the context menu
     tooltip?: string;
+    // Optional badge shown on the context menu button.
+    badge?: string | number;
     // The entries of the context menu
     menuItems: IActivityMenuAction[];
 }
@@ -228,6 +230,15 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     <ContextMenu
                         data-test-id={activityContextMenu["data-test-id"]}
                         togglerText={activityContextMenu.tooltip}
+                        togglerElement={
+                            <IconButton
+                                name={["item-moremenu"]}
+                                text={activityContextMenu.tooltip}
+                                badge={activityContextMenu.badge}
+                                tooltipAsTitle
+                                data-test-id={activityContextMenu["data-test-id"]}
+                            />
+                        }
                     >
                         {activityContextMenu.menuItems.map((menuAction, idx) => {
                             return (

src/cmem/ActivityControl/tests/ActivityControlWidget.test.tsx

@@ -96,4 +96,25 @@ describe("ActivityControlWidget", () => {
         fireEvent.click(customButton);
         expect(mockAction).toHaveBeenCalledTimes(1);
     });
+
+    it("renders a badge on the context menu trigger", () => {
+        const { container } = render(
+            <ActivityControlWidget
+                activityContextMenu={{
+                    tooltip: "More options",
+                    badge: 3,
+                    menuItems: [
+                        {
+                            icon: "item-settings",
+                            action: jest.fn(),
+                            tooltip: "Configure",
+                        },
+                    ],
+                    "data-testid": "activity-menu",
+                }}
+            />,
+        );
+
+        expect(container.querySelector("button[title='More options']")).toHaveTextContent("3");
+    });
 });

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();
+    });
+});