MINOR: update lineage column with new design (#18862)

* update lineage column with new design

* added border when showAllColumn button is there

* minor fix around scroll for large lineage screen

* reset the column color back to old black color

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx

@@ -21,7 +21,7 @@ import { EntityLineageNodeType } from '../../../enums/entity.enum';
 import { Column } from '../../../generated/entity/data/table';
 import { encodeLineageHandles } from '../../../utils/EntityLineageUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
-import { getConstraintIcon } from '../../../utils/TableUtils';
+import { getColumnDataTypeIcon } from '../../../utils/TableUtils';
 import { EdgeTypeEnum } from './EntityLineage.interface';
 
 export const getHandleByType = (
@@ -133,9 +133,7 @@ export const getColumnContent = (
     <div
       className={classNames(
         'custom-node-column-container',
-        isColumnTraced
-          ? 'custom-node-header-tracing'
-          : 'custom-node-column-lineage-normal bg-white'
+        isColumnTraced && 'custom-node-header-tracing'
       )}
       data-testid={`column-${fullyQualifiedName}`}
       key={fullyQualifiedName}
@@ -150,15 +148,20 @@ export const getColumnContent = (
         encodeLineageHandles(fullyQualifiedName ?? '')
       )}
 
-      <Typography.Text
-        className="p-xss p-x-lg"
-        ellipsis={{ tooltip: true }}
-        style={{ maxWidth: NODE_WIDTH }}>
-        {getConstraintIcon({
-          constraint: column.constraint,
-        })}
-        {getEntityName(column)}
-      </Typography.Text>
+      <span className="custom-node-name-container">
+        <div className="custom-node-name-icon">
+          {getColumnDataTypeIcon({
+            dataType: column.dataType,
+            width: '14px',
+          })}
+        </div>
+        <Typography.Text
+          ellipsis={{ tooltip: true }}
+          style={{ maxWidth: NODE_WIDTH, color: 'inherit' }}>
+          {getEntityName(column)}
+        </Typography.Text>
+      </span>
+      <span className="custom-node-constraint">{column.constraint}</span>
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx

@@ -12,6 +12,7 @@
  */
 import { DownOutlined, SearchOutlined, UpOutlined } from '@ant-design/icons';
 import { Button, Collapse, Input, Space } from 'antd';
+import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -200,7 +201,7 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
 
   if (supportsColumns && (showColumns || showDataObservability)) {
     return (
-      <div className="column-container bg-grey-1 p-sm p-y-xs">
+      <div className="column-container">
         <div className="d-flex justify-between items-center">
           <div>
             {showColumns && (
@@ -247,7 +248,10 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
             </div>
 
             <section className="m-t-md" id="table-columns">
-              <div className="border rounded-4 overflow-hidden">
+              <div
+                className={classNames('rounded-4 overflow-hidden', {
+                  border: !showAllColumns,
+                })}>
                 {filteredColumns.map((column) =>
                   renderColumnsData(column as Column)
                 )}

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

@@ -62,14 +62,12 @@
   }
   .column-container {
     min-height: 48px;
-    padding: 6px 12px;
+    padding: 12px;
+    background-color: @grey-1;
 
-    .lineage-collapse-column {
-      .ant-collapse {
-        border-radius: 0;
-        border: 1px solid @border-color;
-        border-color: @border-color;
-      }
+    .lineage-collapse-column.ant-collapse {
+      border: none;
+      border-radius: 0;
       .ant-collapse-header {
         padding: 0;
         font-size: 12px;
@@ -253,11 +251,27 @@
 
 .custom-node-column-container {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: @white;
   position: relative;
-  background-color: @white;
   font-size: 12px;
+  font-weight: 400;
+
+  .custom-node-name-container {
+    display: flex;
+    align-items: center;
+    padding-left: 12px;
+    gap: 4px;
+
+    .custom-node-name-icon {
+      width: 14px;
+    }
+  }
+
+  .custom-node-constraint {
+    padding-right: 12px;
+  }
 }
 
 .custom-node-deleted-icon {

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/entity-lineage.style.less

@@ -85,17 +85,6 @@
     }
   }
 }
-.custom-node-column-lineage-normal {
-  border-top: 1px solid @border-color;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  font-size: 12px;
-  &:first-child {
-    border-top: none;
-  }
-}
 
 .custom-node {
   .custom-node-header-active {
@@ -228,6 +217,7 @@
   height: calc(100vh - @om-navbar-height);
   .lineage-card {
     height: calc(100vh - @om-navbar-height);
+    overflow-y: scroll;
   }
   .entity-lineage.sidebar {
     top: @lineage-breadcrumb-panel;