Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

12 files changed, 813 insertions, 575 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
index 0fd0eabd86..457d096219 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
@@ -14,76 +14,100 @@
  * permissions and limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import VersionsPageActionHelper from './VersionsPageActionHelper.js';
 import VersionsPageCreationActionHelper from './creation/VersionsPageCreationActionHelper.js';
 import PermissionsActionHelper from '../permissions/PermissionsActionHelper.js';
-import {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodType } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 import VersionsPageView from './VersionsPage.jsx';
 
 export const mapStateToProps = ({
-	users: {userInfo},
-	versionsPage: {permissions, versionsList},
-	currentScreen: {itemPermission: {isCollaborator, isArchived}, props: {itemId}},
-	softwareProductList = []
+    users: { userInfo },
+    versionsPage: { permissions, versionsList },
+    currentScreen: {
+        itemPermission: { isCollaborator, isArchived },
+        props: { itemId }
+    },
+    softwareProductList = []
 }) => {
+    let { versions = [], selectedVersion } = versionsList;
+    let { owner, contributors, viewers } = permissions;
 
-	let {versions = [], selectedVersion} = versionsList;
-	let {owner, contributors, viewers} = permissions;
-
-	// sorting the version list
-	versions.sort((a,b) => {
-		let statusCompare = b.status.localeCompare(a.status);
-		if (statusCompare === 0) {
-			return b.modificationTime - a.modificationTime;
-		} else {
-			return statusCompare;
-		}
-
-	});	
-	const curentSoftwareProduct = softwareProductList.find(item => item.id === itemId);
-	return {
-		versions,
-		contributors,
-		viewers,
-		owner,
-		currentUser: userInfo,
-		selectedVersion,
-		isCollaborator,
-		isManual: curentSoftwareProduct && curentSoftwareProduct.onboardingMethod === onboardingMethodType.MANUAL,
-		isArchived
-	};
-
+    // sorting the version list
+    versions.sort((a, b) => {
+        let statusCompare = b.status.localeCompare(a.status);
+        if (statusCompare === 0) {
+            return b.modificationTime - a.modificationTime;
+        } else {
+            return statusCompare;
+        }
+    });
+    const curentSoftwareProduct = softwareProductList.find(
+        item => item.id === itemId
+    );
+    return {
+        versions,
+        contributors,
+        viewers,
+        owner,
+        currentUser: userInfo,
+        selectedVersion,
+        isCollaborator,
+        isManual:
+            curentSoftwareProduct &&
+            curentSoftwareProduct.onboardingMethod ===
+                onboardingMethodType.MANUAL,
+        isArchived
+    };
 };
 
