From 1540329e1eceb13e4c97079a24f233b15eab5ba7 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Fri, 24 Nov 2023 12:15:44 +0530
Subject: [PATCH] fix(ui): column name overlapping in entity table (#14086)

* fix column name overlaping in entity table

* minor fixes
---
 .../ContainerChildren/ContainerChildren.tsx   | 16 ++++++++------
 .../DashboardDetails.component.tsx            | 22 ++++++++++++-------
 .../components/DataModels/DataModelsTable.tsx | 13 ++++++-----
 .../ModelTab/ModelTab.component.tsx           |  1 +
 .../PipelineDetails.component.tsx             | 14 +++++++++---
 .../SchemaTable/SchemaTable.component.tsx     |  3 ++-
 .../TopicDetails/TopicSchema/TopicSchema.tsx  |  9 ++++----
 .../DatabaseSchemaPage/SchemaTablesTab.tsx    | 19 +++++++++-------
 .../SearchIndexFieldsTable.tsx                | 11 ++++------
 .../StoredProcedure/StoredProcedureTab.tsx    | 17 ++++++++------
 .../ui/src/utils/DatabaseDetails.utils.tsx    | 20 ++++++++++-------
 11 files changed, 86 insertions(+), 59 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx
index ce068232674..0e9e1f310cf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx
@@ -41,15 +41,17 @@ const ContainerChildren: FC<ContainerChildrenProps> = ({
       {
         title: t('label.name'),
         dataIndex: 'name',
-        width: '200px',
+        width: 400,
         key: 'name',
         render: (_, record) => (
-          <Link
-            className="link-hover"
-            data-testid="container-name"
-            to={getContainerDetailPath(record.fullyQualifiedName || '')}>
-            {getEntityName(record)}
-          </Link>
+          <div className="d-inline-flex w-max-90">
+            <Link
+              className="break-word"
+              data-testid="container-name"
+              to={getContainerDetailPath(record.fullyQualifiedName ?? '')}>
+              {getEntityName(record)}
+            </Link>
+          </div>
         ),
       },
       {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
index cf1eb3e7266..371c40aff10 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@@ -421,19 +421,25 @@ const DashboardDetails = ({
         }),
         dataIndex: 'chartName',
         key: 'chartName',
-        width: 200,
+        width: 220,
+        fixed: 'left',
         render: (_, record) => {
           const chartName = getEntityName(record);
 
           return record.sourceUrl ? (
-            <Typography.Link href={record.sourceUrl} target="_blank">
-              <Space>
-                {chartName}
-                <ExternalLinkIcon height={14} width={14} />
-              </Space>
-            </Typography.Link>
+            <div className="d-flex items-center">
+              <Typography.Link href={record.sourceUrl} target="_blank">
+                <span className="break-all">{chartName}</span>
+
+                <ExternalLinkIcon
+                  className="m-l-xs flex-none"
+                  height={14}
+                  width={14}
+                />
+              </Typography.Link>
+            </div>
           ) : (
-            <Typography.Text>{chartName}</Typography.Text>
+            <Typography.Text className="w-full">{chartName}</Typography.Text>
           );
         },
       },
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx
index 59e5ee635b1..fb40f8959e2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx
@@ -64,11 +64,14 @@ const DataModelTable = () => {
           const dataModelDisplayName = getEntityName(record);
 
           return (
-            <Link
-              data-testid={`data-model-${dataModelDisplayName}`}
-              to={getDataModelDetailsPath(record.fullyQualifiedName || '')}>
-              {dataModelDisplayName}
-            </Link>
+            <div className="d-inline-flex w-max-90">
+              <Link
+                className="break-word"
+                data-testid={`data-model-${dataModelDisplayName}`}
+                to={getDataModelDetailsPath(record.fullyQualifiedName || '')}>
+                {dataModelDisplayName}
+              </Link>
+            </div>
           );
         },
       },
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/ModelTab/ModelTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/ModelTab/ModelTab.component.tsx
index 92e8107d1c3..bdd915ca9b3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/ModelTab/ModelTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/ModelTab/ModelTab.component.tsx
@@ -78,6 +78,7 @@ const ModelTab = ({
         dataIndex: 'name',
         key: 'name',
         width: 250,
+        fixed: 'left',
         render: (_, record) => (
           <Typography.Text>{getEntityName(record)}</Typography.Text>
         ),
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
index 59ed64966fe..5808208ad17 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -370,7 +370,8 @@ const PipelineDetails = ({
         key: t('label.name'),
         dataIndex: 'name',
         title: t('label.name'),
-        width: 200,
+        width: 220,
+        fixed: 'left',
         render: (_, record) =>
           isEmpty(record.sourceUrl) ? (
             <span>{getEntityName(record)}</span>
@@ -379,8 +380,15 @@ const PipelineDetails = ({
               className="flex items-center gap-2"
               target="_blank"
               to={{ pathname: record.sourceUrl }}>
-              <span>{getEntityName(record)}</span>
-              <ExternalLinkIcon height={14} width={14} />
+              <div className="d-flex items-center">
+                <span className="break-all">{getEntityName(record)}</span>
+
+                <ExternalLinkIcon
+                  className="m-l-xs flex-none"
+                  height={14}
+                  width={14}
+                />
+              </div>
             </Link>
           ),
       },
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx
index d940ab8c32a..a6863478f50 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx
@@ -325,7 +325,8 @@ const SchemaTable = ({
 
                 <Typography.Text
                   className="m-b-0 d-block text-grey-muted"
-                  data-testid="column-name">
+                  data-testid="column-name"
+                  ellipsis={{ tooltip: true }}>
                   {name}
                 </Typography.Text>
               </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx
index 84dd1596bc3..e6cb8a1d475 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx
@@ -16,7 +16,6 @@ import {
   Radio,
   RadioChangeEvent,
   Row,
-  Space,
   Tag,
   Tooltip,
   Typography,
@@ -128,17 +127,17 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
 
   const renderSchemaName = useCallback(
     (_, record: Field) => (
-      <Space align="start" className="w-max-90 vertical-align-inherit" size={2}>
+      <div className="d-inline-flex w-max-90 vertical-align-inherit">
         <Tooltip destroyTooltipOnHide title={getEntityName(record)}>
-          <Typography.Text className="break-word">
+          <span className="break-word">
             {isVersionView ? (
               <RichTextEditorPreviewer markdown={getEntityName(record)} />
             ) : (
               getEntityName(record)
             )}
-          </Typography.Text>
+          </span>
         </Tooltip>
-      </Space>
+      </div>
     ),
     [isVersionView]
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
index bf92b2c570e..6919e052c1f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
@@ -74,18 +74,21 @@ function SchemaTablesTab({
         title: t('label.name'),
         dataIndex: 'name',
         key: 'name',
+        width: 500,
         render: (_, record: Table) => {
           return (
-            <Link
-              to={getEntityLink(
-                EntityType.TABLE,
-                record.fullyQualifiedName as string
-              )}>
-              {getEntityName(record)}
-            </Link>
+            <div className="d-inline-flex w-max-90">
+              <Link
+                className="break-word"
+                to={getEntityLink(
+                  EntityType.TABLE,
+                  record.fullyQualifiedName as string
+                )}>
+                {getEntityName(record)}
+              </Link>
+            </div>
           );
         },
-        className: 'truncate w-max-500',
       },
       {
         title: t('label.description'),
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTable/SearchIndexFieldsTable.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTable/SearchIndexFieldsTable.tsx
index 30133524331..517ac036bfa 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTable/SearchIndexFieldsTable.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/SearchIndexDetailsPage/SearchIndexFieldsTable/SearchIndexFieldsTable.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Space, Tooltip, Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { cloneDeep, isEmpty, isUndefined, toLower } from 'lodash';
 import { EntityTags } from 'Models';
@@ -171,15 +171,12 @@ const SearchIndexFieldsTable = ({
         dataIndex: 'name',
         key: 'name',
         accessor: 'name',
-        width: 180,
+        width: 220,
         fixed: 'left',
         render: (_, record: SearchIndexField) => (
-          <Space
-            align="start"
-            className="w-max-90 vertical-align-inherit"
-            size={2}>
+          <div className="d-inline-flex w-max-90">
             <span className="break-word">{getEntityName(record)}</span>
-          </Space>
+          </div>
         ),
       },
       {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx
index 74040376a66..d414694b8e1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/StoredProcedure/StoredProcedureTab.tsx
@@ -92,13 +92,16 @@ const StoredProcedureTab = () => {
         key: 'name',
         width: 350,
         render: (_, record) => (
-          <Link
-            to={getEntityLink(
-              EntityType.STORED_PROCEDURE,
-              record.fullyQualifiedName ?? ''
-            )}>
-            {getEntityName(record)}
-          </Link>
+          <div className="d-inline-flex w-max-90">
+            <Link
+              className="break-word"
+              to={getEntityLink(
+                EntityType.STORED_PROCEDURE,
+                record.fullyQualifiedName ?? ''
+              )}>
+              {getEntityName(record)}
+            </Link>
+          </div>
         ),
       },
       {
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseDetails.utils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseDetails.utils.tsx
index 40e96650d7c..f588ec8d957 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseDetails.utils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseDetails.utils.tsx
@@ -34,15 +34,19 @@ export const schemaTableColumns: ColumnsType<DatabaseSchema> = [
     title: t('label.schema-name'),
     dataIndex: 'name',
     key: 'name',
+    width: 250,
     render: (_, record: DatabaseSchema) => (
-      <Link
-        to={
-          record.fullyQualifiedName
-            ? getDatabaseSchemaDetailsPath(record.fullyQualifiedName)
-            : ''
-        }>
-        {getEntityName(record)}
-      </Link>
+      <div className="d-inline-flex w-max-90">
+        <Link
+          className="break-word"
+          to={
+            record.fullyQualifiedName
+              ? getDatabaseSchemaDetailsPath(record.fullyQualifiedName)
+              : ''
+          }>
+          {getEntityName(record)}
+        </Link>
+      </div>
     ),
   },
   {