Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>

76 files changed, 1277 insertions, 1357 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
index ae3d3932ed..cdaf189fc0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
@@ -16,64 +16,69 @@
 import {connect} from 'react-redux';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
 import TabulatedEditor from 'src/nfvo-components/editor/TabulatedEditor.jsx';
 
-import {enums} from 'sdc-app/onboarding/OnboardingConstants.js';
-import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
+import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
 
-import {navigationItems, mapScreenToNavigationItem, onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from './SoftwareProductConstants.js';
+import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from './SoftwareProductConstants.js';
 import SoftwareProductActionHelper from './SoftwareProductActionHelper.js';
 import SoftwareProductComponentsActionHelper from './components/SoftwareProductComponentsActionHelper.js';
-import SoftwareProductDependenciesActionHelper from './dependencies/SoftwareProductDependenciesActionHelper.js';
-
+import PermissionsActionHelper from './../permissions/PermissionsActionHelper.js';
+import RevisionsActionHelper from './../revisions/RevisionsActionHelper.js';
 import HeatSetupActionHelper from './attachments/setup/HeatSetupActionHelper.js';
 import { actionsEnum as versionControllerActions } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
+import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
 
 function getActiveNavigationId(screen, componentId) {
-	let activeItemId = componentId ? mapScreenToNavigationItem[screen] + '|' + componentId : mapScreenToNavigationItem[screen];
+	let activeItemId = componentId ? screen + '|' + componentId : screen;
 	return activeItemId;
 }
 
 const buildComponentNavigationBarGroups = ({componentId, meta}) => {
 	const groups = ([
 		{
-			id: navigationItems.GENERAL + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL + '|' + componentId,
 			name: i18n('General'),
 			disabled: false,
 			meta
 		}, {
-			id: navigationItems.COMPUTE + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE + '|' + componentId,
 			name: i18n('Compute'),
 			disabled: false,
 			meta
 		}, {
-			id: navigationItems.LOAD_BALANCING + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING + '|' + componentId,
 			name: i18n('High Availability & Load Balancing'),
 			disabled: false,
 			meta
 		}, {
-			id: navigationItems.NETWORKS + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK + '|' + componentId,
 			name: i18n('Networks'),
 			disabled: false,
 			meta
 		}, {
-			id: navigationItems.STORAGE + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE + '|' + componentId,
 			name: i18n('Storage'),
 			disabled: false,
 			meta
 		}, {
-			id: navigationItems.IMAGES + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES + '|' + componentId,
 			name: i18n('Images'),
 			disabled: false,
 			meta
 		}, {
-			id: navigationItems.PROCESS_DETAILS + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES + '|' + componentId,
 			name: i18n('Process Details'),
 			disabled: false,
 			meta
 		}, {
-			id: navigationItems.MONITORING + '|' + componentId,
+			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING + '|' + componentId,
 			name: i18n('Monitoring'),
 			disabled: false,
 			meta
@@ -85,67 +90,67 @@ const buildComponentNavigationBarGroups = ({componentId, meta}) => {
 
 const buildNavigationBarProps = ({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}) => {
 	const {softwareProductEditor: {data: currentSoftwareProduct = {}}} = softwareProduct;
-	const {id, name, onboardingMethod, onboardingOrigin} = currentSoftwareProduct;
+	const {id, name, onboardingMethod, candidateOnboardingOrigin} = currentSoftwareProduct;
 	const groups = [{
 		id: id,
 		name: name,
 		items: [
 			{
-				id: navigationItems.VENDOR_SOFTWARE_PRODUCT,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
 				name: i18n('Overview'),
 				disabled: false,
 				meta
 			}, {
-				id: navigationItems.GENERAL,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
 				name: i18n('General'),
 				disabled: false,
 				meta
 			},
 			{
-				id: navigationItems.DEPLOYMENT_FLAVORS,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT,
 				name: i18n('Deployment Flavors'),
 				disabled: false,
 				hidden: onboardingMethod !== onboardingMethodTypes.MANUAL,
 				meta
 			}, {
-				id: navigationItems.PROCESS_DETAILS,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES,
 				name: i18n('Process Details'),
 				disabled: false,
 				meta
 			}, {
-				id: navigationItems.NETWORKS,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS,
 				name: i18n('Networks'),
 				disabled: false,
 				meta
 			}, {
-				id: navigationItems.ATTACHMENTS,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS,
 				name: i18n('Attachments'),
 				disabled: false,
-				hidden: onboardingOrigin === onboardingOriginTypes.NONE,
+				hidden: candidateOnboardingOrigin === onboardingOriginTypes.NONE,
 				meta
 			}, {
-				id: navigationItems.ACTIVITY_LOG,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG,
 				name: i18n('Activity Log'),
 				disabled: false,
 				meta
 			}, {
-				id: navigationItems.DEPENDENCIES,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES,
 				name: i18n('Component Dependencies'),
 				hidden: componentsList.length <= 1,
 				disabled: false,
 				meta
 			}, {
-				id: navigationItems.COMPONENTS,
+				id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS,
 				name: i18n('Components'),
 				hidden: componentsList.length <= 0,
 				meta,
-				expanded: mapOfExpandedIds[navigationItems.COMPONENTS] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+				expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
 				items: [
 					...componentsList.map(({id, displayName}) => ({
-						id: navigationItems.COMPONENTS + '|' + id,
+						id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id,
 						name: displayName,
 						meta,
-						expanded: mapOfExpandedIds[navigationItems.COMPONENTS + '|' + id] === true  && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+						expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id] === true  && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
 						items: buildComponentNavigationBarGroups({componentId: id, meta})
 					}))
 				]
@@ -158,24 +163,28 @@ const buildNavigationBarProps = ({softwareProduct, meta, screen, componentId, co
 	};
 };
 
-const buildVersionControllerProps = (softwareProduct) => {
-	const {softwareProductEditor} = softwareProduct;
-	const {data: currentSoftwareProduct = {}, isValidityData = true} = softwareProductEditor;
-
-	const {version, viewableVersions, status: currentStatus, lockingUser} = currentSoftwareProduct;
-	const {status, isCheckedOut} = VersionControllerUtils.getCheckOutStatusKindByUserID(currentStatus, lockingUser);
+const buildVersionControllerProps = ({softwareProduct, versions, currentVersion, permissions, userInfo, usersList, itemPermission, isReadOnlyMode}) => {
+	const {softwareProductEditor = {data: {}}} = softwareProduct;
+	const {isValidityData = true, data: {name, onboardingMethod}} = softwareProductEditor;
 
 	return {
-		status, isCheckedOut, version, viewableVersions,
-		isFormDataValid: isValidityData
+		version: currentVersion,
+		viewableVersions: versions,
+		isFormDataValid: isValidityData,
+		permissions,
+		itemName: name,
+		itemPermission,
+		isReadOnlyMode,
+		userInfo,
+		usersList,
+		isManual: onboardingMethod === onboardingMethodType.MANUAL
 	};
 };
 
-function buildMeta({softwareProduct, componentId, softwareProductDependencies}) {
+function buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode}) {
 	const {softwareProductEditor, softwareProductComponents, softwareProductQuestionnaire, softwareProductAttachments} = softwareProduct;
 	const {data: currentSoftwareProduct = {}} = softwareProductEditor;
-	const {version, onboardingOrigin} = currentSoftwareProduct;
-	const isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
+	const {version, onboardingOrigin, candidateOnboardingOrigin} = currentSoftwareProduct;
 	const {qdata} = softwareProductQuestionnaire;
 	const {heatSetup, heatSetupCache} = softwareProductAttachments;
 	let currentComponentMeta = {};
@@ -183,35 +192,52 @@ function buildMeta({softwareProduct, componentId, softwareProductDependencies})
 		const {componentEditor: {data: componentData = {} , qdata: componentQdata}} = softwareProductComponents;
 		currentComponentMeta = {componentData, componentQdata};
 	}
-	const meta = {softwareProduct: currentSoftwareProduct, qdata, version, onboardingOrigin, heatSetup, heatSetupCache, isReadOnlyMode, currentComponentMeta, softwareProductDependencies};
+	const meta = {softwareProduct: currentSoftwareProduct, qdata, version, onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache,
+		isReadOnlyMode, currentComponentMeta, softwareProductDependencies};
 	return meta;
 }
 
-const mapStateToProps = ({softwareProduct}, {currentScreen: {screen, props: {componentId}}}) => {
+const mapStateToProps = (
+	{
+		softwareProduct,
+		users: {usersList, userInfo},
+		versionsPage: {versionsList: {versions}, permissions}
+	},
+	{
+		currentScreen: {screen, itemPermission, props: {version: currentVersion, componentId, isReadOnlyMode}}
+	}
+) => {
 	const {softwareProductEditor, softwareProductComponents, softwareProductDependencies} = softwareProduct;
 	const {mapOfExpandedIds = []} = softwareProductEditor;
 	const {componentsList = []} = softwareProductComponents;
 
-	const meta = buildMeta({softwareProduct, componentId, softwareProductDependencies});
+	const meta = buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode});
 	return {
-		versionControllerProps: buildVersionControllerProps(softwareProduct),
+		versionControllerProps: buildVersionControllerProps({
+			softwareProduct,
+			versions,
+			currentVersion,
+			userInfo,
+			usersList,
+			permissions,
+			itemPermission: {...itemPermission, isDirty: true},
+			isReadOnlyMode
+		}),
 		navigationBarProps: buildNavigationBarProps({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}),
 		meta
 	};
 };
 
-const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, componentId,
-		meta: {isReadOnlyMode, softwareProduct, version, qdata, softwareProductDependencies,
+const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, version, componentId,
+		meta: {isReadOnlyMode, softwareProduct, qdata,
 		currentComponentMeta: {componentData, componentQdata}}}) => {
 	let promise;
 	if (isReadOnlyMode) {
 		promise = Promise.resolve();
 	} else {
 		switch(screen) {
-			case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-				promise = SoftwareProductDependenciesActionHelper.saveDependencies(dispatch,{softwareProductId, version, dependenciesList: softwareProductDependencies});
 			case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-				promise = SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata});
+				promise = SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, version, qdata});
 				break;
 			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
 				promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
@@ -233,96 +259,65 @@ const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, componentI
 };
 
 
-const onComponentNavigate = (dispatch, {id, softwareProductId, version, currentComponentId}) => {
-	const [nextScreen, nextComponentId] = id.split('|');
-	switch(nextScreen) {
-		case navigationItems.COMPONENTS:
-			if(nextComponentId === currentComponentId) {
-				OnboardingActionHelper.navigateToSoftwareProductComponents(dispatch, {softwareProductId});
-			} else {
-				OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			}
-			break;
-		case navigationItems.GENERAL:
-			OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-		case navigationItems.COMPUTE:
-			OnboardingActionHelper.navigateToComponentCompute(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-		case navigationItems.LOAD_BALANCING:
-			OnboardingActionHelper.navigateToComponentLoadBalancing(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-		case navigationItems.NETWORKS:
-			OnboardingActionHelper.navigateToComponentNetwork(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-		case navigationItems.IMAGES:
-			OnboardingActionHelper.navigateToComponentImages(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-		case navigationItems.STORAGE:
-			OnboardingActionHelper.navigateToComponentStorage(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-		case navigationItems.PROCESS_DETAILS:
-			OnboardingActionHelper.navigateToSoftwareProductComponentProcesses(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-		case navigationItems.MONITORING:
-			OnboardingActionHelper.navigateToSoftwareProductComponentMonitoring(dispatch, {softwareProductId, componentId: nextComponentId, version});
-			break;
-	}
-};
-
-const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwareProductId, componentId: currentComponentId}}}) => {
+const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwareProductId, licenseModelId, version, componentId: currentComponentId}}}) => {
 
 	const props = {
-		onVersionSwitching: (version, meta) => {
-			const screenToLoad = !currentComponentId ? screen : enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS;
-			SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version});
-			props.onNavigate({id: getActiveNavigationId(screenToLoad), meta, version});
+		onVersionSwitching: (versionToSwitch, meta) => {
+			ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
+				props: {softwareProductId: meta.softwareProduct.id, version: versionToSwitch}});
+		},
+		onOpenPermissions: ({users}) => {
+			return PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users});
+		},
+		onOpenRevisionsModal: () => {
+			return RevisionsActionHelper.openRevisionsView(dispatch, {itemId: softwareProductId, version: version, itemType: screenTypes.SOFTWARE_PRODUCT});
+		},
+		onOpenCommentCommitModal: ({onCommit, title}) => dispatch({
+			type: modalActionTypes.GLOBAL_MODAL_SHOW,
+			data: {
+				modalComponentName: modalContentMapper.COMMIT_COMMENT,
+				modalComponentProps: {
+					onCommit,
+					type: CommitModalType.COMMIT
+				},
+				title
+			}
+		}),
+		onMoreVersionsClick: ({itemName, users}) => {
+			ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
+				props: {softwareProductId, softwareProduct: {name: itemName, vendorId: licenseModelId}, usersList: users}});
+
 		},
 		onToggle: (groups, itemIdToExpand) => groups.map(({items}) => SoftwareProductActionHelper.toggleNavigationItems(dispatch, {items, itemIdToExpand})),
-		onNavigate: ({id, meta, version}) => {
-			let {onboardingOrigin, heatSetup, heatSetupCache} = meta;
+		onNavigate: ({id, meta, newVersion}) => {
+			let navigationVersion = newVersion || version;
+			let {onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache} = meta;
 			let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS ?
 								HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
 								Promise.resolve();
-			let preNavigate = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, softwareProductId, componentId: currentComponentId}) : Promise.resolve();
+			let preNavigate = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve();
 			version = version || (meta ? meta.version : undefined);
 			Promise.all([preNavigate, heatSetupPopupPromise]).then(() => {
-				switch(id) {
-					case navigationItems.VENDOR_SOFTWARE_PRODUCT:
-						OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version});
-						break;
-					case navigationItems.GENERAL:
-						OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, {softwareProductId, version});
-						break;
-					case navigationItems.DEPLOYMENT_FLAVORS:
-						OnboardingActionHelper.navigateToSoftwareProductDeployment(dispatch, {softwareProductId, version});
-						break;
-					case navigationItems.PROCESS_DETAILS:
-						OnboardingActionHelper.navigateToSoftwareProductProcesses(dispatch, {softwareProductId, version});
-						break;
-					case navigationItems.NETWORKS:
-						OnboardingActionHelper.navigateToSoftwareProductNetworks(dispatch, {softwareProductId, version});
-						break;
-					case navigationItems.DEPENDENCIES:
-						OnboardingActionHelper.navigateToSoftwareProductDependencies(dispatch, {softwareProductId, version});
-						break;
-					case navigationItems.ATTACHMENTS:
-						if(onboardingOrigin === onboardingOriginTypes.ZIP) {
-							OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(dispatch, {softwareProductId, version});
+				let [nextScreen, nextComponentId] = id.split('|');
+				if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS && nextComponentId && nextComponentId === currentComponentId) {
+					ScreensHelper.loadScreen(dispatch, {
+						screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
+						props: {softwareProductId, version: navigationVersion}
+					});
+				}
+				else {
+					if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS) {
+						if(onboardingOrigin === onboardingOriginTypes.ZIP || candidateOnboardingOrigin === onboardingOriginTypes.ZIP) {
+							nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
 						}
 						else if(onboardingOrigin === onboardingOriginTypes.CSAR) {
-							OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(dispatch, {softwareProductId, version});
+							nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
 						}
-						break;
-					case navigationItems.COMPONENTS:
-						OnboardingActionHelper.navigateToSoftwareProductComponents(dispatch, {softwareProductId, version});
-						break;
-					case navigationItems.ACTIVITY_LOG:
-						OnboardingActionHelper.navigateToSoftwareProductActivityLog(dispatch, {softwareProductId, version});
-						break;
-					default:
-						onComponentNavigate(dispatch, {id, softwareProductId, version, screen, currentComponentId});
-						break;
+					}
+					ScreensHelper.loadScreen(dispatch, {
+						screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
+						props: {softwareProductId, version: navigationVersion, componentId: nextComponentId}
+					});
 				}
 			}).catch((e) => {console.error(e);});
 		}
@@ -342,25 +337,33 @@ const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwarePr
 			props.onSave = () => Promise.resolve();
 			break;
 		default:
-			props.onSave = ({softwareProduct, qdata}) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata});
+			props.onSave = ({softwareProduct, qdata}) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version});
 			break;
 	}
 
 
