openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.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
  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(
  34     ClickOutsideWrapper
  35 );
  36
  37 const VCButton = ({ name, tooltipText, disabled, onClick, dataTestId }) => {
  38     let onClickAction = disabled ? () => {} : onClick;
  39     return (
  40         <div
  41             className={`action-button-wrapper ${
  42                 disabled ? 'disabled' : 'clickable'
  43             }`}
  44             onClick={onClickAction}>
  45             <div className="action-buttons-svg">
  46                 <SVGIcon
  47                     label={tooltipText}
  48                     labelPosition="bottom"
  49                     labelClassName="action-button-label"
  50                     data-test-id={dataTestId}
  51                     name={name}
  52                     disabled={disabled}
  53                 />
  54             </div>
  55         </div>
  56     );
  57 };
  58
  59 const Separator = () => <div className="vc-separator" />;
  60
  61 const SubmitButton = ({ onClick, disabled }) => (
  62     <div
  63         onClick={() => onClick()}
  64         data-test-id="vc-submit-btn"
  65         className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
  66         <SVGIcon name="check" iconClassName="vc-v-submit" disabled={disabled} />
  67         {i18n('Submit')}
  68     </div>
  69 );
  70
  71 const ActionButtons = ({
  72     isReadOnlyMode,
  73     onSubmit,
  74     onRevert,
  75     onSave,
  76     isFormDataValid,
  77     onClickPermissions,
  78     onSync,
  79     onCommit,
  80     isArchived,
  81     onOpenCommentCommitModal,
  82     showPermissions,
  83     onClosePermissions,
  84     permissions,
  85     onManagePermissions,
  86     userInfo,
  87     onOpenRevisionsModal,
  88     isManual,
  89     itemPermissions: {
  90         isCertified,
  91         isCollaborator,
  92         isDirty,
  93         isOutOfSync,
  94         isUpToDate
  95     }
  96 }) => (
  97     <div className="action-buttons">
  98         <EnhancedClickOutsideWrapper onClose={onClosePermissions}>
  99             <VCButton
 100                 disabled={isManual}
 101                 dataTestId="vc-permission-btn"
 102                 onClick={onClickPermissions}
 103                 name="version-controller-permissions"
 104                 tooltipText={i18n('Permissons')}
 105             />
 106             {showPermissions && (
 107                 <Overlay>
 108                     <Permissions
 109                         userInfo={userInfo}
 110                         onManagePermissions={onManagePermissions}
 111                         permissions={permissions}
 112                         onClosePermissions={onClosePermissions}
 113                     />
 114                 </Overlay>
 115             )}
 116         </EnhancedClickOutsideWrapper>
 117         {isCollaborator &&
 118             !isArchived && (
 119                 <div className="collaborator-action-buttons">
 120                     <Separator />
 121                     {onSave && (
 122                         <div className="vc-save-section">
 123                             <VCButton
 124                                 dataTestId="vc-save-btn"
 125                                 onClick={() => onSave()}
 126                                 name="version-controller-save"
 127                                 tooltipText={i18n('Save')}
 128                                 disabled={isReadOnlyMode || !isFormDataValid}
 129                             />
 130                             <Separator />
 131                         </div>
 132                     )}
 133                     <VCButton
 134                         dataTestId="vc-sync-btn"
 135                         onClick={onSync}
 136                         name="version-controller-sync"
 137                         tooltipText={i18n('Sync')}
 138                         disabled={!isCollaborator || isUpToDate || isCertified}
 139                     />
 140                     <VCButton
 141                         dataTestId="vc-commit-btn"
 142                         onClick={() =>
 143                             onOpenCommentCommitModal({
 144                                 onCommit,
 145                                 title: i18n('Commit')
 146                             })
 147                         }
 148                         name="version-controller-commit"
 149                         tooltipText={i18n('Share')}
 150                         disabled={isReadOnlyMode || !isDirty || isOutOfSync}
 151                     />
 152                     {onRevert && (
 153                         <VCButton
 154                             dataTestId="vc-revert-btn"
 155                             onClick={onOpenRevisionsModal}
 156                             name="version-controller-revert"
 157                             tooltipText={i18n('Revert')}
 158                             disabled={isReadOnlyMode || isOutOfSync}
 159                         />
 160                     )}
 161                     {onSubmit && (
 162                         <div className="vc-submit-section">
 163                             <Separator />
 164                             <SubmitButton
 165                                 onClick={onSubmit}
 166                                 disabled={
 167                                     isReadOnlyMode ||
 168                                     isOutOfSync ||
 169                                     !isUpToDate ||
 170                                     isCertified
 171                                 }
 172                             />
 173                         </div>
 174                     )}
 175                 </div>
 176             )}
 177     </div>
 178 );
 179
 180 ActionButtons.propTypes = {
 181     version: PropTypes.object,
 182     onSubmit: PropTypes.func,
 183     onRevert: PropTypes.func,
 184     onSave: PropTypes.func,
 185     isLatestVersion: PropTypes.bool,
 186     isCheckedIn: PropTypes.bool,
 187     isCheckedOut: PropTypes.bool,
 188     isFormDataValid: PropTypes.bool,
 189     isReadOnlyMode: PropTypes.bool
 190 };
 191
 192 export default ActionButtons;