1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00

Add remove role functionality.

This commit is contained in:
Kia Lam 2019-03-08 13:56:27 -05:00
parent e935776067
commit 3b65068258
No known key found for this signature in database
GPG Key ID: 294F9BE53C241D03
11 changed files with 202 additions and 46 deletions

View File

@ -155,14 +155,14 @@ describe('APIClient (api.js)', () => {
done();
});
test('disassociateInstanceGroup calls expected http method with expected data', async (done) => {
test('disassociate calls expected http method with expected data', async (done) => {
const createPromise = () => Promise.resolve();
const mockHttp = ({ post: jest.fn(createPromise) });
const api = new APIClient(mockHttp);
const url = 'foo/bar/';
const id = 1;
await api.disassociateInstanceGroup(url, id);
await api.disassociate(url, id);
expect(mockHttp.post).toHaveBeenCalledTimes(1);
expect(mockHttp.post.mock.calls[0][0]).toEqual(url);

View File

@ -34,6 +34,7 @@ describe('<AccessList />', () => {
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '1' } }}
location={{ search: '', pathname: '/organizations/1/access' }}
getAccessList={() => {}}
removeRole={() => {}}
/>
</MemoryRouter>
</I18nProvider>
@ -48,6 +49,7 @@ describe('<AccessList />', () => {
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
location={{ search: '', pathname: '/organizations/1/access' }}
getAccessList={() => ({ data: { count: 1, results: mockResults } })}
removeRole={() => {}}
/>
</MemoryRouter>
</I18nProvider>
@ -69,6 +71,7 @@ describe('<AccessList />', () => {
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
location={{ search: '', pathname: '/organizations/1/access' }}
getAccessList={() => ({ data: { count: 1, results: mockResults } })}
removeRole={() => {}}
/>
</MemoryRouter>
</I18nProvider>
@ -95,6 +98,7 @@ describe('<AccessList />', () => {
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
location={{ search: '', pathname: '/organizations/1/access' }}
getAccessList={() => ({ data: { count: 1, results: mockResults } })}
removeRole={() => {}}
/>
</MemoryRouter>
</I18nProvider>
@ -144,6 +148,7 @@ describe('<AccessList />', () => {
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
location={{ search: '', pathname: '/organizations/1/access' }}
getAccessList={() => ({ data: { count: 1, results: mockData } })}
removeRole={() => {}}
/>
</MemoryRouter>
</I18nProvider>
@ -157,4 +162,36 @@ describe('<AccessList />', () => {
done();
});
});
test('test handleWarning, confirmDelete, and removeRole methods for Alert component', async (done) => {
const handleWarning = jest.spyOn(AccessList.prototype, 'handleWarning');
const confirmDelete = jest.spyOn(AccessList.prototype, 'confirmDelete');
const removeRole = jest.spyOn(AccessList.prototype, 'removeRole');
const wrapper = mount(
<I18nProvider>
<MemoryRouter>
<AccessList
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
location={{ search: '', pathname: '/organizations/1/access' }}
getAccessList={() => ({ data: { count: 1, results: mockResults } })}
removeRole={() => {}}
/>
</MemoryRouter>
</I18nProvider>
).find('AccessList');
expect(handleWarning).not.toHaveBeenCalled();
expect(confirmDelete).not.toHaveBeenCalled();
expect(removeRole).not.toHaveBeenCalled();
setImmediate(() => {
const rendered = wrapper.update().find('ChipButton');
rendered.find('button[aria-label="close"]').simulate('click');
expect(handleWarning).toHaveBeenCalled();
const alert = wrapper.update().find('Alert');
alert.find('button[aria-label="confirm-delete"]').simulate('click');
expect(confirmDelete).toHaveBeenCalled();
expect(removeRole).toHaveBeenCalled();
done();
});
});
});

View File

@ -12,6 +12,14 @@ const mockGetOrganzationAccessList = jest.fn(() => (
Promise.resolve(mockAPIAccessList)
));
const mockResponse = {
status: 'success',
};
const mockRemoveRole = jest.fn(() => (
Promise.resolve(mockResponse)
));
describe('<OrganizationAccess />', () => {
test('initially renders succesfully', () => {
mount(
@ -37,11 +45,14 @@ describe('<OrganizationAccess />', () => {
params={{}}
api={{
getOrganzationAccessList: mockGetOrganzationAccessList,
disassociate: mockRemoveRole
}}
/>
</MemoryRouter>
).find('OrganizationAccess');
const accessList = await wrapper.instance().getOrgAccessList();
expect(accessList).toEqual(mockAPIAccessList);
const resp = await wrapper.instance().removeRole(2, 3, 'users');
expect(resp).toEqual(mockResponse);
});
});

View File

@ -183,7 +183,7 @@ describe('<OrganizationEdit />', () => {
getOrganizationInstanceGroups: getOrganizationInstanceGroupsFn,
updateOrganizationDetails: updateOrganizationDetailsFn,
associateInstanceGroup: associateInstanceGroupFn,
disassociateInstanceGroup: disassociateInstanceGroupFn
disassociate: disassociateInstanceGroupFn
};
const wrapper = mount(
<I18nProvider>

View File

@ -126,7 +126,7 @@ class APIClient {
return this.http.post(url, { id });
}
disassociateInstanceGroup (url, id) {
disassociate (url, id) {
return this.http.post(url, { id, disassociate: true });
}
}

View File

@ -220,14 +220,6 @@
// and bem style, as well as moved into component-based scss files
//
.awx-lookup {
min-height: 36px;
.pf-c-form-control {
--pf-c-form-control--Height: auto;
}
}
.awx-c-list {
border-bottom: 1px solid #d7d7d7;
}
@ -238,3 +230,28 @@
--pf-c-card__body--PaddingX: 0;
--pf-c-card__body--PaddingY: 0;
}
.awx-c-card {
position: relative;
}
.awx-c-alert {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.pf-c-alert {
position: absolute;
width: 100%;
& button {
margin-right: 20px;
}
}
.pf-c-alert__icon > svg {
fill: white;
}

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import {
DataList, DataListItem, DataListCell, Text,
TextContent, TextVariants
TextContent, TextVariants, Chip, Alert, AlertActionCloseButton, Button
} from '@patternfly/react-core';
import { I18n, i18nMark } from '@lingui/react';
@ -13,7 +13,6 @@ import {
Link
} from 'react-router-dom';
import BasicChip from '../BasicChip/BasicChip';
import Pagination from '../Pagination';
import DataListToolbar from '../DataListToolbar';
@ -46,6 +45,10 @@ const hiddenStyle = {
display: 'none',
};
const buttonGroupStyle = {
float: 'right',
};
const Detail = ({ label, value, url, customStyles }) => {
let detail = null;
if (value) {
@ -104,6 +107,7 @@ class AccessList extends React.Component {
sortOrder: 'ascending',
sortedColumnKey: 'username',
isCompact: false,
showWarning: false,
};
this.fetchOrgAccessList = this.fetchOrgAccessList.bind(this);
@ -112,7 +116,10 @@ class AccessList extends React.Component {
this.onCompact = this.onCompact.bind(this);
this.onSort = this.onSort.bind(this);
this.getQueryParams = this.getQueryParams.bind(this);
this.getTeamRoles = this.getTeamRoles.bind(this);
this.removeRole = this.removeRole.bind(this);
this.handleWarning = this.handleWarning.bind(this);
this.hideWarning = this.hideWarning.bind(this);
this.confirmDelete = this.confirmDelete.bind(this);
}
componentDidMount () {
@ -171,23 +178,6 @@ class AccessList extends React.Component {
return Object.assign({}, this.defaultParams, searchParams, overrides);
}
getRoles = roles => Object.values(roles)
.reduce((val, role) => {
if (role.length > 0) {
val.push(role[0].role);
}
return val;
}, []);
getTeamRoles = roles => roles
.reduce((val, item) => {
if (item.role.team_id) {
const { role } = item;
val.push(role);
}
return val;
}, []);
async fetchOrgAccessList (queryParams) {
const { match, getAccessList } = this.props;
@ -216,13 +206,27 @@ class AccessList extends React.Component {
sortedColumnKey,
results,
};
results.forEach((result) => {
if (result.summary_fields.direct_access) {
result.teamRoles = this.getTeamRoles(result.summary_fields.direct_access);
// Separate out roles into user roles or team roles
// based on whether or not a team_id attribute is present
const teamRoles = [];
const userRoles = [];
Object.values(result.summary_fields).forEach(field => {
if (field.length > 0) {
field.forEach(item => {
const { role } = item;
if (role.team_id) {
teamRoles.push(role);
} else {
result.teamRoles = [];
userRoles.push(role);
}
result.userRoles = this.getRoles(result.summary_fields) || [];
});
}
});
result.teamRoles = teamRoles || [];
result.userRoles = userRoles || [];
});
this.setState(stateToUpdate);
} catch (error) {
@ -230,6 +234,55 @@ class AccessList extends React.Component {
}
}
async removeRole (roleId, resourceId, type) {
const { removeRole } = this.props;
const url = `/api/v2/${type}/${resourceId}/roles/`;
await removeRole(url, roleId);
const queryParams = this.getQueryParams();
try {
this.fetchOrgAccessList(queryParams);
} catch (error) {
this.setState({ error });
}
this.setState({ showWarning: false });
}
handleWarning (roleName, roleId, resourceName, resourceId, type) {
let warningTitle;
let warningMsg;
if (type === 'users') {
warningTitle = i18nMark('User Access Removal');
warningMsg = i18nMark(`Please confirm that you would like to remove ${roleName}
access from ${resourceName}.`);
}
if (type === 'teams') {
warningTitle = i18nMark('Team Access Removal');
warningMsg = i18nMark(`Please confirm that you would like to remove ${roleName}
access from the team ${resourceName}. This will affect all
members of the team. If you would like to only remove access
for this particular user, please remove them from the team.`);
}
this.setState({
showWarning: true,
warningMsg,
warningTitle,
deleteType: type,
deleteRoleId: roleId,
deleteResourceId: resourceId
});
}
hideWarning () {
this.setState({ showWarning: false });
}
confirmDelete () {
const { deleteType, deleteResourceId, deleteRoleId } = this.state;
this.removeRole(deleteRoleId, deleteResourceId, deleteType);
}
render () {
const {
results,
@ -241,6 +294,9 @@ class AccessList extends React.Component {
sortedColumnKey,
sortOrder,
isCompact,
warningMsg,
warningTitle,
showWarning
} = this.state;
return (
<Fragment>
@ -268,6 +324,20 @@ class AccessList extends React.Component {
isCompact={isCompact}
showExpandCollapse
/>
{showWarning && (
<Alert
variant="danger"
title={warningTitle}
action={<AlertActionCloseButton onClose={this.hideWarning} />}
>
{warningMsg}
<span style={buttonGroupStyle}>
<Button variant="danger" aria-label="confirm-delete" onClick={this.confirmDelete}>Delete</Button>
<Button variant="secondary" onClick={this.hideWarning}>Cancel</Button>
</span>
</Alert>
)}
<Fragment>
<I18n>
{({ i18n }) => (
@ -304,10 +374,13 @@ class AccessList extends React.Component {
>
<Text component={TextVariants.h6} style={detailLabelStyle}>{i18n._(t`User Roles`)}</Text>
{result.userRoles.map(role => (
<BasicChip
<Chip
key={role.id}
text={role.name}
/>
className="awx-c-chip"
onClick={() => this.handleWarning(role.name, role.id, result.username, result.id, 'users')}
>
{role.name}
</Chip>
))}
</ul>
)}
@ -318,10 +391,13 @@ class AccessList extends React.Component {
>
<Text component={TextVariants.h6} style={detailLabelStyle}>{i18n._(t`Team Roles`)}</Text>
{result.teamRoles.map(role => (
<BasicChip
<Chip
key={role.id}
text={role.name}
/>
className="awx-c-chip"
onClick={() => this.handleWarning(role.name, role.id, role.team_name, role.team_id, 'teams')}
>
{role.name}
</Chip>
))}
</ul>
)}
@ -348,6 +424,7 @@ class AccessList extends React.Component {
AccessList.propTypes = {
getAccessList: PropTypes.func.isRequired,
removeRole: PropTypes.func.isRequired,
};
export default AccessList;

View File

@ -8,3 +8,10 @@
display: none;
}
}
.awx-c-chip {
padding: 3px 0;
height: 24px;
margin-right: 10px;
margin-bottom: 10px;
}

View File

@ -112,7 +112,7 @@ class Organization extends Component {
return (
<PageSection>
<Card>
<Card className="awx-c-card">
{ cardHeader }
<Switch>
<Redirect

View File

@ -6,6 +6,7 @@ class OrganizationAccess extends React.Component {
super(props);
this.getOrgAccessList = this.getOrgAccessList.bind(this);
this.removeRole = this.removeRole.bind(this);
}
getOrgAccessList (id, params) {
@ -13,6 +14,11 @@ class OrganizationAccess extends React.Component {
return api.getOrganzationAccessList(id, params);
}
removeRole (url, id) {
const { api } = this.props;
return api.disassociate(url, id);
}
render () {
const {
location,
@ -23,6 +29,7 @@ class OrganizationAccess extends React.Component {
return (
<AccessList
getAccessList={this.getOrgAccessList}
removeRole={this.removeRole}
match={match}
location={location}
history={history}

View File

@ -171,7 +171,7 @@ class OrganizationEdit extends Component {
await api.associateInstanceGroup(url, id);
}));
await Promise.all(groupsToDisassociate.map(async id => {
await api.disassociateInstanceGroup(url, id);
await api.disassociate(url, id);
}));
} catch (err) {
this.setState({ error: err });