Add collaboration feature

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

13 files changed, 146 insertions, 143 deletions

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'