fix: add lineage breadcrumbs (#12578)

openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/LineageNodeLabelV1.tsx

@@ -16,6 +16,7 @@ import { EntityLineageNodeType } from 'enums/entity.enum';
 import { get } from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { getBreadcrumbsFromFqn } from 'utils/EntityUtils';
 import { EntityReference } from '../../generated/type/entityReference';
 import { getEntityIcon } from '../../utils/TableUtils';
 import './lineage-node-label.less';
@@ -65,10 +66,29 @@ const EntityLabel = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
 };
 
 const LineageNodeLabelV1 = ({ node }: { node: EntityReference }) => {
+  const { t } = useTranslation();
+  const breadcrumbs = getBreadcrumbsFromFqn(node.fullyQualifiedName ?? '');
+
   return (
-    <div className="d-flex w-72">
+    <div className="w-72">
-      <div className="flex items-center m-0 p-md">
+      <div className="m-0 p-x-md p-y-xs">
-        <EntityLabel node={node} />
+        <Space wrap align="start" className="m-b-xs w-full" size={4}>
+          {breadcrumbs.map((breadcrumb, index) => (
+            <React.Fragment key={index}>
+              <Typography.Text className="text-grey-muted">
+                {breadcrumb.name}
+              </Typography.Text>
+              {index !== breadcrumbs.length - 1 && (
+                <Typography.Text className="text-xss">
+                  {t('label.slash-symbol')}
+                </Typography.Text>
+              )}
+            </React.Fragment>
+          ))}
+        </Space>
+        <div className="flex items-center">
+          <EntityLabel node={node} />
+        </div>
       </div>
     </div>
   );

openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less

@@ -125,6 +125,7 @@
 
 .react-flow .lineage-node-handle {
   width: 20px;
+  min-width: 20px;
   height: 20px;
   border-radius: 50%;
   border-color: @lineage-border;

openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx

@@ -1251,6 +1251,20 @@ export const getEntityBreadcrumbs = (
   }
 };
 
+export const getBreadcrumbsFromFqn = (fqn: string, includeCurrent = false) => {
+  const fqnList = Fqn.split(fqn);
+  if (!includeCurrent) {
+    fqnList.pop();
+  }
+
+  return [
+    ...fqnList.map((fqn) => ({
+      name: fqn,
+      url: '',
+    })),
+  ];
+};
+
 export const getEntityThreadLink = (
   entityFieldThreadCount: EntityFieldThreadCount[]
 ) => {