diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx | 221 |
1 files changed, 139 insertions, 82 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx index b7d5d57cca..ab6add8ac2 100644 --- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx @@ -21,97 +21,154 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {permissionTypes, changeOwnerMessage} from './PermissionsConstants.js'; +import { permissionTypes, changeOwnerMessage } from './PermissionsConstants.js'; export const askForRightsMsg = () => { - return ( - <div> - <p>{i18n('Send a Contributor rights reguest to Owner')}</p> - </div> - ); + return ( + <div> + <p>{i18n('Send a Contributor rights reguest to Owner')}</p> + </div> + ); }; - class Permissions extends React.Component { - constructor(props) { - super(props); - this.state = { - itemUsers: props.itemUsers, - newOwnerId: '', - showChangeOwner: false - }; - } + constructor(props) { + super(props); + this.state = { + itemUsers: props.itemUsers, + newOwnerId: '', + showChangeOwner: false + }; + } - buildUserOptions() { - let {users, owner} = this.props; - return users.filter(user => user.userId !== owner.userId).map(item => {return {label: item.fullName, value: item.userId};}); - } + buildUserOptions() { + let { users, owner } = this.props; + return users.filter(user => user.userId !== owner.userId).map(item => { + return { label: item.fullName, value: item.userId }; + }); + } - render() { - let {onCancel, owner} = this.props; - let {newOwnerId} = this.state; - return ( - <div className='manage-permissions-page'> - <Form - hasButtons={true} - onSubmit={() => this.onsaveItemUsers()} - onReset={() => onCancel() } - labledButtons={true}> - <div className='manage-permissions-title'>{i18n('Owner')}</div> - <div className='owner-details'> - <span>{owner.fullName}</span> - <span className='change-owner' onClick={() => this.setState({showChangeOwner: !this.state.showChangeOwner})}>{i18n('Change Owner')}</span> - </div> - {this.state.showChangeOwner && <div className='change-owner-wrapper'> - <div className='change-owner-title'> - <span className='manage-permissions-title' data-test-id='change-owner'>{i18n('Change Owner')}</span> - <OverlayTrigger placement='right' trigger='click' overlay={ - <Tooltip id='manage-permissions-owner-tooltip' className='manage-permissions-owner-tooltip'>{i18n(changeOwnerMessage)}</Tooltip> }> - <SVGIcon name='questionMark' /> - </OverlayTrigger> - </div> - <Select - data-test-id='selected-owner' - value={newOwnerId} - onChange={(item) => this.setState({newOwnerId: item ? item.value : ''})} - options={this.buildUserOptions()} /> - </div>} - <div className='manage-permissions-title'>{i18n('Contributors')}</div> - <Select - data-test-id='selected-contributors' - value={this.state.itemUsers.map(item => item.userId)} - className='options-input contributors-select' - clearable={false} - onMultiSelectChanged={(value) => {this.onChangeItemUsers({itemUsers: value});}} - options={this.buildUserOptions()} - multi/> - </Form> - </div> - ); - } + render() { + let { onCancel, owner } = this.props; + let { newOwnerId } = this.state; + return ( + <div className="manage-permissions-page"> + <Form + hasButtons={true} + onSubmit={() => this.onsaveItemUsers()} + onReset={() => onCancel()} + labledButtons={true}> + <div className="manage-permissions-title"> + {i18n('Owner')} + </div> + <div className="owner-details"> + <span>{owner.fullName}</span> + <span + className="change-owner" + onClick={() => + this.setState({ + showChangeOwner: !this.state.showChangeOwner + }) + }> + {i18n('Change Owner')} + </span> + </div> + {this.state.showChangeOwner && ( + <div className="change-owner-wrapper"> + <div className="change-owner-title"> + <span + className="manage-permissions-title" + data-test-id="change-owner"> + {i18n('Change Owner')} + </span> + <OverlayTrigger + placement="right" + trigger="click" + overlay={ + <Tooltip + id="manage-permissions-owner-tooltip" + className="manage-permissions-owner-tooltip"> + {i18n(changeOwnerMessage)} + </Tooltip> + }> + <SVGIcon name="questionMark" /> + </OverlayTrigger> + </div> + <Select + data-test-id="selected-owner" + value={newOwnerId} + onChange={item => + this.setState({ + newOwnerId: item ? item.value : '' + }) + } + options={this.buildUserOptions()} + /> + </div> + )} + <div className="manage-permissions-title"> + {i18n('Contributors')} + </div> + <Select + data-test-id="selected-contributors" + value={this.state.itemUsers.map(item => item.userId)} + className="options-input contributors-select" + clearable={false} + onMultiSelectChanged={value => { + this.onChangeItemUsers({ itemUsers: value }); + }} + options={this.buildUserOptions()} + multi + /> + </Form> + </div> + ); + } - onChangeItemUsers({itemUsers}) { - this.setState({ - itemUsers: itemUsers.map(contributor => { - let contributorFromProps = this.props.itemUsers.find(user => user.userId === contributor.userId); - return { - userId: contributor.value, - fullName: contributor.label, - permission: contributorFromProps ? contributorFromProps.permission : permissionTypes.CONTRIBUTOR - }; - }) - }); - } + onChangeItemUsers({ itemUsers }) { + this.setState({ + itemUsers: itemUsers.map(contributor => { + let contributorFromProps = this.props.itemUsers.find( + user => user.userId === contributor.userId + ); + return { + userId: contributor.value, + fullName: contributor.label, + permission: contributorFromProps + ? contributorFromProps.permission + : permissionTypes.CONTRIBUTOR + }; + }) + }); + } - onsaveItemUsers() { - let {itemUsers: newUsers, newOwnerId} = this.state; - let {itemUsers: oldUsers, onSubmit, itemId, users} = this.props; - let addedUsersIds = newUsers.filter(newUser => !oldUsers.map(oldUser => oldUser.userId).includes(newUser.userId)) - .map(user => user.userId); - let removedUsersIds = oldUsers.filter(oldUser => !newUsers.map(newUser => newUser.userId).includes(oldUser.userId)) - .map(user => user.userId); - onSubmit({itemId, addedUsersIds, removedUsersIds, allUsers: users, newOwnerId}); - } + onsaveItemUsers() { + let { itemUsers: newUsers, newOwnerId } = this.state; + let { itemUsers: oldUsers, onSubmit, itemId, users } = this.props; + let addedUsersIds = newUsers + .filter( + newUser => + !oldUsers + .map(oldUser => oldUser.userId) + .includes(newUser.userId) + ) + .map(user => user.userId); + let removedUsersIds = oldUsers + .filter( + oldUser => + !newUsers + .map(newUser => newUser.userId) + .includes(oldUser.userId) + ) + .map(user => user.userId); + onSubmit({ + itemId, + addedUsersIds, + removedUsersIds, + allUsers: users, + newOwnerId + }); + } } export default Permissions; |