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:
parent
e935776067
commit
3b65068258
@ -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);
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
@ -183,7 +183,7 @@ describe('<OrganizationEdit />', () => {
|
||||
getOrganizationInstanceGroups: getOrganizationInstanceGroupsFn,
|
||||
updateOrganizationDetails: updateOrganizationDetailsFn,
|
||||
associateInstanceGroup: associateInstanceGroupFn,
|
||||
disassociateInstanceGroup: disassociateInstanceGroupFn
|
||||
disassociate: disassociateInstanceGroupFn
|
||||
};
|
||||
const wrapper = mount(
|
||||
<I18nProvider>
|
||||
|
@ -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 });
|
||||
}
|
||||
}
|
||||
|
33
src/app.scss
33
src/app.scss
@ -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;
|
||||
}
|
@ -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;
|
||||
|
@ -8,3 +8,10 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.awx-c-chip {
|
||||
padding: 3px 0;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
@ -112,7 +112,7 @@ class Organization extends Component {
|
||||
|
||||
return (
|
||||
<PageSection>
|
||||
<Card>
|
||||
<Card className="awx-c-card">
|
||||
{ cardHeader }
|
||||
<Switch>
|
||||
<Redirect
|
||||
|
@ -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}
|
||||
|
@ -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 });
|
||||
|
Loading…
Reference in New Issue
Block a user