summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/panel/versionController/components
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/panel/versionController/components')
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx109
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx73
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx65
3 files changed, 247 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx
new file mode 100644
index 0000000000..4346a0e5dc
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx
@@ -0,0 +1,109 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 && (permissions.owner && permissions.owner.userId === userInfo.userId) &&
+ <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;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
new file mode 100644
index 0000000000..600eaeefaa
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
@@ -0,0 +1,73 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 from 'react';
+import {connect} from 'react-redux';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const CommitModalType = keyMirror({
+ COMMIT: null,
+ COMMIT_SUBMIT: null
+
+});
+
+export const mapActionToProps = (dispatch) => {
+ return {
+ onClose: () => dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ })
+ };
+};
+
+class CommitCommentModal extends React.Component {
+
+ state = {
+ comment: ''
+ };
+
+ render() {
+ const {onCommit, onClose, type} = this.props;
+ const [commitButtonText, descriptionText] = type === CommitModalType.COMMIT ?
+ [i18n('Commit'), i18n('You are about to commit your version')] :
+ [i18n('Commit & Submit'), i18n('You must commit your changes before the submit')];
+
+ return (
+ <Form
+ ref='validationForm'
+ hasButtons={true}
+ onSubmit={ () => {onCommit(this.state.comment); onClose();} }
+ onReset={onClose}
+ submitButtonText={commitButtonText}
+ labledButtons={true}
+ isValid={true}
+ className='comment-commit-form'>
+ <div className='commit-modal-text'>{descriptionText}</div>
+ <Input
+ data-test-id='commit-comment-text'
+ onChange={comment => this.setState({comment: comment})}
+ label={i18n('Enter Commit Comment:')}
+ value={this.state.comment}
+ type='textarea'/>
+ </Form>
+ );
+ }
+}
+
+export default connect(null, mapActionToProps)(CommitCommentModal);
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
new file mode 100644
index 0000000000..952bd4fb58
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
@@ -0,0 +1,65 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * 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 from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+
+const Contributor = ({name, role, id, userInfo}) => {
+
+ const selected = id === userInfo.userId ? 'selected' : '';
+
+ return(
+ <div className='contributor'>
+ <div className='contributor-content'>
+ <div className={`contributor-icon-circle ${selected}`}>
+ <div className={`contributer-icon ${selected}`}>
+ <SVGIcon name='user'/>
+ </div>
+ </div>
+ <div className='contributer-info'>
+ <div className='contributer-name'>{name}</div>
+ <div className='contributer-role'><p>{role}</p></div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+const Permissions = ({permissions: {owner, contributors}, onManagePermissions, userInfo, onClosePermissions}) => {
+
+ return (
+ <div className='permissions-overlay'>
+ <div className='permissions-overlay-header'>
+ <h4 className='permissions-overlay-header-title'>{i18n('PERMISSIONS')}</h4>
+ </div>
+ <div className='permissions-overlay-content'>
+ <Contributor userInfo={userInfo} id={owner.userId} key={owner.fullName} name={owner.fullName} role={owner.role}/>
+ {contributors.map(item => item.userId !== owner.userId && <Contributor userInfo={userInfo} id={item.userId} key={item.fullName} name={item.fullName} role={item.role}/>)}
+ </div>
+ <div className='permissions-overlay-footer'>
+ {
+ owner.userId === userInfo.userId &&
+ <div onClick={() => { onClosePermissions(); onManagePermissions(); }} className='manage-permissions-btn'>
+ {i18n('Manage Permissions')}
+ </div>
+ }
+ </div>
+ </div>
+ );
+};
+
+export default Permissions;