refactor(ui): replace MUI CondensedBreadcrumb with core-components Breadcrumbs#29790
refactor(ui): replace MUI CondensedBreadcrumb with core-components Breadcrumbs#29790harsh-vador wants to merge 1 commit into
Conversation
| const items: BreadcrumbItemType[] = path | ||
| .split('>') | ||
| .map((label, index) => ({ id: String(index), label })); |
There was a problem hiding this comment.
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.
| 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!
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
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 |
| const items: BreadcrumbItemType[] = path | ||
| .split('>') | ||
| .map((label, index) => ({ id: String(index), label })); |
There was a problem hiding this comment.
💡 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 👍 / 👎
Code Review 👍 Approved with suggestions 0 resolved / 1 findingsReplaces 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 Trim whitespace from each breadcrumb label produced by splitting the ' > '-joined path.🤖 Prompt for agentsOptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
|
🟡 Playwright Results — all passed (27 flaky)✅ 4508 passed · ❌ 0 failed · 🟡 27 flaky · ⏭️ 55 skipped
🟡 27 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |



Describe your changes:
Fixes #
What
Removes the MUI-based
CondensedBreadcrumbwrapper component entirely anduses
Breadcrumbsfrom@openmetadata/ui-core-componentsdirectly in thelineage path renderer. Part of the ongoing MUI removal.
Type of change:
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:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Greptile Summary
This PR replaces the lineage path breadcrumb wrapper with the shared core Breadcrumbs component. The main changes are:
CondensedBreadcrumbcomponent and styles.Confidence Score: 5/5
This looks safe to merge after trimming breadcrumb labels.
openmetadata-ui/src/main/resources/ui/src/utils/Lineage/LineageUtils.tsx
Important Files Changed
Reviews (1): Last reviewed commit: "refactor(ui): replace MUI CondensedBread..." | Re-trigger Greptile
Context used (3)