-	props.onVersionControllerAction = (action, version, meta) => {
+	props.onVersionControllerAction = (action, version, comment, meta) => {
 		let {heatSetup, heatSetupCache} = meta;
-		let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS && action === versionControllerActions.CHECK_IN ?
+		let autoSavePromise = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve();
+		let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS && action === versionControllerActions.COMMIT ?
 								HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
 								Promise.resolve();
-		heatSetupPopupPromise.then(() => {
-			return SoftwareProductActionHelper.performVCAction(dispatch, {softwareProductId, action, version}).then(({newVersion}) => {
-				//props.onNavigate({id: getActiveNavigationId(screen, currentComponentId), version});
-				if(screen === enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG) {
-					OnboardingActionHelper.navigateToSoftwareProductActivityLog(dispatch, {softwareProductId, version: newVersion});
+		Promise.all([autoSavePromise, heatSetupPopupPromise]).then(() => {
+			return SoftwareProductActionHelper.performVCAction(dispatch, {softwareProductId, action, version, comment, meta}).then(updatedVersion => {
+				const inMerge = updatedVersion && updatedVersion.state && updatedVersion.state.synchronizationState === SyncStates.MERGE;
+				if((action === versionControllerActions.SYNC && !inMerge) ||
+					 ((action === versionControllerActions.COMMIT || action === versionControllerActions.SYNC) && updatedVersion.status === catalogItemStatuses.CERTIFIED)) {
+					ScreensHelper.loadLandingScreen(dispatch, {previousScreenName: screen, props: {softwareProductId, version: updatedVersion}});
+
+				} else {
+					ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.SOFTWARE_PRODUCT,
+						props: {softwareProductId, version: updatedVersion, componentId: currentComponentId}});
 				}
 			});
 		}).catch((e) => {console.error(e);});
 	};
+
+	props.onManagePermissions = () => PermissionsActionHelper.openPermissonsManager(dispatch, {itemId: softwareProductId, askForRights: false});
 	return props;
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index db7afd27d9..735c6d7f8b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -31,8 +31,26 @@ import {actionTypes as componentActionTypes} from './components/SoftwareProductC
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {statusEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
+import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
+import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
+import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
 import {actionTypes as commonActionTypes} from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
+import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
+import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import getValue from 'nfvo-utils/getValue.js';
+
+function getLicensingData(licensingData = {}) {
+	const {licenseAgreement, featureGroups} = licensingData;
+	const newlicenseAgreement = getValue(licenseAgreement);
+	const newfeatureGroups = getValue(featureGroups);
+	return newlicenseAgreement ? {
+		licenseAgreement: newlicenseAgreement,
+		featureGroups: newfeatureGroups
+	} : undefined;
+};
 
 function baseUrl() {
 	const restPrefix = Configuration.get('restPrefix');
@@ -48,20 +66,17 @@ function uploadFile(vspId, formData, version) {
 
 }
 
-function putSoftwareProduct(softwareProduct) {
-	return RestAPIUtil.put(`${baseUrl()}${softwareProduct.id}/versions/${softwareProduct.version.id}`, {
+function putSoftwareProduct({softwareProduct, version}) {
+	return RestAPIUtil.put(`${baseUrl()}${softwareProduct.id}/versions/${version.id}`, {
 		name: softwareProduct.name,
 		description: softwareProduct.description,
 		category: softwareProduct.category,
 		subCategory: softwareProduct.subCategory,
 		vendorId: softwareProduct.vendorId,
 		vendorName: softwareProduct.vendorName,
-		licensingVersion: softwareProduct.licensingVersion && softwareProduct.licensingVersion.id ? softwareProduct.licensingVersion : {} ,
+		licensingVersion: softwareProduct.licensingVersion ? softwareProduct.licensingVersion : undefined,
 		icon: softwareProduct.icon,
-		licensingData: softwareProduct.licensingData,
-		onboardingMethod: softwareProduct.onboardingMethod,
-		networkPackageName: softwareProduct.networkPackageName,
-		onboardingOrigin: softwareProduct.onboardingOrigin
+		licensingData: getLicensingData(softwareProduct.licensingData)
 	});
 }
 
@@ -74,11 +89,11 @@ function putSoftwareProductAction(id, action, version) {
 }
 
 function fetchSoftwareProductList() {
-	return RestAPIUtil.fetch(baseUrl());
+	return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=Draft`);
 }
 
 function fetchFinalizedSoftwareProductList() {
-	return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=Final`);
+	return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=Certified`);
 }
 
 function fetchSoftwareProduct(vspId, version) {
@@ -138,10 +153,12 @@ function fetchSoftwareProductCategories(dispatch) {
 }
 
 function loadLicensingData(dispatch, {licenseModelId, licensingVersion}) {
-	return Promise.all([
-		LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version: licensingVersion}),
-		FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version: licensingVersion})
-	]);
+	return ItemsHelper.fetchVersion({itemId: licenseModelId, versionId: licensingVersion}).then(() => {
+		return Promise.all([
+			LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version: {id: licensingVersion}}),
+			FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version: {id: licensingVersion}})
+		]);
+	});
 }
 
 function getExpandedItemsId(items, itemIdToToggle) {
@@ -203,15 +220,7 @@ function migrateSoftwareProduct(vspId, version) {
 	return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/heal`);
 }
 
-function adjustMinorVersion(version, value) {
-	let ar = version.split('.');
-	return ar[0] + '.' + (parseInt(ar[1]) + value);
-}
 
-function adjustMajorVersion(version, value) {
-	let ar = version.split('.');
-	return (parseInt(ar[0]) + value) + '.0';
-}
 
 const SoftwareProductActionHelper = {
 
@@ -229,7 +238,10 @@ const SoftwareProductActionHelper = {
 
 	loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion}) {
 		SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
-		return loadLicensingData(dispatch, {licenseModelId, licensingVersion});
+		if (licensingVersion) {
+			return loadLicensingData(dispatch, {licenseModelId, licensingVersion});
+		}
+		return Promise.resolve();
 	},
 
 	fetchSoftwareProductList(dispatch) {
@@ -246,6 +258,14 @@ const SoftwareProductActionHelper = {
 		}));
 	},
 
+	loadLicensingVersionsList(dispatch, {licenseModelId}){
+		return ItemsHelper.fetchVersions({itemId: licenseModelId}).then(response => {
+			dispatch({
+				type: actionTypes.LOAD_LICENSING_VERSIONS_LIST,
+				licensingVersionsList: response.results
+			});
+		});
+	},
 	updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}){
 		return updateSoftwareProductHeatCandidate(softwareProductId, heatCandidate, version);
 	},
@@ -276,10 +296,16 @@ const SoftwareProductActionHelper = {
 					});
 					switch(response.onboardingOrigin){
 						case onboardingOriginTypes.ZIP:
-							OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(dispatch, {softwareProductId, version});
+							ScreensHelper.loadScreen(dispatch, {
+								screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT,
+								props: {softwareProductId, version}
+							});
 							break;
 						case onboardingOriginTypes.CSAR:
-							OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(dispatch, {softwareProductId, version});
+							ScreensHelper.loadScreen(dispatch, {
+								screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION, screenType: screenTypes.SOFTWARE_PRODUCT,
+								props: {softwareProductId, version}
+							});
 							break;
 					}
 				}
@@ -292,7 +318,7 @@ const SoftwareProductActionHelper = {
 					type: modalActionTypes.GLOBAL_MODAL_ERROR,
 					data: {
 						title: failedNotificationTitle,
-						msg: error.message
+						msg: error.message || (error.responseJSON && error.responseJSON.message)
 					}
 				});
 			});
@@ -311,9 +337,9 @@ const SoftwareProductActionHelper = {
 			type: actionTypes.softwareProductEditor.UPLOAD_CONFIRMATION
 		});
 	},
-	updateSoftwareProduct(dispatch, {softwareProduct, qdata}) {
+	updateSoftwareProduct(dispatch, {softwareProduct, version, qdata}) {
 		return Promise.all([
-			SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {softwareProduct}).then(
+			SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {softwareProduct, version}).then(
 				() => dispatch({
 					type: actionTypes.SOFTWARE_PRODUCT_LIST_EDIT,
 					payload: {softwareProduct}
@@ -322,13 +348,13 @@ const SoftwareProductActionHelper = {
 			SoftwareProductActionHelper.updateSoftwareProductQuestionnaire(dispatch, {
 				softwareProductId: softwareProduct.id,
 				qdata,
-				version: softwareProduct.version
+				version
 			})
 		]);
 	},
 
-	updateSoftwareProductData(dispatch, {softwareProduct}) {
-		return putSoftwareProduct(softwareProduct);
+	updateSoftwareProductData(dispatch, {softwareProduct, version}) {
+		return putSoftwareProduct({softwareProduct, version});
 	},
 
 	updateSoftwareProductQuestionnaire(dispatch, {softwareProductId, qdata, version}) {
@@ -350,19 +376,18 @@ const SoftwareProductActionHelper = {
 	},
 
 	softwareProductEditorVendorChanged(dispatch, {deltaData, formName}) {
-		if (deltaData.licensingVersion.id){
-			let p = Promise.all([
-				LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
-					licenseModelId: deltaData.vendorId,
-					version: {id: deltaData.licensingVersion.id}
-				}),
-				FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
-					licenseModelId: deltaData.vendorId,
-					version: {id: deltaData.licensingVersion.id}
-				})
-			]);
+		if (deltaData.licensingVersion){
+			return loadLicensingData(dispatch, {licenseModelId: deltaData.vendorId, licensingVersion: deltaData.licensingVersion}).then(() => {
+				ValidationHelper.dataChanged(dispatch, {deltaData, formName});
+				return Promise.resolve();
+			});
+		} else if (deltaData.vendorId) {
 			ValidationHelper.dataChanged(dispatch, {deltaData, formName});
-			return p;
+			return SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, {
+				licenseModelId: deltaData.vendorId
+			}).then( () =>
+				OnboardingActionHelper.forceBreadCrumbsUpdate(dispatch)
+			);
 		} else {
 			ValidationHelper.dataChanged(dispatch, {deltaData, formName});
 
@@ -386,13 +411,6 @@ const SoftwareProductActionHelper = {
 		});
 	},
 
-	addSoftwareProduct(dispatch, {softwareProduct}) {
-		dispatch({
-			type: actionTypes.ADD_SOFTWARE_PRODUCT,
-			softwareProduct
-		});
-	},
-
 	fetchSoftwareProduct(dispatch, {softwareProductId, version}) {
 		return Promise.all([
 			fetchSoftwareProduct(softwareProductId, version).then(response => {
@@ -409,10 +427,33 @@ const SoftwareProductActionHelper = {
 		]);
 	},
 
-	performVCAction(dispatch, {softwareProductId, action, version}) {
-		if (action === VersionControllerActionsEnum.SUBMIT) {
-			return putSoftwareProductAction(softwareProductId, action, version).then(() => {
-				return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.CREATE_PACKAGE, version).then(() => {
+	manageSubmitAction(dispatch, {softwareProductId, version, isDirty}) {
+		if (isDirty) {
+			const onCommit = comment => {
+				return this.performVCAction(dispatch, {softwareProductId, action: VersionControllerActionsEnum.COMMIT, version, comment}).then(() => {
+					return this.performSubmitAction(dispatch, {softwareProductId, version});
+				});
+			};
+			dispatch({
+				type: modalActionTypes.GLOBAL_MODAL_SHOW,
+				data: {
+					modalComponentName: modalContentMapper.COMMIT_COMMENT,
+					modalComponentProps: {
+						onCommit,
+						type: CommitModalType.COMMIT_SUBMIT
+					},
+					title: i18n('Commit & Submit')
+				}
+			});
+			return Promise.resolve(version);
+		}
+		return this.performSubmitAction(dispatch, {softwareProductId, version});
+	},
+
+	performSubmitAction(dispatch, {softwareProductId, version}) {
+		return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.SUBMIT, version).then(() => {
+			return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.CREATE_PACKAGE, version).then(() => {
+				return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id}).then(updatedVersion => {
 					dispatch({
 						type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
 						data: {
@@ -422,12 +463,13 @@ const SoftwareProductActionHelper = {
 							timeout: 2000
 						}
 					});
-					const newVersionId = adjustMajorVersion(version.label, 1);
-					OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId});
-					SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version: {id: newVersionId}});
-					return Promise.resolve({newVersion: {id: newVersionId}});
+					versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
+					return Promise.resolve(updatedVersion);
 				});
-			}, error => dispatch({
+			});
+		}, error =>
+		{
+			dispatch({
 				type: modalActionTypes.GLOBAL_MODAL_ERROR,
 				data: {
 					modalComponentName: modalContentMapper.SUMBIT_ERROR_RESPONSE,
@@ -435,36 +477,57 @@ const SoftwareProductActionHelper = {
 					modalComponentProps: {
 						validationResponse: error.responseJSON
 					},
-					cancelButtonText: i18n('Ok')
+					cancelButtonText: i18n('OK')
 				}
-			}));
-		}
-		else {
-			return putSoftwareProductAction(softwareProductId, action, version).then(() => {
-				let newVersionId = version.id;
-				/*
-				  TODO Temorary switch to change version label
-				*/
-				switch(action) {
-					case VersionControllerActionsEnum.CHECK_OUT:
-						newVersionId = adjustMinorVersion(version.label, 1);
-						break;
-					case VersionControllerActionsEnum.UNDO_CHECK_OUT:
-						newVersionId = adjustMinorVersion(version.label, -1);
-						break;
-				}
-				OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId});
-				SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version:{id: newVersionId}});
-				return Promise.resolve({newVersion: {id: newVersionId}});
 			});
-		}
+			return Promise.reject(error.responseJSON);
+		});
 	},
 
-	switchVersion(dispatch, {softwareProductId, licenseModelId, version}) {
-		OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {
-			softwareProductId,
-			licenseModelId,
-			version
+	performVCAction(dispatch, {softwareProductId, action, version, comment}) {
+		return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({inMerge, isDirty, updatedVersion}) => {
+			if (updatedVersion.status === catalogItemStatuses.CERTIFIED &&
+					 (action === VersionControllerActionsEnum.COMMIT || action === VersionControllerActionsEnum.SYNC)) {
+				versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
+				dispatch({
+					type: modalActionTypes.GLOBAL_MODAL_WARNING,
+					data: {
+						title: i18n('Commit error'),
+						msg: i18n('Item version already Certified'),
+						cancelButtonText: i18n('Cancel')
+					}
+				});
+				return Promise.resolve(updatedVersion);
+			}
+			if (!inMerge) {
+				if (action === VersionControllerActionsEnum.SUBMIT) {
+					return this.manageSubmitAction(dispatch, {softwareProductId, version, isDirty});
+				}
+				else {
+					let isCallActionValid = action !== VersionControllerActionsEnum.COMMIT || isDirty;
+					if(isCallActionValid) {
+						return 	ItemsHelper.performVCAction({itemId: softwareProductId, action, version, comment}).then(() => {
+							versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: softwareProductId});
+							if (action === VersionControllerActionsEnum.SYNC) {
+								return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({updatedVersion}) => {
+									return Promise.resolve(updatedVersion);
+								});
+							} else {
+								return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id});
+							}
+						});
+					}
+					else {
+						dispatch({
+							type: modalActionTypes.GLOBAL_MODAL_ERROR,
+							data: {
+								title: i18n('Commit Failed'),
+								msg: i18n('There is nothing to commit')
+							}
+						});
+					}
+				}
+			}
 		});
 	},
 
@@ -477,7 +540,7 @@ const SoftwareProductActionHelper = {
 	},
 
 	/** for the next verision */
-	addComponent(dispatch, {softwareProductId, modalClassName}) {
+	addComponent(dispatch, {softwareProductId, modalClassName, version}) {
 		SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch);
 		dispatch({
 			type: componentActionTypes.COMPONENT_CREATE_OPEN
@@ -486,7 +549,7 @@ const SoftwareProductActionHelper = {
 			type: modalActionTypes.GLOBAL_MODAL_SHOW,
 			data: {
 				modalComponentName: modalContentMapper.COMPONENT_CREATION,
-				modalComponentProps: {softwareProductId},
+				modalComponentProps: {softwareProductId, version},
 				modalClassName,
 				title: 'Create Virtual Function Component'
 			}
@@ -494,12 +557,12 @@ const SoftwareProductActionHelper = {
 	},
 
 	migrateSoftwareProduct(dispatch, {softwareProduct}) {
-		let {licenseModelId, licensingVersion, id: softwareProductId, version, status} = softwareProduct;
-		const  newVer = status === statusEnum.CHECK_IN_STATUS || status === statusEnum.SUBMIT_STATUS ?
-			adjustMinorVersion(version.id, 1) : version.id;
-		migrateSoftwareProduct(softwareProductId, version)
-			.then(() =>OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch,
-				{softwareProductId, version: {id: newVer, label: newVer}, licenseModelId, licensingVersion}));
+		let {id: softwareProductId, version} = softwareProduct;
+		const  newVer = version.id;
+		migrateSoftwareProduct(softwareProductId, version).then(() => ScreensHelper.loadScreen(dispatch, {
+			screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
+			props: {softwareProductId, version: {id: newVer, label: newVer}}
+		}));
 	}
 
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
index 2c094ac36a..7df46589c3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
@@ -14,7 +14,6 @@
  * permissions and limitations under the License.
  */
 import keyMirror from 'nfvo-utils/KeyMirror.js';
-import {enums} from 'sdc-app/onboarding/OnboardingConstants.js';
 
 export const actionTypes = keyMirror({
 	SOFTWARE_PRODUCT_LOADED: null,
@@ -23,7 +22,7 @@ export const actionTypes = keyMirror({
 	SOFTWARE_PRODUCT_LIST_EDIT: null,
 	SOFTWARE_PRODUCT_CATEGORIES_LOADED: null,
 	SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE: null,
-	ADD_SOFTWARE_PRODUCT: null,
+	LOAD_LICENSING_VERSIONS_LIST: null,
 	TOGGLE_NAVIGATION_ITEM: null,
 
 	softwareProductEditor: {
@@ -34,23 +33,7 @@ export const actionTypes = keyMirror({
 	}
 });
 
-export const navigationItems = keyMirror({
-	VENDOR_SOFTWARE_PRODUCT: 'vendor-software-product',
-	GENERAL: 'general',
-	PROCESS_DETAILS: 'process-details',
-	DEPLOYMENT_FLAVORS: 'deployment-flavor',
-	NETWORKS: 'networks',
-	IMAGES: 'images',
-	ATTACHMENTS: 'attachments',
-	ACTIVITY_LOG: 'activity-log',
-	COMPONENTS: 'components',
-	DEPENDENCIES: 'dependencies',
 
-	COMPUTE: 'compute',
-	LOAD_BALANCING: 'load-balancing',
-	STORAGE: 'storage',
-	MONITORING: 'monitoring'
-});
 
 export const onboardingMethod = {
 	MANUAL: 'Manual',
@@ -69,22 +52,3 @@ export const forms = keyMirror({
 
 export const PRODUCT_QUESTIONNAIRE = 'product';
 
-export const mapScreenToNavigationItem = {
-	[enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]: navigationItems.VENDOR_SOFTWARE_PRODUCT,
-	[enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]: navigationItems.GENERAL,
-	[enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]: navigationItems.ATTACHMENTS,
-	[enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]: navigationItems.PROCESS_DETAILS,
-	[enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]: navigationItems.DEPLOYMENT_FLAVORS,
-	[enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]: navigationItems.NETWORKS,
-	[enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]: navigationItems.ACTIVITY_LOG,
-	[enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]: navigationItems.DEPENDENCIES,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: navigationItems.COMPONENTS,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]: navigationItems.GENERAL,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]: navigationItems.COMPUTE,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]: navigationItems.LOAD_BALANCING,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]: navigationItems.NETWORKS,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]: navigationItems.IMAGES,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]: navigationItems.STORAGE,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]: navigationItems.PROCESS_DETAILS,
-	[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]: navigationItems.MONITORING,
-};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
index 2fde8c2216..31be338ff5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
@@ -22,8 +22,6 @@ export default (state = [], action) => {
 		case actionTypes.SOFTWARE_PRODUCT_LIST_EDIT:
 			const indexForEdit = state.findIndex(vsp => vsp.id === action.payload.softwareProduct.id);
 			return [...state.slice(0, indexForEdit), action.payload.softwareProduct, ...state.slice(indexForEdit + 1)];
-		case actionTypes.ADD_SOFTWARE_PRODUCT:
-			return [...state, action.softwareProduct];
 		default:
 			return state;
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
index f14c988866..234953ec3b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
@@ -20,13 +20,12 @@ import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/Soft
 import HeatSetupActionHelper from './setup/HeatSetupActionHelper.js';
 import SoftwareProductAttachmentsView from './SoftwareProductAttachmentsView.jsx';
 import {errorLevels} from 'sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js';
-import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
 import HeatSetup from './setup/HeatSetup.js';
 import {doesHeatDataExist} from './SoftwareProductAttachmentsUtils.js';
+import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
+import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
 import SoftwareProductAttachmentsActionHelper from './SoftwareProductAttachmentsActionHelper.js';
 
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
-
 export const mapStateToProps = (state) => {
 	let {
 		softwareProduct: {
@@ -46,8 +45,6 @@ export const mapStateToProps = (state) => {
 	}
 	let heatDataExist = doesHeatDataExist(heatSetup);
 
-	let isReadOnlyMode = currentSoftwareProduct && currentSoftwareProduct.version ?
-			VersionControllerUtils.isReadOnly(currentSoftwareProduct) : false;
 	let {version, onboardingOrigin} = currentSoftwareProduct;
 	return {
 		isValidationAvailable: unassigned.length === 0 && modules.length > 0,
@@ -56,17 +53,16 @@ export const mapStateToProps = (state) => {
 		heatDataExist,
 		goToOverview,
 		HeatSetupComponent: HeatSetup,
-		isReadOnlyMode,
 		version,
 		onboardingOrigin,
 		activeTab
 	};
 };
 
-export const mapActionsToProps = (dispatch, {softwareProductId}) => {
+export const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 	return {
-		onDownload: ({heatCandidate, isReadOnlyMode, version}) => SoftwareProductActionHelper.downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}),
-		onUpload: (formData, version) => dispatch({
+		onDownload: ({heatCandidate, isReadOnlyMode}) => SoftwareProductActionHelper.downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}),
+		onUpload: (formData) => dispatch({
 			type: modalActionTypes.GLOBAL_MODAL_WARNING,
 			data:{
 				msg: i18n('Upload will erase existing data. Do you want to continue?'),
@@ -79,15 +75,25 @@ export const mapActionsToProps = (dispatch, {softwareProductId}) => {
 				})
 			}
 		}),
-		onSave: (heatCandidate, version) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}),
-		onGoToOverview: ({version}) => {
-			OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version});
-		},
-		onProcessAndValidate: ({heatData, heatDataCache, isReadOnlyMode, version}) => {
+		onInvalidFileUpload: () => dispatch({
+			type: modalActionTypes.GLOBAL_MODAL_ERROR,
+			data: {
+				title: i18n('Upload Failed'),
+				confirmationButtonText: i18n('Continue'),
+				msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist')
+			}
+		}),
+		onSave: (heatCandidate) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}),
+		onGoToOverview: () => ScreensHelper.loadScreen(dispatch, {
+			screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
+			props: {softwareProductId, version}
+		}),
+		onProcessAndValidate: ({heatData, heatDataCache, isReadOnlyMode}) => {
 			return HeatSetupActionHelper.processAndValidateHeat(dispatch,
 				{softwareProductId, heatData, heatDataCache, isReadOnlyMode, version});
 		},
 		setActiveTab: ({activeTab}) => SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab})
