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

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * 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 class Permissions extends React.Component {
  35     constructor(props) {
  36         super(props);
  37         this.state = {
  38             itemUsers: props.itemUsers,
  39             newOwnerId: '',
  40             showChangeOwner: false
  41         };
  42     }
  43
  44     buildUserOptions() {
  45         let { users, owner } = this.props;
  46         return users.filter(user => user.userId !== owner.userId).map(item => {
  47             return { label: item.fullName, value: item.userId };
  48         });
  49     }
  50
  51     render() {
  52         let { onCancel, owner } = this.props;
  53         let { newOwnerId } = this.state;
  54         return (
  55             <div className="manage-permissions-page">
  56                 <Form
  57                     hasButtons={true}
  58                     onSubmit={() => this.onsaveItemUsers()}
  59                     onReset={() => onCancel()}
  60                     labledButtons={true}
  61                     btnClassName="sdc-modal__footer">
  62                     <div className="manage-permissions-title">
  63                         {i18n('Owner')}
  64                     </div>
  65                     <div className="owner-details">
  66                         <span>{owner.fullName}</span>
  67                         <span
  68                             className="change-owner"
  69                             onClick={() =>
  70                                 this.setState({
  71                                     showChangeOwner: !this.state.showChangeOwner
  72                                 })
  73                             }>
  74                             {i18n('Change Owner')}
  75                         </span>
  76                     </div>
  77                     {this.state.showChangeOwner && (
  78                         <div className="change-owner-wrapper">
  79                             <div className="change-owner-title">
  80                                 <span
  81                                     className="manage-permissions-title"
  82                                     data-test-id="change-owner">
  83                                     {i18n('Change Owner')}
  84                                 </span>
  85                                 <OverlayTrigger
  86                                     placement="right"
  87                                     trigger="click"
  88                                     overlay={
  89                                         <Tooltip
  90                                             id="manage-permissions-owner-tooltip"
  91                                             className="manage-permissions-owner-tooltip">
  92                                             {i18n(changeOwnerMessage)}
  93                                         </Tooltip>
  94                                     }>
  95                                     <SVGIcon name="questionMark" />
  96                                 </OverlayTrigger>
  97                             </div>
  98                             <Select
  99                                 data-test-id="selected-owner"
 100                                 value={newOwnerId}
 101                                 onChange={item =>
 102                                     this.setState({
 103                                         newOwnerId: item ? item.value : ''
 104                                     })
 105                                 }
 106                                 options={this.buildUserOptions()}
 107                             />
 108                         </div>
 109                     )}
 110                     <div className="manage-permissions-title">
 111                         {i18n('Contributors')}
 112                     </div>
 113                     <Select
 114                         data-test-id="selected-contributors"
 115                         value={this.state.itemUsers.map(item => item.userId)}
 116                         className="options-input contributors-select"
 117                         clearable={false}
 118                         onMultiSelectChanged={value => {
 119                             this.onChangeItemUsers({ itemUsers: value });
 120                         }}
 121                         options={this.buildUserOptions()}
 122                         multi
 123                     />
 124                 </Form>
 125             </div>
 126         );
 127     }
 128
 129     onChangeItemUsers({ itemUsers }) {
 130         this.setState({
 131             itemUsers: itemUsers.map(contributor => {
 132                 let contributorFromProps = this.props.itemUsers.find(
 133                     user => user.userId === contributor.userId
 134                 );
 135                 return {
 136                     userId: contributor.value,
 137                     fullName: contributor.label,
 138                     permission: contributorFromProps
 139                         ? contributorFromProps.permission
 140                         : permissionTypes.CONTRIBUTOR
 141                 };
 142             })
 143         });
 144     }
 145
 146     onsaveItemUsers() {
 147         let { itemUsers: newUsers, newOwnerId } = this.state;
 148         let { itemUsers: oldUsers, onSubmit, itemId, users } = this.props;
 149         let addedUsersIds = newUsers
 150             .filter(
 151                 newUser =>
 152                     !oldUsers
 153                         .map(oldUser => oldUser.userId)
 154                         .includes(newUser.userId)
 155             )
 156             .map(user => user.userId);
 157         let removedUsersIds = oldUsers
 158             .filter(
 159                 oldUser =>
 160                     !newUsers
 161                         .map(newUser => newUser.userId)
 162                         .includes(oldUser.userId)
 163             )
 164             .map(user => user.userId);
 165         onSubmit({
 166             itemId,
 167             addedUsersIds,
 168             removedUsersIds,
 169             allUsers: users,
 170             newOwnerId
 171         });
 172     }
 173 }
 174
 175 export default Permissions;