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