Fixes 28921: Improved QuickLinkFormModal to utilize react-hook-form for better form handling and validation.

[Rohit0301]

Describe your changes:

Fixes 28921

I worked on ... because ...

Type of change:

• Bug fix
• Improvement
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation

High-level design:

N/A — small change.

Tests:

Use cases covered

Unit tests

Backend integration tests

Ingestion integration tests

Playwright (UI) tests

Manual testing performed

UI screen recording / screenshots:

Not applicable.

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes <issue-number>: <short explanation>
• My PR is linked to a GitHub issue via Fixes #<issue-number> above.
• I have commented on my code, particularly in hard-to-understand areas.
• For JSON Schema changes: I updated the migration scripts or explained why it is not needed.
• For UI changes: I attached a screen recording and/or screenshots above.
• I have added tests (unit / integration / Playwright as applicable) and listed them above.

---

Summary by Gitar

• Form Refactoring:
  • Migrated QuickLinkFormModal to react-hook-form with asynchronous search and debouncing for tags, glossary terms, and related entities.
  • Updated form field definitions and submission logic to align with the new react-hook-form implementation.
• UI/UX Improvements:
  • Replaced deprecated Share functionality with CopyLinkButton in DocumentsView, MemoriesView, and DocumentPreviewPanel.
  • Enhanced stripMarkdown utility using DOMPurify for safer HTML sanitization.
• Testing Infrastructure:
  • Updated QuickLinkFormModal.test.tsx to reflect the new form structure and mocked dependencies.
  • Refactored Playwright test utilities (createQuickLink, updateQuickLink) to target updated input selectors.

_{This will update automatically on new commits.}

[github-actions]

✅ PR checks passed

The linked issue has a description and all required Shipping project fields set. Thanks!

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.72% (67131/107028)	43.91% (36959/84165)	46.01% (11279/24509)

[github-actions]

🟡 Playwright Results — all passed (12 flaky)

✅ 4272 passed · ❌ 0 failed · 🟡 12 flaky · ⏭️ 88 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	300	0	1	4
🟡 Shard 2	804	0	2	9
🟡 Shard 3	804	0	4	8
🟡 Shard 4	841	0	2	12
🟡 Shard 5	720	0	1	47
🟡 Shard 6	803	0	2	8

🟡 12 flaky test(s) (passed on retry)

