From cf8735e25a628eb9a5518459ed946bf19f89d240 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Thu, 27 Mar 2025 10:32:30 +0530
Subject: [PATCH] fix the glossary table column width (#20460)

* fix the glossary table column width

* remove unused code
---
 .../GlossaryTermTab.component.tsx             |  6 +++--
 .../ui/src/utils/GlossaryUtils.test.ts        | 13 +++++++++
 .../resources/ui/src/utils/GlossaryUtils.tsx  | 27 +++++++++++--------
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
index bd3c354310a..96a7f2f98ac 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
@@ -831,7 +831,7 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
     if (tableRef.current) {
       setTableWidth(tableRef.current.offsetWidth);
     }
-  }, []);
+  }, [tableRef.current]);
 
   if (termsLoading) {
     return <Loader />;
@@ -876,7 +876,9 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
               defaultVisibleColumns={DEFAULT_VISIBLE_COLUMNS}
               expandable={expandableConfig}
               extraTableFilters={extraTableFilters}
-              loading={isTableLoading}
+              // Loading is set to true if the table is not loaded or the table width is not set,
+              // as we are using the table width to calculate the column width
+              loading={isTableLoading || !tableRef.current?.offsetWidth}
               pagination={false}
               ref={tableRef}
               rowKey="fullyQualifiedName"
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.test.ts b/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.test.ts
index 7ab99e6d65e..88f01572c31 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.test.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.test.ts
@@ -381,4 +381,17 @@ describe('Glossary Utils - glossaryTermTableColumnsWidth', () => {
       synonyms: 330,
     });
   });
+
+  it('should return fallback width when table width is 0', () => {
+    const columnWidthObject = glossaryTermTableColumnsWidth(0, false);
+
+    expect(columnWidthObject).toEqual({
+      description: 200,
+      name: 200,
+      owners: 200,
+      reviewers: 200,
+      status: 200,
+      synonyms: 200,
+    });
+  });
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx
index a65f2f463a3..fc2aa21ed40 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx
@@ -446,17 +446,22 @@ export const findAndUpdateNested = (
 export const glossaryTermTableColumnsWidth = (
   tableWidth: number,
   havingCreatePermission: boolean
-) => ({
-  name: calculatePercentageFromValue(tableWidth, 40),
-  description: calculatePercentageFromValue(
-    tableWidth,
-    havingCreatePermission ? 21 : 33
-  ),
-  reviewers: calculatePercentageFromValue(tableWidth, 33),
-  synonyms: calculatePercentageFromValue(tableWidth, 33),
-  owners: calculatePercentageFromValue(tableWidth, 17),
-  status: calculatePercentageFromValue(tableWidth, 33),
-});
+) => {
+  const fallbackWidth = 200;
+
+  return {
+    name: calculatePercentageFromValue(tableWidth, 40) || fallbackWidth,
+    description:
+      calculatePercentageFromValue(
+        tableWidth,
+        havingCreatePermission ? 21 : 33
+      ) || fallbackWidth,
+    reviewers: calculatePercentageFromValue(tableWidth, 33) || fallbackWidth,
+    synonyms: calculatePercentageFromValue(tableWidth, 33) || fallbackWidth,
+    owners: calculatePercentageFromValue(tableWidth, 17) || fallbackWidth,
+    status: calculatePercentageFromValue(tableWidth, 33) || fallbackWidth,
+  };
+};
 
 export const getGlossaryEntityLink = (glossaryTermFQN: string) =>
   `<#E::${EntityType.GLOSSARY_TERM}::${glossaryTermFQN}>`;