-export const mapActionsToProps = (dispatch, {itemType, itemId, additionalProps}) => {
-	return {
-		onNavigateToVersion({version}) {
-			VersionsPageActionHelper.onNavigateToVersion(dispatch, {version, itemId, itemType, additionalProps});
-		},
+export const mapActionsToProps = (
+    dispatch,
+    { itemType, itemId, additionalProps }
+) => {
+    return {
+        onNavigateToVersion({ version }) {
+            VersionsPageActionHelper.onNavigateToVersion(dispatch, {
+                version,
+                itemId,
+                itemType,
+                additionalProps
+            });
+        },
 
-		onSelectVersion({version}) {
-			VersionsPageActionHelper.selectVersion(dispatch, {version});
-		},
+        onSelectVersion({ version }) {
+            VersionsPageActionHelper.selectVersion(dispatch, { version });
+        },
 
-		onCreateVersion({version}) {
-			VersionsPageCreationActionHelper.open(dispatch, {baseVersion: version, itemId, itemType, additionalProps});
-		},
+        onCreateVersion({ version }) {
+            VersionsPageCreationActionHelper.open(dispatch, {
+                baseVersion: version,
+                itemId,
+                itemType,
+                additionalProps
+            });
+        },
 
-		onManagePermissions() {
-			PermissionsActionHelper.openPermissonsManager(dispatch, {itemId, askForRights: false});
-		},
+        onManagePermissions() {
+            PermissionsActionHelper.openPermissonsManager(dispatch, {
+                itemId,
+                askForRights: false
+            });
+        },
 
-		onTreeFullScreen(treeProps) {
-			VersionsPageActionHelper.openTree(dispatch, treeProps);
-		},
+        onTreeFullScreen(treeProps) {
+            VersionsPageActionHelper.openTree(dispatch, treeProps);
+        },
 
-		onModalNodeClick({version}) {
-			VersionsPageActionHelper.selectVersionFromModal(dispatch, {version});
-		},
-		onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId),
-		onRestore: () => VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId)
-	};
+        onModalNodeClick({ version }) {
+            VersionsPageActionHelper.selectVersionFromModal(dispatch, {
+                version
+            });
+        },
+        onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId),
+        onRestore: () =>
+            VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(VersionsPageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
index f8417fafbf..7f7af8130f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
@@ -22,81 +22,144 @@ import Button from 'sdc-ui/lib/react/Button.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
 
-const DepricateButton = ({depricateAction, title}) => (
-	<div className='depricate-btn-wrapper'>
-		<Button data-test-id='depricate-action-btn'	className='depricate-btn' onClick={depricateAction}>{title}</Button>
-	</div>
+const DepricateButton = ({ depricateAction, title }) => (
+    <div className="depricate-btn-wrapper">
+        <Button
+            data-test-id="depricate-action-btn"
+            className="depricate-btn"
+            onClick={depricateAction}>
+            {title}
+        </Button>
+    </div>
 );
 
-const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);	
+const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
 
-const VersionPageTitle = ({itemName, depricatedTitle, isArchived, onRestore, onArchive}) => {
-	return (
-		<div className='version-page-header'>
-			<div className='versions-page-title'>{`${i18n('Available Versions')} - ${itemName}  ${depricatedTitle}`}</div>			
-			<FeatureDepricatedButton depricateAction={isArchived ? () => onRestore() : () => onArchive() }  title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}/>
-		</div>
-	);
+const VersionPageTitle = ({
+    itemName,
+    depricatedTitle,
+    isArchived,
+    onRestore,
+    onArchive
+}) => {
+    return (
+        <div className="version-page-header">
+            <div className="versions-page-title">{`${i18n(
+                'Available Versions'
+            )} - ${itemName}  ${depricatedTitle}`}</div>
+            <FeatureDepricatedButton
+                depricateAction={
+                    isArchived ? () => onRestore() : () => onArchive()
+                }
+                title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}
+            />
+        </div>
+    );
 };
 
 class VersionsPage extends React.Component {
-	state = {
-		showExpanded : false
-	}
-	render() {
-		let { versions, owner, contributors, currentUser, isCollaborator, itemName = '', viewers, onSelectVersion, onNavigateToVersion,
-		onTreeFullScreen, onManagePermissions, onCreateVersion, selectedVersion, onModalNodeClick, isManual, isArchived, onArchive, onRestore} = this.props;		
-		const depricatedTitle = isArchived ? i18n('(Archived)') : '';
-		return (
-			<div className='versions-page-view'>
-				<VersionPageTitle 
-					itemName={itemName} 
-					depricatedTitle={depricatedTitle} 					
-					onArchive={onArchive}
-					isArchived={isArchived}
-					onRestore={onRestore}/>
-				<PermissionsView
-					owner={owner}
-					contributors={contributors}
-					viewers={viewers}
-					currentUser={currentUser}
-					isManual={isManual}
-					onManagePermissions={onManagePermissions}/>
-				<div className='versions-page-list-and-tree'>
-					<div className='version-tree-wrapper'>
-						<div className='version-tree-title-container'>
-							<div className='version-tree-title'>{i18n('Version Tree')}</div>
-							{this.state.showExpanded && <SVGIcon name='expand' className='version-tree-full-screen' onClick={() => onTreeFullScreen({
-								name: 'versions-tree-popup',
-								width: 798,
-								height: 500,
-								nodes: versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''})),
-								onNodeClick: (version) => onModalNodeClick({version}),
-								selectedNodeId: selectedVersion,
-								scrollable: true,
-								toWiden: true
-							})} />}
-						</div>
-						<Tree
-							name={'versions-tree'}
-							width={200}
-							allowScaleWidth={false}
-							nodes={versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''}))}
-							onNodeClick={version => onSelectVersion({version})}
-							onRenderedBeyondWidth={() => {this.setState({showExpanded : true});}}
-							selectedNodeId={selectedVersion}/>
-					</div>
-					<VersionList
-						versions={versions}
-						onSelectVersion={onSelectVersion}
-						onNavigateToVersion={onNavigateToVersion}
-						onCreateVersion={isArchived ? false : onCreateVersion}
-						selectedVersion={selectedVersion}
-						isCollaborator={isCollaborator} />
-				</div>
-			</div>
-		);
-	}
+    state = {
+        showExpanded: false
+    };
+    render() {
+        let {
+            versions,
+            owner,
+            contributors,
+            currentUser,
+            isCollaborator,
+            itemName = '',
+            viewers,
+            onSelectVersion,
+            onNavigateToVersion,
+            onTreeFullScreen,
+            onManagePermissions,
+            onCreateVersion,
+            selectedVersion,
+            onModalNodeClick,
+            isManual,
+            isArchived,
+            onArchive,
+            onRestore
+        } = this.props;
+        const depricatedTitle = isArchived ? i18n('(Archived)') : '';
+        return (
+            <div className="versions-page-view">
+                <VersionPageTitle
+                    itemName={itemName}
+                    depricatedTitle={depricatedTitle}
+                    onArchive={onArchive}
+                    isArchived={isArchived}
+                    onRestore={onRestore}
+                />
+                <PermissionsView
+                    owner={owner}
+                    contributors={contributors}
+                    viewers={viewers}
+                    currentUser={currentUser}
+                    isManual={isManual}
+                    onManagePermissions={onManagePermissions}
+                />
+                <div className="versions-page-list-and-tree">
+                    <div className="version-tree-wrapper">
+                        <div className="version-tree-title-container">
+                            <div className="version-tree-title">
+                                {i18n('Version Tree')}
+                            </div>
+                            {this.state.showExpanded && (
+                                <SVGIcon
+                                    name="expand"
+                                    className="version-tree-full-screen"
+                                    onClick={() =>
+                                        onTreeFullScreen({
+                                            name: 'versions-tree-popup',
+                                            width: 798,
+                                            height: 500,
+                                            nodes: versions.map(version => ({
+                                                id: version.id,
+                                                name: version.name,
+                                                parent: version.baseId || ''
+                                            })),
+                                            onNodeClick: version =>
+                                                onModalNodeClick({ version }),
+                                            selectedNodeId: selectedVersion,
+                                            scrollable: true,
+                                            toWiden: true
+                                        })
+                                    }
+                                />
+                            )}
+                        </div>
+                        <Tree
+                            name={'versions-tree'}
+                            width={200}
+                            allowScaleWidth={false}
+                            nodes={versions.map(version => ({
+                                id: version.id,
+                                name: version.name,
+                                parent: version.baseId || ''
+                            }))}
+                            onNodeClick={version =>
+                                onSelectVersion({ version })
+                            }
+                            onRenderedBeyondWidth={() => {
+                                this.setState({ showExpanded: true });
+                            }}
+                            selectedNodeId={selectedVersion}
+                        />
+                    </div>
+                    <VersionList
+                        versions={versions}
+                        onSelectVersion={onSelectVersion}
+                        onNavigateToVersion={onNavigateToVersion}
+                        onCreateVersion={isArchived ? false : onCreateVersion}
+                        selectedVersion={selectedVersion}
+                        isCollaborator={isCollaborator}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
 export default VersionsPage;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
index d475c03c31..606b17b897 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
@@ -14,94 +14,96 @@
  * permissions and limitations under the License.
  */
 import ItemsHelper from '../../common/helpers/ItemsHelper.js';
-import {actionTypes} from './VersionsPageConstants.js';
-import {itemTypes} from './VersionsPageConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './VersionsPageConstants.js';
+import { itemTypes } from './VersionsPageConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 const VersionsPageActionHelper = {
-	fetchVersions(dispatch, {itemType, itemId}) {
-		return ItemsHelper.fetchVersions({itemId}).then(response => {
-			dispatch({
-				type: actionTypes.VERSIONS_LOADED,
-				versions: response.results,
-				itemType,
-				itemId
-			});
-			return Promise.resolve(response);
-		});
-	},
+    fetchVersions(dispatch, { itemType, itemId }) {
+        return ItemsHelper.fetchVersions({ itemId }).then(response => {
+            dispatch({
+                type: actionTypes.VERSIONS_LOADED,
+                versions: response.results,
+                itemType,
+                itemId
+            });
+            return Promise.resolve(response);
+        });
+    },
 
-	selectVersion(dispatch, {version}) {
-		dispatch({
-			type: actionTypes.SELECT_VERSION,
-			versionId: version.id
-		});
-	},
+    selectVersion(dispatch, { version }) {
+        dispatch({
+            type: actionTypes.SELECT_VERSION,
+            versionId: version.id
+        });
+    },
 
-	selectNone(dispatch) {
-		dispatch({ type: actionTypes.SELECT_NONE });
-	},
+    selectNone(dispatch) {
+        dispatch({ type: actionTypes.SELECT_NONE });
+    },
 
-	onNavigateToVersion(dispatch, {version, itemId, itemType}) {
-		switch (itemType) {
-			case itemTypes.LICENSE_MODEL:
-				ScreensHelper.loadScreen(dispatch, {
-					screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL,
-					props: {licenseModelId: itemId, version}
-				});
-				break;
-			case itemTypes.SOFTWARE_PRODUCT:
-				ScreensHelper.loadScreen(dispatch, {
-					screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-					props: {softwareProductId: itemId, version}
-				});
-				break;
-		}
-	},
+    onNavigateToVersion(dispatch, { version, itemId, itemType }) {
+        switch (itemType) {
+            case itemTypes.LICENSE_MODEL:
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+                    screenType: screenTypes.LICENSE_MODEL,
+                    props: { licenseModelId: itemId, version }
+                });
+                break;
+            case itemTypes.SOFTWARE_PRODUCT:
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                    screenType: screenTypes.SOFTWARE_PRODUCT,
+                    props: { softwareProductId: itemId, version }
+                });
+                break;
+        }
+    },
 
