Skip to content

refactor(ui): replace MUI CondensedBreadcrumb with core-components Breadcrumbs#29790

Open
harsh-vador wants to merge 1 commit into
mainfrom
migrate-condensed-breadcrumb
Open

refactor(ui): replace MUI CondensedBreadcrumb with core-components Breadcrumbs#29790
harsh-vador wants to merge 1 commit into
mainfrom
migrate-condensed-breadcrumb

Conversation

@harsh-vador

@harsh-vador harsh-vador commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Describe your changes:

Fixes #

What

Removes the MUI-based CondensedBreadcrumb wrapper component entirely and
uses Breadcrumbs from @openmetadata/ui-core-components directly in the
lineage path renderer. Part of the ongoing MUI removal.

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.

Greptile Summary

This PR replaces the lineage path breadcrumb wrapper with the shared core Breadcrumbs component. The main changes are:

  • Removed the MUI-based CondensedBreadcrumb component and styles.
  • Updated lineage path rendering to build core Breadcrumbs items directly.
  • Updated related tests and Playwright locators for the new collapsed breadcrumb control.

Confidence Score: 5/5

This looks safe to merge after trimming breadcrumb labels.

  • No blocking issues found in the changed code.
  • The remaining issue is a small visual cleanup in lineage breadcrumb labels.

openmetadata-ui/src/main/resources/ui/src/utils/Lineage/LineageUtils.tsx

Important Files Changed

Filename Overview
openmetadata-ui/src/main/resources/ui/src/utils/Lineage/LineageUtils.tsx Swaps the local condensed breadcrumb renderer for core Breadcrumbs and now builds item objects from the lineage path string.
openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/LineageTab/LineageTabContent.tsx Removes the old breadcrumb className argument when rendering lineage item paths.
openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/LineageTab/LineageTabContent.test.tsx Adds a Breadcrumbs mock that preserves the collapsed first/last breadcrumb behavior used by the lineage tests.
openmetadata-ui/src/main/resources/ui/playwright/e2e/PageObject/Explore/LineagePageObject.ts Updates the collapsed breadcrumb locator from the removed local CSS class to the core component aria-label.
openmetadata-ui/src/main/resources/ui/src/components/CondensedBreadcrumb/CondensedBreadcrumb.component.tsx Deletes the obsolete MUI-based condensed breadcrumb wrapper.
openmetadata-ui/src/main/resources/ui/src/components/CondensedBreadcrumb/CondensedBreadcrumb.interface.ts Deletes the props interface for the removed wrapper.
openmetadata-ui/src/main/resources/ui/src/components/CondensedBreadcrumb/condensedBreadcrumb.less Deletes styles that only applied to the removed wrapper.
openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/LineageTab/LineageTabContent.less Removes the old lineage breadcrumb style override.

Reviews (1): Last reviewed commit: "refactor(ui): replace MUI CondensedBread..." | Re-trigger Greptile

Greptile also left 1 inline comment on this PR.

Context used (3)

  • Context used - CLAUDE.md (source)
  • Context used - openmetadata-ui-core-components/CLAUDE.md (source)
  • Context used - AGENTS.md (source)

@harsh-vador harsh-vador self-assigned this Jul 6, 2026
@harsh-vador harsh-vador requested a review from a team as a code owner July 6, 2026 19:33
@harsh-vador harsh-vador added the safe to test Add this label to run secure Github workflows on PRs label Jul 6, 2026
Comment on lines +56 to +58
const items: BreadcrumbItemType[] = path
.split('>')
.map((label, index) => ({ id: String(index), label }));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Breadcrumb Labels Keep Separators Spaces

When LineageTabContent builds a path like service > database > schema, splitting on > leaves labels such as service and database. The new core Breadcrumbs renderer displays those labels directly, so lineage cards can show extra leading or trailing whitespace around each crumb.

Suggested change
const items: BreadcrumbItemType[] = path
.split('>')
.map((label, index) => ({ id: String(index), label }));
const items: BreadcrumbItemType[] = path
.split('>')
.map((label, index) => ({ id: String(index), label: label.trim() }));

Context Used: CLAUDE.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

❌ 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.

