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) { if (tableRef.current) {
setTableWidth(tableRef.current.offsetWidth); setTableWidth(tableRef.current.offsetWidth);
} }
}, []); }, [tableRef.current]);
if (termsLoading) { if (termsLoading) {
return <Loader />; return <Loader />;
@ -876,7 +876,9 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
defaultVisibleColumns={DEFAULT_VISIBLE_COLUMNS} defaultVisibleColumns={DEFAULT_VISIBLE_COLUMNS}
expandable={expandableConfig} expandable={expandableConfig}
extraTableFilters={extraTableFilters} 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} pagination={false}
ref={tableRef} ref={tableRef}
rowKey="fullyQualifiedName" rowKey="fullyQualifiedName"

View File

@ -381,4 +381,17 @@ describe('Glossary Utils - glossaryTermTableColumnsWidth', () => {
synonyms: 330, 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 = ( export const glossaryTermTableColumnsWidth = (
tableWidth: number, tableWidth: number,
havingCreatePermission: boolean havingCreatePermission: boolean
) => ({ ) => {
name: calculatePercentageFromValue(tableWidth, 40), const fallbackWidth = 200;
description: calculatePercentageFromValue(
tableWidth, return {
havingCreatePermission ? 21 : 33 name: calculatePercentageFromValue(tableWidth, 40) || fallbackWidth,
), description:
reviewers: calculatePercentageFromValue(tableWidth, 33), calculatePercentageFromValue(
synonyms: calculatePercentageFromValue(tableWidth, 33), tableWidth,
owners: calculatePercentageFromValue(tableWidth, 17), havingCreatePermission ? 21 : 33
status: calculatePercentageFromValue(tableWidth, 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) => export const getGlossaryEntityLink = (glossaryTermFQN: string) =>
`<#E::${EntityType.GLOSSARY_TERM}::${glossaryTermFQN}>`; `<#E::${EntityType.GLOSSARY_TERM}::${glossaryTermFQN}>`;