-	openTree(dispatch, treeProps) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.VERSION_TREE,
-				modalComponentProps: treeProps,
-				onDeclined: () => dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_CLOSE
-				}),
-				modalClassName: 'versions-tree-modal',
-				cancelButtonText: i18n('Close'),
-				title: i18n('Version Tree')
-			}
-		});
-	},
+    openTree(dispatch, treeProps) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.VERSION_TREE,
+                modalComponentProps: treeProps,
+                onDeclined: () =>
+                    dispatch({
+                        type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                    }),
+                modalClassName: 'versions-tree-modal',
+                cancelButtonText: i18n('Close'),
+                title: i18n('Version Tree')
+            }
+        });
+    },
 
-	selectVersionFromModal(dispatch, {version}) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		this.selectVersion(dispatch, {version});
-	},
+    selectVersionFromModal(dispatch, { version }) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        this.selectVersion(dispatch, { version });
+    },
 
-	archiveItem(dispatch, itemId) {
-		ItemsHelper.archiveItem(itemId).then(() => {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.ONBOARDING_CATALOG
-			});
-		});	
-	},
+    archiveItem(dispatch, itemId) {
+        ItemsHelper.archiveItem(itemId).then(() => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.ONBOARDING_CATALOG
+            });
+        });
+    },
 
-	restoreItemFromArchive(dispatch, itemId) {
-		ItemsHelper.restoreItem(itemId).then(() => {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.ONBOARDING_CATALOG
-			});
-		});
-	}
+    restoreItemFromArchive(dispatch, itemId) {
+        ItemsHelper.restoreItem(itemId).then(() => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.ONBOARDING_CATALOG
+            });
+        });
+    }
 };
 
 export default VersionsPageActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
