diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/panel/versionController/components')
3 files changed, 269 insertions, 151 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 index b5750817ba..4dfa117803 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx @@ -13,7 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import enhanceWithClickOutside from 'react-click-outside'; import i18n from 'nfvo-utils/i18n/i18n.js'; @@ -22,88 +22,171 @@ 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>; - } + handleClickOutside() { + this.props.onClose(); + } + render() { + return <div>{this.props.children}</div>; + } } -const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper); +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 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 Separator = () => <div className="vc-separator" />; -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 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, isArchived, - 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 && !isArchived && <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> +const ActionButtons = ({ + isReadOnlyMode, + onSubmit, + onRevert, + onSave, + isFormDataValid, + onClickPermissions, + onSync, + onCommit, + isArchived, + 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 && + !isArchived && ( + <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 + 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 index 600eaeefaa..ae0913f3a9 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx @@ -15,59 +15,66 @@ */ import React from 'react'; -import {connect} from 'react-redux'; +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 { 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 - + COMMIT: null, + COMMIT_SUBMIT: null }); -export const mapActionToProps = (dispatch) => { - return { - onClose: () => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }) - }; +export const mapActionToProps = dispatch => { + return { + onClose: () => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }) + }; }; class CommitCommentModal extends React.Component { + state = { + comment: '' + }; - 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')]; + 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> - ); - } + 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 index 952bd4fb58..6e0ae8187b 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx @@ -18,48 +18,76 @@ 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 Contributor = ({ name, role, id, userInfo }) => { + const selected = id === userInfo.userId ? 'selected' : ''; - 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> - ); + 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> - ); +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; |