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 f45e2b3fdd1..7f90651e9d4 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 @@ -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(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 = [ { @@ -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() ? ( ( { return isEmpty(synonyms) ? (
{NO_DATA_PLACEHOLDER}
@@ -235,7 +249,7 @@ const GlossaryTermTab = ({ title: t('label.owner-plural'), dataIndex: 'owners', key: 'owners', - width: 150, + width: tableColumnsWidth.owners, render: (owners: EntityReference[]) => , }, { @@ -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 ; } @@ -905,6 +925,7 @@ const GlossaryTermTab = ({ expandable={expandableConfig} loading={isTableLoading} pagination={false} + ref={tableRef} rowKey="fullyQualifiedName" size="small" onHeaderRow={onTableHeader} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx index ec80a3752ee..cc5a59f9ad0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx +++ b/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 extends TableProps { } // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types -const Table = ({ - loading, - ...rest -}: TableComponentProps) => { +const Table = ( + { loading, ...rest }: TableComponentProps, + ref: Ref | null | undefined +) => { const { resizableColumns, components, tableWidth } = useAntdColumnResize( () => ({ columns: rest.columns || [], minWidth: 150 }), [rest.columns] @@ -95,9 +95,10 @@ const Table = ({ ...rest.locale, emptyText: isLoading ? null : rest.locale?.emptyText, }} + ref={ref} {...resizingTableProps} /> ); }; -export default Table; +export default forwardRef>(Table); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx index bd4b1da1f87..83a6f83932b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx @@ -824,3 +824,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; +}; 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 066663638f4..c3a3b5cebd5 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 @@ -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, + }); + }); +}); 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 01709cb3435..69c70d215e7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx @@ -35,6 +35,7 @@ import { Status, TermReference, } from '../generated/entity/data/glossaryTerm'; +import { calculatePercentageFromValue } from './CommonUtils'; import { getEntityName } from './EntityUtils'; import { VersionStatus } from './EntityVersionUtils.interface'; import Fqn from './Fqn'; @@ -430,3 +431,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), +});