openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.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, {Component} from 'react';
  17 import PropTypes from 'prop-types';
  18 import enhanceWithClickOutside from 'react-click-outside';
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  21 import Overlay from 'nfvo-components/overlay/Overlay.jsx';
  22 import Permissions from './Permissions.jsx';
  23
  24 class ClickOutsideWrapper extends Component {
  25         handleClickOutside() {
  26                 this.props.onClose();
  27         }
  28         render() {
  29                 return <div>{this.props.children}</div>;
  30         }
  31 }
  32
  33 const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper);
  34
  35 const VCButton = ({name, tooltipText, disabled, onClick, dataTestId}) => {
  36         let onClickAction = disabled ? ()=>{} : onClick;
  37         return (
  38                 <div className={`action-button-wrapper ${disabled ? 'disabled' : 'clickable'}`} onClick={onClickAction}>
  39                         <div className='action-buttons-svg'>
  40                                 <SVGIcon label={tooltipText} labelPosition='bottom' labelClassName='action-button-label'
  41                                          data-test-id={dataTestId} name={name} disabled={disabled}/>
  42                         </div>
  43                 </div>
  44         );
  45 };
  46
  47 const Separator = () => (<div className='vc-separator'></div>);
  48
  49 const SubmitButton = ({onClick, disabled}) => (
  50         <div onClick={()=>onClick()} data-test-id='vc-submit-btn' className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
  51                 <SVGIcon name='check' iconClassName='vc-v-submit' disabled={disabled} />
  52                 {i18n('Submit')}
  53         </div>
  54 );
  55
  56
  57 const ActionButtons = ({isReadOnlyMode, onSubmit, onRevert, onSave, isFormDataValid, onClickPermissions, onSync, onCommit,
  58         onOpenCommentCommitModal, showPermissions, onClosePermissions, permissions, onManagePermissions, userInfo, onOpenRevisionsModal, isManual,
  59         itemPermissions: {isCertified, isCollaborator, isDirty, isOutOfSync, isUpToDate}}) => (
  60         <div className='action-buttons'>
  61                 <EnhancedClickOutsideWrapper onClose={onClosePermissions}>
  62                         <VCButton disabled={isManual} dataTestId='vc-permission-btn' onClick={onClickPermissions}
  63                                 name='version-controller-permissions' tooltipText={i18n('Permissons')} />
  64                         {showPermissions &&
  65                                 <Overlay>
  66                                         <Permissions userInfo={userInfo} onManagePermissions={onManagePermissions} permissions={permissions} onClosePermissions={onClosePermissions}/>
  67                                 </Overlay>
  68                         }
  69                 </EnhancedClickOutsideWrapper>
  70                 {isCollaborator && <div className='collaborator-action-buttons'>
  71                         <Separator />
  72                         {onSave && <div className='vc-save-section'>
  73                                         <VCButton dataTestId='vc-save-btn' onClick={() => onSave()}
  74                                                 name='version-controller-save'  tooltipText={i18n('Save')} disabled={isReadOnlyMode || !isFormDataValid} />
  75                                         <Separator />
  76                                 </div>
  77                         }
  78                         <VCButton dataTestId='vc-sync-btn' onClick={onSync}
  79                                 name='version-controller-sync' tooltipText={i18n('Sync')} disabled={!isCollaborator || isUpToDate || isCertified} />
  80                         <VCButton dataTestId='vc-commit-btn' onClick={() => onOpenCommentCommitModal({onCommit, title: i18n('Commit')})}
  81                                 name='version-controller-commit' tooltipText={i18n('Share')} disabled={isReadOnlyMode || !isDirty || isOutOfSync} />
  82                         {onRevert &&
  83                                 <VCButton dataTestId='vc-revert-btn' onClick={onOpenRevisionsModal}
  84                                         name='version-controller-revert' tooltipText={i18n('Revert')} disabled={isReadOnlyMode || isOutOfSync} />
  85                         }
  86                         {onSubmit && (permissions.owner && permissions.owner.userId === userInfo.userId) &&
  87                                 <div className='vc-submit-section'>
  88                                         <Separator />
  89                                         <SubmitButton onClick={onSubmit}
  90                                                 disabled={isReadOnlyMode || isOutOfSync || !isUpToDate || isCertified} />
  91                                 </div>
  92                         }
  93                 </div>}
  94         </div>
  95 );
  96
  97 ActionButtons.propTypes = {
  98         version: PropTypes.object,
  99         onSubmit: PropTypes.func,
 100         onRevert: PropTypes.func,
 101         onSave: PropTypes.func,
 102         isLatestVersion: PropTypes.bool,
 103         isCheckedIn: PropTypes.bool,
 104         isCheckedOut: PropTypes.bool,
 105         isFormDataValid: PropTypes.bool,
 106         isReadOnlyMode: PropTypes.bool
 107 };
 108
 109 export default ActionButtons;