Comment on lines +56 to +58
const items: BreadcrumbItemType[] = path
.split('>')
.map((label, index) => ({ id: String(index), label }));

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Quality: Breadcrumb labels retain surrounding whitespace from split('>')

In getTruncatedPath, the path is built upstream with pathParts.slice(0, -1).join(' > ') (LineageTabContent.tsx), so splitting on '>' yields labels padded with spaces, e.g. "a > b > c"["a ", " b ", " c "]. These untrimmed strings are passed as label to the core Breadcrumbs items. With maxItemWidth/truncation and the new text styling this can cause slightly misaligned spacing and inconsistent ellipsis truncation. Trimming each label makes the rendered crumbs clean. Note this matches the pre-existing behavior, but the split line is part of this change, so it is worth addressing now.

Trim whitespace from each breadcrumb label produced by splitting the ' > '-joined path.:

const items: BreadcrumbItemType[] = path
  .split('>')
  .map((label, index) => ({ id: String(index), label: label.trim() }));
  • Apply fix

Check the box to apply the fix or reply for a change | Was this helpful? React with 👍 / 👎

@gitar-bot

gitar-bot Bot commented Jul 6, 2026

Copy link
Copy Markdown
Code Review 👍 Approved with suggestions 0 resolved / 1 findings

Replaces the MUI-based CondensedBreadcrumb with the core Breadcrumbs component, improving consistency across the lineage interface. Consider trimming whitespace from breadcrumb labels in getTruncatedPath to resolve minor formatting inconsistencies.

💡 Quality: Breadcrumb labels retain surrounding whitespace from split('>')

📄 openmetadata-ui/src/main/resources/ui/src/utils/Lineage/LineageUtils.tsx:56-58

In getTruncatedPath, the path is built upstream with pathParts.slice(0, -1).join(' > ') (LineageTabContent.tsx), so splitting on '>' yields labels padded with spaces, e.g. "a > b > c"["a ", " b ", " c "]. These untrimmed strings are passed as label to the core Breadcrumbs items. With maxItemWidth/truncation and the new text styling this can cause slightly misaligned spacing and inconsistent ellipsis truncation. Trimming each label makes the rendered crumbs clean. Note this matches the pre-existing behavior, but the split line is part of this change, so it is worth addressing now.

Trim whitespace from each breadcrumb label produced by splitting the ' > '-joined path.
const items: BreadcrumbItemType[] = path
  .split('>')
  .map((label, index) => ({ id: String(index), label: label.trim() }));
🤖 Prompt for agents
Code Review: Replaces the MUI-based CondensedBreadcrumb with the core Breadcrumbs component, improving consistency across the lineage interface. Consider trimming whitespace from breadcrumb labels in getTruncatedPath to resolve minor formatting inconsistencies.

1. 💡 Quality: Breadcrumb labels retain surrounding whitespace from split('>')
   Files: openmetadata-ui/src/main/resources/ui/src/utils/Lineage/LineageUtils.tsx:56-58

   In `getTruncatedPath`, the path is built upstream with `pathParts.slice(0, -1).join(' > ')` (LineageTabContent.tsx), so splitting on `'>'` yields labels padded with spaces, e.g. `"a > b > c"` → `["a ", " b ", " c "]`. These untrimmed strings are passed as `label` to the core `Breadcrumbs` items. With `maxItemWidth`/truncation and the new text styling this can cause slightly misaligned spacing and inconsistent ellipsis truncation. Trimming each label makes the rendered crumbs clean. Note this matches the pre-existing behavior, but the split line is part of this change, so it is worth addressing now.

   Fix (Trim whitespace from each breadcrumb label produced by splitting the ' > '-joined path.):
   const items: BreadcrumbItemType[] = path
     .split('>')
     .map((label, index) => ({ id: String(index), label: label.trim() }));

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

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Jest test Coverage

UI tests summary

Lines Statements Branches Functions
Coverage: 63%
63.77% (72728/114036) 46.92% (42349/90249) 48.21% (13020/27006)

@sonarqubecloud

sonarqubecloud Bot commented Jul 6, 2026

Copy link
Copy Markdown

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

🟡 Playwright Results — all passed (27 flaky)

