fixes #28748 Context Center Article Hierarchy list new UI

[Rohit0301]

Describe your changes:

Screen.Recording.2026-06-05.at.3.07.08.PM.mov

Fixes 28748

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

• UI Refactor:
  • Migrated KnowledgePagesHierarchy to use @openmetadata/ui-core-components Tree and ModalOverlay components.
  • Implemented custom node rendering with improved action buttons and hover effects.
  • Added filter tabs (all, published, draft, sensitive) and expand/collapse controls.
• Core Component Enhancements:
  • Updated Tree component in openmetadata-ui-core-components to support drag-and-drop operations and tree item guide lines.
  • Added onItemMove and onItemRootDrop callbacks for flexible hierarchy management.
• Localization:
  • Added translation keys for draft, published, and sensitive across all supported languages.
• Testing:
  • Updated Playwright E2E tests in KnowledgeCenter.spec.ts to account for new hierarchy container structure.

_{This will update automatically on new commits.}

[github-actions]

🟡 Playwright Results — all passed (19 flaky)

✅ 4259 passed · ❌ 0 failed · 🟡 19 flaky · ⏭️ 88 skipped

Shard	Passed	Failed	Flaky	Skipped
✅ Shard 1	301	0	0	4
🟡 Shard 2	800	0	4	9
🟡 Shard 3	808	0	3	8
🟡 Shard 4	846	0	1	12
✅ Shard 5	721	0	0	47
🟡 Shard 6	783	0	11	8

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

• Features/CuratedAssets.spec.ts › Test Pipelines with display name filter (shard 2, 1 retry)
• Features/DataQuality/TestCaseImportExportE2eFlow.spec.ts › Admin: 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/Glossary/GlossaryWorkflow.spec.ts › should display correct status badge color and icon (shard 2, 1 retry)
• Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
• Features/Table.spec.ts › Table pagination with sorting should works (shard 3, 1 retry)
• Flow/ExploreAggregationCountsMatching.spec.ts › should verify left panel counts and tab search results for normal search (shard 3, 1 retry)
• Flow/ObservabilityAlerts.spec.ts › Pipeline Alert (shard 4, 1 retry)
• Pages/ExploreTree.spec.ts › Explore Tree (shard 6, 1 retry)
• Pages/GlossaryImportExport.spec.ts › Glossary Bulk Import Export (shard 6, 1 retry)
• Pages/InputOutputPorts.spec.ts › Lineage section collapse/expand (shard 6, 1 retry)
• Pages/Lineage/DataAssetLineage.spec.ts › verify create lineage for entity - Topic (shard 6, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage service filter selection (shard 6, 2 retries)
• 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/LineageRightPanel.spec.ts › Verify custom properties tab is NOT visible for dashboardService in platform lineage (shard 6, 1 retry)
• Pages/Lineage/PlatformLineage.spec.ts › Verify domain platform view (shard 6, 1 retry)
• Pages/Users.spec.ts › Update token expiration for Data Steward (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

[github-actions]

✅ PR checks passed

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

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	63.34% (67152/106006)	44.27% (36952/83463)	46.67% (11116/23817)

[gitar-bot]

Code Review ✅ Approved 5 resolved / 5 findings

Implements a new UI for the Context Center Article Hierarchy using upgraded tree and overlay components, addressing previously identified permission and state dependency issues.

✅ 5 resolved

✅ Security: Delete button no longer respects permissions.Delete

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:519-531 📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:539
In renderNode, the new ButtonUtility delete control has no disabled state, whereas the previous titleRender implementation set disabled={!permissions.Delete} on the delete Button. As a result the delete action is now rendered and clickable for every user regardless of their Delete permission. permissions.Delete is even listed in the useCallback dependency array but is never read in the body, confirming the check was dropped. Users without delete rights can now invoke the delete flow from the UI (the server may reject it, but the UI no longer enforces or signals the restriction). Add isDisabled={!permissions.Delete} to the ButtonUtility (and optionally hide it).

✅ Bug: expandedKeys effect omits knowledgePageHierarchy dependency

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:582-589
The effect that lazy-loads children for expanded keys depends only on [expandedKeys], yet it reads knowledgePageHierarchy and calls findPageInTreeData/loadNodeChildren against it. When expandedKeys is populated (e.g. via the activeKey effect) before the hierarchy data arrives, this effect runs against a stale/empty knowledgePageHierarchy closure and may skip loading children for nodes whose parents only later appear. Add knowledgePageHierarchy (and loadNodeChildren) to the dependency array, or guard the load so it re-evaluates when the hierarchy changes.

✅ Bug: Filter tabs (all/published/draft/sensitive) have no effect

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:144 📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:679-693
The new Tabs control updates activeFilter via setActiveFilter, but activeFilter is only ever read back as the tab's selectedKey. It is never used to filter knowledgePageHierarchy or to adjust the data passed to getPageHierarchyFromES. As a result selecting Published / Draft / Sensitive changes the highlighted tab but shows the exact same list, which is misleading to users. Either wire activeFilter into the hierarchy fetch/filtering logic, or gate the tabs behind the feature until filtering is implemented.

✅ Quality: Large commented-out JSX header block left in render

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:656-670
A sizeable block of commented-out JSX (the article header Box with title and count) is left in the return of the component. The project guidelines explicitly forbid commented-out code. Either remove the dead block or restore it as live code. Note the live render no longer shows the article count (paginationState.paging.total) that this commented block contained, so confirm dropping that information is intentional.

✅ Quality: Duplicate root-drop handling on section and Tree

📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:639-653 📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeCenter/KnowledgePagesHierarchy/KnowledgePagesHierarchy.tsx:743-756
Both the wrapping <section onDrop={...}> and the <Tree onItemRootDrop={...}> independently read the dragged source key and call setMovedPage for a root-level move. Since the Tree's internal useDragAndDrop already wires onRootDrop, the manual native onDrop/onDragOver on the section is redundant and can cause the move-confirmation modal to be triggered twice or via conflicting code paths. Consolidate root-drop handling into the Tree's onItemRootDrop and remove the manual section handlers (or vice-versa).

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

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

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
1427 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud