openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.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
  17 import React from 'react';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  20
  21 const Contributor = ({ name, role, id, userInfo }) => {
  22     const selected = id === userInfo.userId ? 'selected' : '';
  23
  24     return (
  25         <div className="contributor">
  26             <div className="contributor-content">
  27                 <div className={`contributor-icon-circle ${selected}`}>
  28                     <div className={`contributer-icon ${selected}`}>
  29                         <SVGIcon name="user" />
  30                     </div>
  31                 </div>
  32                 <div className="contributer-info">
  33                     <div className="contributer-name">{name}</div>
  34                     <div className="contributer-role">
  35                         <p>{role}</p>
  36                     </div>
  37                 </div>
  38             </div>
  39         </div>
  40     );
  41 };
  42
  43 const Permissions = ({
  44     permissions: { owner, contributors },
  45     onManagePermissions,
  46     userInfo,
  47     onClosePermissions
  48 }) => {
  49     return (
  50         <div className="permissions-overlay">
  51             <div className="permissions-overlay-header">
  52                 <h4 className="permissions-overlay-header-title">
  53                     {i18n('PERMISSIONS')}
  54                 </h4>
  55             </div>
  56             <div className="permissions-overlay-content">
  57                 <Contributor
  58                     userInfo={userInfo}
  59                     id={owner.userId}
  60                     key={owner.fullName}
  61                     name={owner.fullName}
  62                     role={owner.role}
  63                 />
  64                 {contributors.map(
  65                     item =>
  66                         item.userId !== owner.userId && (
  67                             <Contributor
  68                                 userInfo={userInfo}
  69                                 id={item.userId}
  70                                 key={item.fullName}
  71                                 name={item.fullName}
  72                                 role={item.role}
  73                             />
  74                         )
  75                 )}
  76             </div>
  77             <div className="permissions-overlay-footer">
  78                 {owner.userId === userInfo.userId && (
  79                     <div
  80                         onClick={() => {
  81                             onClosePermissions();
  82                             onManagePermissions();
  83                         }}
  84                         className="manage-permissions-btn">
  85                         {i18n('Manage Permissions')}
  86                     </div>
  87                 )}
  88             </div>
  89         </div>
  90     );
  91 };
  92
  93 export default Permissions;