openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import Form from 'nfvo-components/input/validation/Form.jsx';
  18 import Select from 'nfvo-components/input/SelectInput.jsx';
  19 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  20 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
  21 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
  22 import i18n from 'nfvo-utils/i18n/i18n.js';
  23
  24 import {permissionTypes, changeOwnerMessage} from './PermissionsConstants.js';
  25
  26 export const askForRightsMsg = () => {
  27         return (
  28                 <div>
  29                         <p>{i18n('Send a Contributor rights reguest to Owner')}</p>
  30                 </div>
  31         );
  32 };
  33
  34
  35 class Permissions extends React.Component {
  36         constructor(props) {
  37                 super(props);
  38                 this.state = {
  39                         itemUsers: props.itemUsers,
  40                         newOwnerId: '',
  41                         showChangeOwner: false
  42                 };
  43         }
  44
  45         buildUserOptions() {
  46                 let {users, owner} = this.props;
  47                 return users.filter(user => user.userId !== owner.userId).map(item => {return {label: item.fullName, value: item.userId};});
  48         }
  49
  50         render() {
  51                 let {onCancel, owner} = this.props;
  52                 let {newOwnerId} = this.state;
  53                 return (
  54                         <div className='manage-permissions-page'>
  55                                 <Form
  56                                         hasButtons={true}
  57                                         onSubmit={() => this.onsaveItemUsers()}
  58                                         onReset={() => onCancel() }
  59                                         labledButtons={true}>
  60                                         <div className='manage-permissions-title'>{i18n('Owner')}</div>
  61                                         <div className='owner-details'>
  62                                                 <span>{owner.fullName}</span>
  63                                                 <span className='change-owner' onClick={() => this.setState({showChangeOwner: !this.state.showChangeOwner})}>{i18n('Change Owner')}</span>
  64                                         </div>
  65                                         {this.state.showChangeOwner && <div className='change-owner-wrapper'>
  66                                                 <div className='change-owner-title'>
  67                                                         <span className='manage-permissions-title' data-test-id='change-owner'>{i18n('Change Owner')}</span>
  68                                                         <OverlayTrigger placement='right' trigger='click' overlay={
  69                                                                 <Tooltip id='manage-permissions-owner-tooltip' className='manage-permissions-owner-tooltip'>{i18n(changeOwnerMessage)}</Tooltip> }>
  70                                                                 <SVGIcon name='questionMark' />
  71                                                         </OverlayTrigger>
  72                                                 </div>
  73                                                 <Select
  74                                                         data-test-id='selected-owner'
  75                                                         value={newOwnerId}
  76                                                         onChange={(item) => this.setState({newOwnerId: item ? item.value : ''})}
  77                                                         options={this.buildUserOptions()} />
  78                                         </div>}
  79                                         <div className='manage-permissions-title'>{i18n('Contributors')}</div>
  80                                         <Select
  81                                                 data-test-id='selected-contributors'
  82                                                 value={this.state.itemUsers.map(item => item.userId)}
  83                                                 className='options-input contributors-select'
  84                                                 clearable={false}
  85                                                 onMultiSelectChanged={(value) => {this.onChangeItemUsers({itemUsers: value});}}
  86                                                 options={this.buildUserOptions()}
  87                                                 multi/>
  88                                 </Form>
  89                         </div>
  90                 );
  91         }
  92
  93         onChangeItemUsers({itemUsers}) {
  94                 this.setState({
  95                         itemUsers: itemUsers.map(contributor => {
  96                                 let contributorFromProps = this.props.itemUsers.find(user => user.userId === contributor.userId);
  97                                 return {
  98                                         userId: contributor.value,
  99                                         fullName: contributor.label,
 100                                         permission: contributorFromProps ? contributorFromProps.permission : permissionTypes.CONTRIBUTOR
 101                                 };
 102                         })
 103                 });
 104         }
 105
 106         onsaveItemUsers() {
 107                 let {itemUsers: newUsers, newOwnerId} = this.state;
 108                 let {itemUsers: oldUsers, onSubmit, itemId, users} = this.props;
 109                 let addedUsersIds = newUsers.filter(newUser => !oldUsers.map(oldUser => oldUser.userId).includes(newUser.userId))
 110                         .map(user => user.userId);
 111                 let removedUsersIds = oldUsers.filter(oldUser => !newUsers.map(newUser => newUser.userId).includes(oldUser.userId))
 112                         .map(user => user.userId);
 113                 onSubmit({itemId, addedUsersIds, removedUsersIds, allUsers: users, newOwnerId});
 114         }
 115 }
 116
 117 export default Permissions;