✅ 4508 passed · ❌ 0 failed · 🟡 27 flaky · ⏭️ 55 skipped

Shard Passed Failed Flaky Skipped
🟡 Shard 1 420 0 5 33
🟡 Shard 2 816 0 7 4
🟡 Shard 3 815 0 2 12
🟡 Shard 4 818 0 1 5
🟡 Shard 5 825 0 5 0
🟡 Shard 6 814 0 7 1
🟡 27 flaky test(s) (passed on retry)
  • Features/Glossary/GlossaryPagination.spec.ts › should filter by InReview status (shard 1, 1 retry)
  • Flow/TestConnectionModal.spec.ts › failure state shows Edit Connection button and Retry Test button (shard 1, 1 retry)
  • Pages/Lineage/DataAssetLineage.spec.ts › verify create lineage for entity - Pipeline (shard 1, 1 retry)
  • Pages/Lineage/LineageRightPanel.spec.ts › Verify custom properties tab IS visible for supported type: mlmodel (shard 1, 1 retry)
  • Flow/SearchRBAC.spec.ts › the browse tree only shows the asset-type categories a user can access (shard 1, 1 retry)
  • Features/BulkEditOperationBadges.spec.ts › Database service bulk edit search filters rows and clear restores them (shard 2, 1 retry)
  • Features/BulkImport.spec.ts › Database Schema (shard 2, 1 retry)
  • Features/ContextCenterArticles.spec.ts › Article listing search filters, clears, and shows empty state (shard 2, 2 retries)
  • Features/ContextCenterArticles.spec.ts › Article list cards, recently viewed widget, and pagination work (shard 2, 1 retry)
  • Features/ContextCenterMemories.spec.ts › clicking a memory row adds ?memory= param to the URL (shard 2, 1 retry)
  • Features/ContextCenterMemories.spec.ts › adding a linked asset in edit mode shows entity badge on the row (shard 2, 1 retry)
  • Features/ContextCenterPermission.spec.ts › user with view-only permission sees no Add Memory button, no row actions, and no modal action buttons (shard 2, 1 retry)
  • Features/SearchExport.spec.ts › Export queues a background job and downloads from the jobs tray (shard 3, 1 retry)
  • Features/SettingsNavigationPage.spec.ts › should show navigation blocker when leaving with unsaved changes (shard 3, 1 retry)
  • Flow/ConnectionConfigLayout.spec.ts › should clear inactive Snowflake auth fields before test connection and unlock ingestion filters (shard 4, 1 retry)
  • Pages/DomainAdvanced.spec.ts › Move assets between data products (shard 5, 1 retry)
  • Pages/Domains.spec.ts › Create DataProducts and add remove assets (shard 5, 1 retry)
  • Pages/EntityDataSteward.spec.ts › Description Add, Update and Remove for child entities (shard 5, 1 retry)
  • Pages/ExplorePageRightPanel_KnowledgeCenter.spec.ts › Should remove user owner for knowledgeCenter (shard 5, 1 retry)
  • Pages/ExplorePageRightPanel.spec.ts › Should perform CRUD and Removal operations for dashboardDataModel (shard 5, 2 retries)
  • Pages/ExplorePageRightPanel.spec.ts › Should allow Data Steward to edit tier for dashboardDataModel (shard 6, 1 retry)
  • Pages/ExplorePageRightPanel.spec.ts › Should allow Data Steward to edit glossary terms for searchIndex (shard 6, 1 retry)
  • Pages/GlossaryImportExport.spec.ts › Glossary Bulk Import Export (shard 6, 1 retry)
  • Pages/GlossaryImportExport.spec.ts › Import partial success - some terms pass, some fail (shard 6, 1 retry)
  • Pages/Lineage/LineageFilters.spec.ts › Verify Impact Analysis service filter selection (shard 6, 1 retry)
  • Pages/Lineage/LineageRightPanel.spec.ts › Verify custom properties tab is NOT visible for pipelineService in platform lineage (shard 6, 1 retry)
  • Pages/TagPageRightPanel.spec.ts › Should display correct tabs for table entity in tag assets page context (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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

safe to test Add this label to run secure Github workflows on PRs

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant