Add collaboration feature

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

44 files changed, 330 insertions, 616 deletions

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});
 	}
 }