• Pages/Bots.spec.ts › Bots Page should work properly (shard 1, 1 retry)
• Features/DataQuality/TestCaseImportExportE2eFlow.spec.ts › EditAll User: Complete export-import-validate flow (shard 2, 1 retry)
• Features/DataQuality/TestCaseResultPermissions.spec.ts › User with only VIEW cannot PATCH results (shard 2, 1 retry)
• Features/IncidentManager.spec.ts › Resolving incident & re-run pipeline (shard 3, 1 retry)
• Features/KnowledgeCenterTextEditor.spec.ts › Rich Text Editor - Text Formatting (shard 3, 1 retry)
• Features/Permissions/ServiceEntityPermissions.spec.ts › AutoPilot trigger button is hidden with denied trigger permission (shard 3, 1 retry)
• Features/SettingsNavigationPage.spec.ts › should support drag and drop reordering of navigation items (shard 3, 1 retry)
• Pages/DataContracts.spec.ts › Create Data Contract and validate for File (shard 4, 1 retry)
• Pages/DataContractsSemanticRules.spec.ts › Validate Entity Version Greater than equal >= (shard 4, 1 retry)
• Pages/ExplorePageRightPanel_KnowledgeCenter.spec.ts › Should remove user owner for knowledgeCenter (shard 5, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
• Pages/UserDetails.spec.ts › Create team with domain and verify visibility of inherited domain in user profile after team removal (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
1491 New issues
0 Accepted issues

Measures
26 Security Hotspots
0.0% Coverage on New Code
3.6% Duplication on New Code

See analysis details on SonarQube Cloud

[gitar-bot]

Code Review ✅ Approved 10 resolved / 10 findings

Refactors QuickLinkFormModal to use react-hook-form for improved validation and handling, while updating UI components and sanitization utilities. All previous findings regarding form inputs, import paths, and test mocks have been addressed.

✅ 10 resolved

✅ Bug: All file rows share one copy-link URL (preview file's URL)

📄 openmetadata-ui/src/main/resources/ui/src/pages/ContextCenterPage/ContextCenterDocumentsPage/ContextCenterDocumentsPage.tsx:77-87 📄 openmetadata-ui/src/main/resources/ui/src/pages/ContextCenterPage/ContextCenterDocumentsPage/ContextCenterDocumentsPage.tsx:441 📄 openmetadata-ui/src/main/resources/ui/src/components/ContextCenter/DocumentsView/DocumentsView.component.tsx:441-447 📄 openmetadata-ui/src/main/resources/ui/src/components/ContextCenter/DocumentsView/DocumentsView.component.tsx:527
DocumentsView now renders a CopyLinkButton per FileRow using a single url prop, but the page passes url={previewFileUrl} — a value derived solely from the currently previewed file (previewFileUrl is computed from previewFile.id). This single string is forwarded unchanged to every FileRow (url={url} in DocumentsView.component.tsx → url={url ?? ''} in CopyLinkButton). Consequences:

• When no file is being previewed, previewFileUrl is '', so every row's copy button copies an empty URL.
• When a file IS previewed, every row's copy button copies that previewed file's URL regardless of which row it belongs to.

The per-row copy link should be built from each row's own file.id, not the page-level preview URL. Compute the URL inside FileRow (or pass a builder function) using file.id instead of threading a single previewFileUrl down to all rows.

✅ Bug: Description field downgraded from rich editor to plain textarea

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/QuickLinkFormModal/QuickLinkFormModal.tsx:422-433
The description field type changed from FieldTypes.DESCRIPTION (a rich/markdown editor) to FieldTypes.TEXTAREA. Existing quick links may have been created with markdown content; editing them now in a plain textarea drops the rich-text editing experience and may surface raw markdown. If this is intentional, confirm that stored markdown still renders correctly elsewhere; otherwise keep the description editor consistent with other knowledge-center entities.

✅ Bug: URL field lost type="url" input validation

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/QuickLinkFormModal/QuickLinkFormModal.tsx:404-418
The refactored urlField dropped the original props.type: 'url'. Previously the input was rendered as <input type="url">, giving browser-level URL format validation in addition to the required rule. Now only the required rule remains, so malformed values (e.g. not a url) pass validation. Consider adding a pattern/validate rule in rules to keep URL-format validation.

✅ Quality: Inconsistent absolute import path for CopyLinkButton

📄 openmetadata-ui/src/main/resources/ui/src/components/ContextCenter/DocumentsView/DocumentsView.component.tsx:40
In DocumentsView.component.tsx the new CopyLinkButton import uses a project-root-style path src/components/CopyLinkButton/CopyLinkButton.component, while every other import in the same file (and the sibling DocumentPreviewPanel/MemoriesView files that also import CopyLinkButton in this PR) uses a relative path like ../../CopyLinkButton/CopyLinkButton.component. This is inconsistent and relies on a module-resolution alias that may not be configured for all build/test/lint tooling (Jest, tsconfig paths, eslint import resolver), risking resolution failures. Use the relative path to match the rest of the file and the codebase convention.

✅ Edge Case: Asset search interpolates raw text into wildcard query

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/QuickLinkFormModal/QuickLinkFormModal.tsx:254-264
fetchAssetOptions builds the search query as *${searchText}* by directly interpolating the user's typed text into the query string passed to searchQuery. Special characters typed by the user (e.g. spaces, :, ", *, (, \) are passed straight through to the search backend's query string parser, which can produce malformed queries or unexpected/zero results for otherwise valid input. Consider escaping/sanitizing the search text (or passing it via a non-query-string field) before wrapping it in wildcards, consistent with how other async-select lists in the app build their queries.

...and 5 more resolved from earlier reviews

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

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