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

openmetadata-ui/src/main/resources/ui/playwright/e2e/PageObject/Explore/LineagePageObject.ts

@@ -65,7 +65,7 @@ export class LineagePageObject extends RightPanelBase {
       '.lineage-info-container'
     );
     this.lineageCardLink = this.lineageItemCards.locator(
-      '.breadcrumb-menu-button'
+      'button[aria-label="Show hidden breadcrumbs"]'
     );
   }
 

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/LineageTab/LineageTabContent.less

@@ -190,11 +190,6 @@
       }
     }
   }
-  .condensed-breadcrumb-container {
-    a {
-      color: @grey-500 !important;
-    }
-  }
 }
 .entity-type-icon {
   color: @grey-500 !important;

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/LineageTab/LineageTabContent.test.tsx

@@ -41,6 +41,39 @@ jest.mock('@openmetadata/ui-core-components', () => ({
   TooltipTrigger: jest
     .fn()
     .mockImplementation(({ children }) => <span>{children}</span>),
+  Breadcrumbs: jest
+    .fn()
+    .mockImplementation(
+      ({
+        items,
+        maxItems,
+      }: {
+        items: { id: string; label: React.ReactNode }[];
+        maxItems?: number;
+      }) => {
+        const shouldCollapse = Boolean(maxItems && items.length > maxItems);
+        const displayItems = shouldCollapse
+          ? [items[0], { id: 'ellipsis', label: null }, items[items.length - 1]]
+          : items;
+
+        return (
+          <ol>
+            {displayItems.map((item, index) => (
+              <li key={item.id}>
+                {shouldCollapse && index === 1 ? (
+                  <svg data-testid="dots-horizontal-icon" />
+                ) : (
+                  <span>{item.label}</span>
+                )}
+                {index < displayItems.length - 1 && (
+                  <svg data-testid="chevron-right-icon" />
+                )}
+              </li>
+            ))}
+          </ol>
+        );
+      }
+    ),
 }));
 
 jest.mock('react-i18next', () => ({

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/LineageTab/LineageTabContent.tsx

@@ -28,7 +28,7 @@ import { getUpstreamDownstreamNodesEdges } from '../../../../utils/EntityLineage
 import { getEntityLinkFromType } from '../../../../utils/EntityLinkUtils';
 import { getEntityName } from '../../../../utils/EntityNameUtils';
 import { FormattedDatabaseServiceType } from '../../../../utils/EntityUtils.interface';
-import { getTruncatedPath } from '../../../../utils/Lineage/LineageUtils';
+import { renderTruncatedPath } from '../../../../utils/Lineage/LineageUtils';
 import searchClassBase from '../../../../utils/SearchClassBase';
 import ErrorPlaceHolderNew from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolderNew';
 import { NoOwnerFound } from '../../../common/NoOwner/NoOwnerFound';
@@ -230,11 +230,7 @@ const LineageTabContent: React.FC<LineageTabContentProps> = ({
                       )}
                     </div>
                     <div className="item-path-container">
-                      {item.path &&
-                        getTruncatedPath(
-                          item.path,
-                          'condensed-breadcrumb-container'
-                        )}
+                      {item.path && renderTruncatedPath(item.path)}
                     </div>
                   </div>
                   <div className="lineage-item-direction">

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

@@ -12,10 +12,12 @@
  */
 
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { ChevronRight } from '@untitledui/icons';
+import {
+  BreadcrumbItemType,
+  Breadcrumbs,
+} from '@openmetadata/ui-core-components';
 import { ReactComponent as ColumnIcon } from '../../assets/svg/ic-column.svg';
 import { ReactComponent as TableIcon } from '../../assets/svg/ic-table-new.svg';
-import { CondensedBreadcrumb } from '../../components/CondensedBreadcrumb/CondensedBreadcrumb.component';
 import { NodeData } from '../../components/Lineage/Lineage.interface';
 import { EImpactLevel } from '../../components/LineageTable/LineageTable.interface';
 import i18n from '../i18next/LocalUtil';
@@ -46,20 +48,16 @@ export const LINEAGE_DEPENDENCY_OPTIONS = [
   },
 ];
 
-export const getTruncatedPath = (path: string, className?: string) => {
+export const renderTruncatedPath = (path: string) => {
   if (!path) {
     return path;
   }
 
-  const parts = path.split('>');
+  const items: BreadcrumbItemType[] = path
+    .split('>')
+    .map((label, index) => ({ id: String(index), label: label.trim() }));
 
-  return (
-    <CondensedBreadcrumb
-      className={className}
-      items={parts}
-      separator={<ChevronRight className="right-arrow-icon" size={12} />}
-    />
-  );
+  return <Breadcrumbs items={items} maxItems={2} size="xs" type="text" />;
 };
 
 export const addBaseNodeDepthToNodes = (