Add collaboration feature
Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index fb3b71f..02552fc 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -14,15 +14,16 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
import classnames from 'classnames';
import Collapse from 'react-bootstrap/lib/Collapse.js';
class NavigationSideBar extends React.Component {
static PropTypes = {
- activeItemId: React.PropTypes.string.isRequired,
- onSelect: React.PropTypes.func,
- onToggle: React.PropTypes.func,
- groups: React.PropTypes.array
+ activeItemId: PropTypes.string.isRequired,
+ onSelect: PropTypes.func,
+ onToggle: PropTypes.func,
+ groups: PropTypes.array
};
constructor(props) {
@@ -61,9 +62,9 @@
class NavigationMenu extends React.Component {
static PropTypes = {
- activeItemId: React.PropTypes.string.isRequired,
- onNavigationItemClick: React.PropTypes.func,
- menu: React.PropTypes.array
+ activeItemId: PropTypes.string.isRequired,
+ onNavigationItemClick: PropTypes.func,
+ menu: PropTypes.array
};
render() {
@@ -80,6 +81,9 @@
return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
}
+function getItemDataTestId(itemId) {
+ return itemId.split('|')[0];
+}
function NavigationMenuItems(props) {
const {items, activeItemId, onNavigationItemClick} = props;
return (
@@ -97,7 +101,7 @@
return (
<div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
<NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
- {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + item.id}>
+ {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + getItemDataTestId(item.id)}>
<div>
{item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId} />)) }
</div>
@@ -120,7 +124,7 @@
'hidden': item.hidden
})}
onClick={(event) => onClick(event, item)}
- data-test-id={'navbar-group-item-' + item.id}>
+ data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
{item.name}
</div>
);
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
index 922db05..5273785 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -14,51 +14,66 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionsEnum, statusEnum, statusBarTextMap } from './VersionControllerConstants.js';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import Tooltip from 'react-bootstrap/lib/Tooltip.js';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
+import {actionsEnum} from './VersionControllerConstants.js';
+import ActionButtons from './components/ActionButtons.jsx';
+import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx';
class VersionController extends React.Component {
static propTypes = {
- version: React.PropTypes.object,
- viewableVersions: React.PropTypes.array,
- onVersionSwitching: React.PropTypes.func,
- isCheckedOut: React.PropTypes.bool.isRequired,
- status: React.PropTypes.string.isRequired,
- callVCAction: React.PropTypes.func,
- onSave: React.PropTypes.func,
- onClose: React.PropTypes.func,
- isFormDataValid: React.PropTypes.bool
+ version: PropTypes.object,
+ viewableVersions: PropTypes.array,
+ onVersionSwitching: PropTypes.func,
+ callVCAction: PropTypes.func,
+ onSave: PropTypes.func,
+ onClose: PropTypes.func,
+ isFormDataValid: PropTypes.bool,
+ onOpenCommentCommitModal: PropTypes.func,
+ isReadOnlyMode: PropTypes.bool
+ };
+
+ state = {
+ showPermissions: false,
+ showRevisions: false
};
render() {
- let {status, isCheckedOut, version = {}, viewableVersions = [], onVersionSwitching, callVCAction, onSave, isFormDataValid, onClose} = this.props;
- let isCheckedIn = Boolean(status === statusEnum.CHECK_IN_STATUS);
- let isLatestVersion = Boolean(version.id === viewableVersions[viewableVersions.length - 1].id);
- if (!isLatestVersion) {
- status = statusEnum.PREVIOUS_VERSION;
- }
+ let {version = {}, viewableVersions = [], onVersionSwitching, onMoreVersionsClick, callVCAction, onSave, isReadOnlyMode, itemPermission,
+ isFormDataValid, onClose, onManagePermissions, permissions = {}, userInfo, usersList, itemName, onOpenCommentCommitModal, onOpenRevisionsModal, isManual} = this.props;
return (
<div className='version-controller-bar'>
<div className='vc-container'>
<div className='version-status-container'>
- <VersionSelector viewableVersions={viewableVersions} version={version} onVersionSwitching={onVersionSwitching} />
- <StatusBarUpdates status={status}/>
+ <VersionSelector
+ viewableVersions={viewableVersions}
+ version={version}
+ onVersionSwitching={onVersionSwitching}
+ onMoreVersionsClick={() => onMoreVersionsClick({itemName, users: usersList})}/>
</div>
<div className='save-submit-cancel-container'>
<ActionButtons onSubmit={callVCAction ? () => this.submit(callVCAction, version) : undefined}
- onRevert={callVCAction ? () => this.revertCheckout(callVCAction, version) : undefined}
- status={status}
- onCheckinCheckout={callVCAction ? () => this.checkinCheckoutVersion(callVCAction, version) : undefined}
+ onRevert={callVCAction ? () => this.revert(callVCAction, version) : undefined}
+ onOpenRevisionsModal={onOpenRevisionsModal}
onSave={onSave ? () => onSave() : undefined}
- isLatestVersion={isLatestVersion}
- isCheckedOut={isCheckedOut}
- isCheckedIn={isCheckedIn} isFormDataValid={isFormDataValid} version={version}/>
+ permissions={permissions}
+ userInfo={userInfo}
+ onManagePermissions={onManagePermissions}
+ showPermissions={this.state.showPermissions}
+ onClosePermissions={()=>this.setState({showPermissions: false})}
+ onClickPermissions={() => this.onClickPermissions()}
+ onSync={callVCAction ? () => this.sync(callVCAction, version) : undefined}
+ onOpenCommentCommitModal={onOpenCommentCommitModal}
+ onCommit={callVCAction ? (comment) => this.commit(callVCAction, version, comment) : undefined}
+ isFormDataValid={isFormDataValid}
+ itemPermissions={itemPermission}
+ isReadOnlyMode={isReadOnlyMode}
+ isManual={isManual} />
+ <div className='vc-separator'></div>
+ <NotificationsView />
{onClose && <div className='vc-nav-item-close' onClick={() => onClose()} data-test-id='vc-cancel-btn'> X</div>}
</div>
</div>
@@ -66,116 +81,57 @@
);
}
+ onClickPermissions() {
+ let {onOpenPermissions, usersList} = this.props;
+ let {showPermissions} = this.state;
+ let promise = showPermissions ? Promise.resolve() : onOpenPermissions({users: usersList});
+ promise.then(() => this.setState({showPermissions: !showPermissions}));
+ }
+
+
submit(callVCAction, version) {
const action = actionsEnum.SUBMIT;
callVCAction(action, version);
}
- revertCheckout(callVCAction, version) {
- const action = actionsEnum.UNDO_CHECK_OUT;
+ revert(callVCAction, version) {
+ const action = actionsEnum.REVERT;
callVCAction(action, version);
}
- checkinCheckoutVersion(callVCAction, version) {
- if (this.props.isCheckedOut) {
- this.checkin(callVCAction, version);
- }
- else {
- this.checkout(callVCAction, version);
- }
- }
- checkin(callVCAction, version) {
- const action = actionsEnum.CHECK_IN;
- if (this.props.onSave) {
- this.props.onSave().then(()=>{
- callVCAction(action, version);
- });
- }else{
- callVCAction(action, version);
- }
-
- }
- checkout(callVCAction, version) {
- const action = actionsEnum.CHECK_OUT;
+ sync(callVCAction, version) {
+ const action = actionsEnum.SYNC;
callVCAction(action, version);
}
-}
-class ActionButtons extends React.Component {
- static propTypes = {
- version: React.PropTypes.object,
- onSubmit: React.PropTypes.func,
- onRevert: React.PropTypes.func,
- onSave: React.PropTypes.func,
- isLatestVersion: React.PropTypes.bool,
- isCheckedIn: React.PropTypes.bool,
- isCheckedOut: React.PropTypes.bool,
- isFormDataValid: React.PropTypes.bool
- };
- render() {
- const {onSubmit, onRevert, onSave, isLatestVersion, isCheckedIn, isCheckedOut, isFormDataValid, version, status, onCheckinCheckout} = this.props;
- const [checkinBtnIconSvg, checkinCheckoutBtnTitle] = status === statusEnum.CHECK_OUT_STATUS ?
- ['versionControllerLockOpen', i18n('Check In')] :
- ['versionControllerLockClosed', i18n('Check Out')];
- const disabled = (isLatestVersion && onCheckinCheckout && status !== statusEnum.LOCK_STATUS) ? false : true;
- return (
- <div className='action-buttons'>
- <VCButton dataTestId='vc-checkout-btn' onClick={onCheckinCheckout} isDisabled={disabled}
- name={checkinBtnIconSvg} tooltipText={checkinCheckoutBtnTitle}/>
- {onSubmit && onRevert &&
- <div className='version-control-buttons'>
- <VCButton dataTestId='vc-submit-btn' onClick={onSubmit} isDisabled={!isCheckedIn || !isLatestVersion}
- name='versionControllerSubmit' tooltipText={i18n('Submit')}/>
- <VCButton dataTestId='vc-revert-btn' onClick={onRevert} isDisabled={!isCheckedOut || version.label === '0.1' || !isLatestVersion}
- name='versionControllerRevert' tooltipText={i18n('Revert')}/>
- </div>
- }
- {onSave &&
- <VCButton dataTestId='vc-save-btn' onClick={() => onSave()} isDisabled={!isCheckedOut || !isFormDataValid || !isLatestVersion}
- name='versionControllerSave' tooltipText={i18n('Save')}/>
- }
- </div>
- );
+ commit(callVCAction, version, comment) {
+ const action = actionsEnum.COMMIT;
+ callVCAction(action, version, comment);
}
-}
-function StatusBarUpdates({status}) {
- return (
- <div className='vc-status'>
- <span className='status-text'>{i18n(statusBarTextMap[status])}</span>
- </div>
- );
-}
+ permissions() {
-function VCButton({name, tooltipText, isDisabled, onClick, dataTestId}) {
- let onClickAction = isDisabled ? ()=>{} : onClick;
- let disabled = isDisabled ? 'disabled' : '';
-
- return (
- <OverlayTrigger placement='top' overlay={<Tooltip id='vc-tooltip'>{tooltipText}</Tooltip>}>
- <div disabled={disabled} className='action-buttons-svg'>
- <SVGIcon data-test-id={dataTestId} disabled={isDisabled} onClick={onClickAction ? onClickAction : undefined} name={name}/>
- </div>
- </OverlayTrigger>
- );
+ }
}
function VersionSelector(props) {
- let {version = {}, viewableVersions = [], onVersionSwitching} = props;
+ let {version = {}, onMoreVersionsClick, viewableVersions = [], onVersionSwitching} = props;
const includedVersions = viewableVersions.filter(ver => {return ver.id === version.id;});
return (<div className='version-section-wrapper'>
<select className='version-selector'
- onChange={ev => onVersionSwitching && onVersionSwitching({id: ev.target.value, label: ev.target.value})}
- value={version.label}>
+ onChange={ev => onVersionSwitching && onVersionSwitching(viewableVersions.find(version => version.id === ev.target.value))}
+ value={version.id}
+ data-test-id='vc-versions-select-box'>
{viewableVersions && viewableVersions.map(viewVersion => {
return (
- <option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.label}`}</option>
+ <option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.name} ${viewVersion.status}`}</option>
);
})
}
{!includedVersions.length &&
- <option key={version.id} value={version.id}>{`V ${version.label}`}</option>}
+ <option key={version.id} value={version.id} data-test-id='vc-selected-version-option'>{`V ${version.name} ${version.status}`}</option>}
</select>
+ <span onClick={onMoreVersionsClick} className='version-selector-more-versions' data-test-id='vc-versions-page-link'>{i18n('Versions Page')}</span>
</div>);
}
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
index c2548e4..ddb428a 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
@@ -16,26 +16,9 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionsEnum = keyMirror({
- CHECK_IN: 'Checkin',
- CHECK_OUT: 'Checkout',
- UNDO_CHECK_OUT: 'Undo_Checkout',
+ REVERT: 'Revert',
+ SYNC: 'Sync',
SUBMIT: 'Submit',
+ COMMIT: 'Commit',
CREATE_PACKAGE: 'Create_Package'
});
-
-export const statusEnum = keyMirror({
- CHECK_OUT_STATUS: 'Locked',
- CHECK_IN_STATUS: 'Available',
- SUBMIT_STATUS: 'Final',
- LOCK_STATUS: 'LockedByUser',
- PREVIOUS_VERSION: 'READ ONLY'
-});
-
-export const statusBarTextMap = keyMirror({
- 'Locked': 'Checked Out',
- 'LockedByUser': 'Locked',
- 'Available': 'Checked In',
- 'Final': 'Submitted',
- 'READ ONLY': 'Locked'
-});
-
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js
deleted file mode 100644
index e8c12ab..0000000
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/*!
- * 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 Configuration from 'sdc-app/config/Configuration.js';
-import {statusEnum} from './VersionControllerConstants.js';
-
-
-const VersionControllerUtils = {
-
- getCheckOutStatusKindByUserID(status, lockingUser) {
- let returnStatus;
- let isCheckedOut;
- let currentLoginUserID = Configuration.get('UserID');
- if (lockingUser) {
- isCheckedOut = currentLoginUserID === lockingUser;
- returnStatus = isCheckedOut ? status : statusEnum.LOCK_STATUS;
- } else {
- isCheckedOut = false;
- returnStatus = status;
- }
-
- return {
- status: returnStatus,
- isCheckedOut
- };
- },
-
- isCheckedOutByCurrentUser(resource) {
- let currentLoginUserID = Configuration.get('UserID');
- return resource.lockingUser !== undefined && resource.lockingUser === currentLoginUserID;
- },
-
- isReadOnly(resource) {
- const {version, viewableVersions = []} = resource;
- const latestVersion = viewableVersions[viewableVersions.length - 1];
- return version.id !== latestVersion.id || !VersionControllerUtils.isCheckedOutByCurrentUser(resource);
- }
-};
-
-export default VersionControllerUtils;
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 0000000..4346a0e
--- /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 0000000..600eaee
--- /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 0000000..952bd4f
--- /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;