/* * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import React from 'react'; import Form from 'nfvo-components/input/validation/Form.jsx'; import Select from 'nfvo-components/input/SelectInput.jsx'; import { SVGIcon } from 'onap-ui-react'; 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'; export const askForRightsMsg = () => { 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 }; } 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} btnClassName="sdc-modal__footer"> <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 }; }) }); } 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;