[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

3 files changed, 168 insertions, 145 deletions

diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
index 78525f84c6..6d900dd0bb 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -1,17 +1,31 @@
+/*!
+ * 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 classnames from 'classnames';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import Navbar from 'react-bootstrap/lib/Navbar.js';
-import Nav from 'react-bootstrap/lib/Nav.js';
-import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
-import {actionsEnum, statusEnum} from './VersionControllerConstants.js';
+import {actionsEnum, statusEnum, statusBarTextMap } from './VersionControllerConstants.js';
+import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 
 
 class VersionController extends React.Component {
 
 	static propTypes = {
-		version: React.PropTypes.string,
+		version: React.PropTypes.object,
 		viewableVersions: React.PropTypes.array,
 		onVersionSwitching: React.PropTypes.func,
 		isCheckedOut: React.PropTypes.bool.isRequired,
@@ -23,143 +37,146 @@ class VersionController extends React.Component {
 	};
 
 	render() {
-		let {status, isCheckedOut, version = '', viewableVersions = [], onVersionSwitching, callVCAction, onSave, isFormDataValid, onClose} = this.props;
+		let {status, isCheckedOut, version = {},  viewableVersions = [], onVersionSwitching, callVCAction, onSave, isFormDataValid, onClose} = this.props;
 		let isCheckedIn = Boolean(status === statusEnum.CHECK_IN_STATUS);
-		let isLatestVersion = Boolean(version === viewableVersions[viewableVersions.length - 1]);
+		let isLatestVersion = Boolean(version.id === viewableVersions[viewableVersions.length - 1].id);
 		if (!isLatestVersion) {
 			status = statusEnum.PREVIOUS_VERSION;
 		}
-
 		return (
 			<div className='version-controller-bar'>
-				<Navbar inverse className='navbar'>
-					<Navbar.Collapse>
-						<Nav className='items-in-left'>
-							<div className='version-section'>
-								<ValidationInput
-									type='select'
-									selectedEnum={version}
-									onEnumChange={value => onVersionSwitching && onVersionSwitching(value)}>
-									{viewableVersions && viewableVersions.map(viewVersion => {
-										return (
-											<option key={viewVersion} value={viewVersion}>{`V ${viewVersion}`}</option>
-										);
-									})
-									}
-									{!viewableVersions.includes(version) &&
-									<option key={version} value={version}>{`V ${version}`}</option>}
-								</ValidationInput>
-							</div>
-							<div className='vc-status'>
-								<div className='onboarding-status-icon'></div>
-								<div className='status-text'> {i18n('ONBOARDING')}
-									<div className='status-text-dash'> -</div>
-								</div>
-								{this.renderStatus(status)}
-							</div>
-						</Nav>
-						<Nav pullRight>
-							<div className='items-in-right'>
-								<div className='action-buttons'>
-									{callVCAction &&
-									<div className='version-control-buttons'>
-										<div
-											className={classnames('vc-nav-item-button button-submit', {'disabled': !isCheckedIn || !isLatestVersion})}
-											onClick={() => this.submit(callVCAction)}>
-											{i18n('Submit')}
-										</div>
-										<div
-											className={classnames('vc-nav-item-button button-checkin-checkout', {'disabled': status === statusEnum.LOCK_STATUS || !isLatestVersion})}
-											onClick={() => this.checkinCheckoutVersion(callVCAction)}>
-											{`${isCheckedOut ? i18n('Check In') : i18n('Check Out')}`}
-										</div>
-										<div
-											className={classnames('sprite-new revert-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || version === '0.1' || !isLatestVersion})}
-											onClick={() => this.revertCheckout(callVCAction)}>
-										</div>
-									</div>
-									}
-									{onSave &&
-									<div
-										className={classnames('sprite-new save-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || !isFormDataValid || !isLatestVersion})}
-										onClick={() => onSave()}>
-									</div>
-									}
-								</div>
-								<div className='vc-nav-item-close' onClick={() => onClose && onClose()}> X</div>
-							</div>
-						</Nav>
-					</Navbar.Collapse>
-				</Navbar>
+				<div className='vc-container'>
+					<div className='version-status-container'>
+						<VersionSelector viewableVersions={viewableVersions} version={version} onVersionSwitching={onVersionSwitching} />
+						<StatusBarUpdates status={status}/>
+					</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}
+							onSave={onSave ? () => onSave() : undefined}
+							isLatestVersion={isLatestVersion}
+							isCheckedOut={isCheckedOut}
+							isCheckedIn={isCheckedIn} isFormDataValid={isFormDataValid} version={version}/>
+						{onClose && <div className='vc-nav-item-close' onClick={() => onClose()} data-test-id='vc-cancel-btn'> X</div>}
+					</div>
+				</div>
 			</div>
 		);
 	}
 
-	renderStatus(status) {
-		switch (status) {
-			case statusEnum.CHECK_OUT_STATUS:
-				return (
-					<div className='checkout-status-icon'>
-						<div className='catalog-tile-check-in-status sprite-new checkout-editable-status-icon'></div>
-						<div className='status-text'> {i18n('CHECKED OUT')} </div>
-					</div>
-				);
-			case statusEnum.LOCK_STATUS:
-				return (
-					<div className='status-text'> {i18n('LOCKED')} </div>
-				);
-			case statusEnum.CHECK_IN_STATUS:
-				return (
-					<div className='status-text'> {i18n('CHECKED IN')} </div>
-				);
-			case statusEnum.SUBMIT_STATUS:
-				return (
-					<div className='status-text'> {i18n('SUBMITTED')} </div>
-				);
-			default:
-				return (
-					<div className='status-text'> {i18n(status)} </div>
-				);
-		}
+	submit(callVCAction, version) {
+		const action = actionsEnum.SUBMIT;
+		callVCAction(action, version);
+	}
+
+	revertCheckout(callVCAction, version) {
+		const action = actionsEnum.UNDO_CHECK_OUT;
+		callVCAction(action, version);
 	}
 
-	checkinCheckoutVersion(callVCAction) {
+	checkinCheckoutVersion(callVCAction, version) {
 		if (this.props.isCheckedOut) {
-			this.checkin(callVCAction);
+			this.checkin(callVCAction, version);
 		}
 		else {
-			this.checkout(callVCAction);
+			this.checkout(callVCAction, version);
 		}
 	}
-
-	checkin(callVCAction) {
-
+	checkin(callVCAction, version) {
 		const action = actionsEnum.CHECK_IN;
-
 		if (this.props.onSave) {
 			this.props.onSave().then(()=>{
-				 callVCAction(action);
-			 });
+				callVCAction(action, version);
+			});
 		}else{
-			callVCAction(action);
+			callVCAction(action, version);
 		}
 
 	}
-
-	checkout(callVCAction) {
+	checkout(callVCAction, version) {
 		const action = actionsEnum.CHECK_OUT;
-		callVCAction(action);
+		callVCAction(action, version);
 	}
+}
 
-	submit(callVCAction) {
-		const action = actionsEnum.SUBMIT;
-		callVCAction(action);
+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 ?
+			['version-controller-lock-open', i18n('Check In')] :
+			['version-controller-lock-closed', 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='version-controller-submit' tooltipText={i18n('Submit')}/>
+						<VCButton dataTestId='vc-revert-btn' onClick={onRevert} isDisabled={!isCheckedOut || version.label === '0.1' || !isLatestVersion}
+							name='version-controller-revert' tooltipText={i18n('Revert')}/>
+					</div>
+				}
+				{onSave &&
+					<VCButton dataTestId='vc-save-btn' onClick={() => onSave()} isDisabled={!isCheckedOut || !isFormDataValid || !isLatestVersion}
+						name='version-controller-save'  tooltipText={i18n('Save')}/>
+				}
+			</div>
+		);
 	}
+}
 
-	revertCheckout(callVCAction) {
-		const action = actionsEnum.UNDO_CHECK_OUT;
-		callVCAction(action);
-	}
+function StatusBarUpdates({status}) {
+	return (
+		<div className='vc-status'>
+			<span className='status-text'>{i18n(statusBarTextMap[status])}</span>
+		</div>
+	);
+}
+
+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} iconClassName={disabled} onClick={onClickAction ? onClickAction : undefined} name={name}/>
+			</div>
+		</OverlayTrigger>
+	);
+}
+
+function VersionSelector(props) {
+	let {version = {}, 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}>
+				{viewableVersions && viewableVersions.map(viewVersion => {
+					return (
+						<option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.label}`}</option>
+					);
+				})
+				}
+				{!includedVersions.length &&
+				<option key={version.id} value={version.id}>{`V ${version.label}`}</option>}
+		</select>
+	</div>);
 }
 
 export default VersionController;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
index 9251fd12c4..9af142433c 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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 keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionsEnum = keyMirror({
@@ -36,3 +31,11 @@ export const statusEnum = keyMirror({
 	PREVIOUS_VERSION: 'READ ONLY'
 });
 
+export const statusBarTextMap = keyMirror({
+	'Locked': 'Checked Out',
+	'LockedByUser': '',
+	'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
index de9914454c..e8c12abec3 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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';
 
@@ -25,24 +20,32 @@ import {statusEnum} from './VersionControllerConstants.js';
 const VersionControllerUtils = {
 
 	getCheckOutStatusKindByUserID(status, lockingUser) {
-		let currentLoginUserID = Configuration.get('ATTUserID');
-		let isCheckedOut = currentLoginUserID === 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: isCheckedOut ? status : statusEnum.LOCK_STATUS,
+			status: returnStatus,
 			isCheckedOut
 		};
 	},
 
 	isCheckedOutByCurrentUser(resource) {
-		let currentLoginUserID = Configuration.get('ATTUserID');
+		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 !== latestVersion || !VersionControllerUtils.isCheckedOutByCurrentUser(resource);
+		return version.id !== latestVersion.id || !VersionControllerUtils.isCheckedOutByCurrentUser(resource);
 	}
 };