From 685b5702e80af8c6ef1b87ef41a74d324405fe1c Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Wed, 2 Apr 2025 10:58:30 +0530 Subject: [PATCH] fix the glossary-term loading and column size issue (#20536) * fix the glossary-term loading and column size issue * sonar and playwright fix --- .../resources/ui/playwright/utils/glossary.ts | 15 +++++ .../GlossaryTermTab.component.tsx | 64 +++++++++++-------- .../ui/src/utils/GlossaryUtils.test.ts | 17 +---- .../resources/ui/src/utils/GlossaryUtils.tsx | 21 +++--- 4 files changed, 65 insertions(+), 52 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts index f4c09d72762..6919eb86983 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts +++ b/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 { 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 ebd9d700349..8479d1007ad 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 @@ -116,8 +116,8 @@ import { const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => { const { currentUser } = useApplicationStore(); - const tableRef = useRef(null); - const [tableWidth, setTableWidth] = useState(0); + const tableContainerRef = useRef(null); + 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), - [permissions.Create, tableWidth] + () => glossaryTermTableColumnsWidth(containerWidth, permissions.Create), + [permissions.Create, containerWidth] ); const updateGlossaryTermStatus = ( @@ -832,10 +832,23 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => { }, []); useEffect(() => { - if (tableRef.current) { - setTableWidth(tableRef.current.offsetWidth); + if (!tableContainerRef.current) { + 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 ; @@ -843,19 +856,22 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => { if (isEmpty(glossaryTerms)) { return ( - + // If there is no terms, the table container ref is not set, so we need to use a div to set the width +
+ +
); } @@ -865,7 +881,8 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => { return ( - + {/* Have use the col to set the width of the table, to only use the viewport width for the table columns */} + {glossaryTerms.length > 0 ? ( { 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, - // as we are using the table width to calculate the column width - loading={isTableLoading || !tableRef.current?.offsetWidth} + loading={isTableLoading} pagination={false} - ref={tableRef} rowKey="fullyQualifiedName" size="small" staticVisibleColumns={STATIC_VISIBLE_COLUMNS} 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 88f01572c31..10af7468b07 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 @@ -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, - }); - }); }); 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 fc2aa21ed40..04763f62c00 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx +++ b/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, - 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, + 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, 20), }; };