1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
/*!
* Copyright © 2016-2017 European Support Limited
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import enhanceWithClickOutside from 'react-click-outside';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Overlay from 'nfvo-components/overlay/Overlay.jsx';
import Permissions from './Permissions.jsx';
class ClickOutsideWrapper extends Component {
handleClickOutside() {
this.props.onClose();
}
render() {
return <div>{this.props.children}</div>;
}
}
const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper);
const VCButton = ({name, tooltipText, disabled, onClick, dataTestId}) => {
let onClickAction = disabled ? ()=>{} : onClick;
return (
<div className={`action-button-wrapper ${disabled ? 'disabled' : 'clickable'}`} onClick={onClickAction}>
<div className='action-buttons-svg'>
<SVGIcon label={tooltipText} labelPosition='bottom' labelClassName='action-button-label'
data-test-id={dataTestId} name={name} disabled={disabled}/>
</div>
</div>
);
};
const Separator = () => (<div className='vc-separator'></div>);
const SubmitButton = ({onClick, disabled}) => (
<div onClick={()=>onClick()} data-test-id='vc-submit-btn' className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
<SVGIcon name='check' iconClassName='vc-v-submit' disabled={disabled} />
{i18n('Submit')}
</div>
);
const ActionButtons = ({isReadOnlyMode, onSubmit, onRevert, onSave, isFormDataValid, onClickPermissions, onSync, onCommit,
onOpenCommentCommitModal, showPermissions, onClosePermissions, permissions, onManagePermissions, userInfo, onOpenRevisionsModal, isManual,
itemPermissions: {isCertified, isCollaborator, isDirty, isOutOfSync, isUpToDate}}) => (
<div className='action-buttons'>
<EnhancedClickOutsideWrapper onClose={onClosePermissions}>
<VCButton disabled={isManual} dataTestId='vc-permission-btn' onClick={onClickPermissions}
name='version-controller-permissions' tooltipText={i18n('Permissons')} />
{showPermissions &&
<Overlay>
<Permissions userInfo={userInfo} onManagePermissions={onManagePermissions} permissions={permissions} onClosePermissions={onClosePermissions}/>
</Overlay>
}
</EnhancedClickOutsideWrapper>
{isCollaborator && <div className='collaborator-action-buttons'>
<Separator />
{onSave && <div className='vc-save-section'>
<VCButton dataTestId='vc-save-btn' onClick={() => onSave()}
name='version-controller-save' tooltipText={i18n('Save')} disabled={isReadOnlyMode || !isFormDataValid} />
<Separator />
</div>
}
<VCButton dataTestId='vc-sync-btn' onClick={onSync}
name='version-controller-sync' tooltipText={i18n('Sync')} disabled={!isCollaborator || isUpToDate || isCertified} />
<VCButton dataTestId='vc-commit-btn' onClick={() => onOpenCommentCommitModal({onCommit, title: i18n('Commit')})}
name='version-controller-commit' tooltipText={i18n('Share')} disabled={isReadOnlyMode || !isDirty || isOutOfSync} />
{onRevert &&
<VCButton dataTestId='vc-revert-btn' onClick={onOpenRevisionsModal}
name='version-controller-revert' tooltipText={i18n('Revert')} disabled={isReadOnlyMode || isOutOfSync} />
}
{onSubmit &&
<div className='vc-submit-section'>
<Separator />
<SubmitButton onClick={onSubmit}
disabled={isReadOnlyMode || isOutOfSync || !isUpToDate || isCertified} />
</div>
}
</div>}
</div>
);
ActionButtons.propTypes = {
version: PropTypes.object,
onSubmit: PropTypes.func,
onRevert: PropTypes.func,
onSave: PropTypes.func,
isLatestVersion: PropTypes.bool,
isCheckedIn: PropTypes.bool,
isCheckedOut: PropTypes.bool,
isFormDataValid: PropTypes.bool,
isReadOnlyMode: PropTypes.bool
};
export default ActionButtons;
|
