Implement tooltip on custom call type by kumaradityaraj · Pull Request #182 · serverlessworkflow/editor

kumaradityaraj · 2026-06-17T09:42:20Z

A small, reusable tooltip component and use it to replace the native browser title tooltip currently shown on custom call type badges.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

netlify · 2026-06-17T09:42:27Z

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	`daf11e7`
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a46309db256cd0008f37241
😎 Deploy Preview	https://deploy-preview-182--swf-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR replaces the browser default title tooltip for unknown task badges with the app’s Tooltip component to provide a consistent UI.

Changes:

Adds Tooltip UI components to Nodes.tsx
Wraps custom/unknown badges with TooltipTrigger and TooltipContent
Introduces inline color styling based on prefers-color-scheme

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

kumaradityaraj · 2026-06-17T09:43:16Z

@lornakelly Please review this.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 6 comments.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

lornakelly · 2026-06-25T13:08:24Z

@kumaradityaraj also make sure to add changeset

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

kumaradityaraj · 2026-07-02T09:54:32Z

@lornakelly @fantonangeli @handreyrc @cheryl7114 please review this again.

lornakelly · 2026-07-02T13:09:13Z

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


this should be minor as well and please update the file name

lornakelly · 2026-07-02T13:10:47Z

@@ -17,7 +17,7 @@ catalogs:
      version: 5.2.1
    '@playwright/test':


Seem to still have an issue with the pnpm lock as there shouldnt be any changes, as Handrey mentioned you might be out of sync and need to update this with the main pnpm lock

fantonangeli · 2026-07-02T12:11:40Z

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


Let's use minor
https://semver.org/#summary

Suggested change

"@serverlessworkflow/diagram-editor": patch

"@serverlessworkflow/diagram-editor": minor

fantonangeli · 2026-07-02T12:20:35Z

+  --background: hsl(0 0% 100%);
+
+  --foreground: hsl(222.2 84% 4.9%);


Could you please use more specific names for these new variables, following the code style already here?

Suggested change

--background: hsl(0 0% 100%);

--foreground: hsl(222.2 84% 4.9%);

--tooltip-background: hsl(0 0% 100%);

--tooltip-foreground: hsl(222.2 84% 4.9%);

fantonangeli · 2026-07-02T12:21:24Z

+  --background: hsl(222.2 84% 4.9%);
+
+  --foreground: hsl(210 40% 98%);


Suggested change

--background: hsl(222.2 84% 4.9%);

--foreground: hsl(210 40% 98%);

--tooltip-background: hsl(222.2 84% 4.9%);

--tooltip-foreground: hsl(210 40% 98%);

fantonangeli · 2026-07-02T12:21:59Z

+  --color-background: var(--background);
+
+  --color-foreground: var(--foreground);


Suggested change

--color-background: var(--background);

--color-foreground: var(--foreground);

--color-tooltip-background: var(--background);

--color-tooltip-foreground: var(--foreground);

fantonangeli · 2026-07-02T12:51:22Z

-        <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


I saw in the official implementation they use Tooltip.Portal (https://www.radix-ui.com/primitives/docs/components/tooltip#anatomy).
The docs say "When used, portals the content part into the body," and I can see this UI issue with selected edges. As you can see, the tooltip is under the edge.
Maybe the Portal can help with this, anyway I would follow the official examples.

fantonangeli · 2026-07-02T13:31:48Z

+      const callBadge = screen.getByTestId("call-node-n1-badge-custom");
+
+      expect(callBadge).toBeInTheDocument();
+      expect(callBadge).toHaveTextContent("customCall");


I think this is already tested by the previous test

Suggested change

expect(callBadge).toHaveTextContent("customCall");

Adding tooltip in the node

1f1deda

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings June 17, 2026 09:42

Copilot AI reviewed Jun 17, 2026

View reviewed changes

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

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

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

lornakelly reviewed Jun 17, 2026

View reviewed changes

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

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

kumaradityaraj added 5 commits June 22, 2026 15:38

Dialgbox bug fix

efaa8ab

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Solved tooltip content bug

8c096be

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

resolved merge conflicts

965bfdc

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

removed unused imports

6954551

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Updated tests and pnpm.lock

2393641

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings June 24, 2026 07:40

Copilot started reviewing on behalf of kumaradityaraj June 24, 2026 07:40 View session

Copilot AI reviewed Jun 24, 2026

View reviewed changes

kumaradityaraj added 2 commits June 24, 2026 13:30

resolved chatgpt

9b01a6a

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

resolved copilot comments

52c78eb

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings June 24, 2026 08:03

Copilot started reviewing on behalf of kumaradityaraj June 24, 2026 08:04 View session

Copilot AI reviewed Jun 24, 2026

View reviewed changes

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

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

kumaradityaraj requested review from cheryl7114, fantonangeli, handreyrc and lornakelly June 24, 2026 08:10

lornakelly reviewed Jun 25, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Outdated

Comment thread pnpm-lock.yaml

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

kumaradityaraj added 3 commits July 2, 2026 14:48

adding test and resolving reviews

a2d597a

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

merging upstream and resolving conflicts

dd64e46

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

executing pnpm changeset

daf11e7

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

lornakelly reviewed Jul 2, 2026

View reviewed changes

fantonangeli suggested changes Jul 2, 2026

View reviewed changes

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

		@@ -17,7 +17,7 @@ catalogs:
		version: 5.2.1
		'@playwright/test':

	"@serverlessworkflow/diagram-editor": patch
	"@serverlessworkflow/diagram-editor": minor

		--background: hsl(0 0% 100%);

		--foreground: hsl(222.2 84% 4.9%);

		--background: hsl(222.2 84% 4.9%);

		--foreground: hsl(210 40% 98%);

		--color-background: var(--background);

		--color-foreground: var(--foreground);

Uh oh!

Conversation

kumaradityaraj commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for swf-editor ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kumaradityaraj commented Jun 17, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly commented Jun 25, 2026

Uh oh!

kumaradityaraj commented Jul 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kumaradityaraj commented Jun 17, 2026 •

edited

Loading

netlify Bot commented Jun 17, 2026 •

edited

Loading