External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-24 22:46:01 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7743 from mabashian/convert-UserList-functional

Browse Source 
Converts UserList to functional component

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
             https://github.com/jakemcdermott
This commit is contained in:
softwarefactory-project-zuul[bot]
2020-07-29 22:52:45 +00:00
committed by GitHub
parent 3bcad7be81 b11f2f017f
commit 45809abc6f
2 changed files with 234 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
awx/ui_next/src/screens/User/UserList/UserList.jsx
View File

@@ -1,9 +1,8 @@
import React, { Component, Fragment } from 'react'; import React, { useEffect, useCallback } from 'react';
import { withRouter } from 'react-router-dom'; import { useLocation, useRouteMatch } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Card, PageSection } from '@patternfly/react-core'; import { Card, PageSection } from '@patternfly/react-core';
import { UsersAPI } from '../../../api'; import { UsersAPI } from '../../../api';
import AlertModal from '../../../components/AlertModal'; import AlertModal from '../../../components/AlertModal';
import DataListToolbar from '../../../components/DataListToolbar'; import DataListToolbar from '../../../components/DataListToolbar';
@@ -12,8 +11,9 @@ import PaginatedDataList, {
ToolbarAddButton, ToolbarAddButton,
ToolbarDeleteButton, ToolbarDeleteButton,
} from '../../../components/PaginatedDataList'; } from '../../../components/PaginatedDataList';
import useRequest, { useDeleteItems } from '../../../util/useRequest';
import useSelected from '../../../util/useSelected';
import { getQSConfig, parseQueryString } from '../../../util/qs'; import { getQSConfig, parseQueryString } from '../../../util/qs';
import UserListItem from './UserListItem'; import UserListItem from './UserListItem';
const QS_CONFIG = getQSConfig('user', { const QS_CONFIG = getQSConfig('user', {
@@ -22,222 +22,165 @@ const QS_CONFIG = getQSConfig('user', {
order_by: 'username', order_by: 'username',
}); });
class UsersList extends Component { function UserList({ i18n }) {
constructor(props) { const location = useLocation();
super(props); const match = useRouteMatch();
this.state = { const {
hasContentLoading: true, result: { users, itemCount, actions },
contentError: null, error: contentError,
deletionError: null, isLoading,
request: fetchUsers,
} = useRequest(
useCallback(async () => {
const params = parseQueryString(QS_CONFIG, location.search);
const [response, actionsResponse] = await Promise.all([
UsersAPI.read(params),
UsersAPI.readOptions(),
]);
return {
users: response.data.results,
itemCount: response.data.count,
actions: actionsResponse.data.actions,
};
}, [location]),
{
users: [], users: [],
selected: [],
itemCount: 0, itemCount: 0,
actions: null, actions: {},
};
this.handleSelectAll = this.handleSelectAll.bind(this);
this.handleSelect = this.handleSelect.bind(this);
this.handleUserDelete = this.handleUserDelete.bind(this);
this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
this.loadUsers = this.loadUsers.bind(this);
}
componentDidMount() {
this.loadUsers();
}
componentDidUpdate(prevProps) {
const { location } = this.props;
if (location !== prevProps.location) {
this.loadUsers();
} }
} );
handleSelectAll(isSelected) { useEffect(() => {
const { users } = this.state; fetchUsers();
}, [fetchUsers]);
const selected = isSelected ? [...users] : []; const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
this.setState({ selected }); users
} );
handleSelect(row) { const {
const { selected } = this.state; isLoading: isDeleteLoading,
deleteItems: deleteUsers,
if (selected.some(s => s.id === row.id)) { deletionError,
this.setState({ selected: selected.filter(s => s.id !== row.id) }); clearDeletionError,
} else { } = useDeleteItems(
this.setState({ selected: selected.concat(row) }); useCallback(async () => {
return Promise.all(selected.map(user => UsersAPI.destroy(user.id)));
}, [selected]),
{
qsConfig: QS_CONFIG,
allItemsSelected: isAllSelected,
fetchItems: fetchUsers,
} }
} );
handleDeleteErrorClose() { const handleUserDelete = async () => {
this.setState({ deletionError: null }); await deleteUsers();
} setSelected([]);
};
async handleUserDelete() { const hasContentLoading = isDeleteLoading || isLoading;
const { selected } = this.state; const canAdd = actions && actions.POST;
this.setState({ hasContentLoading: true }); return (
try { <>
await Promise.all(selected.map(org => UsersAPI.destroy(org.id))); <PageSection>
} catch (err) { <Card>
this.setState({ deletionError: err }); <PaginatedDataList
} finally { contentError={contentError}
await this.loadUsers(); hasContentLoading={hasContentLoading}
} items={users}
} itemCount={itemCount}
pluralizedItemName={i18n._(t`Users`)}
async loadUsers() { qsConfig={QS_CONFIG}
const { location } = this.props; onRowClick={handleSelect}
const { actions: cachedActions } = this.state; toolbarSearchColumns={[
const params = parseQueryString(QS_CONFIG, location.search); {
name: i18n._(t`Username`),
let optionsPromise; key: 'username',
if (cachedActions) { isDefault: true,
optionsPromise = Promise.resolve({ data: { actions: cachedActions } }); },
} else { {
optionsPromise = UsersAPI.readOptions(); name: i18n._(t`First name`),
} key: 'first_name',
},
const promises = Promise.all([UsersAPI.read(params), optionsPromise]); {
name: i18n._(t`Last name`),
this.setState({ contentError: null, hasContentLoading: true }); key: 'last_name',
try { },
const [ ]}
{ toolbarSortColumns={[
data: { count, results }, {
}, name: i18n._(t`Username`),
{ key: 'username',
data: { actions }, },
}, {
] = await promises; name: i18n._(t`First name`),
this.setState({ key: 'first_name',
actions, },
itemCount: count, {
users: results, name: i18n._(t`Last name`),
selected: [], key: 'last_name',
}); },
} catch (err) { ]}
this.setState({ contentError: err }); renderToolbar={props => (
} finally { <DataListToolbar
this.setState({ hasContentLoading: false }); {...props}
} showSelectAll
} isAllSelected={isAllSelected}
onSelectAll={isSelected =>
render() { setSelected(isSelected ? [...users] : [])
const { }
actions, qsConfig={QS_CONFIG}
itemCount, additionalControls={[
contentError, ...(canAdd
hasContentLoading, ? [
deletionError, <ToolbarAddButton
selected, key="add"
users, linkTo={`${match.url}/add`}
} = this.state; />,
const { match, i18n } = this.props; ]
: []),
const canAdd = <ToolbarDeleteButton
actions && Object.prototype.hasOwnProperty.call(actions, 'POST'); key="delete"
const isAllSelected = onDelete={handleUserDelete}
selected.length === users.length && selected.length > 0; itemsToDelete={selected}
pluralizedItemName="Users"
return ( />,
<Fragment> ]}
<PageSection> />
<Card> )}
<PaginatedDataList renderItem={o => (
contentError={contentError} <UserListItem
hasContentLoading={hasContentLoading} key={o.id}
items={users} user={o}
itemCount={itemCount} detailUrl={`${match.url}/${o.id}/details`}
pluralizedItemName={i18n._(t`Users`)} isSelected={selected.some(row => row.id === o.id)}
qsConfig={QS_CONFIG} onSelect={() => handleSelect(o)}
onRowClick={this.handleSelect} />
toolbarSearchColumns={[ )}
{ emptyStateControls={
name: i18n._(t`Username`), canAdd ? (
key: 'username', <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
isDefault: true, ) : null
}, }
{ />
name: i18n._(t`First Name`), </Card>
key: 'first_name', </PageSection>
}, {deletionError && (
{
name: i18n._(t`Last Name`),
key: 'last_name',
},
]}
toolbarSortColumns={[
{
name: i18n._(t`Username`),
key: 'username',
},
{
name: i18n._(t`First Name`),
key: 'first_name',
},
{
name: i18n._(t`Last Name`),
key: 'last_name',
},
]}
renderToolbar={props => (
<DataListToolbar
{...props}
showSelectAll
isAllSelected={isAllSelected}
onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
...(canAdd
? [
<ToolbarAddButton
key="add"
linkTo={`${match.url}/add`}
/>,
]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={this.handleUserDelete}
itemsToDelete={selected}
pluralizedItemName="Users"
/>,
]}
/>
)}
renderItem={o => (
<UserListItem
key={o.id}
user={o}
detailUrl={`${match.url}/${o.id}/details`}
isSelected={selected.some(row => row.id === o.id)}
onSelect={() => this.handleSelect(o)}
/>
)}
emptyStateControls={
canAdd ? (
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
) : null
}
/>
</Card>
</PageSection>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="error" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={clearDeletionError}
> >
{i18n._(t`Failed to delete one or more users.`)} {i18n._(t`Failed to delete one or more users.`)}
<ErrorDetail error={deletionError} /> <ErrorDetail error={deletionError} />
</AlertModal> </AlertModal>
</Fragment> )}
); </>
} );
} }
export { UsersList as _UsersList }; export default withI18n()(UserList);
export default withI18n()(withRouter(UsersList));

