From 8a8d80febd97933257a1e6ad63d25475f5c2e0bc Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Sat, 7 Dec 2024 00:15:54 +0530
Subject: [PATCH] MINOR: fix the lineage node size and overflow issue on right
 panel (#18942)

* fix the lineage node size and overflow issue on right panel

* fix sonar issue
---
 .../EntityInfoDrawer.component.tsx            |  2 +-
 .../Entity/EntityLineage/CustomNode.utils.tsx |  5 +--
 .../EntityLineage/LineageNodeLabelV1.tsx      |  4 +-
 .../Entity/EntityLineage/custom-node.less     |  5 +++
 .../EntityLineage/lineage-node-label.less     | 17 +++++---
 .../ui/src/styles/components/size.less        |  3 ++
 .../ui/src/utils/EntitySummaryPanelUtils.tsx  |  5 ++-
 .../mocks/EntitySummaryPanelUtils.mock.tsx    | 40 +++++++++++++++----
 8 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx
index a41c7a8818c..c0368a36f75 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx
@@ -228,7 +228,7 @@ const EntityInfoDrawer = ({
 
           <Col span={24}>
             <EntityHeaderTitle
-              className="w-max-300"
+              className="w-max-350"
               deleted={selectedNode.deleted}
               displayName={selectedNode.displayName}
               icon={icon}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx
index 08f76b345b8..3c02d7e04c3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx
@@ -16,7 +16,6 @@ import React, { Fragment } from 'react';
 import { Handle, HandleProps, HandleType, Position } from 'reactflow';
 import { ReactComponent as MinusIcon } from '../../../assets/svg/control-minus.svg';
 import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-outlined.svg';
-import { NODE_WIDTH } from '../../../constants/Lineage.constants';
 import { EntityLineageNodeType } from '../../../enums/entity.enum';
 import { Column } from '../../../generated/entity/data/table';
 import { encodeLineageHandles } from '../../../utils/EntityLineageUtils';
@@ -156,8 +155,8 @@ export const getColumnContent = (
           })}
         </div>
         <Typography.Text
-          ellipsis={{ tooltip: true }}
-          style={{ maxWidth: NODE_WIDTH, color: 'inherit' }}>
+          className="custom-node-column-label"
+          ellipsis={{ tooltip: true }}>
           {getEntityName(column)}
         </Typography.Text>
       </span>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx
index 04ec789567a..41c86393086 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx
@@ -83,8 +83,8 @@ const LineageNodeLabelV1 = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
   const breadcrumbs = getBreadcrumbsFromFqn(node.fullyQualifiedName ?? '');
 
   return (
-    <div className="w-76">
-      <div className="m-0 p-x-md p-y-xs">
+    <div className="custom-node-label-container">
+      <div className="w-full m-0 p-x-md p-y-xs">
         {breadcrumbs.length > 0 && (
           <div className="d-flex gap-2 items-center m-b-xs lineage-breadcrumb">
             {breadcrumbs.map((breadcrumb, index) => (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less
index f22e153d315..ae5ef1fab07 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less
@@ -295,9 +295,14 @@
       width: 14px;
       display: flex;
     }
+
+    .custom-node-column-label {
+      max-width: 140px;
+    }
   }
 
   .custom-node-constraint {
+    padding-left: 4px;
     padding-right: 12px;
   }
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less
index 19a712f718b..1ba504b598e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less
@@ -16,11 +16,18 @@
     width: 28px;
   }
 
-  .lineage-breadcrumb {
-    .lineage-breadcrumb-item {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+  .custom-node-label-container {
+    width: 19rem;
+    min-height: 84px;
+    display: flex;
+    align-items: center;
+
+    .lineage-breadcrumb {
+      .lineage-breadcrumb-item {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
index 5fbe8694645..e77d1c326b8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
@@ -110,6 +110,9 @@
 .w-max-200 {
   max-width: 200px;
 }
+.w-max-350 {
+  max-width: 350px;
+}
 .w-max-400 {
   max-width: 400px;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntitySummaryPanelUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntitySummaryPanelUtils.tsx
index f5990eb3ef7..5539490545e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntitySummaryPanelUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntitySummaryPanelUtils.tsx
@@ -98,7 +98,10 @@ export const getTitle = (
       </div>
     </Link>
   ) : (
-    <Text className="entity-title" data-testid="entity-title">
+    <Text
+      className="entity-title"
+      data-testid="entity-title"
+      ellipsis={{ tooltip: true }}>
       {title}
     </Text>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntitySummaryPanelUtils.mock.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntitySummaryPanelUtils.mock.tsx
index 0c211befd15..980472c4231 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntitySummaryPanelUtils.mock.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntitySummaryPanelUtils.mock.tsx
@@ -31,7 +31,10 @@ import { ReactComponent as IconExternalLink } from '../assets/svg/external-links
 const { Text } = Typography;
 
 export const mockTextBasedSummaryTitleResponse = (
-  <Text className="entity-title" data-testid="entity-title">
+  <Text
+    className="entity-title"
+    data-testid="entity-title"
+    ellipsis={{ tooltip: true }}>
     <span className="text-highlighter">title2</span>
   </Text>
 );
@@ -346,7 +349,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
   {
     name: 'api_client_id',
     title: (
-      <Text className="entity-title" data-testid="entity-title">
+      <Text
+        className="entity-title"
+        data-testid="entity-title"
+        ellipsis={{ tooltip: true }}>
         api_client_id
       </Text>
     ),
@@ -361,7 +367,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
   {
     name: 'Customer',
     title: (
-      <Text className="entity-title" data-testid="entity-title">
+      <Text
+        className="entity-title"
+        data-testid="entity-title"
+        ellipsis={{ tooltip: true }}>
         Customer
       </Text>
     ),
@@ -375,7 +384,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'id',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             id
           </Text>
         ),
@@ -389,7 +401,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'first_name',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             first_name
           </Text>
         ),
@@ -403,7 +418,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'last_name',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             last_name
           </Text>
         ),
@@ -417,7 +435,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'email',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             email
           </Text>
         ),
@@ -441,7 +462,10 @@ export const mockInvalidDataResponse = [
     name: '',
     tags: undefined,
     title: (
-      <Text className="entity-title" data-testid="entity-title">
+      <Text
+        className="entity-title"
+        data-testid="entity-title"
+        ellipsis={{ tooltip: true }}>
         --
       </Text>
     ),