fix the glossary-term loading and column size issue (#20536)

* fix the glossary-term loading and column size issue

* sonar and playwright fix

openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts

@@ -598,6 +598,21 @@ export const validateGlossaryTerm = async (
   const termSelector = `[data-row-key="${escapedFqn}"]`;
   const statusSelector = `[data-testid="${escapedFqn}-status"]`;
 
+  await expect(page.locator('[data-testid="loader"]')).toBeHidden();
+
+  await expect(
+    page.getByTestId('glossary-terms-table').getByText('Terms')
+  ).toBeVisible();
+  await expect(
+    page.getByTestId('glossary-terms-table').getByText('Description')
+  ).toBeVisible();
+  await expect(
+    page.getByTestId('glossary-terms-table').getByText('Owners')
+  ).toBeVisible();
+  await expect(
+    page.getByTestId('glossary-terms-table').getByText('Status')
+  ).toBeVisible();
+
   if (isGlossaryTermPage) {
     await expect(page.getByTestId(term.name)).toBeVisible();
   } else {

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx

@@ -116,8 +116,8 @@ import {
 
 const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
   const { currentUser } = useApplicationStore();
-  const tableRef = useRef<HTMLDivElement>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
-  const [tableWidth, setTableWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
   const {
     activeGlossary,
     glossaryChildTerms,
@@ -243,8 +243,8 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
   }, [isGlossary, activeGlossary]);
 
   const tableColumnsWidth = useMemo(
-    () => glossaryTermTableColumnsWidth(tableWidth, permissions.Create),
+    () => glossaryTermTableColumnsWidth(containerWidth, permissions.Create),
-    [permissions.Create, tableWidth]
+    [permissions.Create, containerWidth]
   );
 
   const updateGlossaryTermStatus = (
@@ -832,10 +832,23 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
   }, []);
 
   useEffect(() => {
-    if (tableRef.current) {
+    if (!tableContainerRef.current) {
-      setTableWidth(tableRef.current.offsetWidth);
+      return undefined;
     }
-  }, [tableRef.current]);
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        setContainerWidth(width);
+      }
+    });
+
+    resizeObserver.observe(tableContainerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [tableContainerRef.current]);
 
   if (termsLoading) {
     return <Loader />;
@@ -843,19 +856,22 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
 
   if (isEmpty(glossaryTerms)) {
     return (
-      <ErrorPlaceHolder
+      // If there is no terms, the table container ref is not set, so we need to use a div to set the width
-        className="m-t-xlg p-md p-b-lg"
+      <div ref={tableContainerRef}>
-        doc={GLOSSARIES_DOCS}
+        <ErrorPlaceHolder
-        heading={t('label.glossary-term')}
+          className="m-t-xlg p-md p-b-lg"
-        permission={permissions.Create}
+          doc={GLOSSARIES_DOCS}
-        placeholderText={t('message.no-glossary-term')}
+          heading={t('label.glossary-term')}
-        type={
+          permission={permissions.Create}
-          permissions.Create && glossaryTermStatus === Status.Approved
+          placeholderText={t('message.no-glossary-term')}
-            ? ERROR_PLACEHOLDER_TYPE.CREATE
+          type={
-            : ERROR_PLACEHOLDER_TYPE.NO_DATA
+            permissions.Create && glossaryTermStatus === Status.Approved
-        }
+              ? ERROR_PLACEHOLDER_TYPE.CREATE
-        onClick={handleAddGlossaryTermClick}
+              : ERROR_PLACEHOLDER_TYPE.NO_DATA
-      />
+          }
+          onClick={handleAddGlossaryTermClick}
+        />
+      </div>
     );
   }
 
@@ -865,7 +881,8 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
 
   return (
     <Row className={className} gutter={[0, 16]}>
-      <Col span={24}>
+      {/* Have use the col to set the width of the table, to only use the viewport width for the table columns */}
+      <Col className="w-full" ref={tableContainerRef} span={24}>
         {glossaryTerms.length > 0 ? (
           <DndProvider backend={HTML5Backend}>
             <Table
@@ -880,11 +897,8 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
               defaultVisibleColumns={DEFAULT_VISIBLE_COLUMNS}
               expandable={expandableConfig}
               extraTableFilters={extraTableFilters}
-              // Loading is set to true if the table is not loaded or the table width is not set,
+              loading={isTableLoading}
-              // as we are using the table width to calculate the column width
-              loading={isTableLoading || !tableRef.current?.offsetWidth}
               pagination={false}
-              ref={tableRef}
               rowKey="fullyQualifiedName"
               size="small"
               staticVisibleColumns={STATIC_VISIBLE_COLUMNS}

openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.test.ts

@@ -364,7 +364,7 @@ describe('Glossary Utils - glossaryTermTableColumnsWidth', () => {
       name: 400,
       owners: 170,
       reviewers: 330,
-      status: 330,
+      status: 200,
       synonyms: 330,
     });
   });
@@ -377,21 +377,8 @@ describe('Glossary Utils - glossaryTermTableColumnsWidth', () => {
       name: 400,
       owners: 170,
       reviewers: 330,
-      status: 330,
+      status: 200,
       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,
-    });
-  });
 });

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

@@ -447,19 +447,16 @@ export const glossaryTermTableColumnsWidth = (
   tableWidth: number,
   havingCreatePermission: boolean
 ) => {
-  const fallbackWidth = 200;
-
   return {
-    name: calculatePercentageFromValue(tableWidth, 40) || fallbackWidth,
+    name: calculatePercentageFromValue(tableWidth, 40),
-    description:
+    description: calculatePercentageFromValue(
-      calculatePercentageFromValue(
+      tableWidth,
-        tableWidth,
+      havingCreatePermission ? 21 : 33
-        havingCreatePermission ? 21 : 33
+    ),
-      ) || fallbackWidth,
+    reviewers: calculatePercentageFromValue(tableWidth, 33),
-    reviewers: calculatePercentageFromValue(tableWidth, 33) || fallbackWidth,
+    synonyms: calculatePercentageFromValue(tableWidth, 33),
-    synonyms: calculatePercentageFromValue(tableWidth, 33) || fallbackWidth,
+    owners: calculatePercentageFromValue(tableWidth, 17),
-    owners: calculatePercentageFromValue(tableWidth, 17) || fallbackWidth,
+    status: calculatePercentageFromValue(tableWidth, 20),
-    status: calculatePercentageFromValue(tableWidth, 33) || fallbackWidth,
   };
 };