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

fix(ui): add placeholder inside table instead of the page for users listing page (#21774)

Browse Source 
* add placeholder inside table instead of the page

* refactor table placeholder condition
This commit is contained in:
Pranita Fulsundar 2025-06-16 13:36:17 +05:30 committed by GitHub
parent 52dde3d069
commit f940f27988
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 85 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/MockUserPageData.ts
View File

@ -55,3 +55,10 @@ export const MOCK_USER_DATA = {
total: 1,
},
};
export const MOCK_EMPTY_USER_DATA = {
data: [],
paging: {
total: 0,
},
};

62
openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.test.tsx
View File

@ -18,7 +18,7 @@ import { ROUTES } from '../../constants/constants';
import { GlobalSettingOptions } from '../../constants/GlobalSettings.constants';
import { useTableFilters } from '../../hooks/useTableFilters';
import { getUsers } from '../../rest/userAPI';
import { MOCK_USER_DATA } from './MockUserPageData';
import { MOCK_EMPTY_USER_DATA, MOCK_USER_DATA } from './MockUserPageData';
import UserListPageV1 from './UserListPageV1';
const mockParam = {
@ -87,16 +87,24 @@ jest.mock('../../components/PageLayoutV1/PageLayoutV1', () => {
jest.mock('../../components/common/Table/Table', () => {
return jest
.fn()
.mockImplementation(({ columns, extraTableFilters, searchProps }) => (
<div>
{searchProps && <div data-testid="search-bar-container">searchBar</div>}
{extraTableFilters}
{columns.map((column: Record<string, string>) => (
<span key={column.key}>{column.title}</span>
))}
<table>mockTable</table>
</div>
));
.mockImplementation(
({ columns, extraTableFilters, searchProps, dataSource, locale }) => (
<div>
{searchProps && (
<div data-testid="search-bar-container">searchBar</div>
)}
{extraTableFilters}
{columns.map((column: Record<string, string>) => (
<span key={column.key}>{column.title}</span>
))}
{dataSource && dataSource.length === 0 && locale?.emptyText ? (
locale.emptyText
) : (
<table>mockTable</table>
)}
</div>
)
);
});
jest.mock('../../components/common/Loader/Loader', () => {
@ -110,6 +118,17 @@ jest.mock(
}
);
jest.mock(
'../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder',
() => {
return jest
.fn()
.mockImplementation(({ type }) => (
<div data-testid={`error-placeholder-${type}`}>ErrorPlaceHolder</div>
));
}
);
describe('Test UserListPage component', () => {
it('users api should called on initial load', async () => {
const { findByTestId } = render(<UserListPageV1 />);
@ -122,6 +141,27 @@ describe('Test UserListPage component', () => {
expect(getUsers).toHaveBeenCalled();
});
it('should show ErrorPlaceholder when there are no users after initial API call', async () => {
(getUsers as jest.Mock).mockImplementationOnce(() =>
Promise.resolve({
...MOCK_EMPTY_USER_DATA,
})
);
const { findByTestId } = render(<UserListPageV1 />);
const errorPlaceholder = await findByTestId('error-placeholder-CREATE');
expect(errorPlaceholder).toBeInTheDocument();
expect(getUsers).toHaveBeenCalledWith({
fields: 'profile,teams,roles',
include: 'non-deleted',
isAdmin: false,
isBot: false,
limit: 25,
});
});
it('should call setFilters with deleted flag on clicking showDeleted switch', async () => {
const { findByTestId } = render(<UserListPageV1 />);

63
openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
View File

@ -348,34 +348,18 @@ const UserListPageV1 = () => {
const errorPlaceHolder = useMemo(
() => (
<PageLayoutV1 pageTitle={t('label.user-plural')}>
<Row>
<Col className="w-full d-flex justify-end">
<span>
<Switch
checked={isDeleted}
data-testid="show-deleted"
onClick={handleShowDeletedUserChange}
/>
<span className="m-l-xs">{t('label.deleted')}</span>
</span>
</Col>
<Col className="mt-24" span={24}>
<ErrorPlaceHolder
className="border-none"
heading={t('label.user')}
permission={isAdminUser}
permissionValue={t('label.create-entity', {
entity: t('label.user'),
})}
type={ERROR_PLACEHOLDER_TYPE.CREATE}
onClick={handleAddNewUser}
/>
</Col>
</Row>
</PageLayoutV1>
<ErrorPlaceHolder
className="border-none m-y-md"
heading={t('label.user')}
permission={isAdminUser}
permissionValue={t('label.create-entity', {
entity: t('label.user'),
})}
type={ERROR_PLACEHOLDER_TYPE.CREATE}
onClick={handleAddNewUser}
/>
),
[isAdminUser, isDeleted]
[isAdminUser]
);
const emptyPlaceHolderText = useMemo(() => {
@ -425,6 +409,21 @@ const UserListPageV1 = () => {
);
}, [isAdminPage, searchValue]);
const tablePlaceholder = useMemo(() => {
return isEmpty(userList) && !isDeleted && !isDataLoading && !searchValue ? (
errorPlaceHolder
) : (
<FilterTablePlaceHolder placeholderText={emptyPlaceHolderText} />
);
}, [
userList,
isDeleted,
isDataLoading,
searchValue,
errorPlaceHolder,
emptyPlaceHolderText,
]);
if (
![GlobalSettingOptions.USERS, GlobalSettingOptions.ADMINS].includes(tab)
) {
@ -432,10 +431,6 @@ const UserListPageV1 = () => {
return <Redirect to={ROUTES.NOT_FOUND} />;
}
if (isEmpty(userList) && !isDeleted && !isDataLoading && !searchValue) {
return errorPlaceHolder;
}
return (
<PageLayoutV1 pageTitle={t('label.user-plural')}>
<Row
@ -495,11 +490,7 @@ const UserListPageV1 = () => {
}
loading={isDataLoading}
locale={{
emptyText: (
<FilterTablePlaceHolder
placeholderText={emptyPlaceHolderText}
/>
),
emptyText: tablePlaceholder,
}}
pagination={false}
rowKey="id"