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

Add alert for org. delete.

Browse Source
This commit is contained in:
Alex Corey 2019-03-25 11:30:40 -04:00
parent cc0fd6beb6
commit de55ec1688
5 changed files with 178 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/components/DataListToolbar.test.jsx
View File

@ -236,7 +236,7 @@ describe('<DataListToolbar />', () => {
<I18nProvider>
<DataListToolbar
isAllSelected={false}
selected={() => ([1, 2, 3, 4])}
selected={() => [1, 2, 3, 4]}
sortedColumnKey="name"
sortOrder="ascending"
columns={columns}

116
__tests__/pages/Organizations/screens/OrganizationsList.test.jsx
View File

@ -4,6 +4,45 @@ import { MemoryRouter } from 'react-router-dom';
import { I18nProvider } from '@lingui/react';
import OrganizationsList from '../../../../src/pages/Organizations/screens/OrganizationsList';
const mockAPIOrgsList = {
data: {
results: [{
name: 'Organization 0',
id: 1,
summary_fields: {
related_field_counts: {
teams: 3,
users: 4
}
},
},
{
name: 'Organization 1',
id: 1,
summary_fields: {
related_field_counts: {
teams: 2,
users: 5
}
},
},
{
name: 'Organization 2',
id: 2,
summary_fields: {
related_field_counts: {
teams: 5,
users: 6
}
},
}]
},
isModalOpen: false,
warningTitle: 'title',
warningMsg: 'message'
};
describe('<OrganizationsList />', () => {
test('initially renders succesfully', () => {
mount(
@ -17,4 +56,81 @@ describe('<OrganizationsList />', () => {
</MemoryRouter>
);
});
test.only('Modal closes when close button is clicked.', async (done) => {
const handleClearOrgsToDelete = jest.fn();
const wrapper = mount(
<MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
<I18nProvider>
<OrganizationsList
match={{ path: '/organizations', url: '/organizations' }}
location={{ search: '', pathname: '/organizations' }}
getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
handleClearOrgsToDelete={handleClearOrgsToDelete()}
/>
</I18nProvider>
</MemoryRouter>
);
wrapper.find({ type: 'checkbox' }).simulate('click');
wrapper.find('button[aria-label="Delete"]').simulate('click');
wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
expect(wrapper.find('OrganizationsList').state().isModalOpen).toEqual(true);
setImmediate(() => {
wrapper.update();
wrapper.setState({
selected: mockAPIOrgsList.data.results.map((result) => result.id),
orgsToDelete: mockAPIOrgsList.data.results.map((result) => result),
isModalOpen: true,
});
wrapper.find('button[aria-label="Close"]').simulate('click');
expect(handleClearOrgsToDelete).toBeCalled();
const list = wrapper.find('OrganizationsList');
expect(list.state().isModalOpen).toBe(false);
done();
});
});
test.only('Orgs to delete length is 0 when all orgs are selected and Delete button is called.', async (done) => {
const handleClearOrgsToDelete = jest.fn();
const handleOrgDelete = jest.fn();
const fetchOrganizations = jest.fn();
const wrapper = mount(
<MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
<I18nProvider>
<OrganizationsList
match={{ path: '/organizations', url: '/organizations' }}
location={{ search: '', pathname: '/organizations' }}
getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
handleClearOrgsToDelete={handleClearOrgsToDelete()}
handleOrgDelete={handleOrgDelete()}
fetchOrganizations={fetchOrganizations()}
/>
</I18nProvider>
</MemoryRouter>
);
wrapper.find({ type: 'checkbox' }).simulate('click');
wrapper.find('button[aria-label="Delete"]').simulate('click');
wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
expect(wrapper.find('OrganizationsList').state().isModalOpen).toEqual(true);
setImmediate(() => {
wrapper.update();
wrapper.setState({
selected: mockAPIOrgsList.data.results.map((result) => result.id),
orgsToDelete: mockAPIOrgsList.data.results.map((result) => result),
isModalOpen: true,
});
wrapper.update();
const list = wrapper.find('OrganizationsList');
wrapper.find('button[aria-label="confirm-delete"]').simulate('click');
expect(list.state().orgsToDelete.length).toEqual(list.state().orgsDeleted.length);
expect(fetchOrganizations).toHaveBeenCalled();
expect(list.state().results).toHaveLength(0);
done();
});
});
});

7
src/app.scss
View File

@ -282,6 +282,13 @@
.orgListAlert-actionBtn{
margin:0 10px;
}
.orgListDetete-progressBar{
padding-right: 32px;
}
.orgListDelete-progressBar-noShow{
display: none;
padding-right: 32px;
}
.awx-c-form-action-group {
float: right;

4
src/pages/Organizations/components/OrganizationListItem.jsx
View File

@ -4,11 +4,7 @@ import { Trans, t } from '@lingui/macro';
import {
Badge,
Checkbox,
Button,
} from '@patternfly/react-core';
import {
TrashAltIcon,
} from '@patternfly/react-icons';
import {
Link
} from 'react-router-dom';

77
src/pages/Organizations/screens/OrganizationsList.jsx
View File

@ -16,8 +16,11 @@ import {
PageSection,
PageSectionVariants,
Title,
Button
Button,
Progress,
ProgressVariant
} from '@patternfly/react-core';
import { CubesIcon } from '@patternfly/react-icons';
import DataListToolbar from '../../../components/DataListToolbar';
import OrganizationListItem from '../components/OrganizationListItem';
@ -57,7 +60,10 @@ class OrganizationsList extends Component {
results: [],
selected: [],
isModalOpen: false,
orgsToDelete: []
orgsToDelete: [],
orgsDeleted: [],
deleteSuccess: false,
};
this.onSearch = this.onSearch.bind(this);
@ -137,7 +143,12 @@ class OrganizationsList extends Component {
}
handleClearOrgsToDelete () {
this.setState(({ isModalOpen }) => ({ isModalOpen: !isModalOpen, orgsToDelete: [] }));
this.setState({
isModalOpen: false,
orgsDeleted: [],
deleteSuccess: false,
orgsToDelete: []
});
this.onSelectAll();
}
@ -163,20 +174,24 @@ class OrganizationsList extends Component {
}
async handleOrgDelete (event) {
const { orgsToDelete } = this.state;
const { orgsToDelete, orgsDeleted } = this.state;
const { api } = this.props;
try {
const deleteOrgsApiCalls = [];
this.setState({ deleteStarted: true });
orgsToDelete.forEach((org) => {
deleteOrgsApiCalls.push(api.destroyOrganization(org.id));
});
await Promise.all(deleteOrgsApiCalls);
} finally {
this.handleClearOrgsToDelete();
const queryParams = this.getQueryParams();
this.fetchOrganizations(queryParams);
}
orgsToDelete.forEach(async (org) => {
try {
const res = await api.destroyOrganization(org.id);
this.setState({
orgsDeleted: orgsDeleted.concat(res)
});
} catch {
this.setState({ deleteSuccess: false });
} finally {
this.setState({ deleteSuccess: true });
const queryParams = this.getQueryParams();
this.fetchOrganizations(queryParams);
}
});
event.preventDefault();
}
@ -245,9 +260,12 @@ class OrganizationsList extends Component {
const {
count,
error,
deleteSuccess,
deleteStarted,
loading,
noInitialResults,
orgsToDelete,
orgsDeleted,
page,
pageCount,
page_size,
@ -266,7 +284,6 @@ class OrganizationsList extends Component {
{ isModalOpen && (
<Modal
className="orgListAlert"
width="50%"
title={warningTitle}
isOpen={isModalOpen}
style={{ width: '1000px' }}
@ -276,16 +293,30 @@ class OrganizationsList extends Component {
{warningMsg}
<br />
{orgsToDelete.map((org) => (
<strong key={org.id}>
{org.name}
<span key={org.id}>
<strong>
{org.name}
</strong>
<br />
</strong>
</span>
))}
<div className={deleteStarted ? 'orgListDetete-progressBar' : 'orgListDelete-progressBar-noShow'}>
<Progress
value={deleteSuccess ? 100 : 67}
variant={deleteStarted ? ProgressVariant.success : ProgressVariant.danger}
/>
</div>
<br />
<span className="awx-c-form-action-group">
<Button className="orgListAlert-actionBtn" keys="cancel" variant="secondary" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>Cancel</Button>
<Button className="orgListAlert-actionBtn" keys="cancel" variant="danger" aria-label="confirm-delete" onClick={this.handleOrgDelete}>Delete</Button>
</span>
<div className="awx-c-form-action-group">
{orgsDeleted.length
? <Button className="orgListAlert-actionBtn" keys="cancel" variant="primary" aria-label="close-delete" onClick={this.handleClearOrgsToDelete}>Close</Button>
: (
<span>
<Button className="orgListAlert-actionBtn" keys="cancel" variant="secondary" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>Cancel</Button>
<Button className="orgListAlert-actionBtn" keys="cancel" variant="danger" aria-label="confirm-delete" onClick={this.handleOrgDelete}>Delete</Button>
</span>
)}
</div>
</Modal>
)}
{noInitialResults && (