fix the glossary column width sizes for the resizable columns (#19497)

* fix the glossary column width sizes to the previous one

* move the colum logic to utils file and added test for it

(cherry picked from commit 182b8ab864fc44cf3c2fbf2a4ae739f97beff32d)

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

@@ -33,7 +33,13 @@ import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
 import { cloneDeep, isEmpty, isUndefined } from 'lodash';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTranslation } from 'react-i18next';
@@ -77,6 +83,7 @@ import {
   buildTree,
   findExpandableKeysForArray,
   findGlossaryTermByFqn,
+  glossaryTermTableColumnsWidth,
   StatusClass,
 } from '../../../utils/GlossaryUtils';
 import { getGlossaryPath } from '../../../utils/RouterUtils';
@@ -102,6 +109,8 @@ const GlossaryTermTab = ({
   onEditGlossaryTerm,
   className,
 }: GlossaryTermTabProps) => {
+  const tableRef = useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = useState(0);
   const { activeGlossary, glossaryChildTerms, setGlossaryChildTerms } =
     useGlossaryStore();
   const { t } = useTranslation();
@@ -147,6 +156,11 @@ const GlossaryTermTab = ({
     return null;
   }, [isGlossary, activeGlossary]);
 
+  const tableColumnsWidth = useMemo(
+    () => glossaryTermTableColumnsWidth(tableWidth, permissions.Create),
+    [permissions.Create, tableWidth]
+  );
+
   const columns = useMemo(() => {
     const data: ColumnsType<ModifiedGlossaryTerm> = [
       {
@@ -155,7 +169,7 @@ const GlossaryTermTab = ({
         key: 'name',
         className: 'glossary-name-column',
         ellipsis: true,
-        width: 200,
+        width: tableColumnsWidth.name,
         render: (_, record) => {
           const name = getEntityName(record);
 
@@ -184,7 +198,7 @@ const GlossaryTermTab = ({
         title: t('label.description'),
         dataIndex: 'description',
         key: 'description',
-        width: isGlossary ? 250 : 650,
+        width: tableColumnsWidth.description,
         render: (description: string) =>
           description.trim() ? (
             <RichTextEditorPreviewerV1
@@ -200,7 +214,7 @@ const GlossaryTermTab = ({
         title: t('label.reviewer'),
         dataIndex: 'reviewers',
         key: 'reviewers',
-        width: 150,
+        width: tableColumnsWidth.reviewers,
         render: (reviewers: EntityReference[]) => (
           <OwnerLabel
             owners={reviewers}
@@ -214,7 +228,7 @@ const GlossaryTermTab = ({
         title: t('label.synonym-plural'),
         dataIndex: 'synonyms',
         key: 'synonyms',
-        width: 150,
+        width: tableColumnsWidth.synonyms,
         render: (synonyms: string[]) => {
           return isEmpty(synonyms) ? (
             <div>{NO_DATA_PLACEHOLDER}</div>
@@ -235,7 +249,7 @@ const GlossaryTermTab = ({
         title: t('label.owner-plural'),
         dataIndex: 'owners',
         key: 'owners',
-        width: 150,
+        width: tableColumnsWidth.owners,
         render: (owners: EntityReference[]) => <OwnerLabel owners={owners} />,
       },
       {
@@ -245,7 +259,7 @@ const GlossaryTermTab = ({
         // this check is added to the width, since the last column is optional and to maintain
         // the re-sizing of the column should not be affected the others columns width sizes.
         ...(permissions.Create && {
-          width: 100,
+          width: tableColumnsWidth.status,
         }),
         render: (_, record) => {
           const status = record.status ?? Status.Approved;
@@ -311,7 +325,7 @@ const GlossaryTermTab = ({
     }
 
     return data;
-  }, [permissions, isGlossary]);
+  }, [permissions, tableColumnsWidth]);
 
   const defaultCheckedList = useMemo(
     () =>
@@ -796,6 +810,12 @@ const GlossaryTermTab = ({
     return expandedRowKeys.length === expandableKeys.length;
   }, [expandedRowKeys, expandableKeys]);
 
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, []);
+
   if (termsLoading) {
     return <Loader />;
   }
@@ -905,6 +925,7 @@ const GlossaryTermTab = ({
               expandable={expandableConfig}
               loading={isTableLoading}
               pagination={false}
+              ref={tableRef}
               rowKey="fullyQualifiedName"
               size="small"
               onHeaderRow={onTableHeader}

openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import { SpinProps, Table as AntdTable, TableProps } from 'antd';
-import React, { useMemo } from 'react';
+import React, { forwardRef, Ref, useMemo } from 'react';
 import { useAntdColumnResize } from 'react-antd-column-resize';
 import { getTableExpandableConfig } from '../../../utils/TableUtils';
 import Loader from '../Loader/Loader';
@@ -21,10 +21,10 @@ interface TableComponentProps<T> extends TableProps<T> {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-const Table = <T extends object = any>({
-  loading,
-  ...rest
-}: TableComponentProps<T>) => {
+const Table = <T extends object = any>(
+  { loading, ...rest }: TableComponentProps<T>,
+  ref: Ref<HTMLDivElement> | null | undefined
+) => {
   const { resizableColumns, components, tableWidth } = useAntdColumnResize(
     () => ({ columns: rest.columns || [], minWidth: 150 }),
     [rest.columns]
@@ -95,9 +95,10 @@ const Table = <T extends object = any>({
         ...rest.locale,
         emptyText: isLoading ? null : rest.locale?.emptyText,
       }}
+      ref={ref}
       {...resizingTableProps}
     />
   );
 };
 
-export default Table;
+export default forwardRef<HTMLDivElement, TableComponentProps<any>>(Table);

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

@@ -907,3 +907,16 @@ const hexToRgba = (hex: string, opacity: number): string => {
 
   return `rgba(${r}, ${g}, ${b}, ${opacity.toFixed(2)})`;
 };
+
+/**
+ * Provide the calculated percentage value from the number provided
+ * @param value - value on which percentage will be calculated
+ * @param percentageValue - PercentageValue like 20, 35 or 50
+ * @returns {number} - value derived after calculating percentage, like for 1000 on 10% = 100
+ */
+export const calculatePercentageFromValue = (
+  value: number,
+  percentageValue: number
+) => {
+  return (value * percentageValue) / 100;
+};

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

@@ -28,6 +28,7 @@ import {
   findExpandableKeys,
   findExpandableKeysForArray,
   getQueryFilterToExcludeTerm,
+  glossaryTermTableColumnsWidth,
 } from './GlossaryUtils';
 
 describe('Glossary Utils', () => {
@@ -353,3 +354,31 @@ describe('Glossary Utils - findAndUpdateNested', () => {
     expect(updatedTerms).toEqual(terms);
   });
 });
+
+describe('Glossary Utils - glossaryTermTableColumnsWidth', () => {
+  it('should return columnsWidth object based on Table width', () => {
+    const columnWidthObject = glossaryTermTableColumnsWidth(1000, true);
+
+    expect(columnWidthObject).toEqual({
+      description: 210,
+      name: 400,
+      owners: 170,
+      reviewers: 330,
+      status: 120,
+      synonyms: 330,
+    });
+  });
+
+  it('should return columnsWidth object based on Table width when not having create permission', () => {
+    const columnWidthObject = glossaryTermTableColumnsWidth(1000, false);
+
+    expect(columnWidthObject).toEqual({
+      description: 330,
+      name: 400,
+      owners: 170,
+      reviewers: 330,
+      status: 120,
+      synonyms: 330,
+    });
+  });
+});

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

@@ -22,6 +22,7 @@ import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
 import { EntityType } from '../enums/entity.enum';
 import { Glossary } from '../generated/entity/data/glossary';
 import { GlossaryTerm, Status } from '../generated/entity/data/glossaryTerm';
+import { calculatePercentageFromValue } from './CommonUtils';
 import { getEntityName } from './EntityUtils';
 import Fqn from './Fqn';
 import { getGlossaryPath } from './RouterUtils';
@@ -370,3 +371,18 @@ export const findAndUpdateNested = (
     return term;
   });
 };
+
+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, 12),
+});