feat(ui): update Common Components, Pages & Settings for lazy-load utility pattern

[shah-harshit]

Summary

• Updates Common Components, MyData, Customization, DataAssets and remaining pages to import from extracted pure utility modules
• Updates EntityUtils, BlockEditorUtils, formUtils, CuratedAssetsUtils imports
• Updates Settings, Knowledge Center, Context Center components for consistent utility usage

Ref: open-metadata/openmetadata-collate#4230

---

Summary by Gitar

• Refactoring:
  • Migration of utility functions to optimized pure modules (e.g., *PureUtils.ts) across multiple components and pages to support lazy-loading patterns.
  • Systematic update of imports throughout openmetadata-ui to reflect the new PureUtils structure, including EntityLineage, CuratedAssets, CSV, and Search utilities.
• Enhancements:
  • Improved FullHeightWrapper component in PageLayoutV1 by replacing styled components with scoped styles via useMemo for better maintainability.
  • Enhanced BlockEditorUtils by centralizing isHTMLString logic.
  • Updated CuratedAssetsWidget to use AdvanceSearchProvider with proper suspense handling.
• Bug Fixes:
  • Fixed various build, test, and checkstyle errors resulting from the refactor.
  • Improved TableConstraintsModal permission checks.
  • Standardized naming in CSS for BlockEditor hidden state.

_{This will update automatically on new commits.}

[github-actions]

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

• No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically.

Maintainers can bypass this check by adding the skip-pr-checks label.

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.32% (66676/106979)	44.01% (37151/84414)	45.51% (11301/24829)

[github-actions]

🟡 Playwright Results — all passed (11 flaky)

✅ 4287 passed · ❌ 0 failed · 🟡 11 flaky · ⏭️ 88 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	301	0	1	4
🟡 Shard 2	808	0	1	9
🟡 Shard 3	810	0	1	8
🟡 Shard 4	845	0	4	12
✅ Shard 5	733	0	0	47
🟡 Shard 6	790	0	4	8

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

• Pages/Roles.spec.ts › Roles page should work properly (shard 1, 1 retry)
• Features/DataProductRenameConsolidation.spec.ts › Rename then update description - assets should be preserved (shard 2, 1 retry)
• Features/Table.spec.ts › Tags term should be consistent for search (shard 3, 1 retry)
• Pages/CustomProperties.spec.ts › Sql Query (shard 4, 2 retries)
• Pages/CustomProperties.spec.ts › Set enum custom property on column and verify in UI (shard 4, 2 retries)
• Pages/DataContractsSemanticRules.spec.ts › Validate DataProduct Rule Any_In (shard 4, 1 retry)
• Pages/Entity.spec.ts › Announcement create, edit & delete (shard 4, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage service type filter selection (shard 6, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
• Pages/Lineage/LineageRightPanel.spec.ts › Verify custom properties tab IS visible for supported type: searchIndex (shard 6, 1 retry)
• Pages/Lineage/PlatformLineage.spec.ts › Verify domain platform view (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
1487 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[gitar-bot]

Code Review ✅ Approved 1 resolved / 1 findings

Refactors UI components to use the lazy-load utility pattern for improved module management. Address the manual raw <style> injection in PageLayoutV1 to avoid potential CSS injection vulnerabilities and style scoping issues.

✅ 1 resolved

✅ Quality: PageLayoutV1 injects raw <style> with interpolated className

📄 openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx:53-67 📄 openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx:206
FullHeightWrapper was converted from an MUI styled component (emotion-deduplicated, head-injected) to a React component that renders a raw inline <style> block built by interpolating $wrapperClassName (= mainContainerClassName) directly into CSS selectors.

Two minor consequences vs. the previous implementation:

1. Each mounted PageLayoutV1 with fullHeight renders its own <style> element in the body rather than a single deduplicated stylesheet, so multiple full-height layouts mounted simultaneously emit duplicate CSS blocks.
2. mainContainerClassName is a free-form className prop. If a caller ever passes a multi-token value (e.g. "foo bar"), the generated selector .page-layout-v1-vertical-scroll.foo bar becomes a different/invalid descendant selector and the flex layout silently breaks. (The same interpolation existed in the MUI version, so this is not a new regression, but the inline-style form makes it easier to hit.)

This is functional for the current single-class callers. Consider moving these rules into the existing page-layout.less (scoped by .full-height-wrapper) instead of generating CSS at runtime, which avoids both duplicate injection and the className-interpolation fragility.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

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