215
awx/ui_next/src/screens/User/UserList/UserList.test.jsx
View File

@@ -1,16 +1,16 @@
import React from 'react'; import React from 'react';
import { act } from 'react-dom/test-utils';
import { UsersAPI } from '../../../api'; import { UsersAPI } from '../../../api';
import { import {
mountWithContexts, mountWithContexts,
waitForElement, waitForElement,
} from '../../../../testUtils/enzymeHelpers'; } from '../../../../testUtils/enzymeHelpers';
import UsersList, { _UsersList } from './UserList'; import UsersList from './UserList';
jest.mock('../../../api'); jest.mock('../../../api');
let wrapper; let wrapper;
const loadUsers = jest.spyOn(_UsersList.prototype, 'loadUsers');
const mockUsers = [ const mockUsers = [
{ {
id: 1, id: 1,
@@ -84,7 +84,8 @@ const mockUsers = [
}, },
]; ];
beforeAll(() => { beforeEach(() => {
UsersAPI.destroy = jest.fn();
UsersAPI.read.mockResolvedValue({ UsersAPI.read.mockResolvedValue({
data: { data: {
count: mockUsers.length, count: mockUsers.length,
@@ -110,146 +111,96 @@ describe('UsersList with full permissions', () => {
}); });
}); });
beforeEach(() => { beforeEach(async () => {
wrapper = mountWithContexts(<UsersList />); await act(async () => {
}); wrapper = mountWithContexts(<UsersList />);
});
test('initially renders successfully', () => { wrapper.update();
mountWithContexts(
<UsersList
match={{ path: '/users', url: '/users' }}
location={{ search: '', pathname: '/users' }}
/>
);
}); });
test('Users are retrieved from the api and the components finishes loading', async () => { test('Users are retrieved from the api and the components finishes loading', async () => {
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0); await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
expect(loadUsers).toHaveBeenCalled(); expect(UsersAPI.read).toHaveBeenCalled();
}); });
test('Selects one team when row is checked', async () => { test('should show add button', () => {
await waitForElement( expect(wrapper.find('ToolbarAddButton').length).toBe(1);
wrapper, });
'UsersList',
el => el.state('hasContentLoading') === false test('should check and uncheck the row item', async () => {
);
expect( expect(
wrapper wrapper.find('DataListCheck[id="select-user-1"]').props().checked
.find('input[type="checkbox"]') ).toBe(false);
.findWhere(n => n.prop('checked') === true).length await act(async () => {
).toBe(0); wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')(
wrapper true
.find('UserListItem') );
.at(0) });
.find('DataListCheck')
.props()
.onChange(true);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper.find('DataListCheck[id="select-user-1"]').props().checked
.find('input[type="checkbox"]') ).toBe(true);
.findWhere(n => n.prop('checked') === true).length await act(async () => {
).toBe(1); wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')(
}); false
);
test('Select all checkbox selects and unselects all rows', async () => { });
await waitForElement(
wrapper,
'UsersList',
el => el.state('hasContentLoading') === false
);
expect(
wrapper
.find('input[type="checkbox"]')
.findWhere(n => n.prop('checked') === true).length
).toBe(0);
wrapper
.find('Checkbox#select-all')
.props()
.onChange(true);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper.find('DataListCheck[id="select-user-1"]').props().checked
.find('input[type="checkbox"]') ).toBe(false);
.findWhere(n => n.prop('checked') === true).length });
).toBe(3);
wrapper test('should check all row items when select all is checked', async () => {
.find('Checkbox#select-all') wrapper.find('DataListCheck').forEach(el => {
.props() expect(el.props().checked).toBe(false);
.onChange(false); });
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
});
wrapper.update(); wrapper.update();
expect( wrapper.find('DataListCheck').forEach(el => {
wrapper expect(el.props().checked).toBe(true);
.find('input[type="checkbox"]') });
.findWhere(n => n.prop('checked') === true).length await act(async () => {
).toBe(0); wrapper.find('Checkbox#select-all').invoke('onChange')(false);
});
wrapper.update();
wrapper.find('DataListCheck').forEach(el => {
expect(el.props().checked).toBe(false);
});
}); });
test('delete button is disabled if user does not have delete capabilities on a selected user', async () => { test('should call api delete users for each selected user', async () => {
wrapper.find('UsersList').setState({ await act(async () => {
users: mockUsers, wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')();
itemCount: 2,
isInitialized: true,
selected: mockUsers.slice(0, 1),
}); });
await waitForElement( wrapper.update();
wrapper, await act(async () => {
'ToolbarDeleteButton * button', wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
el => el.getDOMNode().disabled === false
);
wrapper.find('UsersList').setState({
selected: mockUsers,
}); });
await waitForElement( wrapper.update();
wrapper, expect(UsersAPI.destroy).toHaveBeenCalledTimes(1);
'ToolbarDeleteButton * button',
el => el.getDOMNode().disabled === true
);
}); });
test('api is called to delete users for each selected user.', async () => { test('should show error modal when user is not successfully deleted from api', async () => {
UsersAPI.destroy = jest.fn(); UsersAPI.destroy.mockImplementationOnce(() => Promise.reject(new Error()));
wrapper.find('UsersList').setState({ // expect(wrapper.debug()).toBe(false);
users: mockUsers, expect(wrapper.find('Modal').length).toBe(0);
itemCount: 2, await act(async () => {
isInitialized: true, wrapper.find('DataListCheck[id="select-user-1"]').invoke('onChange')();
isModalOpen: true,
selected: mockUsers,
}); });
await wrapper.find('ToolbarDeleteButton').prop('onDelete')(); wrapper.update();
expect(UsersAPI.destroy).toHaveBeenCalledTimes(2); await act(async () => {
}); wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
test('error is shown when user not successfully deleted from api', async () => {
UsersAPI.destroy.mockRejectedValue(
new Error({
response: {
config: {
method: 'delete',
url: '/api/v2/users/1',
},
data: 'An error occurred',
},
})
);
wrapper.find('UsersList').setState({
users: mockUsers,
itemCount: 1,
isInitialized: true,
isModalOpen: true,
selected: mockUsers.slice(0, 1),
}); });
wrapper.find('ToolbarDeleteButton').prop('onDelete')(); wrapper.update();
await waitForElement( expect(wrapper.find('Modal').length).toBe(1);
wrapper, await act(async () => {
'Modal', wrapper.find('ModalBoxCloseButton').invoke('onClose')();
el => el.props().isOpen === true && el.props().title === 'Error!' });
); wrapper.update();
}); expect(wrapper.find('Modal').length).toBe(0);
test('Add button shown for users with ability to POST', async () => {
await waitForElement(wrapper, 'ToolbarAddButton', el => el.length === 1);
}); });
}); });
@@ -263,9 +214,21 @@ describe('UsersList without full permissions', () => {
}, },
}); });
wrapper = mountWithContexts(<UsersList />); await act(async () => {
await waitForElement(wrapper, 'ContentLoading', el => el.length === 1); wrapper = mountWithContexts(<UsersList />);
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0); });
wrapper.update();
expect(wrapper.find('ToolbarAddButton').length).toBe(0); expect(wrapper.find('ToolbarAddButton').length).toBe(0);
}); });
}); });
describe('read call unsuccessful', () => {
test('should show content error when read call unsuccessful', async () => {
UsersAPI.read.mockRejectedValue(new Error());
await act(async () => {
wrapper = mountWithContexts(<UsersList />);
});
wrapper.update();
expect(wrapper.find('ContentError').length).toBe(1);
});
});