Implement tooltip on custom call type

.changeset/young-moments-boil.md

@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": patch
+---
+
+Implementation of tooltip

packages/serverless-workflow-diagram-editor/src/components/ui/shadcn.css

@@ -25,6 +25,10 @@
 */
 
 .dec-root {
+  --background: hsl(0 0% 100%);
+
+  --foreground: hsl(222.2 84% 4.9%);
+
   --sidebar: hsl(0 0% 98%);
 
   --sidebar-foreground: hsl(240 5.3% 26.1%);
@@ -43,6 +47,10 @@
 }
 
 .dec-root.dark {
+  --background: hsl(222.2 84% 4.9%);
+
+  --foreground: hsl(210 40% 98%);
+
   --sidebar: #2d3748;
 
   --sidebar-foreground: hsl(240 4.8% 95.9%);
@@ -61,6 +69,10 @@
 }
 
 @theme inline {
+  --color-background: var(--background);
+
+  --color-foreground: var(--foreground);
+
   --color-sidebar: var(--sidebar);
 
   --color-sidebar-foreground: var(--sidebar-foreground);

packages/serverless-workflow-diagram-editor/src/components/ui/tooltip.tsx

@@ -47,20 +47,18 @@ function TooltipContent({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
   return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "dec:z-50 dec:w-fit dec:origin-(--radix-tooltip-content-transform-origin) dec:animate-in dec:rounded-md dec:bg-foreground dec:px-3 dec:py-1.5 dec:text-xs dec:text-balance dec:text-background dec:fade-in-0 dec:zoom-in-95 dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:data-[state=closed]:animate-out dec:data-[state=closed]:fade-out-0 dec:data-[state=closed]:zoom-out-95",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="dec:z-50 dec:size-2.5 dec:translate-y-[calc(-50%_-_2px)] dec:rotate-45 dec:rounded-[2px] dec:bg-foreground dec:fill-foreground" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "dec:z-50 dec:w-fit dec:origin-(--radix-tooltip-content-transform-origin) dec:animate-in dec:rounded-sm dec:bg-foreground dec:px-1 dec:py-1 dec:text-[9px] dec:text-balance dec:text-background dec:fade-in-0 dec:zoom-in-95 dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:data-[state=closed]:animate-out dec:data-[state=closed]:fade-out-0 dec:data-[state=closed]:zoom-out-95",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <TooltipPrimitive.Arrow className="dec:z-50 dec:size-2.5 dec:translate-y-[calc(-50%_-_2px)] dec:rotate-45 dec:rounded-[2px] dec:bg-foreground dec:fill-foreground" />
+    </TooltipPrimitive.Content>
   );
 }
 

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

@@ -27,6 +27,7 @@ import { useResolvedColorMode } from "../hooks/useResolvedColorMode";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { SidePanel } from "@/side-panel/SidePanel";
 import { DiagramEditorErrorBoundary } from "./error-pages/DiagramEditorErrorBoundary";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 /**
  * DiagramEditor component API
@@ -113,16 +114,18 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
                     isReadOnly={props.isReadOnly}
                     locale={locale}
                   >
-                    <SidebarProvider defaultOpen={false}>
-                      <div className="dec-diagram-content">
-                        <DiagramEditorContent
-                          diagramRef={diagramRef}
-                          diagramDivRef={diagramDivRef}
-                          colorMode={resolvedColorMode}
-                        />
-                      </div>
-                      <SidePanel />
-                    </SidebarProvider>
+                    <TooltipProvider>
+                      <SidebarProvider defaultOpen={false}>
+                        <div className="dec-diagram-content">
+                          <DiagramEditorContent
+                            diagramRef={diagramRef}
+                            diagramDivRef={diagramDivRef}
+                            colorMode={resolvedColorMode}
+                          />
+                        </div>
+                        <SidePanel />
+                      </SidebarProvider>
+                    </TooltipProvider>
                   </DiagramEditorContextProvider>
                 </ReactFlowProvider>
               </DiagramEditorErrorBoundary>

packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx

@@ -28,6 +28,7 @@ import {
   terminalNodeConfigMap,
 } from "./taskNodeConfig";
 import { getCallSubType, getListenSubType, getRunSubType } from "../../core";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { CircleAlert } from "lucide-react";
 
 export const ReactFlowNodeTypes: RF.NodeTypes = {
@@ -94,19 +95,21 @@ function TaskNodeBadge({ badge, testId }: BadgeProps) {
   const isUnknown = !KNOWN_BADGES.has(badge.toLowerCase());
 
   if (isUnknown) {
-    /* TODO: instead of using the browser default to display tool tip like below, replace with tooltip component when we add it */
     return (
-      <span
-        title={badge}
-        aria-label={`${t("aria.badge")} ${badge}`}
-        className="dec-task-node-badge-custom"
-        data-testid={`${testId}-custom`}
-      >
-        {badge}
-      </span>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className="dec-task-node-badge-custom"
+            data-testid={`${testId}-custom`}
+            aria-label={`${t("aria.badge")} ${badge}`}
+          >
+            {badge}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>{badge}</TooltipContent>
+      </Tooltip>
     );
   }
-
   return (
     <span className="dec-task-node-badge" data-testid={testId}>
       {badge}

packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx

@@ -30,6 +30,8 @@ import {
 import { DEFAULT_NODE_SIZE } from "../../../src/react-flow/diagram/autoLayout";
 import { en } from "../../../src/i18n/locales/en";
 import { renderWithProviders } from "../../test-utils/render-helpers";
+import { TooltipProvider } from "../../../src/components/ui/tooltip";
+import userEvent from "@testing-library/user-event";
 
 function testNode(
   id: string,
@@ -256,19 +258,52 @@ describe("React Flow custom node types", () => {
         }),
       ];
       renderWithProviders(
-        <div>
-          <RF.ReactFlow
-            nodeTypes={ReactFlowNodeTypes}
-            nodes={nodesWithUnknownBadges}
-            edges={allEdges}
-          />
-        </div>,
+        <TooltipProvider>
+          <div>
+            <RF.ReactFlow
+              nodeTypes={ReactFlowNodeTypes}
+              nodes={nodesWithUnknownBadges}
+              edges={allEdges}
+            />
+          </div>
+        </TooltipProvider>,
       );
 
       const callBadge = screen.getByTestId("call-node-n1-badge-custom");
       expect(callBadge).toBeInTheDocument();
       expect(callBadge.textContent).toBe("customCall");
-      expect(callBadge).toHaveAttribute("title", "customCall");
+    });
+
+    it("should render the raw value as a custom badge for an unknown subtype and display it in the tooltip", async () => {
+      const user = userEvent.setup();
+
+      const nodesWithUnknownBadges = [
+        testNode("n1", GraphNodeType.Call, 100, "CallNode", {
+          call: "customCall",
+        }),
+      ];
+
+      renderWithProviders(
+        <TooltipProvider>
+          <div>
+            <RF.ReactFlow
+              nodeTypes={ReactFlowNodeTypes}
+              nodes={nodesWithUnknownBadges}
+              edges={allEdges}
+            />
+          </div>
+        </TooltipProvider>,
+      );
+
+      const callBadge = screen.getByTestId("call-node-n1-badge-custom");
+
+      expect(callBadge).toBeInTheDocument();
+      expect(callBadge).toHaveTextContent("customCall");
+
+      await user.hover(callBadge);
+
+      const tooltip = await screen.findByRole("tooltip");
+      expect(tooltip).toHaveTextContent("customCall");
     });
 
     it("should render while/compete badges on container nodes", () => {