+
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
index 8c59b2b1cc..a23015732b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
@@ -13,12 +13,12 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component, PropTypes} from 'react';
-import Tabs from 'react-bootstrap/lib/Tabs.js';
-import Tab from 'react-bootstrap/lib/Tab.js';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import accept from 'attr-accept';
+import {SVGIcon, Tab, Tabs} from 'sdc-ui/lib/react';
 import {tabsMapping} from './SoftwareProductAttachmentsConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import HeatValidation from './validation/HeatValidation.js';
 import {onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
@@ -27,7 +27,7 @@ class HeatScreenView extends Component {
 	static propTypes = {
 		isValidationAvailable: PropTypes.bool,
 		goToOverview: PropTypes.bool,
-		setActiveTab: PropTypes.function
+		setActiveTab: PropTypes.func
 	};
 
 	render() {
@@ -64,7 +64,7 @@ class HeatScreenView extends Component {
 						labelPosition='right'
 						color='secondary'
 						disabled={isReadOnlyMode}
-						onClick={evt => {this.refs.hiddenImportFileInput.click(evt);}}
+						onClick={isReadOnlyMode ? undefined : evt => this.refs.hiddenImportFileInput.click(evt)}
 						data-test-id='upload-heat'/>
 					<input
 						ref='hiddenImportFileInput'
@@ -73,8 +73,12 @@ class HeatScreenView extends Component {
 						accept='.zip, .csar'
 						onChange={evt => this.handleImport(evt)}/>
 				</div>
-				<Tabs id='attachments-tabs' activeKey={activeTab} onSelect={key => this.handleTabPress(key)}>
-					<Tab eventKey={tabsMapping.SETUP} title='Setup' disabled={onboardingOrigin === onboardingOriginTypes.CSAR}>
+			<Tabs
+				className='attachments-tabs'
+				type='header'
+				activeTab={activeTab}
+				onTabClick={key => this.handleTabPress(key)}>
+					<Tab tabId={tabsMapping.SETUP} title='Setup' disabled={onboardingOrigin === onboardingOriginTypes.CSAR}>
 						<HeatSetupComponent
 							heatDataExist={heatDataExist}
 							changeAttachmentsTab={tab => setActiveTab({activeTab: tab})}
@@ -83,7 +87,7 @@ class HeatScreenView extends Component {
 							isReadOnlyMode={isReadOnlyMode}
 							version={version}/>
 					</Tab>
-					<Tab eventKey={tabsMapping.VALIDATION} title='Validation' disabled={!isValidationAvailable}>
+					<Tab tabId={tabsMapping.VALIDATION} title='Validation' disabled={!isValidationAvailable}>
 						<HeatValidation {...other}/>
 					</Tab>
 				</Tabs>
@@ -107,9 +111,14 @@ class HeatScreenView extends Component {
 
 	handleImport(evt) {
 		evt.preventDefault();
+		let file = this.refs.hiddenImportFileInput.files[0];
+		if(! (file && file.size && accept(file, ['.zip', '.csar'])) ) {
+			this.props.onInvalidFileUpload();
+			return;
+		}
 		let {version} = this.props;
 		let formData = new FormData();
-		formData.append('upload', this.refs.hiddenImportFileInput.files[0]);
+		formData.append('upload', file);
 		this.refs.hiddenImportFileInput.value = '';
 		this.props.onUpload(formData, version);
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
index 2308527220..3fdaa9c591 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
@@ -13,7 +13,8 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Collapse from 'react-bootstrap/lib/Collapse.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
@@ -95,7 +96,7 @@ function HeatFileTreeHeader(props) {
 			<div className='tree-header-title' >
 				{/*<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''}  iconClassName='header-icon' />*/}
 				<span className={classNames({'tree-header-title-text' : true,
-					'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n(`${props.headerTitle} ${hasErrors ? '(Draft)' : ''}`)}</span>
+					'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n('{title} {hasErrors}', {title: props.headerTitle, hasErrors: hasErrors ? '(Draft)' : ''})}</span>
 			</div>
 			<ErrorsAndWarningsCount errorList={props.errorList} size='large' />
 		</div>);
@@ -199,7 +200,6 @@ class HeatMessageBoard extends Component {
 	}
 	renderError(error) {
 		let rand = Math.random() * (3000 - 1) + 1;
-		console.log(this.props.selectedNode );
 		return (
 			<div
 				key={error.name + error.errorMessage + error.parentName + rand}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
index 61aebdf293..f74b2fe2fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
@@ -1,62 +1,47 @@
 import {connect} from 'react-redux';
-import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import SoftwareProductComponentsList from './SoftwareProductComponentsList.js';
-import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js';
-import {onboardingMethod} from '../SoftwareProductConstants.js';
+import {onboardingMethod as onboardingMethodTypes} from '../SoftwareProductConstants.js';
 import ConfirmationModalConstants from 'nfvo-components/modal/GlobalModalConstants.js';
+import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
+import {screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import SoftwareProductComponentsView from './SoftwareProductComponentsListView.jsx';
+import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 
 const generateMessage = (name) => {
-	return i18n(`Are you sure you want to delete ${name}?`);
+	return i18n('Are you sure you want to delete {name}?', {name: name});
 };
 
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct}, softwareProductComponents} = softwareProduct;
+const mapStateToProps = ({softwareProduct, currentScreen: {props: {version}}}) => {
+	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct;
 	let {componentsList} = softwareProductComponents;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
-
+	let {onboardingMethod = onboardingMethodTypes.HEAT} = currentSoftwareProduct;
 	return {
 		currentSoftwareProduct,
-		isReadOnlyMode,
 		componentsList,
-		isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
-
+		isManual: onboardingMethod === onboardingMethodTypes.MANUAL,
+		version
 	};
 };
 
-class SoftwareProductComponentsView extends React.Component {
-	render() {
-		let {currentSoftwareProduct, isReadOnlyMode, componentsList, isManual, onDeleteComponent} = this.props;
-		return (
-			<SoftwareProductComponentsList
-				isReadOnlyMode={isReadOnlyMode}
-				componentsList={componentsList}
-				onDeleteComponent={onDeleteComponent}
-				isManual={isManual}
-				currentSoftwareProduct={currentSoftwareProduct}/>);
-	}
-
-}
-
 const mapActionToProps = (dispatch) => {
 	return {
-		onComponentSelect: ({id: softwareProductId, componentId, version}) => {
-			OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version });
-		},
-		onAddComponent: (softwareProductId) => SoftwareProductComponentsActionHelper.addComponent(dispatch, {softwareProductId}),
+		onComponentSelect: ({id: softwareProductId, componentId, version}) =>
+			ScreensHelper.loadScreen(dispatch, {
+				screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT,
+				props: {softwareProductId, version, componentId}
+			}),
+		onAddComponent: (softwareProductId, version) => SoftwareProductActionHelper.addComponent(dispatch, {softwareProductId, version, modalClassName: 'create-vfc-modal'}),
 		onDeleteComponent: (component, softwareProductId, version) => dispatch({
 			type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING,
 			data:{
 				msg: generateMessage(component.displayName),
-				onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch,
-					{
-						softwareProductId,
-						componentId: component.id,
-						version
-					})
+				onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch, {
+					softwareProductId,
+					componentId: component.id,
+					version
+				})
 			}
 		})
 	};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
index 8085c875f4..cf63ad79d0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
@@ -74,6 +74,7 @@ const SoftwareProductComponentsActionHelper = {
 				type: actionTypes.COMPONENTS_LIST_UPDATE,
 				componentsList: response.results
 			});
+			return response;
 		});
 	},
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js
deleted file mode 100644
index bd4c2fa884..0000000000
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js
+++ /dev/null
@@ -1,51 +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 {connect} from 'react-redux';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-
-import SoftwareProductComponentsListView from './SoftwareProductComponentsListView.jsx';
-import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
-import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js';
-import {actionTypes as globalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
-
-const generateMessage = (name) => {
-	return i18n(`Are you sure you want to delete ${name}?`);
-};
-
-
-const mapActionToProps = (dispatch) => {
-	return {
-		onComponentSelect: ({id: softwareProductId, componentId, version}) => {
-			OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version });
-		},
-		onAddComponent: (softwareProductId) => SoftwareProductActionHelper.addComponent(dispatch, {softwareProductId, modalClassName: 'create-vfc-modal'}),
-		onDeleteComponent: (component, softwareProductId, version) => dispatch({
-			type: globalModalActions.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: generateMessage(component.displayName),
-				onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch,
-					{
-						softwareProductId,
-						componentId: component.id,
-						version
-					})
-			}
-		})
-	};
-};
-
-export default connect(null, mapActionToProps, null, {withRef: true})(SoftwareProductComponentsListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
index 88a01becfc..0bf32df1a3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
@@ -14,17 +14,18 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
-const ComponentPropType = React.PropTypes.shape({
-	id: React.PropTypes.string,
-	name: React.PropTypes.string,
-	displayName: React.PropTypes.string,
-	description: React.PropTypes.string
+const ComponentPropType = PropTypes.shape({
+	id: PropTypes.string,
+	name: PropTypes.string,
+	displayName: PropTypes.string,
+	description: PropTypes.string
 });
 
 class SoftwareProductComponentsListView extends React.Component {
@@ -34,9 +35,9 @@ class SoftwareProductComponentsListView extends React.Component {
 	};
 
 	static propTypes = {
-		isReadOnlyMode: React.PropTypes.bool,
-		componentsList: React.PropTypes.arrayOf(ComponentPropType),
-		onComponentSelect: React.PropTypes.func
+		isReadOnlyMode: PropTypes.bool,
+		componentsList: PropTypes.arrayOf(ComponentPropType),
+		onComponentSelect: PropTypes.func
 	};
 
 	render() {
@@ -52,7 +53,7 @@ class SoftwareProductComponentsListView extends React.Component {
 
 	renderComponents() {
 		const {localFilter} = this.state;
-		const {isManual, onAddComponent, isReadOnlyMode, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props;
+		const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props;
 		return (
 			<ListEditorView
 				title={i18n('Virtual Function Components')}
@@ -61,7 +62,7 @@ class SoftwareProductComponentsListView extends React.Component {
 				onFilter={value => this.setState({localFilter: value})}
 				isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
 				plusButtonTitle={i18n('Add Component')}
-				onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId) : false}
+				onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId, version) : false}
 				twoColumns>
 				{this.filterList().map(component => this.renderComponentsListItem(component))}
 			</ListEditorView>
@@ -70,7 +71,7 @@ class SoftwareProductComponentsListView extends React.Component {
 
 	renderComponentsListItem(component) {
 		let {id: componentId, name, displayName, description = ''} = component;
-		let {currentSoftwareProduct: {id, version}, onComponentSelect} = this.props;
+		let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props;
 		return (
 			<ListEditorItemView
 				key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
index bb8df29b82..574828c9ef 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
@@ -16,24 +16,19 @@
 import {connect} from 'react-redux';
 import SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx';
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
 
-const mapStateToProps = ({softwareProduct, currentScreen: {props: {softwareProductId, componentId}}}) => {
+const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
 	let {componentEditor: {qdata, dataMap, qgenericFieldInfo}, computeFlavor: {computesList: computeFlavorsList}} = softwareProductComponents;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
 
 	return {
 		qdata,
 		dataMap,
 		qgenericFieldInfo,
-		isReadOnlyMode,
-		softwareProductId,
-		componentId,
 		computeFlavorsList,
 		isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL
 	};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
index dd524a35f3..55e5e2b30b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 import NumberOfVms from './computeComponents/NumberOfVms.jsx';
 import GuestOs from './computeComponents/GuestOs.jsx';
@@ -23,13 +24,13 @@ import Validator from 'nfvo-utils/Validator.js';
 class SoftwareProductComponentComputeView extends React.Component {
 
 	static propTypes = {
-		dataMap: React.PropTypes.object,
-		qgenericFieldInfo: React.PropTypes.object,
-		isReadOnlyMode: React.PropTypes.bool,
-		isManual: React.PropTypes.bool,
-		onQDataChanged: React.PropTypes.func.isRequired,
-		qValidateData: React.PropTypes.func.isRequired,
-		onSubmit: React.PropTypes.func.isRequired
+		dataMap: PropTypes.object,
+		qgenericFieldInfo: PropTypes.object,
+		isReadOnlyMode: PropTypes.bool,
+		isManual: PropTypes.bool,
+		onQDataChanged: PropTypes.func.isRequired,
+		qValidateData: PropTypes.func.isRequired,
+		onSubmit: PropTypes.func.isRequired
 	};
 
 	render() {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
index c72d42c11f..2b6d84f381 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
@@ -28,26 +29,26 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId, version})
 		onDeleteCompute: ({id, name}) => dispatch({
 			type: modalActionTypes.GLOBAL_MODAL_WARNING,
 			data:{
-				msg: i18n(`Are you sure you want to delete "${name}"?`),
+				msg: i18n('Are you sure you want to delete "{name}"?', {name: name}),
 				onConfirmed: () => ComputeFlavorActionHelper.deleteCompute(dispatch, {softwareProductId, componentId, computeId: id, version})
 			}
 		})
 	};
 };
 
-const computeItemPropType = React.PropTypes.shape({
-	id: React.PropTypes.string,
-	name: React.PropTypes.string,
-	description: React.PropTypes.string
+const computeItemPropType = PropTypes.shape({
+	id: PropTypes.string,
+	name: PropTypes.string,
+	description: PropTypes.string
 });
 
 class ComputeFlavors extends React.Component {
 
 	static propTypes = {
-		isReadOnlyMode: React.PropTypes.bool,
-		isManual: React.PropTypes.bool,
-		onAddComputeClick: React.PropTypes.func,
-		computeFlavorsList: React.PropTypes.arrayOf(computeItemPropType)
+		isReadOnlyMode: PropTypes.bool,
+		isManual: PropTypes.bool,
+		onAddComputeClick: PropTypes.func,
+		computeFlavorsList: PropTypes.arrayOf(computeItemPropType)
 	};
 
 	state = {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
index 16bf599834..8ae9961859 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
@@ -23,7 +23,7 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
 	return(
 		<div>
-			<GridSection title={i18n('Guest OS')} >
+			<GridSection title={i18n('Guest OS')} hasLastColSet>
 				<GridItem>
 					<div className='vertical-flex'>
 						<label key='label' className='control-label'>{i18n('OS Bit Size')}</label>
@@ -55,7 +55,7 @@ const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
 						errorText={qgenericFieldInfo['compute/guestOS/name'].errorText}
 						value={dataMap['compute/guestOS/name']} />
 				</GridItem>
-				<GridItem colSpan={2}>
+				<GridItem colSpan={2} lastColInRow>
 					<Input
 						data-test-id='guestOS-tools'
 						type='textarea'
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
index ddde4391d9..967c6f7aef 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
@@ -50,7 +51,7 @@ const NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData,
 };
 
 NumberOfVms.propTypes = {
-	minNumberOfVMsSelectedByUser: React.PropTypes.number
+	minNumberOfVMsSelectedByUser: PropTypes.number
 };
 
 export default NumberOfVms;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
index caec0702fd..a3ba5fbc4a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
@@ -16,15 +16,21 @@
 import {connect} from 'react-redux';
 import ComputeFlavorEditorView from './ComputeFlavorEditorView.jsx';
 import {COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
-export const mapStateToProps = ({softwareProduct: {softwareProductEditor, softwareProductComponents: {computeFlavor: {computeEditor = {}}}}}) => {
+export const mapStateToProps = ({
+	softwareProduct: {
+		softwareProductEditor,
+		softwareProductComponents: {computeFlavor: {computeEditor = {}}}
+	},
+	currentScreen: {
+		props: {isReadOnlyMode}
+	}
+}) => {
 	const {data: currentSoftwareProduct = {}} = softwareProductEditor;
-	const isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 	let {data , qdata, qgenericFieldInfo, dataMap, genericFieldInfo, formReady} = computeEditor;
 	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
index 8f8a504629..e542ce1fd1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
@@ -24,15 +25,15 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 class ComputeEditorView extends React.Component {
 
 	static propTypes = {
-		data: React.PropTypes.object,
-		qdata: React.PropTypes.object,
-		qschema: React.PropTypes.object,
-		isReadOnlyMode: React.PropTypes.bool,
-		isManual: React.PropTypes.bool,
-		onDataChanged: React.PropTypes.func.isRequired,
-		onQDataChanged: React.PropTypes.func.isRequired,
-		onSubmit: React.PropTypes.func.isRequired,
-		onCancel: React.PropTypes.func.isRequired
+		data: PropTypes.object,
+		qdata: PropTypes.object,
+		qschema: PropTypes.object,
+		isReadOnlyMode: PropTypes.bool,
+		isManual: PropTypes.bool,
+		onDataChanged: PropTypes.func.isRequired,
+		onQDataChanged: PropTypes.func.isRequired,
+		onSubmit: PropTypes.func.isRequired,
+		onCancel: PropTypes.func.isRequired
 	};
 
 	render() {
@@ -57,8 +58,8 @@ class ComputeEditorView extends React.Component {
 					onValidateForm={() => onValidateForm() }
 					className='component-questionnaire-validation-form'
 					submitButtonText={edittingComputeMode ? i18n('Save') : i18n('Create')}>
-					<GridSection>
-						<GridItem colSpan={edittingComputeMode ? 2 : 4}>
+					<GridSection hasLostColSet>
+						<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow={!edittingComputeMode}>
 							<Input
 								disabled={!isManual}
 								data-test-id='name'
@@ -70,7 +71,7 @@ class ComputeEditorView extends React.Component {
 								errorText={genericFieldInfo['name'].errorText}
 								isRequired/>
 							</GridItem>
-							<GridItem colSpan={edittingComputeMode ? 2 : 4}>
+							<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow>
 							<Input
 								data-test-id='description'
 								type='textarea'
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
index 8b30468362..54f22e0760 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
@@ -20,7 +20,7 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
 	return(
-		<GridSection title={i18n('VM Sizing')}>
+		<GridSection title={i18n('VM Sizing')} hasLastColSet>
 			<GridItem>
 				<Input
 					data-test-id='numOfCPUs'
@@ -51,7 +51,7 @@ const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
 					errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText}
 					value={dataMap['vmSizing/persistentStorageVolumeSize']} />
 			</GridItem>
-			<GridItem>
+			<GridItem lastColInRow>
 				<Input
 					data-test-id='ioOperationsPerSec'
 					type='number'
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
index e85b6b6504..9f59cd5b27 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
@@ -21,23 +21,22 @@ import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import {forms} from '../SoftwareProductComponentsConstants.js';
 
 export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}, softwareProductEditor: {data: {version}}} = softwareProduct;
+	let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}} = softwareProduct;
 	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 	return {
 		data,
 		genericFieldInfo,
 		formReady,
-		isFormValid,
-		version
+		isFormValid
 	};
 };
 
 
-const mapActionsToProps = (dispatch, {softwareProductId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 	return {
 		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.CREATE_FORM}),
 		//onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
-		onSubmit: (componentData, version) => {
+		onSubmit: (componentData) => {
 			return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(dispatch,
 			{softwareProductId, componentData, version});
 		},
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
index 55bcc818f5..42804ce5a6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
@@ -28,7 +28,7 @@ class ComponentCreationView extends React.Component {
 		let {data = {}, onDataChanged, onCancel, genericFieldInfo} = this.props;
 		let {displayName, description} = data;
 		return(
-			<div>			
+			<div>
 				{
 					genericFieldInfo && <Form
 						ref='validationForm'
@@ -41,8 +41,8 @@ class ComponentCreationView extends React.Component {
 						formReady={this.props.formReady}
 						onValidateForm={() => this.props.onValidateForm(forms.CREATE_FORM) }
 						className='entitlement-pools-form'>
-						<GridSection>
-							<GridItem colSpan={4}>
+						<GridSection hasLastColSet>
+							<GridItem colSpan={4} lastColInRow>
 								<Input
 									data-test-id='name'
 									onChange={displayName => onDataChanged({displayName})}
@@ -53,7 +53,7 @@ class ComponentCreationView extends React.Component {
 									value={displayName}
 									type='text'/>
 							</GridItem>
-							<GridItem colSpan={4}>
+							<GridItem colSpan={4} lastColInRow>
 								<Input
 									label={i18n('Description')}
 									onChange={description => onDataChanged({description})}
@@ -66,13 +66,13 @@ class ComponentCreationView extends React.Component {
 						</GridSection>
 					</Form>
 				}
-			</div>	
+			</div>
 		);
 	}
 
 	submit() {
-		const {onSubmit, data, version} = this.props;
-		onSubmit(data, version);
+		const {onSubmit, data} = this.props;
+		onSubmit(data);
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
index 7b4135028b..8c06fd0ab8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
@@ -16,25 +16,20 @@
 import {connect} from 'react-redux';
 import SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 
-
 import {forms, COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
 import {onboardingMethod} from '../../SoftwareProductConstants.js';
 
-
 export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
 	let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
 	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
 	return {
 		componentData,
 		qdata,
-		isReadOnlyMode,
 		isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL,
 		genericFieldInfo,
 		qGenericFieldInfo,
@@ -43,7 +38,6 @@ export const mapStateToProps = ({softwareProduct}) => {
 	};
 };
 
-
 const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
 		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}),
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
index 34198281b7..8d70d6f14c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
@@ -87,7 +87,7 @@ const SoftwareProductComponentImagesActionHelper = {
 		return fetchImage({softwareProductId, componentId, imageId, version});
 	},
 
-	openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode, modalClassName}) {
+	openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) {
 		return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => {
 			SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, {
 				softwareProductId,
@@ -100,7 +100,6 @@ const SoftwareProductComponentImagesActionHelper = {
 					componentId,
 					version,
 					isReadOnlyMode,
-					modalClassName,
 					image,
 					data
 				});
@@ -110,12 +109,13 @@ const SoftwareProductComponentImagesActionHelper = {
 
 	openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) {
 
-		let title = (image && image.id) ?  i18n('Edit Image') : i18n('Create New Image');
-		let className = (image && image.id) ? 'image-edit-editor-model' : 'image-new-editor-modal';
+		let {id} = image;
+		let title = id ?  i18n('Edit Image') : i18n('Create New Image');
+		let className = id ? 'image-modal-edit' : 'image-modal-new';
 
 		dispatch({
 			type: actionTypes.ImageEditor.OPEN,
-			image: {...data, id: image.id}
+			image: {...data, id}
 		});
 
 		dispatch({
@@ -123,9 +123,11 @@ const SoftwareProductComponentImagesActionHelper = {
 			data: {
 				modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
 				title: title,
-				modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode, dialogClassName:className}
+				modalClassName: className,
+				modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode}
 			}
 		});
+
 	},
 
 	closeImageEditor(dispatch) {
@@ -137,6 +139,7 @@ const SoftwareProductComponentImagesActionHelper = {
 		dispatch({
 			type: actionTypes.ImageEditor.CLOSE
 		});
+
 	},
 
 	loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) {
@@ -166,4 +169,5 @@ const SoftwareProductComponentImagesActionHelper = {
 		}
 	}
 };
+
 export default SoftwareProductComponentImagesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
index 5c81f05e80..c5f23e7681 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
@@ -17,18 +17,19 @@ import {connect} from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
 import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({
+	softwareProduct,
+	currentScreen: {props: {isReadOnlyMode}}
+}) => {
 
 	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
 
 	let {images: {imageEditor = {}}} = softwareProductComponents;
 	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 	let {version, onboardingMethod} = currentSoftwareProduct;
 	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
 	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) &&  ValidationHelper.checkFormValid(qgenericFieldInfo);
@@ -47,6 +48,7 @@ export const mapStateToProps = ({softwareProduct}) => {
 		isReadOnlyMode,
 		isManual: isManual
 	};
+
 };
 
 const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
index 7c1a3f5b55..a5ef152e01 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Form from 'nfvo-components/input/validation/Form.jsx';
@@ -24,9 +25,9 @@ import {imageCustomValidations} from './ImageValidations.js';
 
 class SoftwareProductComponentsImageEditorView extends React.Component {
 	static propTypes = {
-		onDataChanged: React.PropTypes.func.isRequired,
-		onSubmit: React.PropTypes.func.isRequired,
-		onCancel: React.PropTypes.func.isRequired
+		onDataChanged: PropTypes.func.isRequired,
+		onSubmit: PropTypes.func.isRequired,
+		onCancel: PropTypes.func.isRequired
 	};
 
 	render() {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
index fb3bd35eb2..d071647058 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
@@ -16,7 +16,6 @@
 import {connect} from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx';
 import ImageHelper from './SoftwareProductComponentsImageActionHelper.js';
@@ -31,38 +30,35 @@ export const mapStateToProps = ({softwareProduct}) => {
 
 	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
 	let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
-	let {version, onboardingMethod} = currentSoftwareProduct;
+	let {onboardingMethod} = currentSoftwareProduct;
 	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
 
 	return {
-		version,
 		componentData,
 		qdata,
 		dataMap,
 		qgenericFieldInfo,
 		isValidityData,
 		imagesList,
-		isReadOnlyMode,
 		isManual : isManual
 	};
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
 	return {
 		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
 			qName: COMPONENTS_QUESTIONNAIRE}),
-		onAddImage: (version, isReadOnlyMode) => {
+		onAddImage: (isReadOnlyMode) => {
 			SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch,
 				{isReadOnlyMode, softwareProductId,
 					componentId, version}
 			);},
-		onDeleteImage: ((image, version) => {
+		onDeleteImage: (image) => {
 			let shortenedFileName = (image.fileName.length > 40) ? image.fileName.substr(0,40) + '...' : image.fileName;
 			dispatch({
 				type: modalActionTypes.GLOBAL_MODAL_WARNING,
 				data: {
-					msg: i18n(`Are you sure you want to delete "${shortenedFileName}"?`),
+					msg: i18n('Are you sure you want to delete "{shortenedFileName}"?', {shortenedFileName: shortenedFileName}),
 					onConfirmed: () => ImageHelper.deleteImage(dispatch, {
 						softwareProductId,
 						componentId,
@@ -71,13 +67,13 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
 					})
 				}
 			});
-		}),
-		onEditImageClick: (image, version, isReadOnlyMode) => {
+		},
+		onEditImageClick: (image, isReadOnlyMode) => {
 			SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, {
 				image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'}
 			);
 		},
-		onSubmit: (version, qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
+		onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
 			{softwareProductId,
 				vspComponentId: componentId,
 				version,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
index 54def08fc1..004cbebe5d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
@@ -75,7 +75,7 @@ class SoftwareProductComponentsImageListView extends React.Component {
 
 	renderImagesList() {
 		const {localFilter} = this.state;
-		let {isReadOnlyMode, onAddImage, isManual, version} = this.props;
+		let {isReadOnlyMode, onAddImage, isManual} = this.props;
 
 		return (
 			<ListEditorView
@@ -84,7 +84,7 @@ class SoftwareProductComponentsImageListView extends React.Component {
 				placeholder={i18n('Filter Images by Name')}
 				isReadOnlyMode={isReadOnlyMode}
 				onFilter={value => this.setState({localFilter: value})}
-				onAdd={isManual ? () => onAddImage(version, isReadOnlyMode) : null}
+				onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
 				plusButtonTitle={i18n('Add Image')}
 				twoColumns>
 				{this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))}
@@ -95,13 +95,13 @@ class SoftwareProductComponentsImageListView extends React.Component {
 
 	renderImagesListItem(image, isReadOnlyMode) {
 		let {id, fileName} = image;
-		let {onEditImageClick, version, isManual, onDeleteImage} =  this.props;
+		let {onEditImageClick, isManual, onDeleteImage} =  this.props;
 		return (
 			<ListEditorItemView
 				key={id}
 				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditImageClick(image, version, isReadOnlyMode)}
-				onDelete={isManual ? () => onDeleteImage(image, version) : null}>
+				onSelect={() => onEditImageClick(image, isReadOnlyMode)}
+				onDelete={isManual ? () => onDeleteImage(image) : null}>
 
 				<ListEditorItemViewField>
 					<div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div>
@@ -125,8 +125,8 @@ class SoftwareProductComponentsImageListView extends React.Component {
 	}
 
 	save() {
-		let {onSubmit, qdata, version} = this.props;
-		return onSubmit(version, qdata);
+		let {onSubmit, qdata} = this.props;
+		return onSubmit(qdata);
 	}
 }
 export default SoftwareProductComponentsImageListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
index 2e9ab417d8..64367c00f2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
@@ -26,8 +26,8 @@ import Version from './Version.jsx';
 const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => {
 	let fileNameCols = (editingMode) ? 3 : 4;
 	return(
-		<GridSection>
-			<GridItem colSpan={fileNameCols}>
+		<GridSection hasLastColSset>
+			<GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
 				<Input
 					disabled={!isManual}
 					onChange={fileName => onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
index 7dd577b8c9..bd55c5ba91 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
@@ -22,7 +22,7 @@ import {imageCustomValidations} from '../ImageValidations.js';
 
 const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
 	return(
-		<GridItem colSpan={1}>
+		<GridItem colSpan={1} lastColInRow>
 			<Input
 				disabled={!isManual}
 				data-test-id='image-version'
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
index 0634858219..350e80c0f8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
@@ -17,29 +17,25 @@ import {connect} from 'react-redux';
 import SoftwareProductComponentLoadBalancingView from './SoftwareProductComponentLoadBalancingRefView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {qdata, qgenericFieldInfo : genericFieldInfo, dataMap}} = softwareProductComponents;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
+export const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
+
+	let {componentEditor: {qdata, qgenericFieldInfo: genericFieldInfo, dataMap}} = softwareProductComponents;
 
 	return {
 		qdata,
 		genericFieldInfo,
-		dataMap,
-		isReadOnlyMode
+		dataMap
 	};
-};
 
+};
 
 const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
 		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
 		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});}
 	};
-
 };
 
 export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentLoadBalancingView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
index 8a82f54901..1cbb9afc5d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
@@ -79,11 +80,11 @@ const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDat
 
 class SoftwareProductComponentLoadBalancingView extends React.Component {
 	static propTypes = {
-		componentId: React.PropTypes.string.isRequired,
-		softwareProductId: React.PropTypes.string.isRequired,
-		qdata: React.PropTypes.object,
-		qschema: React.PropTypes.object,
-		currentSoftwareProduct: React.PropTypes.object
+		componentId: PropTypes.string.isRequired,
+		softwareProductId: PropTypes.string.isRequired,
+		qdata: PropTypes.object,
+		qschema: PropTypes.object,
+		currentSoftwareProduct: PropTypes.object
 	};
 
 	state = {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
index 730beba545..8871aabbb5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
@@ -14,7 +14,6 @@
  * permissions and limitations under the License.
  */
 import {connect} from 'react-redux';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx';
 import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
@@ -24,17 +23,15 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 
 export const mapStateToProps = ({softwareProduct}) => {
 
-	let {softwareProductEditor: {data:currentVSP = {}}, softwareProductComponents: {monitoring}} = softwareProduct;
-	let filenames = monitoring;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
-
+	let {softwareProductComponents: {monitoring}} = softwareProduct;
 	return {
-		isReadOnlyMode,
-		filenames
+		filenames: monitoring
 	};
+
 };
 
 const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
+
 	return {
 		onDropMibFileToUpload: (formData, type) =>
 			SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, {
@@ -58,9 +55,9 @@ const mapActionsToProps = (dispatch, {softwareProductId, version, componentId})
 				title: i18n('Upload Failed'),
 				msg: i18n('Expected "zip" file. Please check the provided file type.')
 			}
-		}),
-
+		})
 	};
+
 };
 
 export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsMonitoringView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
index 2d5a965c40..41acee43ca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
@@ -13,7 +13,8 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
 import Button from 'sdc-ui/lib/react/Button.js';
 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
index 865367a734..d4aaf7cc7e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
@@ -36,13 +36,13 @@ export const mapStateToProps = ({softwareProduct}) => {
 	};
 };
 
-const mapActionsToProps = (dispatch) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 	return {
 		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: NIC_CREATION_FORM_NAME}),
 		onCancel: () => NICCreationActionHelper.close(dispatch),
-		onSubmit: ({nic, softwareProductId, componentId, version}) => {
-			NICCreationActionHelper.close(dispatch);
+		onSubmit: ({nic, componentId}) => {
 			SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {nic, softwareProductId, componentId, version});
+			NICCreationActionHelper.close(dispatch);
 		},
 		onValidateForm: () => ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME)
 	};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
index ad28c86b81..a40b32d51a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
@@ -20,7 +20,7 @@ import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
 
 export default {
 
-	open(dispatch, {softwareProductId, componentId, modalClassName}) {
+	open(dispatch, {softwareProductId, componentId, modalClassName, version}) {
 		dispatch({
 			type: actionTypes.NICCreation.OPEN
 		});
@@ -31,7 +31,7 @@ export default {
 				modalComponentName: modalContentMapper.NIC_CREATION,
 				title: i18n('Create NEW NIC'),
 				modalClassName,
-				modalComponentProps: {softwareProductId, componentId}
+				modalComponentProps: {softwareProductId, componentId, version}
 			}
 		});
 	},
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
index 3cb731a421..258876844a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
@@ -14,26 +14,27 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const NICPropType = React.PropTypes.shape({
-	id: React.PropTypes.string,
-	name: React.PropTypes.string,
-	description: React.PropTypes.string,
-	networkId: React.PropTypes.string
+const NICPropType = PropTypes.shape({
+	id: PropTypes.string,
+	name: PropTypes.string,
+	description: PropTypes.string,
+	networkId: PropTypes.string
 });
 
 class NICCreationView extends React.Component {
 
 	static propTypes = {
 		data: NICPropType,
-		onDataChanged: React.PropTypes.func.isRequired,
-		onSubmit: React.PropTypes.func.isRequired,
-		onCancel: React.PropTypes.func.isRequired
+		onDataChanged: PropTypes.func.isRequired,
+		onSubmit: PropTypes.func.isRequired,
+		onCancel: PropTypes.func.isRequired
 	};
 
 	render() {
@@ -51,8 +52,8 @@ class NICCreationView extends React.Component {
 				isValid={isFormValid}
 				onValidateForm={() => onValidateForm()}
 				formReady={formReady} >
-				<GridSection>
-					<GridItem colSpan={4}>
+				<GridSection hasLastColSet>
+					<GridItem colSpan={4} lastColInRow>
 						<Input
 							value={name}
 							label={i18n('Name')}
@@ -74,7 +75,7 @@ class NICCreationView extends React.Component {
 							className='field-section'/>
 					</GridItem>
 				</GridSection>
-				<GridSection title={i18n('Network')}>
+				<GridSection title={i18n('Network')} hasLastColSet>
 					<GridItem colSpan={2}>
 						<div className='form-group'>
 							<label className='control-label'>{i18n('Network Type')}</label>
@@ -96,7 +97,7 @@ class NICCreationView extends React.Component {
 							</div>
 						</div>
 					</GridItem>
-					<GridItem colSpan={2}>
+					<GridItem colSpan={2} lastColInRow>
 						<Input
 							value={networkDescription}
 							label={i18n('Network Description')}
@@ -115,8 +116,8 @@ class NICCreationView extends React.Component {
 
 
 	submit() {
-		const {data: nic, softwareProductId, componentId, currentSoftwareProduct} = this.props;
-		this.props.onSubmit({nic, softwareProductId, componentId, version: currentSoftwareProduct.version});
+		const {data: nic, componentId} = this.props;
+		this.props.onSubmit({nic, componentId});
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
index b47c7e0f99..93bd0bd67e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
@@ -16,19 +16,17 @@
 import {connect} from 'react-redux';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
 import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
 import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({softwareProduct, currentScreen}) => {
 
 	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
-
 	let {network: {nicEditor = {}}} = softwareProductComponents;
 	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
+	let {props: {isReadOnlyMode}} = currentScreen;
 	let {onboardingMethod} = currentSoftwareProduct;
 	let protocols = [];
 	if(qdata && qdata.protocols && qdata.protocols.protocols && qdata.protocols.protocols.length){
@@ -55,11 +53,11 @@ export const mapStateToProps = ({softwareProduct}) => {
 
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
 	return {
 		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData,
 			formName: forms.NIC_EDIT_FORM}),
-		onSubmit: ({data, qdata, version}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}),
+		onSubmit: ({data, qdata}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}),
 		onCancel: () => SoftwareProductComponentsNetworkActionHelper.closeNICEditor(dispatch),
 		onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM),
 		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
index 8a4c55a411..fbb3d53033 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
@@ -65,8 +65,8 @@ class SoftwareProductComponentsNetworkEditorView extends React.Component {
 	}
 
 	submit() {
-		let {data, qdata, onSubmit, version} = this.props;
-		onSubmit({data, qdata, version});
+		let {data, qdata, onSubmit} = this.props;
+		onSubmit({data, qdata});
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
index a3cfe65128..1ffbc5919f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
@@ -78,7 +78,7 @@ const SoftwareProductComponentNetworkActionHelper = {
 		});
 	},
 
-	openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName}) {
+	openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName, version}) {
 		dispatch({
 			type: actionTypes.NICEditor.FILL_DATA,
 			nic: {...data, id: nic.id}
@@ -87,7 +87,7 @@ const SoftwareProductComponentNetworkActionHelper = {
 			type: GlobalModalActions.GLOBAL_MODAL_SHOW,
 			data: {
 				modalClassName,
-				modalComponentProps: {softwareProductId, componentId, isReadOnlyMode},
+				modalComponentProps: {softwareProductId, componentId, isReadOnlyMode, version},
 				modalComponentName: modalPagesMapper.NIC_EDITOR,
 				title: i18n('Edit NIC')
 			}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
index 0fa877e90f..bb256d5d41 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
@@ -15,7 +15,6 @@
  */
 import {connect} from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import SoftwareProductComponentsNetworkListView from './SoftwareProductComponentsNetworkListView.jsx';
@@ -31,8 +30,8 @@ export const mapStateToProps = ({softwareProduct}) => {
 
 	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
 	let {network: {nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 	let {version, onboardingMethod} = currentSoftwareProduct;
+	let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
 
 	return {
 		version,
@@ -42,26 +41,25 @@ export const mapStateToProps = ({softwareProduct}) => {
 		qgenericFieldInfo,
 		isValidityData,
 		nicList,
-		isReadOnlyMode,
-		isManual: onboardingMethod === onboardingMethodTypes.MANUAL
+		isManual
 	};
 
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
 	return {
 		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
 			qName: COMPONENTS_QUESTIONNAIRE}),
-		onAddNic: () => NICCreationActionHelper.open(dispatch, {softwareProductId, componentId, modalClassName: 'network-nic-modal-create'}),
-		onDeleteNic: (nic, version) => dispatch({
+		onAddNic: () => NICCreationActionHelper.open(dispatch, {softwareProductId, componentId, modalClassName: 'network-nic-modal-create', version}),
+		onDeleteNic: (nic) => dispatch({
 			type: GlobalModalActions.GLOBAL_MODAL_WARNING,
 			data:{
-				msg: i18n(`Are you sure you want to delete "${nic.name}"?`),
+				msg: i18n('Are you sure you want to delete "{name}"?', {name: nic.name}),
 				onConfirmed: () => SoftwareProductComponentsNetworkActionHelper.deleteNIC(dispatch, {softwareProductId,
 					componentId, nicId: nic.id, version})
 			}
 		}),
-		onEditNicClick: (nic, version, isReadOnlyMode) => {
+		onEditNicClick: (nic, isReadOnlyMode) => {
 			Promise.all([
 				SoftwareProductComponentsNetworkActionHelper.loadNICData({
 					softwareProductId,
@@ -77,10 +75,10 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
 				})
 			]).then(
 				([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data,
-					isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit'})
+					isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit', version})
 			);
 		},
-		onSubmit: ({qdata, version}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
+		onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
 			{softwareProductId, version,
 			vspComponentId: componentId,
 			qdata});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
index 524b95c3ad..0fc7404c56 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
@@ -21,53 +21,53 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const Acceptable = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
 	return(
-		<GridSection>
-				<GridItem colSpan={3}>
-					<div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div>
-				</GridItem>
-				<GridItem>
-					<div className='part-title-small bytes'>{i18n('Allow Packet Loss')}</div>
-				</GridItem>
-				<GridItem>
-					<Input
-						label={i18n('Mean')}
-						type='number'
-						data-test-id='acceptableJitter-mean'
-						isValid={qgenericFieldInfo['sizing/acceptableJitter/mean'].isValid}
-						errorText={qgenericFieldInfo['sizing/acceptableJitter/mean'].errorText}
-						value={dataMap['sizing/acceptableJitter/mean']}
-						onChange={val => onQDataChanged({'sizing/acceptableJitter/mean' : val})} />
-				</GridItem>
-				<GridItem>
-					<Input
-						label={i18n('Max')}
-						type='number'
-						data-test-id='acceptableJitter-max'
-						isValid={qgenericFieldInfo['sizing/acceptableJitter/max'].isValid}
-						errorText={qgenericFieldInfo['sizing/acceptableJitter/max'].errorText}
-						value={dataMap['sizing/acceptableJitter/max']}
-						onChange={val => onQDataChanged({'sizing/acceptableJitter/max' : val})} />
-				</GridItem>
-				<GridItem>
-					<Input
-						label={i18n('Var')}
-						type='number'
-						data-test-id='acceptableJitter-variable'
-						isValid={qgenericFieldInfo['sizing/acceptableJitter/variable'].isValid}
-						errorText={qgenericFieldInfo['sizing/acceptableJitter/variable'].errorText}
-						value={dataMap['sizing/acceptableJitter/variable']}
-						onChange={val => onQDataChanged({'sizing/acceptableJitter/variable' : val})} />
-				</GridItem>
-				<GridItem>
-					<Input
-						label={i18n('In Percent')}
-						type='number'
-						data-test-id='acceptableJitter-acceptablePacketLoss'
-						isValid={qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid}
-						errorText={qgenericFieldInfo['sizing/acceptablePacketLoss'].errorText}
-						value={dataMap['sizing/acceptablePacketLoss']}
-						onChange={val => onQDataChanged({'sizing/acceptablePacketLoss' : val})} />
-				</GridItem>
+		<GridSection hasLastColSet>
+			<GridItem colSpan={3}>
+				<div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div>
+			</GridItem>
+			<GridItem lastColInRow>
+				<div className='part-title-small bytes'>{i18n('Allow Packet Loss')}</div>
+			</GridItem>
+			<GridItem>
+				<Input
+					label={i18n('Mean')}
+					type='number'
+					data-test-id='acceptableJitter-mean'
+					isValid={qgenericFieldInfo['sizing/acceptableJitter/mean'].isValid}
+					errorText={qgenericFieldInfo['sizing/acceptableJitter/mean'].errorText}
+					value={dataMap['sizing/acceptableJitter/mean']}
+					onChange={val => onQDataChanged({'sizing/acceptableJitter/mean' : val})} />
+			</GridItem>
+			<GridItem>
+				<Input
+					label={i18n('Max')}
+					type='number'
+					data-test-id='acceptableJitter-max'
+					isValid={qgenericFieldInfo['sizing/acceptableJitter/max'].isValid}
+					errorText={qgenericFieldInfo['sizing/acceptableJitter/max'].errorText}
+					value={dataMap['sizing/acceptableJitter/max']}
+					onChange={val => onQDataChanged({'sizing/acceptableJitter/max' : val})} />
+			</GridItem>
+			<GridItem>
+				<Input
+					label={i18n('Var')}
+					type='number'
+					data-test-id='acceptableJitter-variable'
+					isValid={qgenericFieldInfo['sizing/acceptableJitter/variable'].isValid}
+					errorText={qgenericFieldInfo['sizing/acceptableJitter/variable'].errorText}
+					value={dataMap['sizing/acceptableJitter/variable']}
+					onChange={val => onQDataChanged({'sizing/acceptableJitter/variable' : val})} />
+			</GridItem>
+			<GridItem lastColInRow>
+				<Input
+					label={i18n('In Percent')}
+					type='number'
+					data-test-id='acceptableJitter-acceptablePacketLoss'
+					isValid={qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid}
+					errorText={qgenericFieldInfo['sizing/acceptablePacketLoss'].errorText}
+					value={dataMap['sizing/acceptablePacketLoss']}
+					onChange={val => onQDataChanged({'sizing/acceptablePacketLoss' : val})} />
+			</GridItem>
 		</GridSection>
 	);
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
index bc692e753c..06a2bb445c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
@@ -22,7 +23,7 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 const NameAndPurpose = ({onDataChanged, genericFieldInfo, isReadOnlyMode, name, description, isManual}) => {
 
 	return (
-		<GridSection>
+		<GridSection hastLastColSet>
 			<GridItem colSpan={2}>
 				<Input
 					label={i18n('Name')}
@@ -35,24 +36,24 @@ const NameAndPurpose = ({onDataChanged, genericFieldInfo, isReadOnlyMode, name,
 					errorText={genericFieldInfo['name'].errorText}
 					type='text' />
 			</GridItem>
-			<GridItem colSpan={2}>
+			<GridItem colSpan={2} lastColInRow>
 				<Input
 					label={i18n('Purpose of NIC')}
 					value={description}
 					data-test-id='nic-description'
 					onChange={description => onDataChanged({description})}
 					disabled={isReadOnlyMode}
-					type='textarea'/>
+					type='textarea' />
 			</GridItem>
 		</GridSection>
 	);
 };
 
 NameAndPurpose.PropTypes = {
-	name: React.PropTypes.string,
-	description: React.PropTypes.array,
-	onDataChanged: React.PropTypes.func,
-	isReadOnlyMode: React.PropTypes.bool,
+	name: PropTypes.string,
+	description: PropTypes.array,
+	onDataChanged: PropTypes.func,
+	isReadOnlyMode: PropTypes.bool,
 };
 
 export default NameAndPurpose;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
index 8d9b79e67f..7e6712cb5e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
@@ -23,51 +24,53 @@ import { networkTypes } from '../SoftwareProductComponentsNetworkConstants.js';
 const Network = ({networkValues, networkType, networkDescription, onDataChanged, isReadOnlyMode}) => {
 	const isExternal = networkType === networkTypes.EXTERNAL;
 	return (
-		<GridSection title={i18n('Network')}>
-				<GridItem>
-					<Input
-						label={i18n('Internal')}
-						disabled
-						checked={!isExternal}
-						data-test-id='nic-internal'
-						className='network-radio disabled'
-						type='radio'/>
-				</GridItem>
-				<GridItem>
-					<Input
-						label={i18n('External')}
-						disabled
-						checked={isExternal}
-						data-test-id='nic-external'
-						className='network-radio disabled'
-						type='radio'/>
-				</GridItem>
-				<GridItem colSpan={2}>
-				{isExternal ?
+		<GridSection title={i18n('Network')} hasLastColSet>
+			<GridItem>
+				<Input
+					label={i18n('Internal')}
+					disabled
+					checked={!isExternal}
+					data-test-id='nic-internal'
+					className='network-radio disabled'
+					type='radio' />
+			</GridItem>
+			<GridItem>
+				<Input
+					label={i18n('External')}
+					disabled
+					checked={isExternal}
+					data-test-id='nic-external'
+					className='network-radio disabled'
+					type='radio' />
+			</GridItem>
+			<GridItem colSpan={2} lastColInRow>
+			{
+				isExternal ?
 					<Input
 						label={i18n('Network Description')}
 						value={networkDescription}
 						data-test-id='nic-network-description'
 						onChange={networkDescription => onDataChanged({networkDescription})}
 						disabled={isReadOnlyMode}
-						type='text'/>
-						:
+						type='text' />
+				:
 					<Input
 						label={i18n('Network')}
 						data-test-id='nic-network'
 						type='select'
 						className='input-options-select'
 						groupClassName='bootstrap-input-options'
-						disabled={true} >
-							{networkValues.map(val => <option key={val.enum} value={val.enum}>{val.title}</option>)}
-					</Input>}
-				</GridItem>
+						disabled={true}>
+						{networkValues.map(val => <option key={val.enum} value={val.enum}>{val.title}</option>)}
+					</Input>
+			}
+			</GridItem>
 		</GridSection>
 	);
 };
 
 Network.PropTypes = {
-	networkValues: React.PropTypes.array
+	networkValues: PropTypes.array
 };
 
 export default  Network;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
index d7ee91bd15..f5f28aea59 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
@@ -14,14 +14,15 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap}) => {
+const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap, lastColInRow}) => {
 	return (
-		<GridItem>
+		<GridItem lastColInRow={lastColInRow}>
 			<Input
 				label={i18n(label)}
 				type='number'
@@ -35,31 +36,31 @@ const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap}
 };
 
 PointerInput.PropTypes = {
-	label: React.PropTypes.string,
-	value: React.PropTypes.string
+	label: PropTypes.string,
+	value: PropTypes.string
 };
 
 const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => {
 	return(
-		<GridSection title={title}>
+		<GridSection title={title} hasLastColSet>
 				<GridItem colSpan={2}>
 					<div className='part-title-small packets'>{i18n('Packets')}</div>
 				</GridItem>
-				<GridItem colSpan={2}>
+				<GridItem colSpan={2} lastColInRow>
 					<div className='part-title-small bytes'>{i18n('Bytes')}</div>
 				</GridItem>
-				{pointers.map(pointer => {return (<PointerInput key={pointer.value} label={pointer.label} value={pointer.value}
-					qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} />);})}
+				{pointers.map((pointer, i) => {return (<PointerInput key={i} label={pointer.label} value={pointer.value}
+					qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} lastColInRow={i === 3} />);})}
 		</GridSection>
 	);
 };
 
 PacketsBytes.PropTypes = {
-	title: React.PropTypes.string,
-	pointers: React.PropTypes.array,
-	onQDataChanged:  React.PropTypes.function,
-	dataMap: React.PropTypes.object,
-	qgenericFieldInfo: React.PropTypes.object
+	title: PropTypes.string,
+	pointers: PropTypes.array,
+	onQDataChanged:  PropTypes.function,
+	dataMap: PropTypes.object,
+	qgenericFieldInfo: PropTypes.object
 };
 
 export default PacketsBytes;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
index 3e8a9f4e77..be4093da59 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
@@ -22,7 +23,7 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => {
 	return (
-		<GridSection title={i18n('Protocols')}>
+		<GridSection title={i18n('Protocols')} hasLastColSet>
 				<GridItem colSpan={2}>
 					<InputOptions
 						data-test-id='nic-protocols'
@@ -39,7 +40,7 @@ const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => {
 						clearable={false}
 						values={qgenericFieldInfo['protocols/protocols'].enum}/>
 				</GridItem>
-				<GridItem colSpan={2}>
+				<GridItem colSpan={2} lastColInRow>
 					<Input
 						data-test-id='nic-protocolWithHighestTrafficProfile'
 						label={i18n('Protocol with Highest Traffic Profile')}
@@ -65,10 +66,10 @@ const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => {
 };
 
 Protocols.PropTypes = {
-	protocols: React.PropTypes.array,
-	onQDataChanged:  React.PropTypes.function,
-	dataMap: React.PropTypes.object,
-	qgenericFieldInfo: React.PropTypes.object
+	protocols: PropTypes.array,
+	onQDataChanged:  PropTypes.function,
+	dataMap: PropTypes.object,
+	qgenericFieldInfo: PropTypes.object
 };
 
 export default Protocols;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
index 1dd0045f7b..202d458f25 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
@@ -21,8 +21,8 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const Sizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
 	return(
-		<GridSection title={i18n('Sizing')}>
-			<GridItem colSpan={4}>
+		<GridSection title={i18n('Sizing')} hasLastColSet>
+			<GridItem colSpan={4} lastColInRow>
 				<Input
 					label={i18n('Describe Quality of Service')}
 					type='textarea'
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
index 87abaf4978..9841ecbae7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -14,168 +14,17 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-import Dropzone from 'react-dropzone';
-
-import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 import  {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
-import Form from 'nfvo-components/input/validation/Form.jsx';
-import Input from 'nfvo-components/input/validation/Input.jsx';
-import GridSection from 'nfvo-components/grid/GridSection.jsx';
-import GridItem from 'nfvo-components/grid/GridItem.jsx';
-
-const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
-	id: React.PropTypes.string,
-	name: React.PropTypes.string,
-	description: React.PropTypes.string,
-	artifactName: React.PropTypes.string,
-	type: React.PropTypes.string
-});
+import SoftwareProductProcessesEditorForm from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx';
 
 
 class SoftwareProductProcessesEditorView extends React.Component {
 
-	state = {
-		dragging: false,
-		files: []
-	};
-
-	static propTypes = {
-		data: SoftwareProductProcessEditorPropType,
-		previousData: SoftwareProductProcessEditorPropType,
-		isReadOnlyMode: React.PropTypes.bool,
-		onDataChanged: React.PropTypes.func,
-		onSubmit: React.PropTypes.func,
-		onCancel: React.PropTypes.func
-	};
-
 	render() {
-		let {isReadOnlyMode, onCancel, onDataChanged, genericFieldInfo, data = {}} = this.props;
-		let {name, description, artifactName, type} = data;
-
 		return (
-			<div>
-				{ genericFieldInfo && <Form
-					ref='validationForm'
-					isReadOnlyMode={isReadOnlyMode}
-					hasButtons={true}
-					labledButtons={true}
-					onSubmit={ () => this.submit() }
-					onReset={ () => onCancel() }
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.props.onValidateForm() }
-					className='vsp-processes-editor'>
-					<div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
-						<Dropzone
-							className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
-							onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
-							onDragEnter={() => this.setState({dragging:true})}
-							onDragLeave={() => this.setState({dragging:false})}
-							multiple={false}
-							disableClick={true}
-							ref='processEditorFileInput'
-							name='processEditorFileInput'>
-							<GridSection>
-								<GridItem colSpan={2}>
-									<Input
-										onChange={name => onDataChanged({name})}
-										isValid={genericFieldInfo.name.isValid}
-										isRequired={true}
-										data-test-id='name'
-										errorText={genericFieldInfo.name.errorText}
-										label={i18n('Name')}
-										value={name}
-										type='text'/>
-								</GridItem>
-								<GridItem colSpan={2}>
-									<DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} />
-								</GridItem>
-							</GridSection>
-							<GridSection>
-								<GridItem colSpan={2}>
-									<Input
-										name='vsp-process-description'
-										groupClassName='vsp-process-description'
-										onChange={description => onDataChanged({description})}
-										isValid={genericFieldInfo.description.isValid}
-										errorText={genericFieldInfo.description.errorText}
-										label={i18n('Notes')}
-										value={description}
-										data-test-id='vsp-process-description'
-										type='textarea'/>
-								</GridItem>
-								<GridItem colSpan={2}>
-									<Input
-										label={i18n('Artifacts')}
-										data-test-id='artifacts'
-										value={artifactName}
-										type='text'
-										disabled/>
-									<Input
-										onChange={e => {
-											// setting the unit to the correct value
-											const selectedIndex = e.target.selectedIndex;
-											const val = e.target.options[selectedIndex].value;
-											onDataChanged({type: val});}
-										}
-										value={type}
-										label={i18n('Process Type')}
-										data-test-id='process-type'
-										isValid={genericFieldInfo.type.isValid}
-										errorText={genericFieldInfo.type.errorText}
-										type='select'
-										className='input-options-select'
-										groupClassName='bootstrap-input-options' >
-										{ComponentProcessesOptionsInputValues.PROCESS_TYPE.map(mtype =>
-											<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-									</Input>
-								</GridItem>
-							</GridSection>
-						</Dropzone>
-					</div>
-				</Form>}
-			</div>
+			<SoftwareProductProcessesEditorForm optionsInputValues={ComponentProcessesOptionsInputValues} {...this.props}/>
 		);
 	}
-
-	submit() {
-		const {data: process, previousData: previousProcess} = this.props;
-		let {files} = this.state;
-		let formData = new FormData();
-		if (files.length) {
-			let file = files[0];
-			formData.append('upload', file);
-		}
-
-		let updatedProcess = {
-			...process,
-			formData: files.length ? formData : false
-		};
-		this.props.onSubmit({process: updatedProcess, previousProcess});
-	}
-
-
-	handleImportSubmit(files, rejectedFiles) {
-		if (files.length > 0) {
-			let {onDataChanged} = this.props;
-			this.setState({
-				dragging: false,
-				complete: '0',
-				files
-			});
-			onDataChanged({artifactName: files[0].name});
-		}
-		else if (rejectedFiles.length > 0) {
-			this.setState({
-				dragging: false
-			});
-			if (DEBUG) {
-				console.log('file was rejected ' + rejectedFiles[0].name);
-			}
-		}
-
-	}
 }
 
 export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
index 8c359db869..2a7152ef8b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
@@ -16,7 +16,6 @@
 import {connect} from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
 
 import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx';
@@ -26,28 +25,26 @@ export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
 	let{processesList = [], processesEditor = {}} = componentProcesses;
 	let {data} = processesEditor;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 
 	return {
 		currentSoftwareProduct,
 		isValidityData,
 		processesList,
 		isDisplayModal: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id),
-		isReadOnlyMode
+		isModalInEditMode: Boolean(data && data.id)
 	};
 
 };
 
-const mapActionsToProps = (dispatch, {componentId, softwareProductId}) => {
+const mapActionsToProps = (dispatch, {componentId, softwareProductId, version}) => {
 
 	return {
 		onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
-		onEditProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process),
-		onDeleteProcessClick: (process, version) => dispatch({
+		onEditProcess: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process),
+		onDeleteProcess: (process) => dispatch({
 			type: modalActionTypes.GLOBAL_MODAL_WARNING,
 			data:{
-				msg: i18n(`Are you sure you want to delete "${process.name}"?`),
+				msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
 				confirmationButtonText: i18n('Delete'),
 				title: i18n('Delete'),
 				onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
index 93d5ce886a..27c4b9f429 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
@@ -14,13 +14,11 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
-
-import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
-import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
-
 import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js';
+import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx';
 
 class SoftwareProductProcessesView extends React.Component {
 
@@ -29,15 +27,15 @@ class SoftwareProductProcessesView extends React.Component {
 	};
 
 	static propTypes = {
-		onAddProcess: React.PropTypes.func,
-		onEditProcessClick: React.PropTypes.func,
-		onDeleteProcessClick: React.PropTypes.func,
-		isDisplayModal: React.PropTypes.bool,
-		isModalInEditMode: React.PropTypes.bool,
-		onStorageSelect: React.PropTypes.func,
-		componentId: React.PropTypes.string,
-		softwareProductId: React.PropTypes.string,
-		currentSoftwareProduct: React.PropTypes.object
+		onAddProcess: PropTypes.func,
+		onEditProcess: PropTypes.func,
+		onDeleteProcess: PropTypes.func,
+		isDisplayModal: PropTypes.bool,
+		isModalInEditMode: PropTypes.bool,
+		onStorageSelect: PropTypes.func,
+		componentId: PropTypes.string,
+		softwareProductId: PropTypes.string,
+		currentSoftwareProduct: PropTypes.object
 	};
 
 	render() {
@@ -46,7 +44,7 @@ class SoftwareProductProcessesView extends React.Component {
 				<div className='software-product-view'>
 					<div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'>
 						{this.renderEditor()}
-						{this.renderProcessList()}
+						<SoftwareProductProcessListView addButtonTitle={i18n('Add Component Process Details')} {...this.props}/>
 					</div>
 				</div>
 			</div>
@@ -54,7 +52,7 @@ class SoftwareProductProcessesView extends React.Component {
 	}
 
 	renderEditor() {
-		let {softwareProductId, currentSoftwareProduct: {version}, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
+		let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
 		return (
 			<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'>
 				<Modal.Header>
@@ -72,66 +70,6 @@ class SoftwareProductProcessesView extends React.Component {
 		);
 	}
 
-	renderProcessList() {
-		const {localFilter} = this.state;
-		let {onAddProcess, isReadOnlyMode} = this.props;
-		return (
-			<div className='processes-list'>
-				<ListEditorView
-					plusButtonTitle={i18n('Add Component Process Details')}
-					filterValue={localFilter}
-					placeholder={i18n('Filter Process')}
-					onAdd={onAddProcess}
-					isReadOnlyMode={isReadOnlyMode}
-					title={i18n('Process Details')}
-					onFilter={value => this.setState({localFilter: value})}>
-					{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
-				</ListEditorView>
-			</div>
-		);
-	}
-
-	renderProcessListItem(process, isReadOnlyMode) {
-		let {id, name, description, artifactName = ''} = process;
-		let {currentSoftwareProduct: {version}, onEditProcessClick, onDeleteProcessClick} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditProcessClick(process)}
-				onDelete={() => onDeleteProcessClick(process, version)}>
-
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='name'>{name}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Artifact name')}</div>
-					<div className='artifact-name'>{artifactName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Notes')}</div>
-					<div className='description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
-
-
-	filterList() {
-		let {processesList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return processesList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return processesList;
-		}
-	}
 }
 
 export default SoftwareProductProcessesView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
index 7149adbbfb..ca27a76a18 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
@@ -15,7 +15,6 @@
  */
 import {connect} from 'react-redux';
 
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
@@ -23,26 +22,21 @@ import SoftwareProductComponentStorageView from './SoftwareProductComponentStora
 
 import {COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
 
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {data: componentData , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
+const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
+	let {componentEditor: {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents;
 
 	return {
-		componentData,
 		qdata,
-		isReadOnlyMode,
 		qGenericFieldInfo,
-		dataMap,
-		version: currentVSP.version
+		dataMap
 	};
 };
 
-const mapActionToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
 		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({componentData, qdata, version}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
-			{softwareProductId, version, vspComponentId: componentId, componentData, qdata});
+		onSubmit: ({qdata}) => {
+			return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});
 		}
 	};
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
index 00df21bb59..8538dab6bc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
@@ -155,14 +156,14 @@ const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 class SoftwareProductComponentStorageView extends React.Component {
 
 	static propTypes = {
-		componentId: React.PropTypes.string,
-		onQDataChanged: React.PropTypes.func,
-		onSubmit: React.PropTypes.func,
-		isReadOnlyMode: React.PropTypes.bool
+		componentId: PropTypes.string,
+		onQDataChanged: PropTypes.func,
+		onSubmit: PropTypes.func,
+		isReadOnlyMode: PropTypes.bool
 	};
 
 	render() {
-		let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata, version} =  this.props;
+		let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} =  this.props;
 
 		return(
 			<div className='vsp-component-questionnaire-view'>
@@ -170,7 +171,7 @@ class SoftwareProductComponentStorageView extends React.Component {
 					ref={form => this.form = form }
 					isValid={true}
 					formReady={null}
-					onSubmit={() => onSubmit({qdata, version})}
+					onSubmit={() => onSubmit({qdata})}
 					className='component-questionnaire-validation-form'
 					isReadOnlyMode={isReadOnlyMode}
 					hasButtons={false}>
@@ -183,8 +184,8 @@ class SoftwareProductComponentStorageView extends React.Component {
 	}
 
 	save(){		
-		const {componentData, qdata, onSubmit, version} = this.props;
-		return onSubmit({componentData, qdata, version});		
+		const {qdata, onSubmit} = this.props;
+		return onSubmit({qdata});
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
index 3b973c65cd..0136048bf7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
@@ -15,13 +15,17 @@
  */
 import {connect} from 'react-redux';
 
-import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
 import SoftwareProductCreationActionHelper from './SoftwareProductCreationActionHelper.js';
 import SoftwareProductCreationView from './SoftwareProductCreationView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductActionHelper  from '../SoftwareProductActionHelper.js';
+import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
+import {itemTypes as versionItemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
+import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
 
-export const mapStateToProps = ({finalizedLicenseModelList, softwareProductList, softwareProduct: {softwareProductCreation, softwareProductCategories} }) => {
+export const mapStateToProps = ({finalizedLicenseModelList, users: {usersList}, softwareProductList, softwareProduct: {softwareProductCreation, softwareProductCategories} }) => {
 	let {genericFieldInfo} = softwareProductCreation;
 	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
@@ -39,7 +43,8 @@ export const mapStateToProps = ({finalizedLicenseModelList, softwareProductList,
 		isFormValid,
 		formReady: softwareProductCreation.formReady,
 		genericFieldInfo,
-		VSPNames
+		VSPNames,
+		usersList
 	};
 };
 
@@ -47,13 +52,18 @@ export const mapActionsToProps = (dispatch) => {
 	return {
 		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
 		onCancel: () => SoftwareProductCreationActionHelper.resetData(dispatch),
-		onSubmit: (softwareProduct) => {
+		onSubmit: (softwareProduct, usersList) => {
 			SoftwareProductCreationActionHelper.resetData(dispatch);
 			SoftwareProductCreationActionHelper.createSoftwareProduct(dispatch, {softwareProduct}).then(response => {
-				SoftwareProductActionHelper.fetchSoftwareProductList(dispatch).then(() => {
-					let {vendorId: licenseModelId, licensingVersion} = softwareProduct;
-					OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId: response.vspId, licenseModelId, licensingVersion});
-				});
+				let {itemId, version} = response;
+				SoftwareProductActionHelper.fetchSoftwareProductList(dispatch).then(() =>
+					PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: usersList}).then(() =>
+						VersionsPageActionHelper.fetchVersions(dispatch, {itemType: versionItemTypes.SOFTWARE_PRODUCT, itemId}).then(() =>
+							ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
+								props: {softwareProductId: itemId, version}})
+						)
+					)
+				);
 			});
 		},
 		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
index a22b517fa0..b19e460497 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
@@ -48,10 +48,10 @@ const SoftwareProductCreationActionHelper = {
 			type: modalActionTypes.GLOBAL_MODAL_SHOW,
 			data: {
 				modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_CREATION,
-				title: i18n('New Software Product'),				
+				title: i18n('New Software Product'),
 				modalComponentProps: {
 					vendorId,
-					size: modalSizes.LARGE					
+					size: modalSizes.LARGE
 				}
 			}
 		});
@@ -70,7 +70,13 @@ const SoftwareProductCreationActionHelper = {
 	},
 
 	createSoftwareProduct(dispatch, {softwareProduct}) {
-		return createSoftwareProduct(softwareProduct);
+		return createSoftwareProduct(softwareProduct).then(result => {
+			dispatch({
+				type: actionTypes.SOFTWARE_PRODUCT_CREATED,
+				result
+			});
+			return result;
+		});
 	}
 
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
index 241d7985b1..b941c849cb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
@@ -17,7 +17,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
 	OPEN: null,
-	RESET_DATA: null
+	RESET_DATA: null,
+	SOFTWARE_PRODUCT_CREATED: null
 });
 
 export const SP_CREATION_FORM_NAME = 'SPCREATIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
index c7ab3e644c..e491491f4d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -27,25 +28,26 @@ import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
 import {onboardingMethod as onboardingMethodConst} from '../SoftwareProductConstants.js';
 
-const SoftwareProductPropType = React.PropTypes.shape({
-	id: React.PropTypes.string,
-	name: React.PropTypes.string,
-	description: React.PropTypes.string,
-	category: React.PropTypes.string,
-	subCategory: React.PropTypes.string,
-	vendorId: React.PropTypes.string
+const SoftwareProductPropType = PropTypes.shape({
+	id: PropTypes.string,
+	name: PropTypes.string,
+	description: PropTypes.string,
+	category: PropTypes.string,
+	subCategory: PropTypes.string,
+	vendorId: PropTypes.string
 });
 
 class SoftwareProductCreationView extends React.Component {
 
 	static propTypes = {
 		data: SoftwareProductPropType,
-		finalizedLicenseModelList: React.PropTypes.array,
-		softwareProductCategories: React.PropTypes.array,
-		VSPNames: React.PropTypes.object,
-		onDataChanged: React.PropTypes.func.isRequired,
-		onSubmit: React.PropTypes.func.isRequired,
-		onCancel: React.PropTypes.func.isRequired
+		finalizedLicenseModelList: PropTypes.array,
+		softwareProductCategories: PropTypes.array,
+		VSPNames: PropTypes.object,
+		usersList: PropTypes.array,
+		onDataChanged: PropTypes.func.isRequired,
+		onSubmit: PropTypes.func.isRequired,
+		onCancel: PropTypes.func.isRequired
 	};
 
 	render() {
@@ -65,7 +67,7 @@ class SoftwareProductCreationView extends React.Component {
 					submitButtonText={i18n('Create')}
 					formReady={this.props.formReady}
 					onValidateForm={() => this.validate() }>
-					<GridSection>
+					<GridSection hasLastColSet>
 						<GridItem colSpan='2'>
 							<Input
 								value={name}
@@ -115,7 +117,7 @@ class SoftwareProductCreationView extends React.Component {
 								}
 							</Input>
 						</GridItem>
-						<GridItem colSpan='2' stretch>
+						<GridItem colSpan='2' stretch lastColInRow>
 							<Input
 								value={description}
 								label={i18n('Description')}
@@ -139,10 +141,10 @@ class SoftwareProductCreationView extends React.Component {
 		let {finalizedLicenseModelList} =  this.props;
 
 		return [{enum: '', title: i18n('please select...')}].concat(
-			sortByStringProperty(finalizedLicenseModelList, 'vendorName').map(vendor => {
+			sortByStringProperty(finalizedLicenseModelList, 'name').map(vendor => {
 				return {
 					enum: vendor.id,
-					title: vendor.vendorName
+					title: vendor.name
 				};
 			})
 		);
@@ -163,9 +165,9 @@ class SoftwareProductCreationView extends React.Component {
 	}
 
 	submit() {
-		let  {data:softwareProduct, finalizedLicenseModelList} = this.props;
-		softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).vendorName;
-		this.props.onSubmit(softwareProduct);
+		let  {data:softwareProduct, finalizedLicenseModelList, usersList} = this.props;
+		softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).name;
+		this.props.onSubmit(softwareProduct, usersList);
 	}
 
 	validateName(value) {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
index 05a1fc7797..9888087800 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
@@ -16,24 +16,21 @@
 import {connect} from 'react-redux';
 
 import SoftwareProductDependenciesView from './SoftwareProductDependenciesView.jsx';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductDependenciesActionHelper from './SoftwareProductDependenciesActionHelper.js';
 
 export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
+	let {softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct;
 	return {
-		isReadOnlyMode,
-		softwareProductDependencies: softwareProductDependencies.length ? softwareProductDependencies : [{sourceId: '', targetId: '', relationType: 'dependsOn', id: 'fake'}],
+		softwareProductDependencies: softwareProductDependencies,
 		componentsOptions: componentsList.map(component => ({value: component.id, label: component.displayName}))
 	};
 };
 
 const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 	return {
-		onDataChanged: dependenciesList => SoftwareProductDependenciesActionHelper.updateDependencyList(dispatch, {dependenciesList}),
-		onAddDependency: () => SoftwareProductDependenciesActionHelper.addDependency(dispatch),
-		onSubmit: (dependenciesList) => SoftwareProductDependenciesActionHelper.saveDependencies(dispatch, {softwareProductId, version, dependenciesList})
+		onDataChanged: (item) => SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {softwareProductId, version, item}),
+		onDeleteDependency: (item) => SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {softwareProductId, version, item}),
+		onAddDependency: (item) => SoftwareProductDependenciesActionHelper.createDependency(dispatch, {softwareProductId, version, item})
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
index e47b33a577..f04f8faf56 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
@@ -15,44 +15,83 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductDependenciesConstants.js';
-import uuid from 'uuid-js';
+import {actionTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
 
 function baseUrl(softwareProductId, version) {
 	const versionId = version.id;
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependency-model`;
+	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`;
 }
 
-function fetchDependency(softwareProductId, version) {
+function fetchDependencies(softwareProductId, version) {
 	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-function postDependency(softwareProductId, version, dependenciesList) {
-	let modifedDependencyList = dependenciesList ? dependenciesList.filter(item => item.sourceId && item.targetId)
-	.map(item => ({sourceId: item.sourceId, targetId: item.targetId, relationType: item.relationType})) : [];
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {componentDependencyModels:modifedDependencyList});
+function addDepencency(softwareProductId, version, item) {
+	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+		sourceId: item.sourceId,
+		targetId: item.targetId,
+		relationType: item.relationType
+	});
 }
 
+
+function updateDepencency(softwareProductId, version, item) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${item.id}`,
+		{
+			sourceId: item.sourceId,
+			targetId: item.targetId,
+			relationType: item.relationType
+		});
+}
+
+function removeDependency(softwareProductId, version, item) {
+	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${item.id}`);
+}
+
+
 const SoftwareProductDependenciesActionHelper = {
-	updateDependencyList(dispatch, {dependenciesList}) {		
-		dispatch({type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE, dependenciesList});
+	updateDependency(dispatch, {softwareProductId, version, item}) {
+		// if change was made on existing item - we will update the server and refresh the list
+		// if change was made on the 'new' row - we will only fire the event
+		if (item.id !== NEW_RULE_TEMP_ID) {
+			return updateDepencency(softwareProductId, version, item).then(() => {
+				return this.fetchDependencies(dispatch, {softwareProductId, version});
+			});
+		} else {
+			dispatch({
+				type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY,
+				item: item
+			});
+		}
 	},
-	addDependency(dispatch) {
-		dispatch({type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY});
+
+	createDependency(dispatch, {softwareProductId, version, item}) {
+		// removing the temp id
+		delete item.id;
+		// creating the new dependency
+		return addDepencency(softwareProductId, version, item).then(() => {
+			dispatch({
+				type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY
+			});
+			return this.fetchDependencies(dispatch, {softwareProductId, version});
+		});
 	},
+
+	removeDependency(dispatch, {softwareProductId, version, item}) {
+		return removeDependency(softwareProductId, version, item).then( () => {
+			return this.fetchDependencies(dispatch, {softwareProductId, version});
+		});
+	},
+
 	fetchDependencies(dispatch, {softwareProductId, version}) {
-		return fetchDependency(softwareProductId, version).then( response => {	
-			const dependenciesList = response.results ? response.results.map(item => {return {...item, id: uuid.create().toString()};}) : [];									
+		return fetchDependencies(softwareProductId, version).then( response => {
 			dispatch({
 				type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE,
-				dependenciesList
+				dependenciesList : response.results
 			});
 		});
-	},
-	saveDependencies(dispatch, {softwareProductId, version, dependenciesList}) {
-		return postDependency(softwareProductId, version, dependenciesList);
-	}	
+	}
 };
 
 export default SoftwareProductDependenciesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
index 1f27ed8311..c25561da17 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
@@ -17,7 +17,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
 	SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null,
-	ADD_SOFTWARE_PRODUCT_DEPENDENCY: null
+	ADD_SOFTWARE_PRODUCT_DEPENDENCY: null,
+	UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null
 });
 
 export const relationTypes = {
@@ -27,3 +28,5 @@ export const relationTypes = {
 export const relationTypesOptions = [
     {value: relationTypes.DEPENDS_ON, label: 'Depends On'}
 ];
+
+export const NEW_RULE_TEMP_ID = 'newRuleTempId';
\ No newline at end of file
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
index 3fb479eedc..3edd3b899a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
@@ -15,21 +15,31 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, relationTypes} from './SoftwareProductDependenciesConstants.js';
+import {actionTypes, relationTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
 import {checkCyclesAndMarkDependencies} from './SoftwareProductDependenciesUtils.js';
-import uuid from 'uuid-js';
 
-export default (state = [], action) => {
+let newRowObject = {id: NEW_RULE_TEMP_ID, targetId: null, sourceId: null, relationType: relationTypes.DEPENDS_ON};
+
+export default (state = [Object.assign({}, newRowObject) ], action) => {
 	switch (action.type) {
 		case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE:
+			// copying the entity with the data for the row that is in the 'add' mode
+			let newDependency = state.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
+			action.dependenciesList.push(newDependency);
+			// returning list from the server with our 'new entity' row
 			return checkCyclesAndMarkDependencies(action.dependenciesList);
-		case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY:
-			return [...state, {
-				sourceId: null,
-				relationType: relationTypes.DEPENDS_ON,
-				targetId: null,
-				id: uuid.create()
-			}];
+		case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY :
+			// resetting the entity with the data for the 'add' mode for a new entity
+			let newArray = state.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
+			newArray.push(Object.assign({}, newRowObject));
+			return newArray;
+		case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY :
+			// we really only need this for the 'new' row since we need to change the state to get
+			// everything updated
+			let updateArrayIndex = state.findIndex(dependency => dependency.id === NEW_RULE_TEMP_ID);
+			let updateArray = state.slice();
+			updateArray.splice(updateArrayIndex, 1, action.item);
+			return checkCyclesAndMarkDependencies(updateArray);
 		default:
 			return state;
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
index a427470a4f..ed92de7bb1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
@@ -20,7 +20,42 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
 import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
 import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
-import {relationTypesOptions} from './SoftwareProductDependenciesConstants.js';
+import {relationTypesOptions, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
+
+
+const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => {
+	return (
+		<SelectActionTableRow
+			key={dependency.id}
+			onAction={onAction}
+			overlayMsg={i18n('There is a loop between selections')}
+			hasError={dependency.hasCycle}
+			hasErrorIndication
+			showAction={showAction}
+			actionIcon={actionIcon}>
+			<SelectActionTableCell
+				options={sourceOptions}
+				selected={dependency.sourceId}
+				placeholder={i18n('Select VFC...')}
+				clearable={false}
+				onChange={newVal =>  {
+					dependency.sourceId = newVal;
+					onDataChanged(dependency);
+				}} />
+			<SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
+			<SelectActionTableCell
+				placeholder={i18n('Select VFC...')}
+				options={targetOptions}
+				selected={dependency.targetId}
+				clearable={false}
+				onChange={newVal =>  {
+					dependency.targetId = newVal;
+					onDataChanged(dependency);
+				}} />
+		</SelectActionTableRow>
+	);
+};
+
 
 export default class SoftwareProductDependenciesView extends React.Component {
 	filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
@@ -46,8 +81,7 @@ export default class SoftwareProductDependenciesView extends React.Component {
 	}
 
 	render() {
-		let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, isReadOnlyMode} = this.props;
-		let canAdd = softwareProductDependencies.length < componentsOptions.length * (componentsOptions.length - 1);
+		let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props;
 		let sourceToTargetMapping = {};
 		softwareProductDependencies.map(dependency => {
 			let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId);
@@ -55,47 +89,42 @@ export default class SoftwareProductDependenciesView extends React.Component {
 				sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId];
 			}
 		});
+		let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
+		let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
 		return (
 			<div className='software-product-dependencies'>
-				<div className='software-product-dependencies-title'>{i18n('Dependencies')}</div>
+				<div className='page-title'>{i18n('Dependencies')}</div>
 				<SelectActionTable
-					columns={['Source', 'Relation Type', 'Target']}
+					columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]}
 					numOfIcons={2}
-					isReadOnlyMode={isReadOnlyMode}
-					onAdd={canAdd ? onAddDependency : undefined}
-					onAddItem={i18n('Add Rule')}>
-					{softwareProductDependencies.map(dependency => (
-						<SelectActionTableRow
+					isReadOnlyMode={isReadOnlyMode}>
+					{!isReadOnlyMode && <TableActionRow
+						key={newDependency.id}
+						actionIcon='plusCircle'
+						onAction={() => onAddDependency(newDependency)}
+						dependency={newDependency}
+						componentsOptions={componentsOptions}
+						sourceToTargetMapping={sourceToTargetMapping}
+						onDataChanged={onDataChanged}
+						sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
+						targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
+						showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> }
+					{depList.map(dependency => (
+						<TableActionRow
 							key={dependency.id}
-							onDelete={() => onDataChanged(softwareProductDependencies.filter(currentDependency => currentDependency.id !== dependency.id))}
-							overlayMsg={i18n('There is a loop between selections')}
-							hasError={dependency.hasCycle}
-							hasErrorIndication
-							showDelete={dependency.id !== 'fake' || dependency.hasCycle !== undefined}>
-							<SelectActionTableCell
-								options={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-								selected={dependency.sourceId}
-								placeholder={i18n('Select VFC...')}
-								onChange={newSourceId => onDataChanged(softwareProductDependencies.map(currentDependency =>
-									({...currentDependency, sourceId: currentDependency.id === dependency.id ? newSourceId : currentDependency.sourceId})
-								))} />
-							<SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
-							<SelectActionTableCell
-								placeholder={i18n('Select VFC...')}
-								options={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-								selected={dependency.targetId}
-								onChange={newTargetId => onDataChanged(softwareProductDependencies.map(currentDependency =>
-									({...currentDependency, targetId: currentDependency.id === dependency.id ? newTargetId : currentDependency.targetId})
-								))} />
-						</SelectActionTableRow>
+							actionIcon='trashO'
+							onAction={() => onDeleteDependency(dependency)}
+							dependency={dependency}
+							componentsOptions={componentsOptions}
+							sourceToTargetMapping={sourceToTargetMapping}
+							sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
+							targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
+							onDataChanged={onDataChanged}
+							showAction={true}/>
 					))}
 				</SelectActionTable>
 			</div>
 		);
 	}
 
-	save() {
-		let {onSubmit, softwareProductDependencies} = this.props;
-		return onSubmit(softwareProductDependencies);
-	}
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
index 98f773b465..a5c70068b0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
@@ -18,13 +18,10 @@ import SoftwareProductDeploymentView from './SoftwareProductDeploymentView.jsx';
 import SoftwareProductDeploymentActionHelper from './SoftwareProductDeploymentActionHelper.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 
 export function mapStateToProps({softwareProduct}) {
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}},softwareProductComponents: {componentsList}, softwareProductDeployment: {deploymentFlavors}} = softwareProduct;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
+	let {softwareProductComponents: {componentsList}, softwareProductDeployment: {deploymentFlavors}} = softwareProduct;
 	return {
-		isReadOnlyMode,
 		deploymentFlavors,
 		componentsList
 	};
@@ -37,7 +34,7 @@ function mapActionToProps(dispatch, {softwareProductId, version}) {
 		onDeleteDeployment: ({id, model}) => dispatch({
 			type: modalActionTypes.GLOBAL_MODAL_WARNING,
 			data:{
-				msg: i18n(`Are you sure you want to delete "${model}"?`),
+				msg: i18n('Are you sure you want to delete "{model}"?', {model: model}),
 				onConfirmed: () => SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: id, version})
 			}
 		}),
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
index 81477ecff7..860d02c343 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
@@ -26,10 +27,10 @@ export default class SoftwareProductDeployment extends React.Component {
 	};
 
 	static propTypes = {
-		onAddDeployment: React.PropTypes.func.isRequired,
-		onDeleteDeployment: React.PropTypes.func.isRequired,
-		onEditDeployment: React.PropTypes.func.isRequired,
-		isReadOnlyMode: React.PropTypes.bool.isRequired
+		onAddDeployment: PropTypes.func.isRequired,
+		onDeleteDeployment: PropTypes.func.isRequired,
+		onEditDeployment: PropTypes.func.isRequired,
+		isReadOnlyMode: PropTypes.bool.isRequired
 	};
 
 	render() {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
index ba00d4e56e..c24548b7b9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
@@ -16,12 +16,14 @@
 import {connect} from 'react-redux';
 import SoftwareProductDeploymentEditorView from './SoftwareProductDeploymentEditorView.jsx';
 import SoftwareProdcutDeploymentActionHelper from '../SoftwareProductDeploymentActionHelper.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-
 import {DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js';
 
-export function mapStateToProps({licenseModel, softwareProduct}) {
+export function mapStateToProps({
+	licenseModel,
+	softwareProduct,
+	currentScreen: {props: {isReadOnlyMode}}
+}) {
 	let {
 		softwareProductEditor: {
 			data: currentSoftwareProduct = {}
@@ -48,7 +50,6 @@ export function mapStateToProps({licenseModel, softwareProduct}) {
 			}
 	} = licenseModel;
 
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 	let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData ? currentSoftwareProduct.licensingData.featureGroups || [] : [];
 	let selectedFeatureGroupsList = featureGroupsList
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
index 2d621cd2f5..7c9ae438d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
@@ -29,7 +29,7 @@ export default class SoftwareProductDeploymentEditorView extends React.Component
 					isValid={this.props.isFormValid}
 					formReady={this.props.formReady}
 					className='vsp-deployment-editor'>
-					<GridSection>
+					<GridSection hasLastColSet>
 						<GridItem colSpan={1}>
 							<Input
 								onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})}
@@ -41,7 +41,7 @@ export default class SoftwareProductDeploymentEditorView extends React.Component
 								isRequired={true}
 								type='text'/>
 						</GridItem>
-						<GridItem colSpan={3}>
+						<GridItem colSpan={3} lastColInRow>
 							<Input
 								onChange={description => onDataChanged({description})}
 								label={i18n('Description')}
@@ -52,7 +52,7 @@ export default class SoftwareProductDeploymentEditorView extends React.Component
 								type='text'/>
 						</GridItem>
 					</GridSection>
-					<GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')}>
+					<GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')} hasLastColSet>
 						<GridItem colSpan={1}>
 							<SelectInput
 								data-test-id='deployment-feature-groups'
@@ -71,8 +71,8 @@ export default class SoftwareProductDeploymentEditorView extends React.Component
 							<span>{i18n('Please assign Feature Groups in VSP General')}</span>
 						</GridItem>
 					</GridSection>}
-					<GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table'>
-						<GridItem colSpan={4}>
+					<GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table' hasLastColSet>
+						<GridItem colSpan={4} lastColInRow>
 							<SelectActionTable
 								columns={['Virtual Function Components', 'Compute Flavors']}
 								numOfIcons={0}>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
index ac0282e593..b7ddf134bb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
@@ -15,19 +15,24 @@
  */
 import {connect} from 'react-redux';
 
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import SoftwareProductDetailsView from './SoftwareProductDetailsView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import {PRODUCT_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
 
-export const mapStateToProps = ({finalizedLicenseModelList, softwareProduct, licenseModel: {licenseAgreement, featureGroup}}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct, genericFieldInfo}, softwareProductCategories, softwareProductQuestionnaire} = softwareProduct;
+export const mapStateToProps = ({
+	finalizedLicenseModelList,
+	softwareProduct,
+	licenseModel: {licenseAgreement, featureGroup}
+}) => {
+
+	let {softwareProductEditor: {data: currentSoftwareProduct, licensingVersionsList = [], genericFieldInfo}, softwareProductCategories, softwareProductQuestionnaire} = softwareProduct;
 	let {licensingData = {}, licensingVersion} = currentSoftwareProduct;
 	let licenseAgreementList = [], filteredFeatureGroupsList = [];
-	licenseAgreementList = licenseAgreement.licenseAgreementList;
-	if(licensingVersion && licensingVersion !== '' && licensingData && licensingData.licenseAgreement) {
+	licenseAgreementList = licensingVersion ?
+		licenseAgreement.licenseAgreementList : [];
+	if(licensingVersion && licensingData && licensingData.licenseAgreement) {
 		let selectedLicenseAgreement = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement);
 		if (selectedLicenseAgreement) {
 			let featureGroupsList = featureGroup.featureGroupsList.filter(({referencingLicenseAgreements}) => referencingLicenseAgreements.includes(selectedLicenseAgreement.id));
@@ -37,7 +42,6 @@ export const mapStateToProps = ({finalizedLicenseModelList, softwareProduct, lic
 		}
 	}
 	let {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap} = softwareProductQuestionnaire;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 
 	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
@@ -45,24 +49,25 @@ export const mapStateToProps = ({finalizedLicenseModelList, softwareProduct, lic
 		currentSoftwareProduct,
 		softwareProductCategories,
 		licenseAgreementList,
+		licensingVersionsList,
 		featureGroupsList: filteredFeatureGroupsList,
 		finalizedLicenseModelList,
 		qdata,
-		isReadOnlyMode,
 		isFormValid,
 		genericFieldInfo,
 		qGenericFieldInfo,
 		dataMap
 	};
+
 };
 
-export const mapActionsToProps = (dispatch) => {
+export const mapActionsToProps = (dispatch, {version}) => {
 	return {
 		onDataChanged: (deltaData, formName) => ValidationHelper.dataChanged(dispatch, {deltaData, formName}),
 		onVendorParamChanged: (deltaData, formName) => SoftwareProductActionHelper.softwareProductEditorVendorChanged(dispatch, {deltaData, formName}),
 		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: PRODUCT_QUESTIONNAIRE}),
 		onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData}),
-		onSubmit: (softwareProduct, qdata) =>{ return SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata});}
+		onSubmit: (softwareProduct, qdata) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version})
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
index d62207ff9f..54dc1a4d37 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
@@ -45,6 +45,11 @@ export default (state = {}, action) => {
 				...state,
 				mapOfExpandedIds: action.mapOfExpandedIds
 			};
+		case actionTypes.LOAD_LICENSING_VERSIONS_LIST:
+			return {
+				...state,
+				licensingVersionsList: action.licensingVersionsList
+			};
 		default:
 			return state;
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
index e4caf92c21..f6199ec83e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
@@ -13,7 +13,8 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
@@ -55,7 +56,7 @@ class GeneralSection extends React.Component {
 		let {genericFieldInfo} = this.props;
 		return (
 			<div>
-			{genericFieldInfo && <GridSection title={i18n('General')}>
+			{genericFieldInfo && <GridSection title={i18n('General')} className='grid-section-general'>
 			<GridItem>
 				<Input
 					data-test-id='vsp-name'
@@ -74,8 +75,8 @@ class GeneralSection extends React.Component {
 					onChange={e => this.onVendorParamChanged(e)}>
 					{sortByStringProperty(
 						this.props.finalizedLicenseModelList,
-						'vendorName'
-					).map(lm => <option key={lm.id} value={lm.id}>{lm.vendorName}</option>)
+						'name'
+					).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>)
 					}
 				</Input>
 				<Input
@@ -117,7 +118,7 @@ class LicensesSection extends React.Component {
 	static propTypes = {
 		onVendorParamChanged: PropTypes.func.isRequired,
 		vendorId: PropTypes.string,
-		licensingVersion: PropTypes.object,
+		licensingVersion: PropTypes.string,
 		licensingVersionsList: PropTypes.array,
 		licensingData: PropTypes.shape({
 			licenceAgreement: PropTypes.string,
@@ -132,7 +133,7 @@ class LicensesSection extends React.Component {
 	onVendorParamChanged(e) {
 		const selectedIndex = e.target.selectedIndex;
 		const licensingVersion = e.target.options[selectedIndex].value;
-		this.props.onVendorParamChanged({vendorId: this.props.vendorId, licensingVersion:{id:licensingVersion, label: licensingVersion}}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
+		this.props.onVendorParamChanged({vendorId: this.props.vendorId, licensingVersion}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
 	}
 
 	onLicensingDataChanged(e) {
@@ -148,7 +149,7 @@ class LicensesSection extends React.Component {
 					<Input
 						data-test-id='vsp-licensing-version'
 						onChange={e => this.onVendorParamChanged(e)}
-						value={this.props.licensingVersion ? this.props.licensingVersion.id : ''}
+						value={this.props.licensingVersion || ''}
 						label={i18n('Licensing Version')}
 						type='select'>
 						{this.props.licensingVersionsList.map(version =>
@@ -196,6 +197,7 @@ const AvailabilitySection = (props) => (
 				data-test-id='vsp-use-availability-zone'
 				label={i18n('Use Availability Zones for High Availability')}
 				type='checkbox'
+				checked={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']}
 				value={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']}
 				onChange={(aZone) => props.onQDataChanged({'general/availability/useAvailabilityZonesForHighAvailability' : aZone})} />
 		</GridItem>
@@ -274,7 +276,7 @@ class SoftwareProductDetails extends Component {
 			subCategory: PropTypes.string,
 			vendorId: PropTypes.string,
 			vendorName: PropTypes.string,
-			licensingVersion: PropTypes.object,
+			licensingVersion: PropTypes.string,
 			licensingData: PropTypes.shape({
 				licenceAgreement: PropTypes.string,
 				featureGroups: PropTypes.array
@@ -292,10 +294,6 @@ class SoftwareProductDetails extends Component {
 		onVendorParamChanged: PropTypes.func.isRequired
 	};
 
-	state = {
-		licensingVersionsList: []
-	};
-
 	prepareDataForGeneralSection(){
 		let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, currentSoftwareProduct, genericFieldInfo} = this.props;
 		let {name, description, vendorId, subCategory} = currentSoftwareProduct;
@@ -317,12 +315,11 @@ class SoftwareProductDetails extends Component {
 	prepareDataForLicensesSection(){
 		let { featureGroupsList, licenseAgreementList, currentSoftwareProduct } = this.props;
 		let {vendorId, licensingVersion, licensingData = {}} = currentSoftwareProduct;
-		let licensingVersionsList = this.state.licensingVersionsList.length > 0 ? this.state.licensingVersionsList : this.refreshVendorVersionsList(vendorId);
 		return {
 			onVendorParamChanged: args => this.onVendorParamChanged(args),
 			vendorId,
 			licensingVersion,
-			licensingVersionsList,
+			licensingVersionsList: this.buildLicensingVersionsListItems(),
 			licensingData,
 			onFeatureGroupsChanged: args => this.onFeatureGroupsChanged(args),
 			onLicensingDataChanged: args => this.onLicensingDataChanged(args),
@@ -361,10 +358,10 @@ class SoftwareProductDetails extends Component {
 	onVendorParamChanged({vendorId, licensingVersion}) {
 		let {finalizedLicenseModelList, onVendorParamChanged} = this.props;
 		if(!licensingVersion) {
-			const licensingVersionsList = this.refreshVendorVersionsList(vendorId);
-			licensingVersion = licensingVersionsList.length > 0 ? licensingVersionsList[0].enum : '';
+			const licensingVersionsList = this.buildLicensingVersionsListItems();
+			licensingVersion = licensingVersionsList[0].enum;
 		}
-		let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).vendorName || '';
+		let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).name || '';
 		let deltaData = {
 			vendorId,
 			vendorName,
@@ -376,25 +373,15 @@ class SoftwareProductDetails extends Component {
 
 	}
 
-	refreshVendorVersionsList(vendorId) {
-		if(!vendorId) {
-			return [];
-		}
+	buildLicensingVersionsListItems() {
+		let {licensingVersionsList} = this.props;
 
-		let {finalVersions} = this.props.finalizedLicenseModelList.find(vendor => vendor.id === vendorId);
-
-		let licensingVersionsList = [{
+		let licensingVersionsListItems = [{
 			enum: '',
 			title: i18n('Select...')
 		}];
-		if(finalVersions) {
-			finalVersions.forEach(version => licensingVersionsList.push({
-				enum: version.id,
-				title: version.label
-			}));
-		}
 
-		return licensingVersionsList;
+		return licensingVersionsListItems.concat(licensingVersionsList.map(version => ({enum: version.id, title: version.name})));
 	}
 
 	onFeatureGroupsChanged({featureGroups}) {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
index a13e742006..90ea182dfa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
@@ -15,14 +15,18 @@
  */
 import {connect} from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
-import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import LandingPageView from './SoftwareProductLandingPageView.jsx';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 import {onboardingMethod} from '../SoftwareProductConstants.js';
+import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
+import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
 
-export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreement}}) => {
+
+export const mapStateToProps = ({
+	softwareProduct,
+	licenseModel: {licenseAgreement},
+}) => {
 	let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = []} = softwareProduct;
 	let {licensingData = {}} = currentSoftwareProduct;
 	let {licenseAgreementList} = licenseAgreement;
@@ -44,7 +48,6 @@ export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreemen
 	}
 	fullCategoryDisplayName = `${subCategoryName} (${categoryName})`;
 
-	const isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 
 	return {
 		currentSoftwareProduct: {
@@ -52,7 +55,6 @@ export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreemen
 			licenseAgreementName,
 			fullCategoryDisplayName
 		},
-		isReadOnlyMode,
 		componentsList,
 		isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
 	};
@@ -60,11 +62,12 @@ export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreemen
 
 const mapActionsToProps = (dispatch, {version}) => {
 	return {
-		onDetailsSelect: ({id: softwareProductId, vendorId: licenseModelId, version}) => OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, {
-			softwareProductId,
-			licenseModelId,
-			version
-		}),
+		onDetailsSelect: ({id: softwareProductId}) =>
+			ScreensHelper.loadScreen(dispatch, {
+				screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, screenType: screenTypes.SOFTWARE_PRODUCT,
+				props: {softwareProductId, version}
+			}),
+
 		onUpload: (softwareProductId, formData) =>
 			SoftwareProductActionHelper.uploadFile(dispatch, {
 				softwareProductId,
@@ -100,9 +103,10 @@ const mapActionsToProps = (dispatch, {version}) => {
 				msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist')
 			}
 		}),
-		onComponentSelect: ({id: softwareProductId, componentId}) => {
-			OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version });
-		},
+		onComponentSelect: ({id: softwareProductId, componentId}) => ScreensHelper.loadScreen(dispatch, {
+			screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT,
+			props: {softwareProductId, version, componentId}
+		}),
 		/** for the next version */
 		onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch)
 	};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index 72a416473c..56402b4417 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Dropzone from 'react-dropzone';
 
@@ -22,25 +23,25 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import SoftwareProductComponentsList from '../components/SoftwareProductComponentsList.js';
-
-const SoftwareProductPropType = React.PropTypes.shape({
-	name: React.PropTypes.string,
-	description: React.PropTypes.string,
-	version: React.PropTypes.object,
-	id: React.PropTypes.string,
-	categoryId: React.PropTypes.string,
-	vendorId: React.PropTypes.string,
-	status: React.PropTypes.string,
-	licensingData: React.PropTypes.object,
-	validationData: React.PropTypes.object
+import SoftwareProductComponentsList from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js';
+
+const SoftwareProductPropType = PropTypes.shape({
+	name: PropTypes.string,
+	description: PropTypes.string,
+	version: PropTypes.object,
+	id: PropTypes.string,
+	categoryId: PropTypes.string,
+	vendorId: PropTypes.string,
+	status: PropTypes.string,
+	licensingData: PropTypes.object,
+	validationData: PropTypes.object
 });
 
-const ComponentPropType = React.PropTypes.shape({
-	id: React.PropTypes.string,
-	name: React.PropTypes.string,
-	displayName: React.PropTypes.string,
-	description: React.PropTypes.string
+const ComponentPropType = PropTypes.shape({
+	id: PropTypes.string,
+	name: PropTypes.string,
+	displayName: PropTypes.string,
+	description: PropTypes.string
 });
 
 class SoftwareProductLandingPageView extends React.Component {
@@ -54,18 +55,19 @@ class SoftwareProductLandingPageView extends React.Component {
 
 	static propTypes = {
 		currentSoftwareProduct: SoftwareProductPropType,
-		isReadOnlyMode: React.PropTypes.bool,
-		componentsList: React.PropTypes.arrayOf(ComponentPropType),
-		onDetailsSelect: React.PropTypes.func,
-		onUpload: React.PropTypes.func,
-		onUploadConfirmation: React.PropTypes.func,
-		onInvalidFileSizeUpload: React.PropTypes.func,
-		onComponentSelect: React.PropTypes.func,
-		onAddComponent: React.PropTypes.func
+		isReadOnlyMode: PropTypes.bool,
+		componentsList: PropTypes.arrayOf(ComponentPropType),
+		version: PropTypes.object,
+		onDetailsSelect: PropTypes.func,
+		onUpload: PropTypes.func,
+		onUploadConfirmation: PropTypes.func,
+		onInvalidFileSizeUpload: PropTypes.func,
+		onComponentSelect: PropTypes.func,
+		onAddComponent: PropTypes.func
 	};
 
 	render() {
-		let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect, componentsList} =  this.props;
+		let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect} =  this.props;
 		return (
 			<div className='software-product-landing-wrapper'>
 				<Dropzone
@@ -88,11 +90,7 @@ class SoftwareProductLandingPageView extends React.Component {
 						</div>
 					</div>
 				</Dropzone>
-				<SoftwareProductComponentsList
-					isReadOnlyMode={isReadOnlyMode}
-					componentsList={componentsList}
-					isManual={isManual}
-					currentSoftwareProduct={currentSoftwareProduct}/>
+				<SoftwareProductComponentsList/>
 			</div>
 		);
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
index 024c5cc44c..e8c365f124 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
@@ -23,11 +24,12 @@ import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemVi
 class SoftwareProductNetworksView extends React.Component {
 
 	static propTypes = {
-		networksList: React.PropTypes.arrayOf(React.PropTypes.shape({
-			id: React.PropTypes.string.isRequired,
-			name: React.PropTypes.string.isRequired,
-			dhcp: React.PropTypes.bool.isRequired
-		})).isRequired
+		networksList: PropTypes.arrayOf(PropTypes.shape({
+			id: PropTypes.string.isRequired,
+			name: PropTypes.string.isRequired,
+			dhcp: PropTypes.bool.isRequired
+		})).isRequired,
+		isReadOnlyMode: PropTypes.bool.isRequired
 	};
 
 	state = {
@@ -36,6 +38,7 @@ class SoftwareProductNetworksView extends React.Component {
 
 	render() {
 		const {localFilter} = this.state;
+		const {isReadOnlyMode} = this.props;
 
 		return (
 			<div className='vsp-networks-page'>
@@ -45,19 +48,19 @@ class SoftwareProductNetworksView extends React.Component {
 					placeholder={i18n('Filter Networks')}
 					onFilter={value => this.setState({localFilter: value})}
 					twoColumns>
-					{this.filterList().map(network => this.renderNetworksListItem(network))}
+					{this.filterList().map(network => this.renderNetworksListItem({network, isReadOnlyMode}))}
 				</ListEditorView>
 			</div>
 		);
 	}
 
-	renderNetworksListItem(network) {
+	renderNetworksListItem({network, isReadOnlyMode}) {
 		let {id, name, dhcp} = network;
 		return (
 			<ListEditorItemView
 				key={id}
 				className='list-editor-item-view'
-				isReadOnlyMode={true}>
+				isReadOnlyMode={isReadOnlyMode}>
 
 				<ListEditorItemViewField>
 					<div className='name'>{name}</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
new file mode 100644
index 0000000000..aa39c87dd0
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
@@ -0,0 +1,99 @@
+/*!
+ * 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 PropTypes from 'prop-types';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
+import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
+
+
+class SoftwareProductProcessesListView extends React.Component {
+
+	state = {
+		localFilter: ''
+	};
+
+	static propTypes = {
+		onAddProcess: PropTypes.func.isRequired,
+		onEditProcess: PropTypes.func.isRequired,
+		onDeleteProcess: PropTypes.func.isRequired,
+		isReadOnlyMode: PropTypes.bool.isRequired,
+		currentSoftwareProduct:PropTypes.object,
+		addButtonTitle: PropTypes.string
+	};
+
+	render() {
+		const {localFilter} = this.state;
+		let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props;
+
+		return (
+			<ListEditorView
+				plusButtonTitle={addButtonTitle}
+				filterValue={localFilter}
+				placeholder={i18n('Filter Process')}
+				onAdd={onAddProcess}
+				isReadOnlyMode={isReadOnlyMode}
+				title={i18n('Process Details')}
+				onFilter={value => this.setState({localFilter: value})}>
+				{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
+			</ListEditorView>);
+	}
+
+	renderProcessListItem(process, isReadOnlyMode) {
+		let {id, name, description, artifactName = ''} = process;
+		let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} =  this.props;
+		return (
+			<ListEditorItemView
+				key={id}
+				className='list-editor-item-view'
+				isReadOnlyMode={isReadOnlyMode}
+				onSelect={() => onEditProcess(process)}
+				onDelete={() => onDeleteProcess(process, version)}>
+
+				<div className='list-editor-item-view-field'>
+					<div className='title'>{i18n('Name')}</div>
+					<div className='name'>{name}</div>
+				</div>
+				<div className='list-editor-item-view-field'>
+					<div className='title'>{i18n('Artifact name')}</div>
+					<div className='artifact-name'>{artifactName}</div>
+				</div>
+				<div className='list-editor-item-view-field'>
+					<div className='title'>{i18n('Notes')}</div>
+					<div className='description'>{description}</div>
+				</div>
+			</ListEditorItemView>
+		);
+	}
+
+	filterList() {
+		let {processesList} = this.props;
+		let {localFilter} = this.state;
+
+		if (localFilter.trim()) {
+			const filter = new RegExp(escape(localFilter), 'i');
+			return processesList.filter(({name = '', description = ''}) => {
+				return escape(name).match(filter) || escape(description).match(filter);
+			});
+		}
+		else {
+			return processesList;
+		}
+	}
+}
+
+export default SoftwareProductProcessesListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
index c70452919b..b0403abde5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
@@ -16,33 +16,30 @@
 import {connect} from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 
 import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
 import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx';
 
 export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 	let {data} = processesEditor;
 
 	return {
 		currentSoftwareProduct,
 		processesList,
 		isDisplayEditor: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id),
-		isReadOnlyMode
+		isModalInEditMode: Boolean(data && data.id)
 	};
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 	return {
 		onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch),
 		onEditProcess: (process) => SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
-		onDeleteProcess: (process, version) => dispatch({
+		onDeleteProcess: (process) => dispatch({
 			type: modalActionTypes.GLOBAL_MODAL_WARNING,
 			data:{
-				msg: i18n(`Are you sure you want to delete "${process.name}"?`),
+				msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
 				confirmationButtonText: i18n('Delete'),
 				title: i18n('Delete'),
 				onConfirmed: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
index ff787c357e..fc194fac13 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
@@ -45,7 +45,7 @@ const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 			SoftwareProductProcessesActionHelper.closeEditor(dispatch);
 			SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process});
 		},
-		onClose: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
+		onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
 		onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
 	};
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
new file mode 100644
index 0000000000..72b2f8cb38
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -0,0 +1,181 @@
+/*!
+ * 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 PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
+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 GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+
+const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
+	id: PropTypes.string,
+	name: PropTypes.string,
+	description: PropTypes.string,
+	artifactName: PropTypes.string,
+	type: PropTypes.string
+});
+
+
+
+class SoftwareProductProcessesEditorForm extends React.Component {
+
+
+	static propTypes = {
+		data: SoftwareProductProcessEditorPropType,
+		previousData: SoftwareProductProcessEditorPropType,
+		isReadOnlyMode: React.PropTypes.bool,
+		onDataChanged: React.PropTypes.func,
+		onSubmit: React.PropTypes.func,
+		onCancel: React.PropTypes.func
+	};
+	state = {
+		dragging: false,
+		files: []
+	};
+
+	render() {
+		let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props;
+		let {name, description, artifactName, type} = data;
+
+		return (
+			<div>
+				{genericFieldInfo && <Form
+					ref='validationForm'
+					hasButtons={true}
+					labledButtons={true}
+					isReadOnlyMode={isReadOnlyMode}
+					onSubmit={ () => this.submit() }
+					onReset={ () => onCancel() }
+					isValid={this.props.isFormValid}
+					formReady={this.props.formReady}
+					onValidateForm={() => this.props.onValidateForm() }
+					className='vsp-processes-editor'>
+					<div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
+						<Dropzone
+							className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
+							onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
+							onDragEnter={() => this.setState({dragging: true})}
+							onDragLeave={() => this.setState({dragging: false})}
+							multiple={false}
+							disableClick={true}
+							ref='processEditorFileInput'
+							name='processEditorFileInput'>
+							<GridSection hasLastColSet={true}>
+								<GridItem colSpan={2}>
+									<Input
+										onChange={name => onDataChanged({name})}
+										isValid={genericFieldInfo.name.isValid}
+										isRequired={true}
+										data-test-id='name'
+										errorText={genericFieldInfo.name.errorText}
+										label={i18n('Name')}
+										value={name}
+										type='text'/>
+								</GridItem>
+								<GridItem colSpan={2} lastColInRow={true}>
+									<label>&nbsp;</label>
+									<DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/>
+								</GridItem>
+							</GridSection>
+							<GridSection hasLastColSet={true}>
+								<GridItem colSpan={2}>
+									<Input
+										name='vsp-process-description'
+										groupClassName='vsp-process-description'
+										onChange={description => onDataChanged({description})}
+										isValid={genericFieldInfo.description.isValid}
+										errorText={genericFieldInfo.description.errorText}
+										label={i18n('Notes')}
+										value={description}
+										data-test-id='vsp-process-description'
+										type='textarea'/>
+								</GridItem>
+								<GridItem colSpan={2} lastColInRow={true}>
+									<Input
+										label={i18n('Artifacts')}
+										value={artifactName}
+										type='text'
+										disabled/>
+									<Input
+										onChange={e => {
+											// setting the unit to the correct value
+											const selectedIndex = e.target.selectedIndex;
+											const val = e.target.options[selectedIndex].value;
+											onDataChanged({type: val});}
+										}
+										value={type}
+										label={i18n('Process Type')}
+										className='process-type'
+										data-test-id='process-type'
+										isValid={genericFieldInfo.type.isValid}
+										errorText={genericFieldInfo.type.errorText}
+										type='select'>
+										{optionsInputValues.PROCESS_TYPE.map(mtype =>
+											<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
+									</Input>
+								</GridItem>
+							</GridSection>
+						</Dropzone>
+					</div>
+				</Form>}
+			</div>
+		);
+	}
+
+	submit() {
+		const {data: process, previousData: previousProcess} = this.props;
+		let {files} = this.state;
+		let formData = false;
+		if (files.length) {
+			let file = files[0];
+			formData = new FormData();
+			formData.append('upload', file);
+		}
+
+		let updatedProcess = {
+			...process,
+			formData
+		};
+		this.props.onSubmit({process: updatedProcess, previousProcess});
+	}
+
+
+	handleImportSubmit(files, rejectedFiles) {
+		if (files.length > 0) {
+			let {onDataChanged} = this.props;
+			this.setState({
+				dragging: false,
+				complete: '0',
+				files
+			});
+			onDataChanged({artifactName: files[0].name});
+		}
+		else if (rejectedFiles.length > 0) {
+			this.setState({
+				dragging: false
+			});
+			if (DEBUG) {
+				console.log('file was rejected.' + rejectedFiles[0].name);
+			}
+		}
+	}
+}
+
+export default SoftwareProductProcessesEditorForm;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
index 0df36cf65d..9ce690a1ca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -14,167 +14,17 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import Dropzone from 'react-dropzone';
-import classnames from 'classnames';
 
-import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
-import i18n from 'nfvo-utils/i18n/i18n.js';
 import  {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
-import Form from 'nfvo-components/input/validation/Form.jsx';
-import Input from 'nfvo-components/input/validation/Input.jsx';
-import GridSection from 'nfvo-components/grid/GridSection.jsx';
-import GridItem from 'nfvo-components/grid/GridItem.jsx';
-
-const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
-	id: React.PropTypes.string,
-	name: React.PropTypes.string,
-	description: React.PropTypes.string,
-	artifactName: React.PropTypes.string,
-	type: React.PropTypes.string
-});
-
+import SoftwareProductProcessesEditorForm from './SoftwareProductProcessesEditorForm.jsx';
 
 
 class SoftwareProductProcessesEditorView extends React.Component {
-
-	state = {
-		dragging: false,
-		files: []
-	};
-
-	static propTypes = {
-		data: SoftwareProductProcessEditorPropType,
-		previousData: SoftwareProductProcessEditorPropType,
-		isReadOnlyMode: React.PropTypes.bool,
-		onDataChanged: React.PropTypes.func,
-		onSubmit: React.PropTypes.func,
-		onClose: React.PropTypes.func
-	};
-
 	render() {
-		let {data = {}, isReadOnlyMode, onDataChanged, onClose, genericFieldInfo} = this.props;
-		let {name, description, artifactName, type} = data;
-
 		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref='validationForm'
-					hasButtons={true}
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					onSubmit={ () => this.submit() }
-					onReset={ () => onClose() }
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.props.onValidateForm() }
-					className='vsp-processes-editor'>
-					<div className={classnames('vsp-processes-editor-data', {'disabled': isReadOnlyMode})}>
-						<Dropzone
-							className={classnames('vsp-process-dropzone-view', {'active-dragging': this.state.dragging})}
-							onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
-							onDragEnter={() => this.setState({dragging: true})}
-							onDragLeave={() => this.setState({dragging: false})}
-							multiple={false}
-							disableClick={true}
-							ref='processEditorFileInput'
-							name='processEditorFileInput'>
-							<GridSection>
-								<GridItem colSpan={2}>
-									<Input
-										onChange={name => onDataChanged({name})}
-										isValid={genericFieldInfo.name.isValid}
-										isRequired={true}
-										data-test-id='name'
-										errorText={genericFieldInfo.name.errorText}
-										label={i18n('Name')}
-										value={name}
-										type='text'/>
-								</GridItem>
-								<GridItem colSpan={2}>
-									<DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()}/>
-								</GridItem>
-							</GridSection>
-							<GridSection>
-								<GridItem colSpan={2}>
-									<Input
-										name='vsp-process-description'
-										groupClassName='vsp-process-description'
-										onChange={description => onDataChanged({description})}
-										isValid={genericFieldInfo.description.isValid}
-										errorText={genericFieldInfo.description.errorText}
-										label={i18n('Notes')}
-										value={description}
-										data-test-id='vsp-process-description'
-										type='textarea'/>
-								</GridItem>
-								<GridItem colSpan={2}>
-									<Input
-										label={i18n('Artifacts')}
-										value={artifactName}
-										type='text'
-										disabled/>
-									<Input
-										onChange={e => {
-											// setting the unit to the correct value
-											const selectedIndex = e.target.selectedIndex;
-											const val = e.target.options[selectedIndex].value;
-											onDataChanged({type: val});}
-										}
-										value={type}
-										label={i18n('Process Type')}
-										data-test-id='process-type'
-										isValid={genericFieldInfo.type.isValid}
-										errorText={genericFieldInfo.type.errorText}
-										type='select'>
-										{ProcessesOptionsInputValues.PROCESS_TYPE.map(mtype =>
-											<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-									</Input>
-								</GridItem>
-							</GridSection>
-						</Dropzone>
-					</div>
-				</Form>}
-			</div>
+			<SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/>
 		);
 	}
-
-	submit() {
-		const {data: process, previousData: previousProcess} = this.props;
-		let {files} = this.state;
-		let formData = false;
-		if (files.length) {
-			let file = files[0];
-			formData = new FormData();
-			formData.append('upload', file);
-		}
-
-		let updatedProcess = {
-			...process,
-			formData
-		};
-		this.props.onSubmit({process: updatedProcess, previousProcess});
-	}
-
-
-	handleImportSubmit(files, rejectedFiles) {
-		if (files.length > 0) {
-			let {onDataChanged} = this.props;
-			this.setState({
-				dragging: false,
-				complete: '0',
-				files
-			});
-			onDataChanged({artifactName: files[0].name});
-		}
-		else if (rejectedFiles.length > 0) {
-			this.setState({
-				dragging: false
-			});
-			if (DEBUG) {
-				console.log('file was rejected.' + rejectedFiles[0].name);
-			}
-		}
-	}
 }
 
 export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
index 8f52434042..e2cb4edf74 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -14,14 +14,12 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
 
-import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
-import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
-
 import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
-
+import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';
 
 
 class SoftwareProductProcessesView extends React.Component {
@@ -31,25 +29,25 @@ class SoftwareProductProcessesView extends React.Component {
 	};
 
 	static propTypes = {
-		onAddProcess: React.PropTypes.func.isRequired,
-		onEditProcess: React.PropTypes.func.isRequired,
-		onDeleteProcess: React.PropTypes.func.isRequired,
-		isDisplayEditor: React.PropTypes.bool.isRequired,
-		isReadOnlyMode: React.PropTypes.bool.isRequired,
-		currentSoftwareProduct:React.PropTypes.object
+		onAddProcess: PropTypes.func.isRequired,
+		onEditProcess: PropTypes.func.isRequired,
+		onDeleteProcess: PropTypes.func.isRequired,
+		isDisplayEditor: PropTypes.bool.isRequired,
+		isReadOnlyMode: PropTypes.bool.isRequired,
+		currentSoftwareProduct:PropTypes.object
 	};
 
 	render() {
 		return (
 			<div className='software-product-landing-view-right-side vsp-processes-page'>
 				{this.renderEditor()}
-				{this.renderProcessList()}
+				<SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/>
 			</div>
 		);
 	}
 
 	renderEditor() {
-		let {currentSoftwareProduct: {id, version}, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
+		let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
 		return (
 
 			<Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'>
@@ -62,66 +60,6 @@ class SoftwareProductProcessesView extends React.Component {
 			</Modal>
 		);
 	}
-
-	renderProcessList() {
-		const {localFilter} = this.state;
-		let {onAddProcess, isReadOnlyMode} = this.props;
-
-		return (
-			<ListEditorView
-				plusButtonTitle={i18n('Add Process Details')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Process')}
-				onAdd={onAddProcess}
-				isReadOnlyMode={isReadOnlyMode}
-				title={i18n('Process Details')}
-				onFilter={value => this.setState({localFilter: value})}>
-				{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	}
-
-	renderProcessListItem(process, isReadOnlyMode) {
-		let {id, name, description, artifactName = ''} = process;
-		let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditProcess(process)}
-				onDelete={() => onDeleteProcess(process, version)}>
-
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='name'>{name}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Artifact name')}</div>
-					<div className='artifact-name'>{artifactName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Notes')}</div>
-					<div className='description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
-
-	filterList() {
-		let {processesList} = this.props;
-		let {localFilter} = this.state;
-
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return processesList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return processesList;
-		}
-	}
 }
 
 export default SoftwareProductProcessesView;