fix the glossary table column width (#20460)

* fix the glossary table column width

* remove unused code
This commit is contained in:
Ashish Gupta 2025-03-27 10:32:30 +05:30 committed by GitHub
parent 0b18d7b374
commit cf8735e25a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 13 deletions

View File

@ -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"

View File

@ -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,
});
});
});

View File

@ -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}>`;