feat(dq): render the AI-mode form hint as an in-modal column

[ShaileshParmar11]

What

Replaces the AI-mode Data Quality form hint — a popover anchored to the focused field, floating outside the modal — with a column inside the modal. Addresses the DQ UI feedback thread (Teddy / Harsha / Karthick).

The popover was the root of every reported symptom: it anchored to whatever field had focus (so it drifted), sat 56px off the modal (the "gap"), and was a genuinely separate layer ("feels broken that both are split"). The old AiFormModal papered over this with a sideways translate and a 22-frame requestAnimationFrame resize pump — both deleted here.

Changes

• FieldDocPanel (new, core-components) — renders the focused field's doc as a static column; the counterpart to FieldDocPopover, same registry, different presentation.
• HookForm — new fieldDocDisplay="panel" mode laying out form + hint as two independently-scrolling columns. Popover path (incl. #30143's fieldDocMaxHeight) unchanged.
• AiFormModal — animates its own width between hint-shown/hidden, stays centered; drops the translate + resize pump. Also extended with optional props (icon/iconColor, footerActions, submitFormId, isSubmitDisabled) so it can be reused by the Collate alert modal.
• TestCaseFormDrawer / TestDefinitionForm — wired to panel mode; docs typography (12.5px/1.55, Geist Mono for param names) matches the design; parameter names rendered mono via a targeted transform.

Verified live (Collate AI mode + Safari)

Measured against the approved mock: docs body 12.5px/19.375px/rgb(83,88,98), title 16px/600, param names Geist Mono. Column scrolling, focus-following, keep-last-doc, smooth toggle, empty state — all confirmed. Six layout bugs invisible to Jest (jsdom has no layout engine) were found and fixed by driving the real app.

Two deliberate divergences from the mock — please review

1. Modal is 1152px, not the mock's 1024px. The mock's 642px form column assumed test-level cards that don't wrap; the real cards need ~772px. Widths are now derived from the columns.
2. Narrow screens shrink the hint, not the form. The mock crushes the form to 267px and clips it around a 713px viewport (where the bug was originally reported, on Safari); this holds the form's floor and yields the hint.

Not in scope (filed separately)

• The mock's mono param names come with STRING/Required type chips — that needs structured TestDefinition.parameterDefinition data, a feature not a font change.
• A pre-existing RichTextEditorPreviewerV1 bug renders >/< literally in docs (root cause proven; fix is an XSS-sensitive pipeline change touching 48 surfaces).

🤖 Generated with Claude Code

[gitar-bot]

💡 Edge Case: Param-name mono transform silently skips non-A-Z type tokens

PARAMETER_BULLET in FormHintDocUtils.ts requires the type parenthetical to be strictly [A-Z]+ immediately followed by , or ). All type tokens currently in TestCaseForm.md (INT, NUMBER, STRING, FLOAT, BOOLEAN, ARRAY, etc.) match, so this works today. But any future/edited parameter whose type contains digits, lowercase letters, spaces, or angle brackets (e.g. INT64, ARRAY<STRING>, Boolean) will silently fail to match and render bold instead of mono, with no error — inconsistent styling that is easy to miss. Consider broadening the character class (e.g. [A-Za-z0-9<>_ ]+) if such types are anticipated, or add a note that types must stay all-caps.

_{Was this helpful? React with 👍 / 👎}

[gitar-bot]

Code Review 👍 Approved with suggestions 0 resolved / 1 findings

Refactors the AI-mode form hint into a static modal column to resolve UI drift and layering issues. While this implementation matches the design, the parameter-name mono transform in FormHintDocUtils should be updated to include non-A-Z tokens.

💡 Edge Case: Param-name mono transform silently skips non-A-Z type tokens

📄 openmetadata-ui/src/main/resources/ui/src/utils/DataQuality/FormHintDocUtils.ts:32

PARAMETER_BULLET in FormHintDocUtils.ts requires the type parenthetical to be strictly [A-Z]+ immediately followed by , or ). All type tokens currently in TestCaseForm.md (INT, NUMBER, STRING, FLOAT, BOOLEAN, ARRAY, etc.) match, so this works today. But any future/edited parameter whose type contains digits, lowercase letters, spaces, or angle brackets (e.g. INT64, ARRAY<STRING>, Boolean) will silently fail to match and render bold instead of mono, with no error — inconsistent styling that is easy to miss. Consider broadening the character class (e.g. [A-Za-z0-9<>_ ]+) if such types are anticipated, or add a note that types must stay all-caps.

🤖 Prompt for agents

Code Review: Refactors the AI-mode form hint into a static modal column to resolve UI drift and layering issues. While this implementation matches the design, the parameter-name mono transform in `FormHintDocUtils` should be updated to include non-A-Z tokens.

1. 💡 Edge Case: Param-name mono transform silently skips non-A-Z type tokens
   Files: openmetadata-ui/src/main/resources/ui/src/utils/DataQuality/FormHintDocUtils.ts:32

   `PARAMETER_BULLET` in FormHintDocUtils.ts requires the type parenthetical to be strictly `[A-Z]+` immediately followed by `,` or `)`. All type tokens currently in TestCaseForm.md (INT, NUMBER, STRING, FLOAT, BOOLEAN, ARRAY, etc.) match, so this works today. But any future/edited parameter whose type contains digits, lowercase letters, spaces, or angle brackets (e.g. `INT64`, `ARRAY<STRING>`, `Boolean`) will silently fail to match and render bold instead of mono, with no error — inconsistent styling that is easy to miss. Consider broadening the character class (e.g. `[A-Za-z0-9<>_ ]+`) if such types are anticipated, or add a note that types must stay all-caps.

Options

Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}