index 983ab79a14..3a3879ddb3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
@@ -16,12 +16,12 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	VERSIONS_LOADED: null,
-	SELECT_VERSION: null,
-	SELECT_NONE: null
+    VERSIONS_LOADED: null,
+    SELECT_VERSION: null,
+    SELECT_NONE: null
 });
 
 export const itemTypes = {
-	LICENSE_MODEL: 'vendor-license-models',
-	SOFTWARE_PRODUCT: 'vendor-software-products'
+    LICENSE_MODEL: 'vendor-license-models',
+    SOFTWARE_PRODUCT: 'vendor-software-products'
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
index 9b6fa9f803..c270278f21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
@@ -13,30 +13,34 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './VersionsPageConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes } from './VersionsPageConstants.js';
+import { combineReducers } from 'redux';
 import VersionsPageCreationReducer from './creation/VersionsPageCreationReducer.js';
 import PermissionsReducer from '../permissions/PermissionsReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
 
 function VersionsListReducer(state = {}, action) {
-	switch (action.type) {
-		case actionTypes.VERSIONS_LOADED:
-			let {versions, itemType = state.itemType, itemId} = action;
-			return {...state, versions, itemType, itemId};
-		case actionTypes.SELECT_VERSION:
-			return {...state, selectedVersion: action.versionId === state.selectedVersion ? null : action.versionId};
-		case actionTypes.SELECT_NONE:
-			return {...state, selectedVersion: null};
-		default:
-			return state;
-	}
-};
-
-
+    switch (action.type) {
+        case actionTypes.VERSIONS_LOADED:
+            let { versions, itemType = state.itemType, itemId } = action;
+            return { ...state, versions, itemType, itemId };
+        case actionTypes.SELECT_VERSION:
+            return {
+                ...state,
+                selectedVersion:
+                    action.versionId === state.selectedVersion
+                        ? null
+                        : action.versionId
+            };
+        case actionTypes.SELECT_NONE:
+            return { ...state, selectedVersion: null };
+        default:
+            return state;
+    }
+}
 
 export default combineReducers({
-	versionCreation: createPlainDataReducer(VersionsPageCreationReducer),
-	versionsList: VersionsListReducer,
-	permissions: PermissionsReducer
+    versionCreation: createPlainDataReducer(VersionsPageCreationReducer),
+    versionsList: VersionsListReducer,
+    permissions: PermissionsReducer
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
index 26f8450f4c..74d88f0b52 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
@@ -22,61 +22,108 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 
 const maxContributors = 6;
 
-function extraUsersTooltip (extraUsers) {
-	return (
-		<Tooltip className='extra-users-tooltip' id='extra-users-tooltip-id'>
-			{extraUsers.map(extraUser => <div key={extraUser.userId} className='extra-user'>{extraUser.fullName}</div>)}
-		</Tooltip>
-	);
+function extraUsersTooltip(extraUsers) {
+    return (
+        <Tooltip className="extra-users-tooltip" id="extra-users-tooltip-id">
+            {extraUsers.map(extraUser => (
+                <div key={extraUser.userId} className="extra-user">
+                    {extraUser.fullName}
+                </div>
+            ))}
+        </Tooltip>
+    );
 }
 
-const User = ({user, isCurrentUser, dataTestId}) => (
-	<SVGIcon className={`user-view ${isCurrentUser ? 'current-user' : ''}`} name='user' label={user.fullName} labelPosition='right' color='primary'
-		data-test-id={dataTestId}/>
+const User = ({ user, isCurrentUser, dataTestId }) => (
+    <SVGIcon
+        className={`user-view ${isCurrentUser ? 'current-user' : ''}`}
+        name="user"
+        label={user.fullName}
+        labelPosition="right"
+        color="primary"
+        data-test-id={dataTestId}
+    />
 );
 
-const Owner = ({owner, isCurrentUser}) => (
-	<div className='owner-view'>
-		<div className='permissions-view-title'>{i18n('Owner')}</div>
-		<User user={owner} isCurrentUser={isCurrentUser} dataTestId='owner'/>
-	</div>
+const Owner = ({ owner, isCurrentUser }) => (
+    <div className="owner-view">
+        <div className="permissions-view-title">{i18n('Owner')}</div>
+        <User user={owner} isCurrentUser={isCurrentUser} dataTestId="owner" />
+    </div>
 );
 
-const Contributors = ({contributors, owner, currentUser, onManagePermissions, isManual}) => {
-	let extraUsers = contributors.length - maxContributors;
-	return (
-		<div className='contributors-view'>
-			<div className='permissions-view-title'>{i18n('Contributors')}</div>
-			{contributors.slice(0, maxContributors).map(contributor =>
-				<User key={contributor.userId} user={contributor} isCurrentUser={contributor.userId === currentUser.userId} dataTestId='contributor'/>
-			)}
-			{extraUsers > 0 &&
-				<OverlayTrigger placement='bottom' overlay={extraUsersTooltip(contributors.slice(maxContributors))}>
-					<div className='extra-contributors'>{`+${extraUsers}`}</div>
-				</OverlayTrigger>
-			}
-			{currentUser.userId === owner.userId && !isManual &&
-				<span
-					className='manage-permissions'
-					onClick={onManagePermissions}
-					data-test-id='versions-page-manage-permissions'>
-					{i18n('Manage Permissions')}
-				</span>
-			}
-	</div>
-	);
+const Contributors = ({
+    contributors,
+    owner,
+    currentUser,
+    onManagePermissions,
+    isManual
+}) => {
+    let extraUsers = contributors.length - maxContributors;
+    return (
+        <div className="contributors-view">
+            <div className="permissions-view-title">{i18n('Contributors')}</div>
+            {contributors
+                .slice(0, maxContributors)
+                .map(contributor => (
+                    <User
+                        key={contributor.userId}
+                        user={contributor}
+                        isCurrentUser={
+                            contributor.userId === currentUser.userId
+                        }
+                        dataTestId="contributor"
+                    />
+                ))}
+            {extraUsers > 0 && (
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={extraUsersTooltip(
+                        contributors.slice(maxContributors)
+                    )}>
+                    <div className="extra-contributors">{`+${extraUsers}`}</div>
+                </OverlayTrigger>
+            )}
+            {currentUser.userId === owner.userId &&
+                !isManual && (
+                    <span
+                        className="manage-permissions"
+                        onClick={onManagePermissions}
+                        data-test-id="versions-page-manage-permissions">
+                        {i18n('Manage Permissions')}
+                    </span>
+                )}
+        </div>
+    );
 };
 
-const PermissionsView = ({owner, contributors, currentUser = {}, onManagePermissions, isManual}) => (
-	<div className='versions-page-permissions-view-wrapper'>
-		<div className='permissions-view-wrapper-title'>{i18n('Permissions')}</div>
-		<div className='permissions-view-content'>
-			<div className='permissions-view'>
-				<Owner owner={owner} isCurrentUser={owner.userId === currentUser.userId} />
-				<Contributors owner={owner} contributors={contributors} currentUser={currentUser} onManagePermissions={onManagePermissions} isManual={isManual}/>
-			</div>
-		</div>
-	</div>
+const PermissionsView = ({
+    owner,
+    contributors,
+    currentUser = {},
+    onManagePermissions,
+    isManual
+}) => (
+    <div className="versions-page-permissions-view-wrapper">
+        <div className="permissions-view-wrapper-title">
+            {i18n('Permissions')}
+        </div>
+        <div className="permissions-view-content">
+            <div className="permissions-view">
+                <Owner
+                    owner={owner}
+                    isCurrentUser={owner.userId === currentUser.userId}
+                />
+                <Contributors
+                    owner={owner}
+                    contributors={contributors}
+                    currentUser={currentUser}
+                    onManagePermissions={onManagePermissions}
+                    isManual={isManual}
+                />
+            </div>
+        </div>
+    </div>
 );
 
 export default PermissionsView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
index 47255eb9dc..d74805eccc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
@@ -20,108 +20,177 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-const formatTime = (time) => {
-	if (!time) { return ''; }
+const formatTime = time => {
+    if (!time) {
+        return '';
+    }
 
-	const date = new Date(time);
-	const options = {
-		year: 'numeric',
-		month: 'short',
-		day: 'numeric',
-		hour: '2-digit',
-		minute: '2-digit'
-	};
-	const newDate = date.toLocaleTimeString('en-US', options);
+    const date = new Date(time);
+    const options = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+    const newDate = date.toLocaleTimeString('en-US', options);
 
-	return newDate;
+    return newDate;
 };
 
 const DescriptionField = ({ className, text, useTooltip }) => {
-	if (useTooltip) {
-		return (
-			<div className={className}>
-				<OverlayTrigger
-					placement='bottom'
-					overlay={<Tooltip className='version-description-tooltip' id='version-description-tooltip'>{text}</Tooltip>}>
-					<div className='description-text'>{text}</div>
-				</OverlayTrigger>
-			</div>
-		);
-	}
-	return <div className={className}>{text}</div>;
+    if (useTooltip) {
+        return (
+            <div className={className}>
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={
+                        <Tooltip
+                            className="version-description-tooltip"
+                            id="version-description-tooltip">
+                            {text}
+                        </Tooltip>
+                    }>
+                    <div className="description-text">{text}</div>
+                </OverlayTrigger>
+            </div>
+        );
+    }
+    return <div className={className}>{text}</div>;
 };
 
-const VersionListItem = ({ data, onSelectVersion, onNavigateToVersion, onCreateVersion, isHeader, isSelected, isCollaborator }) => {
+const VersionListItem = ({
+    data,
+    onSelectVersion,
+    onNavigateToVersion,
+    onCreateVersion,
+    isHeader,
+    isSelected,
+    isCollaborator
+}) => {
+    let { modificationTime, name, status, description, additionalInfo } = data;
+    const modificationText = !isHeader
+        ? formatTime(modificationTime)
+        : i18n('Last Edited On');
 
-	let {modificationTime, name, status, description, additionalInfo} = data;
-	const modificationText = !isHeader ? formatTime(modificationTime) : i18n('Last Edited On');
-
-	return (
-		<div
-			data-test-id='version-item-row'
-			className={`version-item-row ${isHeader ? 'header-row' : 'clickable'} ${isSelected ? 'selected' : ''}`}
-			onClick={e => {
-				e.stopPropagation();
-				onSelectVersion();
-				onNavigateToVersion();
-			}}>
-			<div className={`version-item-field ${isHeader ? 'header-field item-version' : 'item-version'}`}>{name}</div>
-			<div className={`version-item-field ${isHeader ? 'header-field item-status' : 'item-status'}`}>{status}</div>
-			<div className={`version-item-field ${isHeader ? 'header-field' : 'item-last-edited'}`}>{modificationText}</div>
-			<DescriptionField
-				className={`version-item-field ${isHeader ? 'header-field header-description' : 'item-description'}`}
-				useTooltip={!isHeader && description}
-				text={description} />
-
-				{
-					isHeader ?
-						<div className='version-item-field header-field actions'>{i18n('Actions')}</div>
-					:
-						<div className='version-item-field item-actions'>
-							<div className='version-item-field item-select'>
-								<SVGIcon
-									name='check-circle'
-									data-test-id='versions-page-select-version'
-									onClick={e => {e.stopPropagation(); onNavigateToVersion();}}
-									label={i18n('Go to this Version')}
-									labelPosition='right' />
-							</div>
-							<div className='version-item-field item-create'>
-								{!isHeader && isCollaborator && additionalInfo.OptionalCreationMethods.length > 0 && onCreateVersion &&
-									<SVGIcon
-										name='plus-circle'
-										data-test-id='versions-page-create-version'
-										onClick={e => { e.stopPropagation(); onCreateVersion(); }}
-										label={i18n('Create New Version')}
-										labelPosition='right'
-										disabled={!isCollaborator || !onCreateVersion} />
-								}
-							</div>
-						</div>
-				}
-		</div>
-	);
+    return (
+        <div
+            data-test-id="version-item-row"
+            className={`version-item-row ${
+                isHeader ? 'header-row' : 'clickable'
+            } ${isSelected ? 'selected' : ''}`}
+            onClick={e => {
+                e.stopPropagation();
+                onSelectVersion();
+                onNavigateToVersion();
+            }}>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field item-version' : 'item-version'
+                }`}>
+                {name}
+            </div>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field item-status' : 'item-status'
+                }`}>
+                {status}
+            </div>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field' : 'item-last-edited'
+                }`}>
+                {modificationText}
+            </div>
+            <DescriptionField
+                className={`version-item-field ${
+                    isHeader
+                        ? 'header-field header-description'
+                        : 'item-description'
+                }`}
+                useTooltip={!isHeader && description}
+                text={description}
+            />
 
+            {isHeader ? (
+                <div className="version-item-field header-field actions">
+                    {i18n('Actions')}
+                </div>
+            ) : (
+                <div className="version-item-field item-actions">
+                    <div className="version-item-field item-select">
+                        <SVGIcon
+                            name="check-circle"
+                            data-test-id="versions-page-select-version"
+                            onClick={e => {
+                                e.stopPropagation();
+                                onNavigateToVersion();
+                            }}
+                            label={i18n('Go to this Version')}
+                            labelPosition="right"
+                        />
+                    </div>
+                    <div className="version-item-field item-create">
+                        {!isHeader &&
+                            isCollaborator &&
+                            additionalInfo.OptionalCreationMethods.length > 0 &&
+                            onCreateVersion && (
+                                <SVGIcon
+                                    name="plus-circle"
+                                    data-test-id="versions-page-create-version"
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onCreateVersion();
+                                    }}
+                                    label={i18n('Create New Version')}
+                                    labelPosition="right"
+                                    disabled={
+                                        !isCollaborator || !onCreateVersion
+                                    }
+                                />
+                            )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
 };
 
-const VersionList = ({ versions, onSelectVersion, onNavigateToVersion, onCreateVersion, selectedVersion, isCollaborator }) => (
-	<div className='version-list'>
-		<VersionListItem
-			data={{ name: i18n('Version'), status: i18n('Status'), description: i18n('Description') }}
-			isHeader />
-		<div className='version-list-items'>
-			{versions.map(version =>
-				<VersionListItem
-					key={version.id}
-					data={version}
-					onSelectVersion={() => onSelectVersion({version})}
-					onNavigateToVersion={() => onNavigateToVersion({version})}
-					onCreateVersion={onCreateVersion ? () => onCreateVersion({version}) : false}
-					isSelected={selectedVersion === version.id}
-					isCollaborator={isCollaborator} />
-			)}
-		</div>
-	</div>
+const VersionList = ({
+    versions,
+    onSelectVersion,
+    onNavigateToVersion,
+    onCreateVersion,
+    selectedVersion,
+    isCollaborator
+}) => (
+    <div className="version-list">
+        <VersionListItem
+            data={{
+                name: i18n('Version'),
+                status: i18n('Status'),
+                description: i18n('Description')
+            }}
+            isHeader
+        />
+        <div className="version-list-items">
+            {versions.map(version => (
+                <VersionListItem
+                    key={version.id}
+                    data={version}
+                    onSelectVersion={() => onSelectVersion({ version })}
+                    onNavigateToVersion={() => onNavigateToVersion({ version })}
+                    onCreateVersion={
+                        onCreateVersion
+                            ? () => onCreateVersion({ version })
+                            : false
+                    }
+                    isSelected={selectedVersion === version.id}
+                    isCollaborator={isCollaborator}
+                />
+            ))}
+        </div>
+    </div>
 );
 
 export default VersionList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
index 66c1c79be5..e0cb925df4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
@@ -13,32 +13,52 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import VersionsPageCreationActionHelper from './VersionsPageCreationActionHelper.js';
 import VersionsPageActionHelper from '../VersionsPageActionHelper.js';
 import VersionsPageCreationView from './VersionsPageCreationView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {VERSION_CREATION_FORM_NAME} from './VersionsPageCreationConstants.js';
+import { VERSION_CREATION_FORM_NAME } from './VersionsPageCreationConstants.js';
 
-export const mapStateToProps = ({versionsPage: {versionCreation}}) => {
-	let {genericFieldInfo} = versionCreation;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ versionsPage: { versionCreation } }) => {
+    let { genericFieldInfo } = versionCreation;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {...versionCreation, isFormValid};
+    return { ...versionCreation, isFormValid };
 };
 
-export const mapActionsToProps = (dispatch, {itemId, itemType, additionalProps}) => {
-	return {
-		onDataChanged: (deltaData, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VERSION_CREATION_FORM_NAME, customValidations}),
-		onCancel: () => VersionsPageCreationActionHelper.close(dispatch),
-		onSubmit: ({baseVersion, payload}) => {
-			VersionsPageCreationActionHelper.close(dispatch);
-			VersionsPageCreationActionHelper.createVersion(dispatch, {baseVersion, itemId, payload}).then(response => {
-				VersionsPageActionHelper.onNavigateToVersion(dispatch, {version: response, itemId, itemType, additionalProps});
-			});
-		},
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME)
-	};
+export const mapActionsToProps = (
+    dispatch,
+    { itemId, itemType, additionalProps }
+) => {
+    return {
+        onDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: VERSION_CREATION_FORM_NAME,
+                customValidations
+            }),
+        onCancel: () => VersionsPageCreationActionHelper.close(dispatch),
+        onSubmit: ({ baseVersion, payload }) => {
+            VersionsPageCreationActionHelper.close(dispatch);
+            VersionsPageCreationActionHelper.createVersion(dispatch, {
+                baseVersion,
+                itemId,
+                payload
+            }).then(response => {
+                VersionsPageActionHelper.onNavigateToVersion(dispatch, {
+                    version: response,
+                    itemId,
+                    itemType,
+                    additionalProps
+                });
+            });
+        },
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(VersionsPageCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    VersionsPageCreationView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
index bc038689a4..6e3be705c0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
@@ -15,65 +15,76 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './VersionsPageCreationConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './VersionsPageCreationConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
-import {actionTypes as VersionsPageActionTypes} from '../VersionsPageConstants.js';
+import { actionTypes as VersionsPageActionTypes } from '../VersionsPageConstants.js';
 
-function baseUrl({itemId, baseVersion}) {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`;
+function baseUrl({ itemId, baseVersion }) {
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`;
 }
 
-function createVersion({itemId, baseVersion, payload: {description, creationMethod} }) {
-	return RestAPIUtil.post(baseUrl({itemId, baseVersion}), {description, creationMethod});
+function createVersion({
+    itemId,
+    baseVersion,
+    payload: { description, creationMethod }
+}) {
+    return RestAPIUtil.post(baseUrl({ itemId, baseVersion }), {
+        description,
+        creationMethod
+    });
 }
 
-
 export default {
+    open(dispatch, { itemType, itemId, additionalProps, baseVersion }) {
+        dispatch({
+            type: actionTypes.OPEN
+        });
 
-	open(dispatch, {itemType, itemId, additionalProps, baseVersion}) {
-		dispatch({
-			type: actionTypes.OPEN
-		});
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.VERSION_CREATION,
-				modalComponentProps: {itemType, itemId, additionalProps, baseVersion},
-				title: i18n('New Version - From {name}', {name: baseVersion.name})
-			}
-		});
-	},
-
-	close(dispatch){
-		dispatch({
-			type: actionTypes.CLOSE
-		});
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.VERSION_CREATION,
+                modalComponentProps: {
+                    itemType,
+                    itemId,
+                    additionalProps,
+                    baseVersion
+                },
+                title: i18n('New Version - From {name}', {
+                    name: baseVersion.name
+                })
+            }
+        });
+    },
 
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-	},
+    close(dispatch) {
+        dispatch({
+            type: actionTypes.CLOSE
+        });
 
-	createVersion(dispatch, {itemId, baseVersion, payload}){
-		return createVersion({itemId, baseVersion, payload}).then(result => {
-			return ItemsHelper.fetchVersions({itemId}).then(response => {
-				dispatch({
-					type: VersionsPageActionTypes.VERSIONS_LOADED,
-					versions: response.results,
-					itemId
-				});
-				dispatch({
-					type: actionTypes.VERSION_CREATED,
-					result
-				});
-				return result;
-			});
-		});
-	}
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+    },
 
+    createVersion(dispatch, { itemId, baseVersion, payload }) {
+        return createVersion({ itemId, baseVersion, payload }).then(result => {
+            return ItemsHelper.fetchVersions({ itemId }).then(response => {
+                dispatch({
+                    type: VersionsPageActionTypes.VERSIONS_LOADED,
+                    versions: response.results,
+                    itemId
+                });
+                dispatch({
+                    type: actionTypes.VERSION_CREATED,
+                    result
+                });
+                return result;
+            });
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
index 4ce381d4de..e761232443 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
@@ -16,13 +16,13 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	OPEN: null,
-	CLOSE: null,
-	VERSION_CREATED: null
+    OPEN: null,
+    CLOSE: null,
+    VERSION_CREATED: null
 });
 
 export const VERSION_CREATION_FORM_NAME = 'VCREATIONFORM';
 
 export const defaultState = {
-	creationMethod: 'major'
-};
\ No newline at end of file
+    creationMethod: 'major'
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
index 620cf4717f..a762e4d338 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
@@ -13,32 +13,39 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, VERSION_CREATION_FORM_NAME, defaultState} from './VersionsPageCreationConstants.js';
+import {
+    actionTypes,
+    VERSION_CREATION_FORM_NAME,
+    defaultState
+} from './VersionsPageCreationConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: VERSION_CREATION_FORM_NAME,
-				data: {...defaultState},
-				genericFieldInfo: {
-					description: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					creationMethod: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				}
-			};
-		case actionTypes.CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: VERSION_CREATION_FORM_NAME,
+                data: { ...defaultState },
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    creationMethod: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                }
+            };
+        case actionTypes.CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
index caa85fe107..ba92d26067 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
@@ -20,125 +20,116 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 
 const VersionPropType = PropTypes.shape({
-	name: PropTypes.string,
-	description: PropTypes.string,
-	creationMethod: PropTypes.string
+    name: PropTypes.string,
+    description: PropTypes.string,
+    creationMethod: PropTypes.string
 });
 
 class VersionsPageCreationView extends React.Component {
-
-	static propTypes = {
-		data: VersionPropType,
-		availableMethods: PropTypes.array,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
-
-	render() {
-		let {data = {}, genericFieldInfo, baseVersion, onDataChanged, onCancel} = this.props;
-		let {additionalInfo: {OptionalCreationMethods}} = baseVersion;
-		let {description, creationMethod} = data;
-
-		return (
-			<div className='version-creation-page'>
-				{ genericFieldInfo && <Form
-					ref={(validationForm) => this.validationForm = validationForm}
-					hasButtons={true}
-					onSubmit={() => this.submit()}
-					submitButtonText={i18n('Create')}
-					onReset={() => onCancel()}
-					labledButtons={true}
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.validate()}>
-
-					<div className='version-form-row'>
-						<Input
-							label={i18n('Version Category')}
-							value={creationMethod}
-							onChange={e => this.onSelectMethod(e)}
-							type='select'
-							overlayPos='bottom'
-							data-test-id='new-version-category'
-							isValid={genericFieldInfo.creationMethod.isValid}
-							errorText={genericFieldInfo.creationMethod.errorText}
-							isRequired>
-							<option key='' value=''>{i18n('Please select…')}</option>
-							{OptionalCreationMethods.map(method => <option key={method} value={method}>{i18n(method)}</option>)}
-						</Input>
-					</div>
-
-					<div className='version-form-row'>
-						<Input
-							label={i18n('Description')}
-							value={description}
-							type='text'
-							overlayPos='bottom'
-							data-test-id='new-version-description'
-							isValid={genericFieldInfo.description.isValid}
-							errorText={genericFieldInfo.description.errorText}
-							onChange={description => onDataChanged({description})}
-							isRequired />
-					</div>
-
-				</Form> }
-			</div>
-		);
-	}
-
-	onSelectMethod(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const creationMethod = e.target.options[selectedIndex].value;
-		this.props.onDataChanged({creationMethod});
-	}
-
-	submit() {
-		let {baseVersion, data: {description, creationMethod}} = this.props;
-		this.props.onSubmit({baseVersion, payload: {description, creationMethod}});
-	}
-
-	validate() {
-		this.props.onValidateForm();
-	}
-
+    static propTypes = {
+        data: VersionPropType,
+        availableMethods: PropTypes.array,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
+
+    render() {
+        let {
+            data = {},
+            genericFieldInfo,
+            baseVersion,
+            onDataChanged,
+            onCancel
+        } = this.props;
+        let { additionalInfo: { OptionalCreationMethods } } = baseVersion;
+        let { description, creationMethod } = data;
+
+        return (
+            <div className="version-creation-page">
+                {genericFieldInfo && (
+                    <Form
+                        ref={validationForm =>
+                            (this.validationForm = validationForm)
+                        }
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        submitButtonText={i18n('Create')}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() => this.validate()}>
+                        <div className="version-form-row">
+                            <Input
+                                label={i18n('Version Category')}
+                                value={creationMethod}
+                                onChange={e => this.onSelectMethod(e)}
+                                type="select"
+                                overlayPos="bottom"
+                                data-test-id="new-version-category"
+                                isValid={
+                                    genericFieldInfo.creationMethod.isValid
+                                }
+                                errorText={
+                                    genericFieldInfo.creationMethod.errorText
+                                }
+                                isRequired>
+                                <option key="" value="">
+                                    {i18n('Please select…')}
+                                </option>
+                                {OptionalCreationMethods.map(method => (
+                                    <option key={method} value={method}>
+                                        {i18n(method)}
+                                    </option>
+                                ))}
+                            </Input>
+                        </div>
+
+                        <div className="version-form-row">
+                            <Input
+                                label={i18n('Description')}
+                                value={description}
+                                type="text"
+                                overlayPos="bottom"
+                                data-test-id="new-version-description"
+                                isValid={genericFieldInfo.description.isValid}
+                                errorText={
+                                    genericFieldInfo.description.errorText
+                                }
+                                onChange={description =>
+                                    onDataChanged({ description })
+                                }
+                                isRequired
+                            />
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
+
+    onSelectMethod(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const creationMethod = e.target.options[selectedIndex].value;
+        this.props.onDataChanged({ creationMethod });
+    }
+
+    submit() {
+        let { baseVersion, data: { description, creationMethod } } = this.props;
+        this.props.onSubmit({
+            baseVersion,
+            payload: { description, creationMethod }
+        });
+    }
+
+    validate() {
+        this.props.onValidateForm();
+    }
 }
 
 export default VersionsPageCreationView;
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 /*
 						<div className='software-product-inline-section'>
 							<Input