yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-07-12 19:48:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: #16655 page breaks on changing page size with sorted table (#17009)

Browse Source 
* fix: #16655 page breaks on changing page size with sorted table

* fix skeleton breaking

* fix tests

* fix tests

* remove unwanted code
This commit is contained in:
Chirag Madlani 2024-07-17 15:43:48 +05:30 committed by GitHub
parent a117b0224d
commit 080314955a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 157 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Table.spec.ts Normal file
View File

@ -0,0 +1,88 @@
/*
* Copyright 2024 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import test, { expect } from '@playwright/test';
import { SidebarItem } from '../../constant/sidebar';
import { TableClass } from '../../support/entity/TableClass';
import { createNewPage, redirectToHomePage } from '../../utils/common';
import { sidebarClick } from '../../utils/sidebar';
// use the admin user to login
test.use({ storageState: 'playwright/.auth/admin.json' });
const table1 = new TableClass();
test.describe('Table pagination sorting search scenarios ', () => {
test.beforeAll('Setup pre-requests', async ({ browser }) => {
const { afterAction, apiContext } = await createNewPage(browser);
await table1.create(apiContext);
for (let i = 0; i < 17; i++) {
await table1.createTestCase(apiContext);
}
await afterAction();
});
test.afterAll('Clean up', async ({ browser }) => {
const { afterAction, apiContext } = await createNewPage(browser);
await table1.delete(apiContext);
await afterAction();
});
test.beforeEach('Visit home page', async ({ page }) => {
await redirectToHomePage(page);
});
test('Table pagination with sorting should works', async ({ page }) => {
await sidebarClick(page, SidebarItem.DATA_QUALITY);
const listTestCaseResponse = page.waitForResponse(
`/api/v1/dataQuality/testCases/search/list?**`
);
await page.getByText('By Test Cases').click();
await listTestCaseResponse;
await page.getByText('Name', { exact: true }).click();
await page.getByTestId('next').click();
expect(await page.locator('.ant-table-row').count()).toBe(10);
});
test('Table search with sorting should works', async ({ page }) => {
await sidebarClick(page, SidebarItem.DATA_QUALITY);
await page.getByText('By Test Cases').click();
await page.getByText('Name', { exact: true }).click();
await page.getByTestId('searchbar').click();
await page.getByTestId('searchbar').fill('temp-test-case');
await expect(page.getByTestId('search-error-placeholder')).toBeVisible();
});
test('Table filter with sorting should works', async ({ page }) => {
await sidebarClick(page, SidebarItem.DATA_QUALITY);
await page.getByText('By Test Cases').click();
await page.getByText('Name', { exact: true }).click();
await page.getByTestId('status-select-filter').locator('div').click();
await page.getByTitle('Queued').locator('div').click();
await expect(page.getByTestId('search-error-placeholder')).toBeVisible();
});
});

2
openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/ListView/ListViewTab.component.test.tsx
View File

@ -39,7 +39,7 @@ describe('Test ListViewTab Component', () => {
it('Should render loader in table component', async () => {
render(<ListView {...mockProps} loading />);
expect(screen.getByTestId('skeleton-table')).toBeInTheDocument();
expect(screen.getByTestId('loader')).toBeInTheDocument();
});
it('Should render component properly if not loading', async () => {

2
openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable.test.tsx
View File

@ -52,7 +52,7 @@ describe('IngestionListTable tests', () => {
it('Should display the loader if the isLoading is true', async () => {
render(<IngestionListTable {...mockIngestionListTableProps} isLoading />);
const loader = await screen.findByTestId('skeleton-table');
const loader = await screen.findByText('loader');
expect(loader).toBeInTheDocument();
});

8
openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.test.tsx
View File

@ -18,25 +18,25 @@ describe('Table component', () => {
it('should display skeleton loader if loading is true', async () => {
render(<Table loading />);
expect(await screen.findByTestId('skeleton-table')).toBeInTheDocument();
expect(await screen.findByTestId('loader')).toBeInTheDocument();
});
it('should display skeleton loader if spinning is true', async () => {
render(<Table loading={{ spinning: true }} />);
expect(await screen.findByTestId('skeleton-table')).toBeInTheDocument();
expect(await screen.findByTestId('loader')).toBeInTheDocument();
});
it('should not display skeleton loader if loading is false', () => {
render(<Table loading={false} />);
expect(screen.queryByTestId('skeleton-table')).not.toBeInTheDocument();
expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
});
it('should not display skeleton loader if spinning is false', () => {
render(<Table loading={{ spinning: false }} />);
expect(screen.queryByTestId('skeleton-table')).not.toBeInTheDocument();
expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
});
it('should render column label while loading', async () => {

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

@ -10,11 +10,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Skeleton, SpinProps, Table as AntdTable, TableProps } from 'antd';
import { SpinProps, Table as AntdTable, TableProps } from 'antd';
import React, { useMemo } from 'react';
import { SMALL_TABLE_LOADER_SIZE } from '../../../constants/constants';
import { getUniqueArray } from '../../../utils/CommonUtils';
import { getTableExpandableConfig } from '../../../utils/TableUtils';
import Loader from '../Loader/Loader';
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const Table = <T extends object = any>({ loading, ...rest }: TableProps<T>) => {
@ -23,42 +22,52 @@ const Table = <T extends object = any>({ loading, ...rest }: TableProps<T>) => {
[loading]
);
const dataSource = useMemo(
() => getUniqueArray(SMALL_TABLE_LOADER_SIZE) as T[],
[]
);
// TODO: Need to remove the skeleton loading to fix: https://github.com/open-metadata/OpenMetadata/issues/16655
// Let's circle back once we have a better solution for this.
// const dataSource = useMemo(
// () => getUniqueArray(SMALL_TABLE_LOADER_SIZE) as T[],
// []
// );
if (isLoading) {
const { columns } = { ...rest };
const column = columns?.map((column) => {
return {
...column,
render: () => (
<Skeleton
title
active={isLoading}
key={column.key}
paragraph={false}
/>
),
};
});
// if (isLoading) {
// const { columns } = { ...rest };
// const column = columns?.map((column) => {
// return {
// ...column,
// render: () => (
// <Skeleton
// title
// active={isLoading}
// key={column.key}
// paragraph={false}
// />
// ),
// };
// });
return (
<AntdTable
{...rest}
columns={column}
data-testid="skeleton-table"
dataSource={dataSource}
expandable={undefined}
/>
);
}
// return (
// <AntdTable
// {...rest}
// columns={column}
// data-testid="skeleton-table"
// dataSource={isEmpty(rest.dataSource) ? dataSource : rest.dataSource}
// expandable={undefined}
// />
// );
// }
return (
<AntdTable
{...rest}
expandable={{ ...getTableExpandableConfig<T>(), ...rest.expandable }}
loading={{
spinning: isLoading,
indicator: <Loader />,
}}
locale={{
...rest.locale,
emptyText: isLoading ? null : rest.locale?.emptyText,
}}
/>
);
};

21
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.test.tsx
View File

@ -115,6 +115,27 @@ jest.mock('../../../context/PermissionProvider/PermissionProvider', () => ({
}),
}));
jest.mock(
'../../../components/Settings/Users/UsersTab/UsersTabs.component',
() => ({
UsersTab: jest
.fn()
.mockImplementation(() => <div>UsersTabs.component</div>),
})
);
jest.mock('../../../utils/EntityUtils', () => ({
getEntityName: jest.fn().mockReturnValue('Persona'),
}));
jest.mock('../../../utils/PermissionsUtils', () => ({
DEFAULT_ENTITY_PERMISSION: jest.fn(),
}));
jest.mock('../../../utils/ToastUtils', () => ({
showErrorToast: jest.fn(),
}));
describe('PersonaDetailsPage', () => {
it('Component should render', async () => {
render(<PersonaDetailsPage />);

2
openmetadata-ui/src/main/resources/ui/src/pages/ServiceVersionPage/ServiceVersionMainTabContent.test.tsx
View File

@ -175,7 +175,7 @@ describe('ServiceVersionMainTabContent tests', () => {
wrapper: MemoryRouter,
});
const loader = await screen.findByTestId('skeleton-table');
const loader = await screen.findByTestId('loader');
expect(loader).toBeInTheDocument();
});