Skip to content

feat(web): show the User Input default value beneath the field name with a working tooltip - #39564

Open
dparkmit24 wants to merge 2 commits into
langgenius:mainfrom
dparkmit24:fix-userinput-default-indicator
Open

feat(web): show the User Input default value beneath the field name with a working tooltip#39564
dparkmit24 wants to merge 2 commits into
langgenius:mainfrom
dparkmit24:fix-userinput-default-indicator

Conversation

@dparkmit24

Copy link
Copy Markdown
Contributor

Important

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

Fixes #39563.

In the User Input (Start) node field list, a field's default value is now shown beneath the field name when one is set, so you can see at a glance which fields will fall back to a default at run time instead of opening each field's edit panel one at a time. This is a display-only change — defaults already apply correctly at run time; this just surfaces an existing property in the list.

Two problems with a first pass at this (found by browser-testing, not visible in unit tests) motivated the final shape:

  1. Layout — the indicator first rendered inline in the row's right-hand metadata zone next to required. It now sits on its own line beneath the {icon} name · label identity line, left-aligned, in the row's persistent left column. required stays top-right. Single-line rows with no default keep their original height and don't shift on hover.

  2. Tooltip — the value is truncated when long, with the full value on hover. The first pass used the native title attribute, which disappeared on hover: the metadata zone only renders while the row is not hovered, so hovering to read the tooltip flipped the row's hover state and unmounted the indicator. Moving the indicator into the persistent column fixes the unmount, and the tooltip now uses the house @langgenius/dify-ui/tooltip (portal-based), which survives the row re-render.

The nullish/empty guard is unchanged: false and 0 are shown; an unset or empty-string default shows nothing.

Tests assert position (beneath the name, not in the required zone) and tooltip content (full value on hover, trigger stays mounted) — not just presence, since presence-only tests missed both problems above.

From Claude Code

Screenshots

Before
2026-07-24_22-09-40

After
2026-07-24_22-11-36

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran make lint && make type-check (backend) and cd web && pnpm exec vp staged (frontend) to appease the lint gods

dparkmit24 and others added 2 commits July 24, 2026 17:33
The User Input (Start) node's input-field list shows each field's
variable name, label and required flag, but not whether a Default
Value is set. Verifying or editing a workflow with many inputs meant
opening every field's editor one by one.

Render the default inline in each row next to the required flag,
matching its muted style. Long values are truncated with an ellipsis
to keep the row height fixed, and the full value is shown in a native
title tooltip on hover (the same mechanism the variable and label
already use). Rows without a default render nothing extra.

Presentational only: reads the existing InputVar.default that already
applies at run time; storage and run-time behaviour are unchanged.
This row component is shared only with the snippets sidebar, where the
same input-field defaults are equally correct to show.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…orking tooltip

The default-value indicator previously rendered inline in the row's right-hand
metadata zone next to `required`, and its native `title` tooltip disappeared on
hover: that zone only renders while the row is not hovered, so hovering to read
the tooltip flipped the row's hover state and unmounted the indicator (the same
re-render class as the row's edit/remove swap).

Move the indicator onto its own line beneath the `{icon} name · label` identity
line, left-aligned, in the persistent left column so hover no longer unmounts it.
`required` stays top-right; single-line (no-default) rows keep their height and do
not shift on hover.

Replace the native `title` with the house `@langgenius/dify-ui/tooltip`
(portal-based Base UI tooltip), which survives the row re-render and shows the
full value on hover. Truncation and the nullish/empty guard (false/0 shown, unset
or empty hidden) are unchanged.

Tests assert position (beneath the name, not in the required zone) and tooltip
content (full value on hover, trigger stays mounted), not just presence.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@dosubot dosubot Bot added size:M This PR changes 30-99 lines, ignoring generated files. feat:webapp Ready-to-use AI web app. Also the "Preview" / "Debug & Preview" inside the orchestrate page. labels Jul 25, 2026
@github-actions github-actions Bot added the web This relates to changes on the web. label Jul 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat:webapp Ready-to-use AI web app. Also the "Preview" / "Debug & Preview" inside the orchestrate page. size:M This PR changes 30-99 lines, ignoring generated files. web This relates to changes on the web.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

User Input node: show whether a field has a default value in the field list

1 participant