Adding Prettier and fixing up eslint version

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

74 files changed, 5562 insertions, 3449 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
index b13bde03c8..e59337c122 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
@@ -13,79 +13,83 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, forms} from './SoftwareProductComponentsConstants.js';
+import { actionTypes, forms } from './SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.COMPONENT_CREATE_OPEN: 
-			return {
-				...state,
-				formName: forms.CREATE_FORM,
-				formReady: null,
-				genericFieldInfo: {
-					'displayName' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'validateName', data: true}, {type: 'maxLength', data: 25}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					}
-				}
-			};
-		case actionTypes.COMPONENT_LOAD:
-			return {
-				...state,
-				data: action.component,
-				formReady: null,
-				formName: forms.ALL_SPC_FORMS,
-				genericFieldInfo: {
-					'displayName' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'vfcCode' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'nfcFunction' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 30}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				}
-			};
-		case actionTypes.COMPONENT_UPDATE:
-			return {
-				...state,
-				data: action.component
-			};
-		case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE:
-			return {
-				...state,
-				qdata: action.payload.qdata || state.qdata,
-				qschema: action.payload.qschema || state.qschema
-			};
-		case actionTypes.COMPONENT_DATA_CHANGED:
-			return {
-				...state,
-				data: {
-					...state.data,
-					...action.deltaData
-				}
-			};
-		case actionTypes.COMPONENT_DATA_CLEAR:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.COMPONENT_CREATE_OPEN:
+            return {
+                ...state,
+                formName: forms.CREATE_FORM,
+                formReady: null,
+                genericFieldInfo: {
+                    displayName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'validateName', data: true },
+                            { type: 'maxLength', data: 25 }
+                        ]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    }
+                }
+            };
+        case actionTypes.COMPONENT_LOAD:
+            return {
+                ...state,
+                data: action.component,
+                formReady: null,
+                formName: forms.ALL_SPC_FORMS,
+                genericFieldInfo: {
+                    displayName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    vfcCode: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    nfcFunction: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 30 }]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                }
+            };
+        case actionTypes.COMPONENT_UPDATE:
+            return {
+                ...state,
+                data: action.component
+            };
+        case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE:
+            return {
+                ...state,
+                qdata: action.payload.qdata || state.qdata,
+                qschema: action.payload.qschema || state.qschema
+            };
+        case actionTypes.COMPONENT_DATA_CHANGED:
+            return {
+                ...state,
+                data: {
+                    ...state.data,
+                    ...action.deltaData
+                }
+            };
+        case actionTypes.COMPONENT_DATA_CLEAR:
+            return {};
+        default:
+            return state;
+    }
 };
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 f74b2fe2fb..bffa9f7d25 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
@@ -1,50 +1,71 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js';
-import {onboardingMethod as onboardingMethodTypes} 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 { 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}?', {name: name});
+const generateMessage = name => {
+    return i18n('Are you sure you want to delete {name}?', { name: name });
 };
 
-const mapStateToProps = ({softwareProduct, currentScreen: {props: {version}}}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct;
-	let {componentsList} = softwareProductComponents;
-	let {onboardingMethod = onboardingMethodTypes.HEAT} = currentSoftwareProduct;
-	return {
-		currentSoftwareProduct,
-		componentsList,
-		isManual: onboardingMethod === onboardingMethodTypes.MANUAL,
-		version
-	};
+const mapStateToProps = ({
+    softwareProduct,
+    currentScreen: { props: { version } }
+}) => {
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents
+    } = softwareProduct;
+    let { componentsList } = softwareProductComponents;
+    let {
+        onboardingMethod = onboardingMethodTypes.HEAT
+    } = currentSoftwareProduct;
+    return {
+        currentSoftwareProduct,
+        componentsList,
+        isManual: onboardingMethod === onboardingMethodTypes.MANUAL,
+        version
+    };
 };
 
-const mapActionToProps = (dispatch) => {
-	return {
-		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
-				})
-			}
-		})
-	};
+const mapActionToProps = dispatch => {
+    return {
+        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
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(SoftwareProductComponentsView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsView);
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 cf63ad79d0..73a971ccbb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
@@ -16,157 +16,265 @@
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
-import {actionTypes, COMPONENTS_QUESTIONNAIRE} from './SoftwareProductComponentsConstants.js';
+import {
+    actionTypes,
+    COMPONENTS_QUESTIONNAIRE
+} from './SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 function baseUrl(softwareProductId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`;
 }
 
 function fetchSoftwareProductComponents(softwareProductId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-function putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, vspComponent) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`, vspComponent);
+function putSoftwareProductComponentQuestionnaire(
+    softwareProductId,
+    version,
+    vspComponentId,
+    vspComponent
+) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            version
+        )}/${vspComponentId}/questionnaire`,
+        vspComponent
+    );
 }
 
-function fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId){
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`);
+function fetchSoftwareProductComponentQuestionnaire(
+    softwareProductId,
+    version,
+    vspComponentId
+) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`
+    );
 }
 
-function fetchSoftwareProductComponent(softwareProductId, version, vspComponentId){
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}`);
+function fetchSoftwareProductComponent(
+    softwareProductId,
+    version,
+    vspComponentId
+) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version)}/${vspComponentId}`
+    );
 }
 
-function putSoftwareProductComponent(softwareProductId, version, vspComponentId, vspComponent) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}`, {
-		name: vspComponent.name,
-		displayName: vspComponent.displayName,
-		vfcCode: vspComponent.vfcCode,
-		nfcFunction: vspComponent.nfcFunction,
-		description: vspComponent.description
-	});
+function putSoftwareProductComponent(
+    softwareProductId,
+    version,
+    vspComponentId,
+    vspComponent
+) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version)}/${vspComponentId}`,
+        {
+            name: vspComponent.name,
+            displayName: vspComponent.displayName,
+            vfcCode: vspComponent.vfcCode,
+            nfcFunction: vspComponent.nfcFunction,
+            description: vspComponent.description
+        }
+    );
 }
 
-function deleteSoftwareProductComponent(softwareProductId, componentId, version) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${componentId}`,);
+function deleteSoftwareProductComponent(
+    softwareProductId,
+    componentId,
+    version
+) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version)}/${componentId}`
+    );
 }
 
+function postSoftwareProductComponent(
+    softwareProductId,
+    vspComponent,
+    version
+) {
+    return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+        name: vspComponent.displayName,
+        displayName: vspComponent.displayName,
+        description: vspComponent.description
+    });
+}
 
-function postSoftwareProductComponent(softwareProductId, vspComponent, version) {
+const SoftwareProductComponentsActionHelper = {
+    fetchSoftwareProductComponents(dispatch, { softwareProductId, version }) {
+        return fetchSoftwareProductComponents(softwareProductId, version).then(
+            response => {
+                dispatch({
+                    type: actionTypes.COMPONENTS_LIST_UPDATE,
+                    componentsList: response.results
+                });
+                return response;
+            }
+        );
+    },
 
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
-		name: vspComponent.displayName,
-		displayName: vspComponent.displayName,
-		description: vspComponent.description
-	});
-}
+    updateSoftwareProductComponent(
+        dispatch,
+        { softwareProductId, version, vspComponentId, componentData, qdata }
+    ) {
+        return Promise.all([
+            SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                { softwareProductId, version, vspComponentId, qdata }
+            ),
+            SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(
+                dispatch,
+                { softwareProductId, version, vspComponentId, componentData }
+            )
+        ]);
+    },
 
+    updateSoftwareProductComponentQuestionnaire(
+        dispatch,
+        { softwareProductId, version, vspComponentId, qdata }
+    ) {
+        return putSoftwareProductComponentQuestionnaire(
+            softwareProductId,
+            version,
+            vspComponentId,
+            qdata
+        );
+    },
 
-const SoftwareProductComponentsActionHelper = {
-	fetchSoftwareProductComponents(dispatch, {softwareProductId, version}) {
-		return fetchSoftwareProductComponents(softwareProductId, version).then(response => {
-			dispatch({
-				type: actionTypes.COMPONENTS_LIST_UPDATE,
-				componentsList: response.results
-			});
-			return response;
-		});
-	},
-
-	updateSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId, componentData, qdata}) {
-		return Promise.all([
-			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}),
-			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData})
-		]);
-	},
-
-	updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}) {
-		return putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, qdata);
-	},
-
-	updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) {
-		return putSoftwareProductComponent(softwareProductId, version, vspComponentId, componentData).then(() => dispatch({
-			type: actionTypes.COMPONENTS_LIST_EDIT,
-			component: {
-				id: vspComponentId,
-				...componentData
-			}
-		}));
-	},
-
-	fetchSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId}) {
-		return fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
-			ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)}});
-		});
-	},
-
-	fetchSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId}) {
-		return Promise.all([
-			fetchSoftwareProductComponent(softwareProductId, version, vspComponentId).then(response => {
-				dispatch({
-					type: actionTypes.COMPONENT_LOAD,
-					component: response.data
-				});
-				return response;
-			}),
-			fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
-				ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
-					qschema: JSON.parse(response.schema)}});
-			})
-		]);
-	},
-
-
-	clearComponentsStore(dispatch) {
-		dispatch({
-			type: actionTypes.COMPONENTS_LIST_UPDATE,
-			componentsList: []
-		});
-	},
-
-	createSoftwareProductComponent(dispatch,{softwareProductId, componentData, version}) {
-		SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch);
-		/* for mock only */
-
-		dispatch({
-			type: actionTypes.COMPONENTS_LIST_UPDATE,
-			componentsList: [{id: '123', ...componentData}]
-		});
-
-		postSoftwareProductComponent(softwareProductId, componentData, version).then(() => {
-			SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version});
-		});
-	},
-
-	clearComponentCreationData(dispatch) {
-		dispatch({
-			type: actionTypes.COMPONENT_DATA_CLEAR
-		});
-	},
-
-	closeComponentCreationModal(dispatch) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch);
-	},
-
-	deleteComponent(dispatch, {softwareProductId, componentId, version}) {
-		deleteSoftwareProductComponent(softwareProductId, componentId, version);
-		dispatch({
-			type: actionTypes.COMPONENT_DELETE,
-			componentId: componentId
-		});
-	},
+    updateSoftwareProductComponentData(
+        dispatch,
+        { softwareProductId, version, vspComponentId, componentData }
+    ) {
+        return putSoftwareProductComponent(
+            softwareProductId,
+            version,
+            vspComponentId,
+            componentData
+        ).then(() =>
+            dispatch({
+                type: actionTypes.COMPONENTS_LIST_EDIT,
+                component: {
+                    id: vspComponentId,
+                    ...componentData
+                }
+            })
+        );
+    },
+
+    fetchSoftwareProductComponentQuestionnaire(
+        dispatch,
+        { softwareProductId, version, vspComponentId }
+    ) {
+        return fetchSoftwareProductComponentQuestionnaire(
+            softwareProductId,
+            version,
+            vspComponentId
+        ).then(response => {
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: COMPONENTS_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            });
+        });
+    },
+
+    fetchSoftwareProductComponent(
+        dispatch,
+        { softwareProductId, version, vspComponentId }
+    ) {
+        return Promise.all([
+            fetchSoftwareProductComponent(
+                softwareProductId,
+                version,
+                vspComponentId
+            ).then(response => {
+                dispatch({
+                    type: actionTypes.COMPONENT_LOAD,
+                    component: response.data
+                });
+                return response;
+            }),
+            fetchSoftwareProductComponentQuestionnaire(
+                softwareProductId,
+                version,
+                vspComponentId
+            ).then(response => {
+                ValidationHelper.qDataLoaded(dispatch, {
+                    qName: COMPONENTS_QUESTIONNAIRE,
+                    response: {
+                        qdata: response.data ? JSON.parse(response.data) : {},
+                        qschema: JSON.parse(response.schema)
+                    }
+                });
+            })
+        ]);
+    },
+
+    clearComponentsStore(dispatch) {
+        dispatch({
+            type: actionTypes.COMPONENTS_LIST_UPDATE,
+            componentsList: []
+        });
+    },
+
+    createSoftwareProductComponent(
+        dispatch,
+        { softwareProductId, componentData, version }
+    ) {
+        SoftwareProductComponentsActionHelper.closeComponentCreationModal(
+            dispatch
+        );
+        /* for mock only */
+
+        dispatch({
+            type: actionTypes.COMPONENTS_LIST_UPDATE,
+            componentsList: [{ id: '123', ...componentData }]
+        });
+
+        postSoftwareProductComponent(
+            softwareProductId,
+            componentData,
+            version
+        ).then(() => {
+            SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
+    clearComponentCreationData(dispatch) {
+        dispatch({
+            type: actionTypes.COMPONENT_DATA_CLEAR
+        });
+    },
 
+    closeComponentCreationModal(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        SoftwareProductComponentsActionHelper.clearComponentCreationData(
+            dispatch
+        );
+    },
 
+    deleteComponent(dispatch, { softwareProductId, componentId, version }) {
+        deleteSoftwareProductComponent(softwareProductId, componentId, version);
+        dispatch({
+            type: actionTypes.COMPONENT_DELETE,
+            componentId: componentId
+        });
+    }
 };
 
 export default SoftwareProductComponentsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
index 35633b65cf..cc120d359a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
@@ -16,40 +16,40 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	COMPONENTS_LIST_UPDATE: null,
-	COMPONENTS_LIST_EDIT: null,
-	COMPONENT_UPDATE: null,
-	COMPONENT_DATA_CHANGED: null,
-	COMPONENT_DATA_CLEAR: null,
-	COMPONENT_QUESTIONNAIRE_UPDATE: null,
-	COMPONENT_DELETE: null,
-	COMPONENT_LOAD: null,
-	COMPONENT_CREATE_OPEN: null
+    COMPONENTS_LIST_UPDATE: null,
+    COMPONENTS_LIST_EDIT: null,
+    COMPONENT_UPDATE: null,
+    COMPONENT_DATA_CHANGED: null,
+    COMPONENT_DATA_CLEAR: null,
+    COMPONENT_QUESTIONNAIRE_UPDATE: null,
+    COMPONENT_DELETE: null,
+    COMPONENT_LOAD: null,
+    COMPONENT_CREATE_OPEN: null
 });
 
-export const storageConstants  = keyMirror({
-	backupType: {
-		ON_SITE: 'OnSite',
-		OFF_SITE: 'OffSite'
-	}
+export const storageConstants = keyMirror({
+    backupType: {
+        ON_SITE: 'OnSite',
+        OFF_SITE: 'OffSite'
+    }
 });
 
 export const forms = keyMirror({
-	ALL_SPC_FORMS: null,
-	NIC_EDIT_FORM: null,
-	CREATE_FORM: null,
-	IMAGE_EDIT_FORM: null
+    ALL_SPC_FORMS: null,
+    NIC_EDIT_FORM: null,
+    CREATE_FORM: null,
+    IMAGE_EDIT_FORM: null
 });
 
 export const COMPONENTS_QUESTIONNAIRE = 'component';
 export const COMPONENTS_COMPUTE_QUESTIONNAIRE = 'compute';
 
 export const navigationItems = keyMirror({
-	STORAGE: 'Storage',
-	PROCESS_DETAILS: 'Process Details',
-	MONITORING: 'Monitoring',
-	NETWORK: 'Network',
-	IMAGES: 'Images',
-	COMPUTE: 'Compute',
-	LOAD_BALANCING: 'High Availability & Load Balancing'
+    STORAGE: 'Storage',
+    PROCESS_DETAILS: 'Process Details',
+    MONITORING: 'Monitoring',
+    NETWORK: 'Network',
+    IMAGES: 'Images',
+    COMPUTE: 'Compute',
+    LOAD_BALANCING: 'High Availability & Load Balancing'
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
index 92211e0fd2..e1cf5f4fc3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
@@ -13,18 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.COMPONENTS_LIST_UPDATE:
-			return [...action.componentsList];
-		case actionTypes.COMPONENTS_LIST_EDIT:
-			const indexForEdit = state.findIndex(component => component.id === action.component.id);
-			return [...state.slice(0, indexForEdit), action.component, ...state.slice(indexForEdit + 1)];
-		case actionTypes.COMPONENT_DELETE:
-			return state.filter(component => component.id !== action.componentId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.COMPONENTS_LIST_UPDATE:
+            return [...action.componentsList];
+        case actionTypes.COMPONENTS_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                component => component.id === action.component.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.component,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.COMPONENT_DELETE:
+            return state.filter(
+                component => component.id !== action.componentId
+            );
+        default:
+            return state;
+    }
 };
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 0bf32df1a3..fc8abf6ff6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
@@ -22,85 +22,113 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
 const ComponentPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	displayName: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    displayName: PropTypes.string,
+    description: PropTypes.string
 });
 
 class SoftwareProductComponentsListView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    static propTypes = {
+        isReadOnlyMode: PropTypes.bool,
+        componentsList: PropTypes.arrayOf(ComponentPropType),
+        onComponentSelect: PropTypes.func
+    };
 
-	static propTypes = {
-		isReadOnlyMode: PropTypes.bool,
-		componentsList: PropTypes.arrayOf(ComponentPropType),
-		onComponentSelect: PropTypes.func
-	};
+    render() {
+        let { componentsList = [], isManual } = this.props;
+        return (
+            <div className="">
+                {(componentsList.length > 0 || isManual) &&
+                    this.renderComponents()}
+            </div>
+        );
+    }
 
-	render() {
-		let {componentsList = [], isManual} =  this.props;
-		return (
-			<div className=''>
-				{
-					(componentsList.length > 0 || isManual) && this.renderComponents()
-				}
-			</div>
-		);
-	}
+    renderComponents() {
+        const { localFilter } = this.state;
+        const {
+            isManual,
+            onAddComponent,
+            isReadOnlyMode,
+            version,
+            currentSoftwareProduct: { id: softwareProductId },
+            componentsList
+        } = this.props;
+        return (
+            <ListEditorView
+                title={i18n('Virtual Function Components')}
+                filterValue={localFilter}
+                placeholder={i18n('Filter Components')}
+                onFilter={value => this.setState({ localFilter: value })}
+                isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
+                plusButtonTitle={i18n('Add Component')}
+                onAdd={
+                    isManual && componentsList.length === 0
+                        ? () => onAddComponent(softwareProductId, version)
+                        : false
+                }
+                twoColumns>
+                {this.filterList().map(component =>
+                    this.renderComponentsListItem(component)
+                )}
+            </ListEditorView>
+        );
+    }
 
-	renderComponents() {
-		const {localFilter} = this.state;
-		const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props;
-		return (
-			<ListEditorView
-				title={i18n('Virtual Function Components')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Components')}
-				onFilter={value => this.setState({localFilter: value})}
-				isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
-				plusButtonTitle={i18n('Add Component')}
-				onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId, version) : false}
-				twoColumns>
-				{this.filterList().map(component => this.renderComponentsListItem(component))}
-			</ListEditorView>
-		);
-	}
+    renderComponentsListItem(component) {
+        let {
+            id: componentId,
+            name,
+            displayName,
+            description = ''
+        } = component;
+        let {
+            currentSoftwareProduct: { id },
+            onComponentSelect,
+            version
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={
+                    name + Math.floor(Math.random() * (100 - 1) + 1).toString()
+                }
+                className="list-editor-item-view"
+                onSelect={() =>
+                    onComponentSelect({ id, componentId, version })
+                }>
+                <ListEditorItemViewField>
+                    <div className="name">{displayName}</div>
+                </ListEditorItemViewField>
+                <ListEditorItemViewField>
+                    <div className="description">{description}</div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	renderComponentsListItem(component) {
-		let {id: componentId, name, displayName, description = ''} = component;
-		let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props;
-		return (
-			<ListEditorItemView
-				key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()}
-				className='list-editor-item-view'				
-				onSelect={() => onComponentSelect({id, componentId, version})}>
-				<ListEditorItemViewField>
-					<div className='name'>{displayName}</div>
-				</ListEditorItemViewField>
-				<ListEditorItemViewField>
-					<div className='description'>{description}</div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
+    filterList() {
+        let { componentsList = [] } = this.props;
 
-	filterList() {
-		let {componentsList = []} = this.props;
-
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return componentsList.filter(({displayName = '', description = ''}) => {
-				return escape(displayName).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return componentsList;
-		}
-	}
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return componentsList.filter(
+                ({ displayName = '', description = '' }) => {
+                    return (
+                        escape(displayName).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return componentsList;
+        }
+    }
 }
 
 export default SoftwareProductComponentsListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
index 02c09fbdf8..cd37c317af 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
@@ -16,154 +16,270 @@
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes} from './computeComponents/computeFlavor/ComputeFlavorConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as globalModalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './computeComponents/computeFlavor/ComputeFlavorConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import {
+    actionTypes as globalModalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 function baseUrl(softwareProductId, componentId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`;
 }
 
-function baseUrlVSPLevel(softwareProductId, version){
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`;
+function baseUrlVSPLevel(softwareProductId, version) {
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`;
 }
 
-function fetchComputesList(softwareProductId, componentId, version){
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}`);
+function fetchComputesList(softwareProductId, componentId, version) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, componentId, version)}`
+    );
 }
 
-function fetchComputesListForVSP(softwareProductId, version){
-	return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`);
+function fetchComputesListForVSP(softwareProductId, version) {
+    return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`);
 }
 
 function fetchCompute(softwareProductId, componentId, computeId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, componentId, version)}/${computeId}`
+    );
 }
 
-function fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`);
+function fetchComputeQuestionnaire({
+    softwareProductId,
+    componentId,
+    computeId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            componentId,
+            version
+        )}/${computeId}/questionnaire`
+    );
 }
 
-function postCompute({softwareProductId, componentId, compute, version}) {
-	return RestAPIUtil.post(baseUrl(softwareProductId, componentId, version), compute);
+function postCompute({ softwareProductId, componentId, compute, version }) {
+    return RestAPIUtil.post(
+        baseUrl(softwareProductId, componentId, version),
+        compute
+    );
 }
 
-function putCompute({softwareProductId, componentId, compute, version}) {
-	const computeData = {
-		name: compute.name,
-		description: compute.description
-	};
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${compute.id}`, computeData);
+function putCompute({ softwareProductId, componentId, compute, version }) {
+    const computeData = {
+        name: compute.name,
+        description: compute.description
+    };
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, componentId, version)}/${compute.id}`,
+        computeData
+    );
 }
 
-function putComputeQuestionnaire({softwareProductId, componentId, computeId, qdata, version}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`, qdata);
+function putComputeQuestionnaire({
+    softwareProductId,
+    componentId,
+    computeId,
+    qdata,
+    version
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            componentId,
+            version
+        )}/${computeId}/questionnaire`,
+        qdata
+    );
 }
 
-function deleteCompute({softwareProductId, componentId, computeId, version}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`);
+function deleteCompute({ softwareProductId, componentId, computeId, version }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, componentId, version)}/${computeId}`
+    );
 }
 
-
 const ComputeFlavorActionHelper = {
-	openComputeEditor(dispatch, {props}) {
-		dispatch({
-			type: actionTypes.computeEditor.LOAD_EDITOR_DATA,
-			compute: props.compute || {}
-		});
-		dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR,
-				modalClassName: `compute-flavor-editor-modal-${props.compute ? 'edit' : 'create'}`,
-				modalComponentProps: {...props, size: props.compute ? modalSizes.LARGE : undefined, dialogClassName:'compute-flavor-editor-modal'},
-				title: `${props.compute ? i18n('Edit Compute Flavor') : i18n('Create New Compute Flavor')}`
-			}
-		});
-	},
-
-	closeComputeEditor(dispatch){
-		dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		dispatch({
-			type: actionTypes.computeEditor.CLEAR_DATA
-		});
-	},
-
-	fetchComputesList(dispatch, {softwareProductId, componentId, version}) {
-		return fetchComputesList(softwareProductId, componentId, version).then(response => dispatch({
-			type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
-			response
-		}));
-	},
-
-	fetchComputesListForVSP(dispatch, {softwareProductId, version}) {
-		return fetchComputesListForVSP(softwareProductId, version).then(response => dispatch({
-			type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
-			response
-		}));
-	},
-
-	loadComputeData({softwareProductId, componentId, computeId, version}) {
-		return fetchCompute(softwareProductId, componentId, computeId, version);
-	},
-
-	loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}) {
-		return fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}).then(response =>
-			ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_COMPUTE_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}})
-		);
-	},
-
-	loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}){
-		return ComputeFlavorActionHelper.loadComputeData({softwareProductId, componentId, computeId, version}).then(({data}) =>
-			ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}).then(() =>
-				ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, version, isReadOnlyMode, compute: {id: computeId, ...data}}})
-			));
-	},
-
-	saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data: compute, qdata, version}) {
-		ComputeFlavorActionHelper.closeComputeEditor(dispatch);
-		if(compute.id) {
-			return Promise.all([
-				putComputeQuestionnaire({softwareProductId, componentId, computeId: compute.id, qdata, version}),
-				putCompute({softwareProductId, componentId, compute, version}).then(() => {
-					dispatch({
-						type: actionTypes.COMPUTE_LIST_EDIT,
-						compute
-					});
-				})
-			]);
-		}
-		else {
-			return postCompute({softwareProductId, componentId, compute, version}).then(response =>
-				dispatch({
-					type: actionTypes.ADD_COMPUTE,
-					compute: {
-						...compute,
-						id: response.id,
-						componentId
-					}
-				})
-			);
-		}
-	},
-
-	deleteCompute(dispatch, {softwareProductId, componentId, computeId, version}) {
-		return deleteCompute({softwareProductId, componentId, computeId, version}).then(() => dispatch({
-			type: actionTypes.DELETE_COMPUTE,
-			computeId
-		}));
-	}
+    openComputeEditor(dispatch, { props }) {
+        dispatch({
+            type: actionTypes.computeEditor.LOAD_EDITOR_DATA,
+            compute: props.compute || {}
+        });
+        dispatch({
+            type: globalModalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName:
+                    modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR,
+                modalClassName: `compute-flavor-editor-modal-${
+                    props.compute ? 'edit' : 'create'
+                }`,
+                modalComponentProps: {
+                    ...props,
+                    size: props.compute ? modalSizes.LARGE : undefined,
+                    dialogClassName: 'compute-flavor-editor-modal'
+                },
+                title: `${
+                    props.compute
+                        ? i18n('Edit Compute Flavor')
+                        : i18n('Create New Compute Flavor')
+                }`
+            }
+        });
+    },
+
+    closeComputeEditor(dispatch) {
+        dispatch({
+            type: globalModalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({
+            type: actionTypes.computeEditor.CLEAR_DATA
+        });
+    },
+
+    fetchComputesList(dispatch, { softwareProductId, componentId, version }) {
+        return fetchComputesList(softwareProductId, componentId, version).then(
+            response =>
+                dispatch({
+                    type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    fetchComputesListForVSP(dispatch, { softwareProductId, version }) {
+        return fetchComputesListForVSP(softwareProductId, version).then(
+            response =>
+                dispatch({
+                    type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    loadComputeData({ softwareProductId, componentId, computeId, version }) {
+        return fetchCompute(softwareProductId, componentId, computeId, version);
+    },
+
+    loadComputeQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, computeId, version }
+    ) {
+        return fetchComputeQuestionnaire({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(response =>
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: COMPONENTS_COMPUTE_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            })
+        );
+    },
+
+    loadCompute(
+        dispatch,
+        { softwareProductId, componentId, version, computeId, isReadOnlyMode }
+    ) {
+        return ComputeFlavorActionHelper.loadComputeData({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(({ data }) =>
+            ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, {
+                softwareProductId,
+                componentId,
+                computeId,
+                version
+            }).then(() =>
+                ComputeFlavorActionHelper.openComputeEditor(dispatch, {
+                    props: {
+                        softwareProductId,
+                        componentId,
+                        version,
+                        isReadOnlyMode,
+                        compute: { id: computeId, ...data }
+                    }
+                })
+            )
+        );
+    },
+
+    saveComputeDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, data: compute, qdata, version }
+    ) {
+        ComputeFlavorActionHelper.closeComputeEditor(dispatch);
+        if (compute.id) {
+            return Promise.all([
+                putComputeQuestionnaire({
+                    softwareProductId,
+                    componentId,
+                    computeId: compute.id,
+                    qdata,
+                    version
+                }),
+                putCompute({
+                    softwareProductId,
+                    componentId,
+                    compute,
+                    version
+                }).then(() => {
+                    dispatch({
+                        type: actionTypes.COMPUTE_LIST_EDIT,
+                        compute
+                    });
+                })
+            ]);
+        } else {
+            return postCompute({
+                softwareProductId,
+                componentId,
+                compute,
+                version
+            }).then(response =>
+                dispatch({
+                    type: actionTypes.ADD_COMPUTE,
+                    compute: {
+                        ...compute,
+                        id: response.id,
+                        componentId
+                    }
+                })
+            );
+        }
+    },
+
+    deleteCompute(
+        dispatch,
+        { softwareProductId, componentId, computeId, version }
+    ) {
+        return deleteCompute({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(() =>
+            dispatch({
+                type: actionTypes.DELETE_COMPUTE,
+                computeId
+            })
+        );
+    }
 };
 
 export default ComputeFlavorActionHelper;
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 574828c9ef..d595a82e11 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
@@ -13,35 +13,63 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx';
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.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';
+import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
+const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentVSP },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        componentEditor: { qdata, dataMap, qgenericFieldInfo },
+        computeFlavor: { computesList: computeFlavorsList }
+    } = softwareProductComponents;
 
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {qdata, dataMap, qgenericFieldInfo}, computeFlavor: {computesList: computeFlavorsList}} = softwareProductComponents;
-
-	return {
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		computeFlavorsList,
-		isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        computeFlavorsList,
+        isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
-	return {
-		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, customValidations: customValidations,
-			qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});},
-		qValidateData: (data, customValidations) => ValidationHelper.qValidateData(dispatch, {data, customValidations: customValidations,
-			qName: COMPONENTS_QUESTIONNAIRE})
-	};
+const mapActionToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onQDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                customValidations: customValidations,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onSubmit: ({ qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    qdata
+                }
+            );
+        },
+        qValidateData: (data, customValidations) =>
+            ValidationHelper.qValidateData(dispatch, {
+                data,
+                customValidations: customValidations,
+                qName: COMPONENTS_QUESTIONNAIRE
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentComputeView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductComponentComputeView);
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 55e5e2b30b..e6ce96666e 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
@@ -22,67 +22,99 @@ import ComputeFlavors from './computeComponents/ComputeFlavors.js';
 import Validator from 'nfvo-utils/Validator.js';
 
 class SoftwareProductComponentComputeView extends React.Component {
+    static propTypes = {
+        dataMap: PropTypes.object,
+        qgenericFieldInfo: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onQDataChanged: PropTypes.func.isRequired,
+        qValidateData: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		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() {
+        let {
+            softwareProductId,
+            componentId,
+            version,
+            qdata,
+            dataMap,
+            qgenericFieldInfo,
+            isReadOnlyMode,
+            onQDataChanged,
+            qValidateData,
+            onSubmit,
+            computeFlavorsList,
+            isManual
+        } = this.props;
 
-	render() {
-		let {softwareProductId, componentId, version, qdata, dataMap, qgenericFieldInfo, isReadOnlyMode, onQDataChanged, qValidateData,
-			onSubmit, computeFlavorsList, isManual} = this.props;
+        return (
+            <div className="vsp-component-questionnaire-view">
+                {qgenericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        formReady={null}
+                        isValid={true}
+                        hasButtons={false}
+                        onSubmit={() => onSubmit({ qdata })}
+                        className="component-questionnaire-validation-form"
+                        isReadOnlyMode={isReadOnlyMode}>
+                        <NumberOfVms
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qgenericFieldInfo}
+                            qValidateData={qValidateData}
+                            customValidations={{
+                                'compute/numOfVMs/maximum': this.validateMax,
+                                'compute/numOfVMs/minimum': this.validateMin
+                            }}
+                        />
+                        <GuestOs
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qgenericFieldInfo}
+                        />
+                        <ComputeFlavors
+                            computeFlavorsList={computeFlavorsList}
+                            softwareProductId={softwareProductId}
+                            componentId={componentId}
+                            version={version}
+                            isReadOnlyMode={isReadOnlyMode}
+                            isManual={isManual}
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-component-questionnaire-view'>
-				{ qgenericFieldInfo && <Form
-					ref={ (form) => { this.form = form; }}
-					formReady={null}
-					isValid={true}
-					hasButtons={false}
-					onSubmit={() => onSubmit({qdata})}
-					className='component-questionnaire-validation-form'
-					isReadOnlyMode={isReadOnlyMode} >
-					<NumberOfVms onQDataChanged={onQDataChanged} dataMap={dataMap}
-						 qgenericFieldInfo={qgenericFieldInfo} qValidateData={qValidateData}
-						 customValidations={{'compute/numOfVMs/maximum' : this.validateMax, 'compute/numOfVMs/minimum': this.validateMin}} />
-					<GuestOs onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} />
-					<ComputeFlavors computeFlavorsList={computeFlavorsList} softwareProductId={softwareProductId} componentId={componentId}
-						version={version} isReadOnlyMode={isReadOnlyMode} isManual={isManual}/>
-				</Form> }
-			</div>
-		);
-	}
+    save() {
+        return this.form.handleFormSubmit(new Event('dummy'));
+    }
 
-	save(){
-		return this.form.handleFormSubmit(new Event('dummy'));
-	}
+    validateMin(value, state) {
+        let maxVal = state.dataMap['compute/numOfVMs/maximum'];
+        // we are allowed to have an empty maxval, that will allow all minvals.
+        // if we do not have a minval than there is no point to check it either.
+        if (value === undefined || maxVal === undefined) {
+            return { isValid: true, errorText: '' };
+        } else {
+            return Validator.validateItem(value, maxVal, 'maximum');
+        }
+    }
 
-	validateMin(value, state) {
-		let maxVal = state.dataMap['compute/numOfVMs/maximum'];
-		// we are allowed to have an empty maxval, that will allow all minvals.
-		// if we do not have a minval than there is no point to check it either.
-		if (value === undefined || maxVal === undefined) {
-			return { isValid: true, errorText: '' };
-		} else {
-			return Validator.validateItem(value, maxVal,'maximum');
-		}
-	}
-
-	validateMax(value, state) {
-		let minVal = state.dataMap['compute/numOfVMs/minimum'];
-		if (minVal === undefined ) {
-			// having no minimum is the same as 0, maximum value doesn't need to be checked
-			// against it.
-			return { isValid: true, errorText: '' };
-		} else {
-			return Validator.validateItem(value,minVal,'minimum');
-		}
-	}
+    validateMax(value, state) {
+        let minVal = state.dataMap['compute/numOfVMs/minimum'];
+        if (minVal === undefined) {
+            // having no minimum is the same as 0, maximum value doesn't need to be checked
+            // against it.
+            return { isValid: true, errorText: '' };
+        } else {
+            return Validator.validateItem(value, minVal, 'minimum');
+        }
+    }
 }
 
 export default SoftwareProductComponentComputeView;
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 2b6d84f381..2004c94137 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
@@ -15,103 +15,159 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 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 ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onAddComputeClick: (isReadOnlyMode) => ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, isReadOnlyMode, version}}),
-		onEditCompute: ({computeId, isReadOnlyMode}) => ComputeFlavorActionHelper.loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}),
-		onDeleteCompute: ({id, name}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{name}"?', {name: name}),
-				onConfirmed: () => ComputeFlavorActionHelper.deleteCompute(dispatch, {softwareProductId, componentId, computeId: id, version})
-			}
-		})
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onAddComputeClick: isReadOnlyMode =>
+            ComputeFlavorActionHelper.openComputeEditor(dispatch, {
+                props: {
+                    softwareProductId,
+                    componentId,
+                    isReadOnlyMode,
+                    version
+                }
+            }),
+        onEditCompute: ({ computeId, isReadOnlyMode }) =>
+            ComputeFlavorActionHelper.loadCompute(dispatch, {
+                softwareProductId,
+                componentId,
+                version,
+                computeId,
+                isReadOnlyMode
+            }),
+        onDeleteCompute: ({ id, name }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{name}"?', {
+                        name: name
+                    }),
+                    onConfirmed: () =>
+                        ComputeFlavorActionHelper.deleteCompute(dispatch, {
+                            softwareProductId,
+                            componentId,
+                            computeId: id,
+                            version
+                        })
+                }
+            })
+    };
 };
 
 const computeItemPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string
 });
 
 class ComputeFlavors extends React.Component {
+    static propTypes = {
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onAddComputeClick: PropTypes.func,
+        computeFlavorsList: PropTypes.arrayOf(computeItemPropType)
+    };
 
-	static propTypes = {
-		isReadOnlyMode: PropTypes.bool,
-		isManual: PropTypes.bool,
-		onAddComputeClick: PropTypes.func,
-		computeFlavorsList: PropTypes.arrayOf(computeItemPropType)
-	};
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    render() {
+        const { localFilter } = this.state;
+        const {
+            isReadOnlyMode,
+            isManual,
+            onAddComputeClick,
+            onEditCompute,
+            onDeleteCompute
+        } = this.props;
+        return (
+            <div className="computes-list">
+                <ListEditorView
+                    title={i18n('Computes')}
+                    plusButtonTitle={i18n('Add Compute')}
+                    onAdd={
+                        isManual
+                            ? () => onAddComputeClick(isReadOnlyMode)
+                            : null
+                    }
+                    isReadOnlyMode={isReadOnlyMode}
+                    onFilter={
+                        isManual
+                            ? value => this.setState({ localFilter: value })
+                            : null
+                    }
+                    filterValue={localFilter}
+                    twoColumns>
+                    {this.filterList().map(computeItem => (
+                        <ComputeItem
+                            key={computeItem.id}
+                            computeItem={computeItem}
+                            isReadOnlyMode={isReadOnlyMode}
+                            isManual={isManual}
+                            onEditCompute={onEditCompute}
+                            onDeleteCompute={onDeleteCompute}
+                        />
+                    ))}
+                </ListEditorView>
+            </div>
+        );
+    }
 
-	render() {
-		const {localFilter} = this.state;
-		const {isReadOnlyMode, isManual, onAddComputeClick, onEditCompute, onDeleteCompute} = this.props;
-		return (
-			<div className='computes-list'>
-				<ListEditorView
-					title={i18n('Computes')}
-					plusButtonTitle={i18n('Add Compute')}
-					onAdd={isManual ? () => onAddComputeClick(isReadOnlyMode) : null}
-					isReadOnlyMode={isReadOnlyMode}
-					onFilter={isManual ? value => this.setState({localFilter: value}) : null}
-					filterValue={localFilter}
-					twoColumns>
-					{this.filterList().map(computeItem =>
-						<ComputeItem key={computeItem.id}
-							computeItem={computeItem} isReadOnlyMode={isReadOnlyMode} isManual={isManual}
-							onEditCompute={onEditCompute} onDeleteCompute={onDeleteCompute}/>)
-					}
-				</ListEditorView>
-			</div>
-		);
-	}
+    filterList() {
+        const { computeFlavorsList = [] } = this.props;
 
-	filterList() {
-		const {computeFlavorsList = []} = this.props;
-
-		const {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return computeFlavorsList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return computeFlavorsList;
-		}
-	}
+        const { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return computeFlavorsList.filter(
+                ({ name = '', description = '' }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return computeFlavorsList;
+        }
+    }
 }
 
-const ComputeItem = ({computeItem, isReadOnlyMode, isManual, onEditCompute, onDeleteCompute}) => {
-	const {id, name, description} = computeItem;
-	return (
-		<ListEditorItemView
-			key={'item_' + id}
-			className='list-editor-item-view'
-			isReadOnlyMode={isReadOnlyMode}
-			onSelect={() => onEditCompute({computeId: id, isReadOnlyMode})}
-			onDelete={isManual ? () => onDeleteCompute({id, name}) : null}>
-
-			<div className='list-editor-item-view-field'>
-				<div className='name'>{name}</div>
-			</div>
-			<div className='list-editor-item-view-field'>
-				<div className='description'>{description}</div>
-			</div>
-		</ListEditorItemView>
-	);
+const ComputeItem = ({
+    computeItem,
+    isReadOnlyMode,
+    isManual,
+    onEditCompute,
+    onDeleteCompute
+}) => {
+    const { id, name, description } = computeItem;
+    return (
+        <ListEditorItemView
+            key={'item_' + id}
+            className="list-editor-item-view"
+            isReadOnlyMode={isReadOnlyMode}
+            onSelect={() => onEditCompute({ computeId: id, isReadOnlyMode })}
+            onDelete={isManual ? () => onDeleteCompute({ id, name }) : null}>
+            <div className="list-editor-item-view-field">
+                <div className="name">{name}</div>
+            </div>
+            <div className="list-editor-item-view-field">
+                <div className="description">{description}</div>
+            </div>
+        </ListEditorItemView>
+    );
 };
 
-export default connect(null, mapActionsToProps, null, {withRef: true})(ComputeFlavors);
+export default connect(null, mapActionsToProps, null, { withRef: true })(
+    ComputeFlavors
+);
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 8ae9961859..c16ab5cdfe 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
@@ -19,57 +19,91 @@ 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 GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<div>
-			<GridSection title={i18n('Guest OS')} hasLastColSet>
-				<GridItem>
-					<div className='vertical-flex'>
-						<label key='label' className='control-label'>{i18n('OS Bit Size')}</label>
-						<div className='radio-options-content-row'>
-							{qgenericFieldInfo['compute/guestOS/bitSize'].enum.map(bitSize => (
-							<Input
-								data-test-id='guestOS-bitSize'
-								type='radio'
-								key={bitSize.enum}
-								name={'compute/guestOS/bitSize'}
-								className='radio-field'
-								value={bitSize.enum}
-								label={bitSize.title}
-								onChange={(bit) => onQDataChanged({'compute/guestOS/bitSize' :  Number(bit)})}
-								isValid={qgenericFieldInfo['compute/guestOS/bitSize'].isValid}
-								errorText={qgenericFieldInfo['compute/guestOS/bitSize'].errorText}
-								checked={dataMap['compute/guestOS/bitSize'] === bitSize.enum} /> )) }
-						</div>
-					</div>
-				</GridItem>
-				<GridItem colSpan={2}/>
-				<GridItem colSpan={2}>
-					<Input
-						data-test-id='guestOS-name'
-						label={i18n('Guest OS')}
-						type='textarea'
-						onChange={(tools) => onQDataChanged({'compute/guestOS/name' : tools})}
-						isValid={qgenericFieldInfo['compute/guestOS/name'].isValid}
-						errorText={qgenericFieldInfo['compute/guestOS/name'].errorText}
-						value={dataMap['compute/guestOS/name']} />
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						data-test-id='guestOS-tools'
-						type='textarea'
-						label={i18n('Guest OS Tools:')}
-						onChange={(tools) => onQDataChanged({'compute/guestOS/tools' : tools})}
-						isValid={qgenericFieldInfo['compute/guestOS/tools'].isValid}
-						errorText={qgenericFieldInfo['compute/guestOS/tools'].errorText}
-						value={dataMap['compute/guestOS/tools']} />
-				</GridItem>
-			</GridSection>
-
-
-		</div>
-	);
+const GuestOs = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <div>
+            <GridSection title={i18n('Guest OS')} hasLastColSet>
+                <GridItem>
+                    <div className="vertical-flex">
+                        <label key="label" className="control-label">
+                            {i18n('OS Bit Size')}
+                        </label>
+                        <div className="radio-options-content-row">
+                            {qgenericFieldInfo[
+                                'compute/guestOS/bitSize'
+                            ].enum.map(bitSize => (
+                                <Input
+                                    data-test-id="guestOS-bitSize"
+                                    type="radio"
+                                    key={bitSize.enum}
+                                    name={'compute/guestOS/bitSize'}
+                                    className="radio-field"
+                                    value={bitSize.enum}
+                                    label={bitSize.title}
+                                    onChange={bit =>
+                                        onQDataChanged({
+                                            'compute/guestOS/bitSize': Number(
+                                                bit
+                                            )
+                                        })
+                                    }
+                                    isValid={
+                                        qgenericFieldInfo[
+                                            'compute/guestOS/bitSize'
+                                        ].isValid
+                                    }
+                                    errorText={
+                                        qgenericFieldInfo[
+                                            'compute/guestOS/bitSize'
+                                        ].errorText
+                                    }
+                                    checked={
+                                        dataMap['compute/guestOS/bitSize'] ===
+                                        bitSize.enum
+                                    }
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </GridItem>
+                <GridItem colSpan={2} />
+                <GridItem colSpan={2}>
+                    <Input
+                        data-test-id="guestOS-name"
+                        label={i18n('Guest OS')}
+                        type="textarea"
+                        onChange={tools =>
+                            onQDataChanged({ 'compute/guestOS/name': tools })
+                        }
+                        isValid={
+                            qgenericFieldInfo['compute/guestOS/name'].isValid
+                        }
+                        errorText={
+                            qgenericFieldInfo['compute/guestOS/name'].errorText
+                        }
+                        value={dataMap['compute/guestOS/name']}
+                    />
+                </GridItem>
+                <GridItem colSpan={2} lastColInRow>
+                    <Input
+                        data-test-id="guestOS-tools"
+                        type="textarea"
+                        label={i18n('Guest OS Tools:')}
+                        onChange={tools =>
+                            onQDataChanged({ 'compute/guestOS/tools': tools })
+                        }
+                        isValid={
+                            qgenericFieldInfo['compute/guestOS/tools'].isValid
+                        }
+                        errorText={
+                            qgenericFieldInfo['compute/guestOS/tools'].errorText
+                        }
+                        value={dataMap['compute/guestOS/tools']}
+                    />
+                </GridItem>
+            </GridSection>
+        </div>
+    );
 };
 
 export default GuestOs;
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 967c6f7aef..5451354502 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
@@ -20,38 +20,77 @@ 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 NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData, customValidations}) => {
-	return(
-		<GridSection titleClassName='software-product-compute-number-of-vms' title={i18n('NUMBER OF VMs')}>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-minimum'
-					type='number'
-					label={i18n('Minimum')}
-					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/minimum' : tools}, customValidations);
-						qValidateData({'compute/numOfVMs/maximum' : dataMap['compute/numOfVMs/maximum']}, customValidations); } }
-					isValid={qgenericFieldInfo['compute/numOfVMs/minimum'].isValid}
-					errorText={qgenericFieldInfo['compute/numOfVMs/minimum'].errorText}
-					value={dataMap['compute/numOfVMs/minimum']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-maximum'
-					type='number'
-					label={i18n('Maximum')}
-					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/maximum' : tools}, customValidations);
-						qValidateData({'compute/numOfVMs/minimum' : dataMap['compute/numOfVMs/minimum']}, customValidations); } }
-					isValid={qgenericFieldInfo['compute/numOfVMs/maximum'].isValid}
-					errorText={qgenericFieldInfo['compute/numOfVMs/maximum'].errorText}
-					value={dataMap['compute/numOfVMs/maximum']} />
-			</GridItem>
-		</GridSection>
-	);
+const NumberOfVms = ({
+    qgenericFieldInfo,
+    dataMap,
+    onQDataChanged,
+    qValidateData,
+    customValidations
+}) => {
+    return (
+        <GridSection
+            titleClassName="software-product-compute-number-of-vms"
+            title={i18n('NUMBER OF VMs')}>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-minimum"
+                    type="number"
+                    label={i18n('Minimum')}
+                    onChange={tools => {
+                        onQDataChanged(
+                            { 'compute/numOfVMs/minimum': tools },
+                            customValidations
+                        );
+                        qValidateData(
+                            {
+                                'compute/numOfVMs/maximum':
+                                    dataMap['compute/numOfVMs/maximum']
+                            },
+                            customValidations
+                        );
+                    }}
+                    isValid={
+                        qgenericFieldInfo['compute/numOfVMs/minimum'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['compute/numOfVMs/minimum'].errorText
+                    }
+                    value={dataMap['compute/numOfVMs/minimum']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-maximum"
+                    type="number"
+                    label={i18n('Maximum')}
+                    onChange={tools => {
+                        onQDataChanged(
+                            { 'compute/numOfVMs/maximum': tools },
+                            customValidations
+                        );
+                        qValidateData(
+                            {
+                                'compute/numOfVMs/minimum':
+                                    dataMap['compute/numOfVMs/minimum']
+                            },
+                            customValidations
+                        );
+                    }}
+                    isValid={
+                        qgenericFieldInfo['compute/numOfVMs/maximum'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['compute/numOfVMs/maximum'].errorText
+                    }
+                    value={dataMap['compute/numOfVMs/maximum']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 NumberOfVms.propTypes = {
-	minNumberOfVMsSelectedByUser: PropTypes.number
+    minNumberOfVMsSelectedByUser: PropTypes.number
 };
 
 export default NumberOfVms;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
index 41728eefb0..58c27c6bba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
@@ -19,14 +19,14 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 export const COMPUTE_FLAVOR_FORM = 'COMPUTE_FLAVOR_FORM';
 
 export const actionTypes = keyMirror({
-	ADD_COMPUTE: null,
-	COMPUTE_FLAVORS_LIST_LOADED: null,
-	COMPUTE_LIST_EDIT: null,
-	EDIT_COMPUTE_FLAVOR: null,
-	DELETE_COMPUTE: null,
-	CONFIRM_DELETE_COMPUTE: null,
-	computeEditor: {
-		LOAD_EDITOR_DATA: null,
-		CLEAR_DATA: null
-	}
+    ADD_COMPUTE: null,
+    COMPUTE_FLAVORS_LIST_LOADED: null,
+    COMPUTE_LIST_EDIT: null,
+    EDIT_COMPUTE_FLAVOR: null,
+    DELETE_COMPUTE: null,
+    CONFIRM_DELETE_COMPUTE: null,
+    computeEditor: {
+        LOAD_EDITOR_DATA: null,
+        CLEAR_DATA: null
+    }
 });
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 a3ba5fbc4a..06f9e8fd19 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
@@ -13,49 +13,78 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ComputeFlavorEditorView from './ComputeFlavorEditorView.jsx';
-import {COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js';
+import { COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.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';
+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 = {}}}
-	},
-	currentScreen: {
-		props: {isReadOnlyMode}
-	}
+    softwareProduct: {
+        softwareProductEditor,
+        softwareProductComponents: { computeFlavor: { computeEditor = {} } }
+    },
+    currentScreen: { props: { isReadOnlyMode } }
 }) => {
-	const {data: currentSoftwareProduct = {}} = softwareProductEditor;
-	let {data , qdata, qgenericFieldInfo, dataMap, genericFieldInfo, formReady} = computeEditor;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    const { data: currentSoftwareProduct = {} } = softwareProductEditor;
+    let {
+        data,
+        qdata,
+        qgenericFieldInfo,
+        dataMap,
+        genericFieldInfo,
+        formReady
+    } = computeEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {
-		data,
-		qdata,
-		qgenericFieldInfo,
-		dataMap,
-		genericFieldInfo,
-		isReadOnlyMode,
-		isFormValid,
-		formReady,
-		isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        data,
+        qdata,
+        qgenericFieldInfo,
+        dataMap,
+        genericFieldInfo,
+        isReadOnlyMode,
+        isFormValid,
+        formReady,
+        isManual:
+            currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: COMPUTE_FLAVOR_FORM}),
-		onQDataChanged: deltaData => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_COMPUTE_QUESTIONNAIRE}),
-		onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch),
-		onSubmit: ({data, qdata}) => ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata, version}),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM)
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: COMPUTE_FLAVOR_FORM
+            }),
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_COMPUTE_QUESTIONNAIRE
+            }),
+        onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch),
+        onSubmit: ({ data, qdata }) =>
+            ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    componentId,
+                    data,
+                    qdata,
+                    version
+                }
+            ),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(ComputeFlavorEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    ComputeFlavorEditorView
+);
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 e542ce1fd1..840f722bb2 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
@@ -23,75 +23,112 @@ import VmSizing from './VmSizing.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 class ComputeEditorView extends React.Component {
+    static propTypes = {
+        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
+    };
 
-	static propTypes = {
-		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() {
+        let {
+            data = {},
+            qdata = {},
+            qgenericFieldInfo,
+            dataMap,
+            genericFieldInfo,
+            isReadOnlyMode,
+            isManual,
+            isFormValid,
+            formReady,
+            onDataChanged,
+            onQDataChanged,
+            onSubmit,
+            onCancel,
+            onValidateForm
+        } = this.props;
+        const { id, name, description } = data;
+        const edittingComputeMode = Boolean(id);
 
-	render() {
-		let {data = {}, qdata = {}, qgenericFieldInfo, dataMap, genericFieldInfo, isReadOnlyMode, isManual, isFormValid, formReady,
-			onDataChanged, onQDataChanged, onSubmit, onCancel, onValidateForm} = this.props;
-		const {id, name, description} = data;
-		const edittingComputeMode = Boolean(id);
+        return (
+            <div className="vsp-component-computeFlavor-view">
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => onSubmit({ data, qdata })}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        onValidateForm={() => onValidateForm()}
+                        className="component-questionnaire-validation-form"
+                        submitButtonText={
+                            edittingComputeMode ? i18n('Save') : i18n('Create')
+                        }>
+                        <GridSection hasLostColSet>
+                            <GridItem
+                                colSpan={edittingComputeMode ? 2 : 4}
+                                lastColInRow={!edittingComputeMode}>
+                                <Input
+                                    disabled={!isManual}
+                                    data-test-id="name"
+                                    type="text"
+                                    label={i18n('Flavor Name')}
+                                    value={name}
+                                    onChange={name => onDataChanged({ name })}
+                                    isValid={genericFieldInfo['name'].isValid}
+                                    errorText={
+                                        genericFieldInfo['name'].errorText
+                                    }
+                                    isRequired
+                                />
+                            </GridItem>
+                            <GridItem
+                                colSpan={edittingComputeMode ? 2 : 4}
+                                lastColInRow>
+                                <Input
+                                    data-test-id="description"
+                                    type="textarea"
+                                    label={i18n('Description')}
+                                    value={description}
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    isValid={
+                                        genericFieldInfo['description'].isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo['description']
+                                            .errorText
+                                    }
+                                />
+                            </GridItem>
+                        </GridSection>
+                        {edittingComputeMode && (
+                            <VmSizing
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                        )}
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-component-computeFlavor-view'>
-				{genericFieldInfo && <Form
-					ref={(form) => {
-						this.form = form;
-					}}
-					hasButtons={true}
-					onSubmit={ () => onSubmit({data, qdata}) }
-					onReset={ () => onCancel() }
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					isValid={isFormValid}
-					formReady={formReady}
-					onValidateForm={() => onValidateForm() }
-					className='component-questionnaire-validation-form'
-					submitButtonText={edittingComputeMode ? i18n('Save') : i18n('Create')}>
-					<GridSection hasLostColSet>
-						<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow={!edittingComputeMode}>
-							<Input
-								disabled={!isManual}
-								data-test-id='name'
-								type='text'
-								label={i18n('Flavor Name')}
-								value={name}
-								onChange={name => onDataChanged({name})}
-								isValid={genericFieldInfo['name'].isValid}
-								errorText={genericFieldInfo['name'].errorText}
-								isRequired/>
-							</GridItem>
-							<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow>
-							<Input
-								data-test-id='description'
-								type='textarea'
-								label={i18n('Description')}
-								value={description}
-								onChange={description => onDataChanged({description})}
-								isValid={genericFieldInfo['description'].isValid}
-								errorText={genericFieldInfo['description'].errorText}/>
-						</GridItem>
-					</GridSection>
-					{edittingComputeMode && <VmSizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
-				</Form>
-				}
-			</div>
-		);
-	}
-
-	save(){
-		return this.form.handleFormSubmit(new Event('dummy'));
-	}
+    save() {
+        return this.form.handleFormSubmit(new Event('dummy'));
+    }
 }
 
 export default ComputeEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
index 6c02f36c90..b691084cc3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
@@ -14,20 +14,26 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './ComputeFlavorConstants.js';
+import { actionTypes } from './ComputeFlavorConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.COMPUTE_FLAVORS_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.ADD_COMPUTE:
-			return [...state, action.compute];
-		case actionTypes.COMPUTE_LIST_EDIT:
-			const indexForEdit = state.findIndex(({id}) => id === action.compute.id);
-			return [...state.slice(0, indexForEdit), action.compute, ...state.slice(indexForEdit + 1)];
-		case actionTypes.DELETE_COMPUTE:
-			return state.filter(({id}) => id !== action.computeId);
-		default:
-			return state;
-	}
-};
\ No newline at end of file
+    switch (action.type) {
+        case actionTypes.COMPUTE_FLAVORS_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.ADD_COMPUTE:
+            return [...state, action.compute];
+        case actionTypes.COMPUTE_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                ({ id }) => id === action.compute.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.compute,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.DELETE_COMPUTE:
+            return state.filter(({ id }) => id !== action.computeId);
+        default:
+            return state;
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
index a476f85a19..00d76eff23 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
@@ -13,33 +13,32 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js';
+import { actionTypes, COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.computeEditor.LOAD_EDITOR_DATA:
-			return {
-				...state,
-				formName: COMPUTE_FLAVOR_FORM,
-				data: action.compute,
-				formReady: null,
-				genericFieldInfo: {
-					name: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true }]
-					},
-					description: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 300}]
-					}
-				}
-			};
-		case actionTypes.computeEditor.CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.computeEditor.LOAD_EDITOR_DATA:
+            return {
+                ...state,
+                formName: COMPUTE_FLAVOR_FORM,
+                data: action.compute,
+                formReady: null,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 300 }]
+                    }
+                }
+            };
+        case actionTypes.computeEditor.CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
-
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 54f22e0760..2f40706736 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
@@ -18,89 +18,146 @@ 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 VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('VM Sizing')} hasLastColSet>
-			<GridItem>
-				<Input
-					data-test-id='numOfCPUs'
-					type='number'
-					label={i18n('Number of CPUs')}
-					onChange={(tools) => onQDataChanged({'vmSizing/numOfCPUs' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/numOfCPUs'].errorText}
-					value={dataMap['vmSizing/numOfCPUs']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='fileSystemSizeGB'
-					type='number'
-					label={i18n('File System Size (GB)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/fileSystemSizeGB' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText}
-					value={dataMap['vmSizing/fileSystemSizeGB']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='persistentStorageVolumeSize'
-					type='number'
-					label={i18n('Persistent Storage/Volume Size (GB)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/persistentStorageVolumeSize' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText}
-					value={dataMap['vmSizing/persistentStorageVolumeSize']} />
-			</GridItem>
-			<GridItem lastColInRow>
-				<Input
-					data-test-id='ioOperationsPerSec'
-					type='number'
-					label={i18n('I/O Operations (per second)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/ioOperationsPerSec' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].errorText}
-					value={dataMap['vmSizing/ioOperationsPerSec']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-cpuOverSubscriptionRatio'
-					label={i18n('CPU Oversubscription Ratio')}
-					type='select'
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					isValid={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].errorText}
-					value={dataMap['vmSizing/cpuOverSubscriptionRatio']}
-					onChange={(e) => {
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onQDataChanged({'vmSizing/cpuOverSubscriptionRatio' : val});}
-					}>
-					<option key='placeholder' value=''>{i18n('Select...')}</option>
-					{qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].enum.map(cpuOSR => <option value={cpuOSR.enum} key={cpuOSR.enum}>{cpuOSR.title}</option>)}
-				</Input>
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-memoryRAM'
-					type='select'
-					label={i18n('Memory - RAM')}
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/memoryRAM'].errorText}
-					value={dataMap['vmSizing/memoryRAM']}
-					onChange={(e) => {
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onQDataChanged({'vmSizing/memoryRAM' : val});}
-					}>
-					<option key='placeholder' value=''>{i18n('Select...')}</option>
-					{qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => <option value={mRAM.enum} key={mRAM.enum}>{mRAM.title}</option>)}
-				</Input>
-			</GridItem>
-		</GridSection>
-	);
+const VmSizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('VM Sizing')} hasLastColSet>
+            <GridItem>
+                <Input
+                    data-test-id="numOfCPUs"
+                    type="number"
+                    label={i18n('Number of CPUs')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/numOfCPUs': tools })
+                    }
+                    isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid}
+                    errorText={
+                        qgenericFieldInfo['vmSizing/numOfCPUs'].errorText
+                    }
+                    value={dataMap['vmSizing/numOfCPUs']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="fileSystemSizeGB"
+                    type="number"
+                    label={i18n('File System Size (GB)')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/fileSystemSizeGB': tools })
+                    }
+                    isValid={
+                        qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText
+                    }
+                    value={dataMap['vmSizing/fileSystemSizeGB']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="persistentStorageVolumeSize"
+                    type="number"
+                    label={i18n('Persistent Storage/Volume Size (GB)')}
+                    onChange={tools =>
+                        onQDataChanged({
+                            'vmSizing/persistentStorageVolumeSize': tools
+                        })
+                    }
+                    isValid={
+                        qgenericFieldInfo[
+                            'vmSizing/persistentStorageVolumeSize'
+                        ].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo[
+                            'vmSizing/persistentStorageVolumeSize'
+                        ].errorText
+                    }
+                    value={dataMap['vmSizing/persistentStorageVolumeSize']}
+                />
+            </GridItem>
+            <GridItem lastColInRow>
+                <Input
+                    data-test-id="ioOperationsPerSec"
+                    type="number"
+                    label={i18n('I/O Operations (per second)')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/ioOperationsPerSec': tools })
+                    }
+                    isValid={
+                        qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/ioOperationsPerSec']
+                            .errorText
+                    }
+                    value={dataMap['vmSizing/ioOperationsPerSec']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-cpuOverSubscriptionRatio"
+                    label={i18n('CPU Oversubscription Ratio')}
+                    type="select"
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={
+                        qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio']
+                            .isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio']
+                            .errorText
+                    }
+                    value={dataMap['vmSizing/cpuOverSubscriptionRatio']}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({
+                            'vmSizing/cpuOverSubscriptionRatio': val
+                        });
+                    }}>
+                    <option key="placeholder" value="">
+                        {i18n('Select...')}
+                    </option>
+                    {qgenericFieldInfo[
+                        'vmSizing/cpuOverSubscriptionRatio'
+                    ].enum.map(cpuOSR => (
+                        <option value={cpuOSR.enum} key={cpuOSR.enum}>
+                            {cpuOSR.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-memoryRAM"
+                    type="select"
+                    label={i18n('Memory - RAM')}
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid}
+                    errorText={
+                        qgenericFieldInfo['vmSizing/memoryRAM'].errorText
+                    }
+                    value={dataMap['vmSizing/memoryRAM']}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({ 'vmSizing/memoryRAM': val });
+                    }}>
+                    <option key="placeholder" value="">
+                        {i18n('Select...')}
+                    </option>
+                    {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => (
+                        <option value={mRAM.enum} key={mRAM.enum}>
+                            {mRAM.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default VmSizing;
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 9f59cd5b27..d831765674 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
@@ -14,36 +14,50 @@
  * permissions and limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentCreationView from './SoftwareProductComponentCreationView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {forms} from '../SoftwareProductComponentsConstants.js';
+import { forms } from '../SoftwareProductComponentsConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}} = softwareProduct;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-	return {
-		data,
-		genericFieldInfo,
-		formReady,
-		isFormValid
-	};
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductComponents: {
+            componentEditor: { data, genericFieldInfo, formReady }
+        }
+    } = softwareProduct;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    return {
+        data,
+        genericFieldInfo,
+        formReady,
+        isFormValid
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.CREATE_FORM}),
-		//onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
-		onSubmit: (componentData) => {
-			return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(dispatch,
-			{softwareProductId, componentData, version});
-		},
-		onCancel: () => SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch),
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
-
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.CREATE_FORM
+            }),
+        //onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
+        onSubmit: componentData => {
+            return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(
+                dispatch,
+                { softwareProductId, componentData, version }
+            );
+        },
+        onCancel: () =>
+            SoftwareProductComponentsActionHelper.closeComponentCreationModal(
+                dispatch
+            ),
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentCreationView
+);
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 42804ce5a6..0b33b4017f 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
@@ -21,59 +21,80 @@ 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';
-import {forms} from '../SoftwareProductComponentsConstants.js';
+import { forms } from '../SoftwareProductComponentsConstants.js';
 
 class ComponentCreationView extends React.Component {
-	render() {
-		let {data = {}, onDataChanged, onCancel, genericFieldInfo} = this.props;
-		let {displayName, description} = data;
-		return(
-			<div>
-				{
-					genericFieldInfo && <Form
-						ref='validationForm'
-						hasButtons={true}
-						onSubmit={ () => this.submit() }
-						onReset={ () => onCancel() }
-						submitButtonText={i18n('Create')}
-						labledButtons={true}
-						isValid={this.props.isFormValid}
-						formReady={this.props.formReady}
-						onValidateForm={() => this.props.onValidateForm(forms.CREATE_FORM) }
-						className='entitlement-pools-form'>
-						<GridSection hasLastColSet>
-							<GridItem colSpan={4} lastColInRow>
-								<Input
-									data-test-id='name'
-									onChange={displayName => onDataChanged({displayName})}
-									label={i18n('Name')}
-									isRequired={true}
-									isValid={genericFieldInfo.displayName.isValid}
-									errorText={genericFieldInfo.displayName.errorText}
-									value={displayName}
-									type='text'/>
-							</GridItem>
-							<GridItem colSpan={4} lastColInRow>
-								<Input
-									label={i18n('Description')}
-									onChange={description => onDataChanged({description})}
-									value={description}
-									isValid={genericFieldInfo.description.isValid}
-									errorText={genericFieldInfo.description.errorText}
-									data-test-id='description'
-									type='textarea'/>
-							</GridItem>
-						</GridSection>
-					</Form>
-				}
-			</div>
-		);
-	}
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            onCancel,
+            genericFieldInfo
+        } = this.props;
+        let { displayName, description } = data;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        submitButtonText={i18n('Create')}
+                        labledButtons={true}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() =>
+                            this.props.onValidateForm(forms.CREATE_FORM)
+                        }
+                        className="entitlement-pools-form">
+                        <GridSection hasLastColSet>
+                            <GridItem colSpan={4} lastColInRow>
+                                <Input
+                                    data-test-id="name"
+                                    onChange={displayName =>
+                                        onDataChanged({ displayName })
+                                    }
+                                    label={i18n('Name')}
+                                    isRequired={true}
+                                    isValid={
+                                        genericFieldInfo.displayName.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.displayName.errorText
+                                    }
+                                    value={displayName}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={4} lastColInRow>
+                                <Input
+                                    label={i18n('Description')}
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    value={description}
+                                    isValid={
+                                        genericFieldInfo.description.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.description.errorText
+                                    }
+                                    data-test-id="description"
+                                    type="textarea"
+                                />
+                            </GridItem>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	submit() {
-		const {onSubmit, data} = this.props;
-		onSubmit(data);
-	}
+    submit() {
+        const { onSubmit, data } = this.props;
+        onSubmit(data);
+    }
 }
 
 export default ComponentCreationView;
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 8c06fd0ab8..f3f64e4b20 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
@@ -13,41 +13,79 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.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';
+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 isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentVSP },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        componentEditor: {
+            data: componentData = {},
+            qdata,
+            qgenericFieldInfo: qGenericFieldInfo,
+            dataMap,
+            genericFieldInfo
+        }
+    } = softwareProductComponents;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {
-		componentData,
-		qdata,
-		isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL,
-		genericFieldInfo,
-		qGenericFieldInfo,
-		dataMap,
-		isFormValid
-	};
+    return {
+        componentData,
+        qdata,
+        isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL,
+        genericFieldInfo,
+        qGenericFieldInfo,
+        dataMap,
+        isFormValid
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}),
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
-			{softwareProductId, version, vspComponentId: componentId, componentData, qdata});
-		},
-		onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData})
-	};
-
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.ALL_SPC_FORMS
+            }),
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onSubmit: ({ componentData, qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    componentData,
+                    qdata
+                }
+            );
+        },
+        onValidityChanged: isValidityData =>
+            SoftwareProductActionHelper.setIsValidityData(dispatch, {
+                isValidityData
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsGeneralView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsGeneralView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
index 6aa51d1609..ad1fcaacff 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
@@ -21,9 +21,18 @@ 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 GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, description, isReadOnlyMode, genericFieldInfo, isManual}) => (
-	<GridSection title={i18n('General')}>
-		{/* disabled until backend will be ready to implement it
+const GeneralSection = ({
+    onDataChanged,
+    displayName,
+    vfcCode,
+    nfcFunction,
+    description,
+    isReadOnlyMode,
+    genericFieldInfo,
+    isManual
+}) => (
+    <GridSection title={i18n('General')}>
+        {/* disabled until backend will be ready to implement it
 			<div className='validation-input-wrapper'>
 			<div className='form-group'>
 			<label className='control-label'>{i18n('Name')}</label>
@@ -32,156 +41,248 @@ const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, descr
 			</div>
 
 		*/}
-		<GridItem>
-			<Input
-				data-test-id='name'
-				label={i18n('Name')}
-				value={displayName}
-				disabled={!isManual || isReadOnlyMode}
-				type='text'/>
-			{!isManual  && <Input
-				data-test-id='vfcCode'
-				label={i18n('Naming Code')}
-				value={vfcCode}
-				isValid={genericFieldInfo.vfcCode.isValid}
-				errorText={genericFieldInfo.vfcCode.errorText}
-				onChange={vfcCode => onDataChanged({vfcCode})}
-				disabled={isReadOnlyMode}
-				type='text'/> }
-			<Input
-				data-test-id='nfcFunction'
-				label={i18n('Function')}
-				value={nfcFunction}
-				isValid={genericFieldInfo.nfcFunction.isValid}
-				errorText={genericFieldInfo.nfcFunction.errorText}
-				onChange={nfcFunction => onDataChanged({nfcFunction})}
-				disabled={isReadOnlyMode}
-				type='text'/>
-		</GridItem>
-		<GridItem colSpan={2}>
-			<Input
-				label={i18n('Description')}
-				isValid={genericFieldInfo.description.isValid}
-				errorText={genericFieldInfo.description.errorText}
-				onChange={description => onDataChanged({description})}
-				disabled={isReadOnlyMode}
-				value={description}
-				groupClassName='multi-line-textarea'
-				data-test-id='description'
-				type='textarea'/>
-		</GridItem>
-		<GridItem />
-	</GridSection>
+        <GridItem>
+            <Input
+                data-test-id="name"
+                label={i18n('Name')}
+                value={displayName}
+                disabled={!isManual || isReadOnlyMode}
+                type="text"
+            />
+            {!isManual && (
+                <Input
+                    data-test-id="vfcCode"
+                    label={i18n('Naming Code')}
+                    value={vfcCode}
+                    isValid={genericFieldInfo.vfcCode.isValid}
+                    errorText={genericFieldInfo.vfcCode.errorText}
+                    onChange={vfcCode => onDataChanged({ vfcCode })}
+                    disabled={isReadOnlyMode}
+                    type="text"
+                />
+            )}
+            <Input
+                data-test-id="nfcFunction"
+                label={i18n('Function')}
+                value={nfcFunction}
+                isValid={genericFieldInfo.nfcFunction.isValid}
+                errorText={genericFieldInfo.nfcFunction.errorText}
+                onChange={nfcFunction => onDataChanged({ nfcFunction })}
+                disabled={isReadOnlyMode}
+                type="text"
+            />
+        </GridItem>
+        <GridItem colSpan={2}>
+            <Input
+                label={i18n('Description')}
+                isValid={genericFieldInfo.description.isValid}
+                errorText={genericFieldInfo.description.errorText}
+                onChange={description => onDataChanged({ description })}
+                disabled={isReadOnlyMode}
+                value={description}
+                groupClassName="multi-line-textarea"
+                data-test-id="description"
+                type="textarea"
+            />
+        </GridItem>
+        <GridItem />
+    </GridSection>
 );
 
-const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Hypervisor')}>
-		<GridItem>
-			<Input
-				data-test-id='hypervisor'
-				label={i18n('Supported Hypervisors')}
-				type='select'
-				className='input-options-select'
-				groupClassName='bootstrap-input-options'
-				isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
-				errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
-				value={dataMap['general/hypervisor/hypervisor']}
-				onChange={(e) => {
-					const selectedIndex = e.target.selectedIndex;
-					const val = e.target.options[selectedIndex].value;
-					onQDataChanged({'general/hypervisor/hypervisor' : val});}
-				}>
-				<option key='placeholder' value=''>{i18n('Select...')}</option>
-				{qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
-			</Input>
-		</GridItem>
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='drivers'
-				onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
-				label={i18n('Hypervisor Drivers')}
-				type='text'
-				isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
-				errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
-				value={dataMap['general/hypervisor/drivers']}/>
-		</GridItem>
-		<GridItem colSpan={3}>
-			<Input
-				data-test-id='containerFeaturesDescription'
-				label={i18n('Describe Container Features')}
-				type='textarea'
-				onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
-				isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
-				errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
-				value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
-		</GridItem>
-	</GridSection>
+const HypervisorSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Hypervisor')}>
+        <GridItem>
+            <Input
+                data-test-id="hypervisor"
+                label={i18n('Supported Hypervisors')}
+                type="select"
+                className="input-options-select"
+                groupClassName="bootstrap-input-options"
+                isValid={
+                    qgenericFieldInfo['general/hypervisor/hypervisor'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/hypervisor/hypervisor'].errorText
+                }
+                value={dataMap['general/hypervisor/hypervisor']}
+                onChange={e => {
+                    const selectedIndex = e.target.selectedIndex;
+                    const val = e.target.options[selectedIndex].value;
+                    onQDataChanged({ 'general/hypervisor/hypervisor': val });
+                }}>
+                <option key="placeholder" value="">
+                    {i18n('Select...')}
+                </option>
+                {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(
+                    hv => (
+                        <option value={hv.enum} key={hv.enum}>
+                            {hv.title}
+                        </option>
+                    )
+                )}
+            </Input>
+        </GridItem>
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="drivers"
+                onChange={driver =>
+                    onQDataChanged({ 'general/hypervisor/drivers': driver })
+                }
+                label={i18n('Hypervisor Drivers')}
+                type="text"
+                isValid={
+                    qgenericFieldInfo['general/hypervisor/drivers'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/hypervisor/drivers'].errorText
+                }
+                value={dataMap['general/hypervisor/drivers']}
+            />
+        </GridItem>
+        <GridItem colSpan={3}>
+            <Input
+                data-test-id="containerFeaturesDescription"
+                label={i18n('Describe Container Features')}
+                type="textarea"
+                onChange={containerFeaturesDescription =>
+                    onQDataChanged({
+                        'general/hypervisor/containerFeaturesDescription': containerFeaturesDescription
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo[
+                        'general/hypervisor/containerFeaturesDescription'
+                    ].isValid
+                }
+                errorText={
+                    qgenericFieldInfo[
+                        'general/hypervisor/containerFeaturesDescription'
+                    ].errorText
+                }
+                value={
+                    dataMap['general/hypervisor/containerFeaturesDescription']
+                }
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Disk')}>
-		<GridItem>
-			<Input
-				data-test-id='bootDiskSizePerVM'
-				onChange={(bootDiskSizePerVM) => onQDataChanged({'general/disk/bootDiskSizePerVM' : bootDiskSizePerVM})}
-				label={i18n('Size of boot disk per VM (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid}
-				errorText={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].errorText}
-				value={dataMap['general/disk/bootDiskSizePerVM']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='ephemeralDiskSizePerVM'
-				onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/disk/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
-				label={i18n('Size of ephemeral disk per VM (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].isValid}
-				errorText={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].errorText}
-				value={dataMap['general/disk/ephemeralDiskSizePerVM']}/>
-		</GridItem>
-	</GridSection>
+const ImageSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Disk')}>
+        <GridItem>
+            <Input
+                data-test-id="bootDiskSizePerVM"
+                onChange={bootDiskSizePerVM =>
+                    onQDataChanged({
+                        'general/disk/bootDiskSizePerVM': bootDiskSizePerVM
+                    })
+                }
+                label={i18n('Size of boot disk per VM (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/disk/bootDiskSizePerVM']
+                        .errorText
+                }
+                value={dataMap['general/disk/bootDiskSizePerVM']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="ephemeralDiskSizePerVM"
+                onChange={ephemeralDiskSizePerVM =>
+                    onQDataChanged({
+                        'general/disk/ephemeralDiskSizePerVM': ephemeralDiskSizePerVM
+                    })
+                }
+                label={i18n('Size of ephemeral disk per VM (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
+                        .errorText
+                }
+                value={dataMap['general/disk/ephemeralDiskSizePerVM']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Recovery')}>
-		<GridItem>
-			<Input
-				data-test-id='pointObjective'
-				label={i18n('VM Recovery Point Objective (Minutes)')}
-				type='number'
-				onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
-				isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
-				errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
-				value={dataMap['general/recovery/pointObjective']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='timeObjective'
-				label={i18n('VM Recovery Time Objective (Minutes)')}
-				type='number'
-				onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
-				isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
-				errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
-				value={dataMap['general/recovery/timeObjective']}/>
-			<div className='empty-two-col' />
-		</GridItem>
-		<GridItem colSpan={2} />
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='vmProcessFailuresHandling'
-				className='textarea'
-				label={i18n('How are in VM process failures handled?')}
-				type='textarea'
-				onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
-				isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
-				errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
-				value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
-			<div className='empty-two-col' />
-
-		</GridItem>
-		{
-			/** disabled until backend will be ready to implement it
+const RecoverySection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Recovery')}>
+        <GridItem>
+            <Input
+                data-test-id="pointObjective"
+                label={i18n('VM Recovery Point Objective (Minutes)')}
+                type="number"
+                onChange={pointObjective =>
+                    onQDataChanged({
+                        'general/recovery/pointObjective': pointObjective
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo['general/recovery/pointObjective'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/recovery/pointObjective']
+                        .errorText
+                }
+                value={dataMap['general/recovery/pointObjective']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="timeObjective"
+                label={i18n('VM Recovery Time Objective (Minutes)')}
+                type="number"
+                onChange={timeObjective =>
+                    onQDataChanged({
+                        'general/recovery/timeObjective': timeObjective
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo['general/recovery/timeObjective'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/recovery/timeObjective']
+                        .errorText
+                }
+                value={dataMap['general/recovery/timeObjective']}
+            />
+            <div className="empty-two-col" />
+        </GridItem>
+        <GridItem colSpan={2} />
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="vmProcessFailuresHandling"
+                className="textarea"
+                label={i18n('How are in VM process failures handled?')}
+                type="textarea"
+                onChange={vmProcessFailuresHandling =>
+                    onQDataChanged({
+                        'general/recovery/vmProcessFailuresHandling': vmProcessFailuresHandling
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo[
+                        'general/recovery/vmProcessFailuresHandling'
+                    ].isValid
+                }
+                errorText={
+                    qgenericFieldInfo[
+                        'general/recovery/vmProcessFailuresHandling'
+                    ].errorText
+                }
+                value={dataMap['general/recovery/vmProcessFailuresHandling']}
+            />
+            <div className="empty-two-col" />
+        </GridItem>
+        {/** disabled until backend will be ready to implement it
 			<div className='row'>
 			<div className='col-md-3'>
 			<Input
@@ -190,78 +291,127 @@ const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 			pointer='/general/recovery/VMRecoveryDocument'/>
 			</div>
 			</div>
-			*/
-		}
-	</GridSection>
+			*/}
+    </GridSection>
 );
 
-const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('DNS Configuration')}>
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='dnsConfiguration'
-				label={i18n('Do you have a need for DNS as a Service? Please describe.')}
-				type='textarea'
-				onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
-				isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
-				errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
-				value={dataMap['general/dnsConfiguration']}/>
-		</GridItem>
-	</GridSection>
+const DNSConfigurationSection = ({
+    dataMap,
+    onQDataChanged,
+    qgenericFieldInfo
+}) => (
+    <GridSection title={i18n('DNS Configuration')}>
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="dnsConfiguration"
+                label={i18n(
+                    'Do you have a need for DNS as a Service? Please describe.'
+                )}
+                type="textarea"
+                onChange={dnsConfiguration =>
+                    onQDataChanged({
+                        'general/dnsConfiguration': dnsConfiguration
+                    })
+                }
+                isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
+                errorText={
+                    qgenericFieldInfo['general/dnsConfiguration'].errorText
+                }
+                value={dataMap['general/dnsConfiguration']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Clone')}>
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='vmCloneUsage'
-				label={i18n('Describe VM Clone Use')}
-				type='textarea'
-				onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
-				isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
-				errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
-				value={dataMap['general/vmCloneUsage']}/>
-		</GridItem>
-	</GridSection>
+const CloneSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Clone')}>
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="vmCloneUsage"
+                label={i18n('Describe VM Clone Use')}
+                type="textarea"
+                onChange={vmCloneUsage =>
+                    onQDataChanged({ 'general/vmCloneUsage': vmCloneUsage })
+                }
+                isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
+                errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
+                value={dataMap['general/vmCloneUsage']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
 class SoftwareProductComponentsGeneralView extends React.Component {
+    render() {
+        let {
+            isManual,
+            onQDataChanged,
+            onDataChanged,
+            genericFieldInfo,
+            dataMap,
+            qGenericFieldInfo,
+            componentData: { displayName, vfcCode, nfcFunction, description },
+            isReadOnlyMode
+        } = this.props;
+        return (
+            <div className="vsp-components-general">
+                <div className="general-data">
+                    {genericFieldInfo &&
+                        qGenericFieldInfo && (
+                            <Form
+                                isValid={this.props.isFormValid}
+                                formReady={null}
+                                isReadOnlyMode={isReadOnlyMode}
+                                onValidityChanged={isValidityData =>
+                                    this.props.onValidityChanged(isValidityData)
+                                }
+                                hasButtons={false}>
+                                <GeneralSection
+                                    onDataChanged={onDataChanged}
+                                    displayName={displayName}
+                                    vfcCode={vfcCode}
+                                    nfcFunction={nfcFunction}
+                                    description={description}
+                                    isManual={isManual}
+                                    isReadOnlyMode={isReadOnlyMode}
+                                    genericFieldInfo={genericFieldInfo}
+                                />
+                                <HypervisorSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <ImageSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <RecoverySection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <DNSConfigurationSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <CloneSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                            </Form>
+                        )}
+                </div>
+            </div>
+        );
+    }
 
-	render() {
-		let {isManual, onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, nfcFunction, description}, isReadOnlyMode} =  this.props;
-		return(
-			<div className='vsp-components-general'>
-				<div className='general-data'>
-					{genericFieldInfo && qGenericFieldInfo && <Form
-						isValid={this.props.isFormValid}
-						formReady={null}
-						isReadOnlyMode={isReadOnlyMode}
-						onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
-						hasButtons={false}>
-						<GeneralSection
-							onDataChanged={onDataChanged}
-							displayName={displayName}
-							vfcCode={vfcCode}
-							nfcFunction={nfcFunction}
-							description={description}
-							isManual={isManual}
-							isReadOnlyMode={isReadOnlyMode}
-							genericFieldInfo={genericFieldInfo}/>
-						<HypervisorSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<ImageSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<RecoverySection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<DNSConfigurationSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<CloneSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-					</Form> }
-				</div>
-			</div>
-		);
-	}
-
-	save() {
-		let {onSubmit, componentData, qdata} = this.props;
-		return onSubmit({componentData, qdata});
-	}
+    save() {
+        let { onSubmit, componentData, qdata } = this.props;
+        return onSubmit({ componentData, qdata });
+    }
 }
 
 export default SoftwareProductComponentsGeneralView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
index 2483d0aaa2..900a9a1c46 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
@@ -1,6 +1,6 @@
-
 import Validator from 'nfvo-utils/Validator.js';
 
-export  const imageCustomValidations = {
-	'version': value => Validator.validate('version', value, [{type: 'required', data: true}])
+export const imageCustomValidations = {
+    version: value =>
+        Validator.validate('version', value, [{ type: 'required', data: true }])
 };
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 8d70d6f14c..3f661b76fe 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
@@ -17,157 +17,268 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
 
 function baseUrl(softwareProductId, version, componentId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
 }
 
-function fetchImagesList({softwareProductId, componentId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchImagesList({ softwareProductId, componentId, version }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}`
+    );
 }
 
-function fetchImage({softwareProductId, componentId, imageId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function fetchImage({ softwareProductId, componentId, imageId, version }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+    );
 }
 
-function destroyImage({softwareProductId, componentId, version, imageId}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function destroyImage({ softwareProductId, componentId, version, imageId }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+    );
 }
 
-function createImage({softwareProductId, componentId, version, data}) {
-	return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
-		fileName: data.fileName
-	});
+function createImage({ softwareProductId, componentId, version, data }) {
+    return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
+        fileName: data.fileName
+    });
 }
 
-function fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`);
+function fetchImageQuestionnaire({
+    softwareProductId,
+    componentId,
+    imageId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${imageId}/questionnaire`
+    );
 }
 
-function saveImage({softwareProductId, version, componentId, image: {id, fileName}}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
-		fileName
-	});
-
+function saveImage({
+    softwareProductId,
+    version,
+    componentId,
+    image: { id, fileName }
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version, componentId)}/${id}`,
+        {
+            fileName
+        }
+    );
 }
 
-function saveImageQuestionnaire({softwareProductId, componentId, version, imageId, qdata}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`, qdata);
+function saveImageQuestionnaire({
+    softwareProductId,
+    componentId,
+    version,
+    imageId,
+    qdata
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${imageId}/questionnaire`,
+        qdata
+    );
 }
 
 const SoftwareProductComponentImagesActionHelper = {
-	fetchImagesList(dispatch, {softwareProductId, componentId, version}) {
-		dispatch({
-			type: actionTypes.IMAGES_LIST_UPDATE,
-			response: []
-		});
-
-		return fetchImagesList({softwareProductId, componentId, version}).then((response) => {
-			dispatch({
-				type: actionTypes.IMAGES_LIST_UPDATE,
-				response: response.results,
-				componentId : componentId
-			});
-		});
-	},
-
-	deleteImage(dispatch, {softwareProductId, componentId, version, imageId}) {
-		return destroyImage({softwareProductId, componentId, version, imageId}).then(() => {
-			return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-		});
-	},
-
-	loadImageData({softwareProductId, componentId, imageId, version}) {
-		return fetchImage({softwareProductId, componentId, imageId, version});
-	},
-
-	openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) {
-		return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => {
-			SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, {
-				softwareProductId,
-				componentId,
-				imageId: image.id,
-				version
-			}).then(() => {
-				SoftwareProductComponentImagesActionHelper.openImageEditor(dispatch, {
-					softwareProductId,
-					componentId,
-					version,
-					isReadOnlyMode,
-					image,
-					data
-				});
-			});
-		});
-	},
-
-	openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) {
-
-		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}
-		});
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
-				title: title,
-				modalClassName: className,
-				modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode}
-			}
-		});
-
-	},
-
-	closeImageEditor(dispatch) {
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-
-		dispatch({
-			type: actionTypes.ImageEditor.CLOSE
-		});
-
-	},
-
-	loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) {
-		return fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}).then((response) => {
-			ValidationHelper.qDataLoaded(dispatch, {qName: IMAGE_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}});
-		});
-	},
-
-	saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}) {
-		SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
-		if (data !== null && data.id) {
-			// editor in edit mode
-			return Promise.all([
-				saveImageQuestionnaire({softwareProductId, version, componentId, imageId: data.id, qdata}),
-				saveImage({softwareProductId, version, componentId, image: data}).then(() => {
-					return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-				})
-			]);
-		} else {
-			// editor in create mode
-			createImage({softwareProductId, componentId, version, data}).then(() => {
-				return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-			});
-		}
-	}
+    fetchImagesList(dispatch, { softwareProductId, componentId, version }) {
+        dispatch({
+            type: actionTypes.IMAGES_LIST_UPDATE,
+            response: []
+        });
+
+        return fetchImagesList({
+            softwareProductId,
+            componentId,
+            version
+        }).then(response => {
+            dispatch({
+                type: actionTypes.IMAGES_LIST_UPDATE,
+                response: response.results,
+                componentId: componentId
+            });
+        });
+    },
+
+    deleteImage(
+        dispatch,
+        { softwareProductId, componentId, version, imageId }
+    ) {
+        return destroyImage({
+            softwareProductId,
+            componentId,
+            version,
+            imageId
+        }).then(() => {
+            return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                dispatch,
+                { softwareProductId, componentId, version }
+            );
+        });
+    },
+
+    loadImageData({ softwareProductId, componentId, imageId, version }) {
+        return fetchImage({ softwareProductId, componentId, imageId, version });
+    },
+
+    openEditImageEditor(
+        dispatch,
+        { image, softwareProductId, componentId, version, isReadOnlyMode }
+    ) {
+        return SoftwareProductComponentImagesActionHelper.loadImageData({
+            softwareProductId,
+            componentId,
+            imageId: image.id,
+            version
+        }).then(({ data }) => {
+            SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    componentId,
+                    imageId: image.id,
+                    version
+                }
+            ).then(() => {
+                SoftwareProductComponentImagesActionHelper.openImageEditor(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        componentId,
+                        version,
+                        isReadOnlyMode,
+                        image,
+                        data
+                    }
+                );
+            });
+        });
+    },
+
+    openImageEditor(
+        dispatch,
+        {
+            image = {},
+            data = {},
+            softwareProductId,
+            componentId,
+            version,
+            isReadOnlyMode
+        }
+    ) {
+        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 }
+        });
+
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName:
+                    modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
+                title: title,
+                modalClassName: className,
+                modalComponentProps: {
+                    softwareProductId,
+                    componentId,
+                    version,
+                    isReadOnlyMode
+                }
+            }
+        });
+    },
+
+    closeImageEditor(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+
+        dispatch({
+            type: actionTypes.ImageEditor.CLOSE
+        });
+    },
+
+    loadImageQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, imageId, version }
+    ) {
+        return fetchImageQuestionnaire({
+            softwareProductId,
+            componentId,
+            imageId,
+            version
+        }).then(response => {
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: IMAGE_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            });
+        });
+    },
+
+    saveImageDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, version, data, qdata }
+    ) {
+        SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
+        if (data !== null && data.id) {
+            // editor in edit mode
+            return Promise.all([
+                saveImageQuestionnaire({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    imageId: data.id,
+                    qdata
+                }),
+                saveImage({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    image: data
+                }).then(() => {
+                    return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                        dispatch,
+                        { softwareProductId, componentId, version }
+                    );
+                })
+            ]);
+        } else {
+            // editor in create mode
+            createImage({ softwareProductId, componentId, version, data }).then(
+                () => {
+                    return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                        dispatch,
+                        { softwareProductId, componentId, version }
+                    );
+                }
+            );
+        }
+    }
 };
 
 export default SoftwareProductComponentImagesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
index 6b6c9a30e5..300b2898e1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
@@ -16,12 +16,12 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	IMAGES_LIST_UPDATE: null,
+    IMAGES_LIST_UPDATE: null,
 
-	ImageEditor: {
-		CLOSE: null,
-		OPEN: null
-	}
+    ImageEditor: {
+        CLOSE: null,
+        OPEN: null
+    }
 });
 
 export const IMAGE_QUESTIONNAIRE = 'image';
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 c5f23e7681..0243a38f1b 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
@@ -13,56 +13,93 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.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,
-	currentScreen: {props: {isReadOnlyMode}}
+    softwareProduct,
+    currentScreen: { props: { isReadOnlyMode } }
 }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
 
-	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
-
-	let {images: {imageEditor = {}}} = softwareProductComponents;
-	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor;
-	let {version, onboardingMethod} = currentSoftwareProduct;
-	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) &&  ValidationHelper.checkFormValid(qgenericFieldInfo);
-
-	return {
-		version,
-		currentSoftwareProduct,
-		isValidityData,
-		data,
-		qdata,
-		dataMap,
-		isFormValid,
-		formReady,
-		genericFieldInfo,
-		qgenericFieldInfo,
-		isReadOnlyMode,
-		isManual: isManual
-	};
+    let { images: { imageEditor = {} } } = softwareProductComponents;
+    let {
+        data,
+        qdata,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        dataMap,
+        formReady
+    } = imageEditor;
+    let { version, onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
+    let isFormValid =
+        ValidationHelper.checkFormValid(genericFieldInfo) &&
+        ValidationHelper.checkFormValid(qgenericFieldInfo);
 
+    return {
+        version,
+        currentSoftwareProduct,
+        isValidityData,
+        data,
+        qdata,
+        dataMap,
+        isFormValid,
+        formReady,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        isReadOnlyMode,
+        isManual: isManual
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}),
-		onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}),
-		onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch),
-		onValidateForm: customValidations => {
-			ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
-			ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations);
-		},
-		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: IMAGE_QUESTIONNAIRE, customValidations}),
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.IMAGE_EDIT_FORM
+            }),
+        onSubmit: ({ data, qdata }) =>
+            SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(
+                dispatch,
+                { softwareProductId, componentId, version, data, qdata }
+            ),
+        onCancel: () =>
+            SoftwareProductComponentsImageActionHelper.closeImageEditor(
+                dispatch
+            ),
+        onValidateForm: customValidations => {
+            ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
+            ValidationHelper.qValidateForm(
+                dispatch,
+                IMAGE_QUESTIONNAIRE,
+                customValidations
+            );
+        },
+        onQDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: IMAGE_QUESTIONNAIRE,
+                customValidations
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsImageEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentsImageEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
index 7c357429e5..3846d45772 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
@@ -13,30 +13,29 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.ImageEditor.CLOSE:
-			return {};
-		case actionTypes.ImageEditor.OPEN:
-			return {
-				...state,
-				data: {
-					...action.image
-				},
-				genericFieldInfo: {
-					'fileName' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				},
-				formName: forms.IMAGE_EDIT_FORM
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.ImageEditor.CLOSE:
+            return {};
+        case actionTypes.ImageEditor.OPEN:
+            return {
+                ...state,
+                data: {
+                    ...action.image
+                },
+                genericFieldInfo: {
+                    fileName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                },
+                formName: forms.IMAGE_EDIT_FORM
+            };
+        default:
+            return state;
+    }
 };
-
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 a5ef152e01..3670ab910d 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
@@ -21,53 +21,81 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 
 import FileDetails from './imagesEditorComponents/FileDetails.jsx';
 import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
-import {imageCustomValidations} from './ImageValidations.js';
+import { imageCustomValidations } from './ImageValidations.js';
 
 class SoftwareProductComponentsImageEditorView extends React.Component {
-	static propTypes = {
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    static propTypes = {
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	render() {
-		let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, genericFieldInfo, qgenericFieldInfo, dataMap, onDataChanged, isManual, onQDataChanged} = this.props;
-		let {id, fileName} = data;
-		let editingMode = Boolean(id);
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref={(form) => { this.form = form; }}
-					hasButtons={true}
-					onSubmit={ () => this.submit() }
-					onReset={ () => onCancel() }
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					isValid={isFormValid}
-					formReady={formReady}
-					submitButtonText={editingMode ? i18n('Save') : i18n('Create')}
-					onValidateForm={() => onValidateForm(imageCustomValidations) }
-					className='vsp-components-image-editor'>
-					<div className='editor-data'>
-						<FileDetails
-							editingMode={editingMode}
-							genericFieldInfo={genericFieldInfo}
-							qgenericFieldInfo={qgenericFieldInfo}
-							fileName={fileName}
-							onDataChanged={onDataChanged}
-							isManual={isManual}
-							dataMap={dataMap}
-							onQDataChanged={onQDataChanged}/>
-						{editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
-					</div>
-				</Form>}
-			</div>
-		);
-	}
-	submit() {
-		let {data, qdata, onSubmit, version} = this.props;
-		onSubmit({data, qdata, version});
-	}
+    render() {
+        let {
+            onCancel,
+            onValidateForm,
+            isReadOnlyMode,
+            isFormValid,
+            formReady,
+            data = {},
+            genericFieldInfo,
+            qgenericFieldInfo,
+            dataMap,
+            onDataChanged,
+            isManual,
+            onQDataChanged
+        } = this.props;
+        let { id, fileName } = data;
+        let editingMode = Boolean(id);
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        submitButtonText={
+                            editingMode ? i18n('Save') : i18n('Create')
+                        }
+                        onValidateForm={() =>
+                            onValidateForm(imageCustomValidations)
+                        }
+                        className="vsp-components-image-editor">
+                        <div className="editor-data">
+                            <FileDetails
+                                editingMode={editingMode}
+                                genericFieldInfo={genericFieldInfo}
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                fileName={fileName}
+                                onDataChanged={onDataChanged}
+                                isManual={isManual}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            {editingMode && (
+                                <ImageDetails
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qgenericFieldInfo}
+                                    onQDataChanged={onQDataChanged}
+                                />
+                            )}
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
+    submit() {
+        let { data, qdata, onSubmit, version } = this.props;
+        onSubmit({ data, qdata, version });
+    }
 }
 
 export default SoftwareProductComponentsImageEditorView;
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 d071647058..f3c39c3048 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
@@ -13,73 +13,122 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx';
 import ImageHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsImagesActionHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        images: { imagesList = [] },
+        componentEditor: {
+            data: componentData,
+            qdata,
+            dataMap,
+            qgenericFieldInfo
+        }
+    } = softwareProductComponents;
+    let { onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
 
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
-	let {onboardingMethod} = currentSoftwareProduct;
-	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
-
-	return {
-		componentData,
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		isValidityData,
-		imagesList,
-		isManual : isManual
-	};
+    return {
+        componentData,
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        isValidityData,
+        imagesList,
+        isManual: isManual
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: COMPONENTS_QUESTIONNAIRE}),
-		onAddImage: (isReadOnlyMode) => {
-			SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch,
-				{isReadOnlyMode, softwareProductId,
-					componentId, 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}"?', {shortenedFileName: shortenedFileName}),
-					onConfirmed: () => ImageHelper.deleteImage(dispatch, {
-						softwareProductId,
-						componentId,
-						version,
-						imageId: image.id
-					})
-				}
-			});
-		},
-		onEditImageClick: (image, isReadOnlyMode) => {
-			SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, {
-				image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'}
-			);
-		},
-		onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
-			{softwareProductId,
-				vspComponentId: componentId,
-				version,
-				qdata});
-		}
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onAddImage: isReadOnlyMode => {
+            SoftwareProductComponentsImagesActionHelper.openImageEditor(
+                dispatch,
+                {
+                    isReadOnlyMode,
+                    softwareProductId,
+                    componentId,
+                    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}"?',
+                        {
+                            shortenedFileName: shortenedFileName
+                        }
+                    ),
+                    onConfirmed: () =>
+                        ImageHelper.deleteImage(dispatch, {
+                            softwareProductId,
+                            componentId,
+                            version,
+                            imageId: image.id
+                        })
+                }
+            });
+        },
+        onEditImageClick: (image, isReadOnlyMode) => {
+            SoftwareProductComponentsImagesActionHelper.openEditImageEditor(
+                dispatch,
+                {
+                    image,
+                    isReadOnlyMode,
+                    softwareProductId,
+                    componentId,
+                    version,
+                    modalClassName: 'image-modal-edit'
+                }
+            );
+        },
+        onSubmit: qdata => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    vspComponentId: componentId,
+                    version,
+                    qdata
+                }
+            );
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsImageListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsImageListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
index 5dd2fb623b..a7c1bfafbe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
@@ -13,14 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-
-		case actionTypes.IMAGES_LIST_UPDATE:
-			return [...action.response];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.IMAGES_LIST_UPDATE:
+            return [...action.response];
+        default:
+            return state;
+    }
 };
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 004cbebe5d..cb67856caa 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
@@ -20,113 +20,152 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class SoftwareProductComponentsImageListView extends React.Component {
-	state = {
-		localFilter: ''
-	};
+    state = {
+        localFilter: ''
+    };
 
-	render() {
-		let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props;
-		return(
-			<div className='vsp-components-image'>
-				<div className='image-data'>
-					<div>
-						{ qgenericFieldInfo && <Form
-							formReady={null}
-							isValid={true}
-							onSubmit={() => this.save()}
-							isReadOnlyMode={isReadOnlyMode}
-							hasButtons={false}>
-
-							<h3 className='section-title'>{i18n('Image')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components'>
-									<div className='single-col'>
-										<Input
-											data-test-id='providedBy'
-											label={i18n('Image provided by')}
-											type='select'
-											isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
-											errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
-											value={dataMap['general/image/providedBy']}
-											onChange={(e) => {
-												const selectedIndex = e.target.selectedIndex;
-												const val = e.target.options[selectedIndex].value;
-												onQDataChanged({'general/image/providedBy' : val});}
-											}>
-											<option key='placeholder' value=''>{i18n('Select...')}</option>
-											{ qgenericFieldInfo['general/image/providedBy'].enum.map(proto =>
-												<option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
-										</Input>
-									</div>
-									<div className='empty-two-col' />
-								</div>
-							</div>
-
-						</Form> }
-					</div>
-				</div>
-	            {this.renderImagesList()}
+    render() {
+        let {
+            dataMap,
+            onQDataChanged,
+            isReadOnlyMode,
+            qgenericFieldInfo
+        } = this.props;
+        return (
+            <div className="vsp-components-image">
+                <div className="image-data">
+                    <div>
+                        {qgenericFieldInfo && (
+                            <Form
+                                formReady={null}
+                                isValid={true}
+                                onSubmit={() => this.save()}
+                                isReadOnlyMode={isReadOnlyMode}
+                                hasButtons={false}>
+                                <h3 className="section-title">
+                                    {i18n('Image')}
+                                </h3>
+                                <div className="rows-section">
+                                    <div className="row-flex-components">
+                                        <div className="single-col">
+                                            <Input
+                                                data-test-id="providedBy"
+                                                label={i18n(
+                                                    'Image provided by'
+                                                )}
+                                                type="select"
+                                                isValid={
+                                                    qgenericFieldInfo[
+                                                        'general/image/providedBy'
+                                                    ].isValid
+                                                }
+                                                errorText={
+                                                    qgenericFieldInfo[
+                                                        'general/image/providedBy'
+                                                    ].errorText
+                                                }
+                                                value={
+                                                    dataMap[
+                                                        'general/image/providedBy'
+                                                    ]
+                                                }
+                                                onChange={e => {
+                                                    const selectedIndex =
+                                                        e.target.selectedIndex;
+                                                    const val =
+                                                        e.target.options[
+                                                            selectedIndex
+                                                        ].value;
+                                                    onQDataChanged({
+                                                        'general/image/providedBy': val
+                                                    });
+                                                }}>
+                                                <option
+                                                    key="placeholder"
+                                                    value="">
+                                                    {i18n('Select...')}
+                                                </option>
+                                                {qgenericFieldInfo[
+                                                    'general/image/providedBy'
+                                                ].enum.map(proto => (
+                                                    <option
+                                                        value={proto.enum}
+                                                        key={proto.enum}>
+                                                        {proto.title}
+                                                    </option>
+                                                ))}
+                                            </Input>
+                                        </div>
+                                        <div className="empty-two-col" />
+                                    </div>
+                                </div>
+                            </Form>
+                        )}
+                    </div>
+                </div>
+                {this.renderImagesList()}
             </div>
-		);
-	};
-
-	renderImagesList() {
-		const {localFilter} = this.state;
-		let {isReadOnlyMode, onAddImage, isManual} = this.props;
-
-		return (
-			<ListEditorView
-				title={i18n('Images')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Images by Name')}
-				isReadOnlyMode={isReadOnlyMode}
-				onFilter={value => this.setState({localFilter: value})}
-				onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
-				plusButtonTitle={i18n('Add Image')}
-				twoColumns>
-				{this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	};
+        );
+    }
 
+    renderImagesList() {
+        const { localFilter } = this.state;
+        let { isReadOnlyMode, onAddImage, isManual } = this.props;
 
-	renderImagesListItem(image, isReadOnlyMode) {
-		let {id, fileName} = image;
-		let {onEditImageClick, isManual, onDeleteImage} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditImageClick(image, isReadOnlyMode)}
-				onDelete={isManual ? () => onDeleteImage(image) : null}>
+        return (
+            <ListEditorView
+                title={i18n('Images')}
+                filterValue={localFilter}
+                placeholder={i18n('Filter Images by Name')}
+                isReadOnlyMode={isReadOnlyMode}
+                onFilter={value => this.setState({ localFilter: value })}
+                onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
+                plusButtonTitle={i18n('Add Image')}
+                twoColumns>
+                {this.filterList().map(image =>
+                    this.renderImagesListItem(image, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-				<ListEditorItemViewField>
-					<div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
+    renderImagesListItem(image, isReadOnlyMode) {
+        let { id, fileName } = image;
+        let { onEditImageClick, isManual, onDeleteImage } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() => onEditImageClick(image, isReadOnlyMode)}
+                onDelete={isManual ? () => onDeleteImage(image) : null}>
+                <ListEditorItemViewField>
+                    <div className="image-filename-cell">
+                        <span className="image-filename">{fileName}</span>
+                    </div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {imagesList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return imagesList.filter(({fileName = ''}) => {
-				return escape(fileName).match(filter);
-			});
-		}
-		else {
-			return imagesList;
-		}
-	}
+    filterList() {
+        let { imagesList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return imagesList.filter(({ fileName = '' }) => {
+                return escape(fileName).match(filter);
+            });
+        } else {
+            return imagesList;
+        }
+    }
 
-	save() {
-		let {onSubmit, qdata} = this.props;
-		return onSubmit(qdata);
-	}
+    save() {
+        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 64367c00f2..ec173cd988 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
@@ -18,32 +18,64 @@ 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';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 import Format from './Format.jsx';
 import Version from './Version.jsx';
 
-const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => {
-	let fileNameCols = (editingMode) ? 3 : 4;
-	return(
-		<GridSection hasLastColSset>
-			<GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
-				<Input
-					disabled={!isManual}
-					onChange={fileName => onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)}
-					label={i18n('Image Name')}
-					data-test-id='image-filename'
-					value={fileName}
-					isValid={genericFieldInfo.fileName.isValid}
-					errorText={genericFieldInfo.fileName.errorText}
-					isRequired={true}
-					type='text'
-					className='image-filename'/>
-			</GridItem>
-			{!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>}
-			{editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
-			{editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
-		</GridSection>
-	);
+const FileDetails = ({
+    editingMode,
+    fileName,
+    onDataChanged,
+    isManual,
+    dataMap,
+    onQDataChanged,
+    genericFieldInfo,
+    qgenericFieldInfo
+}) => {
+    let fileNameCols = editingMode ? 3 : 4;
+    return (
+        <GridSection hasLastColSset>
+            <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
+                <Input
+                    disabled={!isManual}
+                    onChange={fileName =>
+                        onDataChanged({ fileName }, forms.IMAGE_EDIT_FORM)
+                    }
+                    label={i18n('Image Name')}
+                    data-test-id="image-filename"
+                    value={fileName}
+                    isValid={genericFieldInfo.fileName.isValid}
+                    errorText={genericFieldInfo.fileName.errorText}
+                    isRequired={true}
+                    type="text"
+                    className="image-filename"
+                />
+            </GridItem>
+            {!editingMode && (
+                <div className="note-text">
+                    {i18n(
+                        'After image creation you must go to Edit Image and add File Version'
+                    )}
+                </div>
+            )}
+            {editingMode && (
+                <Version
+                    isManual={isManual}
+                    dataMap={dataMap}
+                    qgenericFieldInfo={qgenericFieldInfo}
+                    onQDataChanged={onQDataChanged}
+                />
+            )}
+            {editingMode && (
+                <Format
+                    isManual={isManual}
+                    qgenericFieldInfo={qgenericFieldInfo}
+                    dataMap={dataMap}
+                    onQDataChanged={onQDataChanged}
+                />
+            )}
+        </GridSection>
+    );
 };
 export default FileDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
index 1f71c6b277..0ee8fb76d0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
@@ -18,30 +18,34 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-
-const Format = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridItem colSpan={2}>
-			<Input
-				disabled={!isManual}
-				data-test-id='image-format'
-				type='select'
-				label={i18n('Format')}
-				className='input-options-select'
-				groupClassName='bootstrap-input-options'
-				isValid={qgenericFieldInfo['format'].isValid}
-				errorText={qgenericFieldInfo['format'].errorText}
-				value={dataMap['format']}
-				onChange={(e) => {
-					const selectedIndex = e.target.selectedIndex;
-					const val = e.target.options[selectedIndex].value;
-					onQDataChanged({'format' : val});}
-				}>
-				<option key='placeholder' value=''>{i18n('Select...')}</option>
-				{qgenericFieldInfo['format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
-			</Input>
-		</GridItem>
-	);
+const Format = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridItem colSpan={2}>
+            <Input
+                disabled={!isManual}
+                data-test-id="image-format"
+                type="select"
+                label={i18n('Format')}
+                className="input-options-select"
+                groupClassName="bootstrap-input-options"
+                isValid={qgenericFieldInfo['format'].isValid}
+                errorText={qgenericFieldInfo['format'].errorText}
+                value={dataMap['format']}
+                onChange={e => {
+                    const selectedIndex = e.target.selectedIndex;
+                    const val = e.target.options[selectedIndex].value;
+                    onQDataChanged({ format: val });
+                }}>
+                <option key="placeholder" value="">
+                    {i18n('Select...')}
+                </option>
+                {qgenericFieldInfo['format'].enum.map(hv => (
+                    <option value={hv.enum} key={hv.enum}>
+                        {hv.title}
+                    </option>
+                ))}
+            </Input>
+        </GridItem>
+    );
 };
 export default Format;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
index 24e54bbbcb..ccf94bc860 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
@@ -19,21 +19,22 @@ 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 ImageDetails = ({dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('Image Details')}>
-			<GridItem colSpan={2}>
-				<Input
-					data-test-id='image-md5'
-					className='image-md5'
-					type='text'
-					label={i18n('md5')}
-					onChange={(md5) => onQDataChanged({'md5' : md5})}
-					isValid={qgenericFieldInfo['md5'].isValid}
-					errorText={qgenericFieldInfo['md5'].errorText}
-					value={dataMap['md5']}/>
-			</GridItem>
-		</GridSection>
-	);
+const ImageDetails = ({ dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('Image Details')}>
+            <GridItem colSpan={2}>
+                <Input
+                    data-test-id="image-md5"
+                    className="image-md5"
+                    type="text"
+                    label={i18n('md5')}
+                    onChange={md5 => onQDataChanged({ md5: md5 })}
+                    isValid={qgenericFieldInfo['md5'].isValid}
+                    errorText={qgenericFieldInfo['md5'].errorText}
+                    value={dataMap['md5']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 export default ImageDetails;
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 bd55c5ba91..60454c52e7 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
@@ -17,25 +17,29 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {imageCustomValidations} from '../ImageValidations.js';
+import { imageCustomValidations } from '../ImageValidations.js';
 
-
-const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridItem colSpan={1} lastColInRow>
-			<Input
-				disabled={!isManual}
-				data-test-id='image-version'
-				type='text'
-				className='image-version'
-				label={i18n('Version')}
-				isRequired={true}
-				onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})}
-				isValid={qgenericFieldInfo['version'].isValid}
-				errorText={qgenericFieldInfo['version'].errorText}
-				value={dataMap['version']}/>
-		</GridItem>
-	);
+const Version = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridItem colSpan={1} lastColInRow>
+            <Input
+                disabled={!isManual}
+                data-test-id="image-version"
+                type="text"
+                className="image-version"
+                label={i18n('Version')}
+                isRequired={true}
+                onChange={version =>
+                    onQDataChanged(
+                        { version: version },
+                        { version: imageCustomValidations['version'] }
+                    )
+                }
+                isValid={qgenericFieldInfo['version'].isValid}
+                errorText={qgenericFieldInfo['version'].errorText}
+                value={dataMap['version']}
+            />
+        </GridItem>
+    );
 };
 export default 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 350e80c0f8..da8b73fbe0 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
@@ -13,29 +13,50 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentLoadBalancingView from './SoftwareProductComponentLoadBalancingRefView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
-export const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
-
-	let {componentEditor: {qdata, qgenericFieldInfo: genericFieldInfo, dataMap}} = softwareProductComponents;
-
-	return {
-		qdata,
-		genericFieldInfo,
-		dataMap
-	};
+export const mapStateToProps = ({
+    softwareProduct: { softwareProductComponents }
+}) => {
+    let {
+        componentEditor: { qdata, qgenericFieldInfo: genericFieldInfo, dataMap }
+    } = softwareProductComponents;
 
+    return {
+        qdata,
+        genericFieldInfo,
+        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});}
-	};
+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);
+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 1cbb9afc5d..4c90fc0be2 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
@@ -19,7 +19,7 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import Form from 'nfvo-components/input/validation/Form.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
@@ -27,145 +27,244 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 const prefix = 'highAvailabilityAndLoadBalancing/';
 
 const pointers = [
-	{
-		key: 'failureLoadDistribution',
-		description: 'How is load distributed across live vms in the event of a vm/host failure? please describe'
-	},
-	{
-		key: 'nkModelImplementation',
-		description: 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
-	},
-	{
-		key: 'architectureChoice',
-		description: 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
-		added: 'Will the arrangement be 1-1 or N-M? Please describe.'
-	},
-	{key: 'slaRequirements', description: 'Specify application SLA requirements on Cloud platform.'},
-	{
-		key: 'horizontalScaling',
-		description: 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
-	},
-	{
-		key: 'loadDistributionMechanism',
-		description: 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
-		added: 'Please describe.'
-	}
+    {
+        key: 'failureLoadDistribution',
+        description:
+            'How is load distributed across live vms in the event of a vm/host failure? please describe'
+    },
+    {
+        key: 'nkModelImplementation',
+        description:
+            'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
+    },
+    {
+        key: 'architectureChoice',
+        description:
+            'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
+        added: 'Will the arrangement be 1-1 or N-M? Please describe.'
+    },
+    {
+        key: 'slaRequirements',
+        description: 'Specify application SLA requirements on Cloud platform.'
+    },
+    {
+        key: 'horizontalScaling',
+        description:
+            'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
+    },
+    {
+        key: 'loadDistributionMechanism',
+        description:
+            'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
+        added: 'Please describe.'
+    }
 ];
 //TODO check for buttons
 
-const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
-		<GridItem colSpan={3} key={item.key} >
-			<div className={expanded ? 'title' : 'title add-padding'}
-				 data-test-id={`btn-${item.key}`}
-				 onClick={() => toggle(item.key)}>
-					<SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'}/>
-					<span className='title-text'>{i18n(item.description)}</span>
-					{item.added && <div className='new-line'>{i18n(item.added)}</div>}
-			</div>
-			<div className={expanded ? 'collapse in' : 'collapse'}>
-				<div>
-					<div>
-						<Input
-							data-test-id={`input-${item.key}`}
-							type='textarea'
-							isValid={genericFieldInfo[`${prefix}${item.key}`].isValid}
-							errorText={genericFieldInfo[`${prefix}${item.key}`].errorText}
-							value={dataMap[`${prefix}${item.key}`]}
-							onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} />
-					</div>
-				</div>
-			</div>
-		</GridItem>
+const TextAreaItem = ({
+    item,
+    toggle,
+    expanded,
+    genericFieldInfo,
+    dataMap,
+    onQDataChanged
+}) => (
+    <GridItem colSpan={3} key={item.key}>
+        <div
+            className={expanded ? 'title' : 'title add-padding'}
+            data-test-id={`btn-${item.key}`}
+            onClick={() => toggle(item.key)}>
+            <SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'} />
+            <span className="title-text">{i18n(item.description)}</span>
+            {item.added && <div className="new-line">{i18n(item.added)}</div>}
+        </div>
+        <div className={expanded ? 'collapse in' : 'collapse'}>
+            <div>
+                <div>
+                    <Input
+                        data-test-id={`input-${item.key}`}
+                        type="textarea"
+                        isValid={
+                            genericFieldInfo[`${prefix}${item.key}`].isValid
+                        }
+                        errorText={
+                            genericFieldInfo[`${prefix}${item.key}`].errorText
+                        }
+                        value={dataMap[`${prefix}${item.key}`]}
+                        onChange={val =>
+                            onQDataChanged({ [`${prefix}${item.key}`]: val })
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    </GridItem>
 );
 
 class SoftwareProductComponentLoadBalancingView extends React.Component {
-	static propTypes = {
-		componentId: PropTypes.string.isRequired,
-		softwareProductId: PropTypes.string.isRequired,
-		qdata: PropTypes.object,
-		qschema: PropTypes.object,
-		currentSoftwareProduct: PropTypes.object
-	};
+    static propTypes = {
+        componentId: PropTypes.string.isRequired,
+        softwareProductId: PropTypes.string.isRequired,
+        qdata: PropTypes.object,
+        qschema: PropTypes.object,
+        currentSoftwareProduct: PropTypes.object
+    };
 
-	state = {
-		expanded: {}
-	};
+    state = {
+        expanded: {}
+    };
 
-	render() {
-		let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
-		return (
-			<div className='vsp-components-load-balancing'>
-				<div className='halb-data'>
-					{ genericFieldInfo && <Form
-						formReady={null}
-						isValid={true}
-						onSubmit={() => this.save()}
-						isReadOnlyMode={isReadOnlyMode}
-						hasButtons={false}>
-						<GridSection title={i18n('High Availability & Load Balancing')}>
-							<GridItem colSpan={1}>
-								<Input
-									data-test-id='input-is-component-mandatory'
-									label={i18n('Is Component Mandatory')}
-									type='select'
-									className='input-options-select'
-									groupClassName='bootstrap-input-options'
-									isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid}
-									errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText}
-									value={dataMap[`${prefix}isComponentMandatory`]}
-									onChange={(e) => {
-										const selectedIndex = e.target.selectedIndex;
-										const val = e.target.options[selectedIndex].value;
-										onQDataChanged({[`${prefix}isComponentMandatory`] : val});}
-									}>
-									 <option key='placeholder' value=''>{i18n('Select...')}</option>
-									{ genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) }
-								</Input>
-							</GridItem>
-							<GridItem colSpan={3}/>
-							<GridItem colSpan={1}>
-								<Input
-									data-test-id='input-high-availability-mode'
-									label={i18n('High Availability Mode')}
-									type='select'
-									className='input-options-select'
-									groupClassName='bootstrap-input-options'
-									isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid}
-									errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText}
-									value={dataMap[`${prefix}highAvailabilityMode`]}
-									onChange={(e) => {
-										const selectedIndex = e.target.selectedIndex;
-										const val = e.target.options[selectedIndex].value;
-										onQDataChanged({[`${prefix}highAvailabilityMode`] : val});}
-									}>
-									<option key='placeholder' value=''>{i18n('Select...')}</option>
-									{genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)}
-								</Input>
-							</GridItem>
-							<GridItem colSpan={3}/>
-						</GridSection>
-						<GridSection>
-						{pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged}
-							   genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'}
-							   expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)}
-						</GridSection>
-					</Form> }
-				</div>
-			</div>
-		);
-	}
+    render() {
+        let {
+            dataMap,
+            genericFieldInfo,
+            onQDataChanged,
+            isReadOnlyMode
+        } = this.props;
+        return (
+            <div className="vsp-components-load-balancing">
+                <div className="halb-data">
+                    {genericFieldInfo && (
+                        <Form
+                            formReady={null}
+                            isValid={true}
+                            onSubmit={() => this.save()}
+                            isReadOnlyMode={isReadOnlyMode}
+                            hasButtons={false}>
+                            <GridSection
+                                title={i18n(
+                                    'High Availability & Load Balancing'
+                                )}>
+                                <GridItem colSpan={1}>
+                                    <Input
+                                        data-test-id="input-is-component-mandatory"
+                                        label={i18n('Is Component Mandatory')}
+                                        type="select"
+                                        className="input-options-select"
+                                        groupClassName="bootstrap-input-options"
+                                        isValid={
+                                            genericFieldInfo[
+                                                `${prefix}isComponentMandatory`
+                                            ].isValid
+                                        }
+                                        errorText={
+                                            genericFieldInfo[
+                                                `${prefix}isComponentMandatory`
+                                            ].errorText
+                                        }
+                                        value={
+                                            dataMap[
+                                                `${prefix}isComponentMandatory`
+                                            ]
+                                        }
+                                        onChange={e => {
+                                            const selectedIndex =
+                                                e.target.selectedIndex;
+                                            const val =
+                                                e.target.options[selectedIndex]
+                                                    .value;
+                                            onQDataChanged({
+                                                [`${prefix}isComponentMandatory`]: val
+                                            });
+                                        }}>
+                                        <option key="placeholder" value="">
+                                            {i18n('Select...')}
+                                        </option>
+                                        {genericFieldInfo[
+                                            `${prefix}isComponentMandatory`
+                                        ].enum.map(isMan => (
+                                            <option
+                                                value={isMan.enum}
+                                                key={isMan.enum}>
+                                                {isMan.title}
+                                            </option>
+                                        ))}
+                                    </Input>
+                                </GridItem>
+                                <GridItem colSpan={3} />
+                                <GridItem colSpan={1}>
+                                    <Input
+                                        data-test-id="input-high-availability-mode"
+                                        label={i18n('High Availability Mode')}
+                                        type="select"
+                                        className="input-options-select"
+                                        groupClassName="bootstrap-input-options"
+                                        isValid={
+                                            genericFieldInfo[
+                                                `${prefix}highAvailabilityMode`
+                                            ].isValid
+                                        }
+                                        errorText={
+                                            genericFieldInfo[
+                                                `${prefix}highAvailabilityMode`
+                                            ].errorText
+                                        }
+                                        value={
+                                            dataMap[
+                                                `${prefix}highAvailabilityMode`
+                                            ]
+                                        }
+                                        onChange={e => {
+                                            const selectedIndex =
+                                                e.target.selectedIndex;
+                                            const val =
+                                                e.target.options[selectedIndex]
+                                                    .value;
+                                            onQDataChanged({
+                                                [`${prefix}highAvailabilityMode`]: val
+                                            });
+                                        }}>
+                                        <option key="placeholder" value="">
+                                            {i18n('Select...')}
+                                        </option>
+                                        {genericFieldInfo[
+                                            `${prefix}highAvailabilityMode`
+                                        ].enum.map(hmode => (
+                                            <option
+                                                value={hmode.enum}
+                                                key={hmode.enum}>
+                                                {hmode.title}
+                                            </option>
+                                        ))}
+                                    </Input>
+                                </GridItem>
+                                <GridItem colSpan={3} />
+                            </GridSection>
+                            <GridSection>
+                                {pointers.map(pointer => (
+                                    <TextAreaItem
+                                        onQDataChanged={onQDataChanged}
+                                        genericFieldInfo={genericFieldInfo}
+                                        dataMap={dataMap}
+                                        item={pointer}
+                                        key={pointer.key + 'pKey'}
+                                        expanded={
+                                            this.state.expanded[pointer.key]
+                                        }
+                                        toggle={name => {
+                                            this.toggle(name);
+                                        }}
+                                    />
+                                ))}
+                            </GridSection>
+                        </Form>
+                    )}
+                </div>
+            </div>
+        );
+    }
 
-	toggle(name) {
-		let st = this.state.expanded[name] ? true : false;
-		let newState = {...this.state};
-		newState.expanded[name] = !st;
-		this.setState(newState);
-	}
+    toggle(name) {
+        let st = this.state.expanded[name] ? true : false;
+        let newState = { ...this.state };
+        newState.expanded[name] = !st;
+        this.setState(newState);
+    }
 
-	save() {
-		let {onSubmit, qdata} = this.props;
-		return onSubmit({qdata});
-	}
+    save() {
+        let { onSubmit, qdata } = this.props;
+        return onSubmit({ qdata });
+    }
 }
 
 export default SoftwareProductComponentLoadBalancingView;
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 8871aabbb5..0b0b9ae2d9 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
@@ -13,51 +13,54 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx';
 import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-
-
-export const mapStateToProps = ({softwareProduct}) => {
-
-	let {softwareProductComponents: {monitoring}} = softwareProduct;
-	return {
-		filenames: monitoring
-	};
-
+export const mapStateToProps = ({ softwareProduct }) => {
+    let { softwareProductComponents: { monitoring } } = softwareProduct;
+    return {
+        filenames: monitoring
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-
-	return {
-		onDropMibFileToUpload: (formData, type) =>
-			SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, {
-				softwareProductId,
-				version,
-				componentId,
-				formData,
-				type
-			}),
-
-		onDeleteFile: type => SoftwareProductComponentsMonitoringAction.deleteFile(dispatch, {
-			softwareProductId,
-			version,
-			componentId,
-			type
-		}),
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onDropMibFileToUpload: (formData, type) =>
+            SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, {
+                softwareProductId,
+                version,
+                componentId,
+                formData,
+                type
+            }),
 
-		onFileUploadError: () => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_ERROR,
-			data: {
-				title: i18n('Upload Failed'),
-				msg: i18n('Expected "zip" file. Please check the provided file type.')
-			}
-		})
-	};
+        onDeleteFile: type =>
+            SoftwareProductComponentsMonitoringAction.deleteFile(dispatch, {
+                softwareProductId,
+                version,
+                componentId,
+                type
+            }),
 
+        onFileUploadError: () =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                data: {
+                    title: i18n('Upload Failed'),
+                    msg: i18n(
+                        'Expected "zip" file. Please check the provided file type.'
+                    )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsMonitoringView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsMonitoringView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
index 3db708bc92..c60bc5f1be 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
@@ -16,61 +16,90 @@
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductComponentsMonitoringConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './SoftwareProductComponentsMonitoringConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 function baseUrl(vspId, version, componentId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`;
 }
 
-let onInvalidFileSizeUpload = (dispatch) => dispatch({
-	type: modalActionTypes.GLOBAL_MODAL_ERROR,
-	data: {
-		title: i18n('Upload Failed'),
-		msg: i18n('no zip file was uploaded or zip file doesn\'t exist')
-	}
-});
+let onInvalidFileSizeUpload = dispatch =>
+    dispatch({
+        type: modalActionTypes.GLOBAL_MODAL_ERROR,
+        data: {
+            title: i18n('Upload Failed'),
+            msg: i18n("no zip file was uploaded or zip file doesn't exist")
+        }
+    });
 
-let uploadFile = (dispatch, {softwareProductId, version, componentId, formData, type}) => {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`, formData).then(()=> dispatch({
-		type: actionTypes.MONITOR_UPLOADED, data: {filename: formData.get('upload').name, type : type}
-	}));
+let uploadFile = (
+    dispatch,
+    { softwareProductId, version, componentId, formData, type }
+) => {
+    return RestAPIUtil.post(
+        `${baseUrl(softwareProductId, version, componentId)}/types/${type}`,
+        formData
+    ).then(() =>
+        dispatch({
+            type: actionTypes.MONITOR_UPLOADED,
+            data: { filename: formData.get('upload').name, type: type }
+        })
+    );
 };
 
-let deleteFile = (dispatch, {softwareProductId, version, componentId, type}) => {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`).then(()=> dispatch({
-		type: actionTypes.MONITOR_DELETED,
-		data : { type: type}
-	}));
+let deleteFile = (
+    dispatch,
+    { softwareProductId, version, componentId, type }
+) => {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/types/${type}`
+    ).then(() =>
+        dispatch({
+            type: actionTypes.MONITOR_DELETED,
+            data: { type: type }
+        })
+    );
 };
 
-
 const SoftwareProductComponentsMonitoringAction = {
+    fetchExistingFiles(dispatch, { softwareProductId, version, componentId }) {
+        return RestAPIUtil.fetch(
+            `${baseUrl(softwareProductId, version, componentId)}`
+        ).then(response =>
+            dispatch({
+                type: actionTypes.MONITOR_FILES_DATA_CHANGE,
+                data: response
+            })
+        );
+    },
 
-	fetchExistingFiles(dispatch, {softwareProductId, version, componentId}){
-		return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`).then(response =>
-			dispatch({
-				type: actionTypes.MONITOR_FILES_DATA_CHANGE,
-				data: response
-			})
-		);
-	},
-
-	uploadFile(dispatch, {softwareProductId, version, componentId, formData, type}){
-		if (formData.get('upload').size) {
-			return uploadFile(dispatch, {softwareProductId, version, componentId, formData, type});
-		}
-		else {
-			onInvalidFileSizeUpload(dispatch);
-		}
-	},
-
-	deleteFile(dispatch, {softwareProductId, version, componentId, type}){
-		return deleteFile(dispatch, {softwareProductId, version, componentId, type});
-	}
+    uploadFile(
+        dispatch,
+        { softwareProductId, version, componentId, formData, type }
+    ) {
+        if (formData.get('upload').size) {
+            return uploadFile(dispatch, {
+                softwareProductId,
+                version,
+                componentId,
+                formData,
+                type
+            });
+        } else {
+            onInvalidFileSizeUpload(dispatch);
+        }
+    },
 
+    deleteFile(dispatch, { softwareProductId, version, componentId, type }) {
+        return deleteFile(dispatch, {
+            softwareProductId,
+            version,
+            componentId,
+            type
+        });
+    }
 };
 
 export default SoftwareProductComponentsMonitoringAction;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
index bf2cbd2a3f..10049d6b57 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
@@ -16,29 +16,26 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-
 export const actionTypes = keyMirror({
-	MONITOR_FILES_DATA_CHANGE: null,
-	MONITOR_UPLOADED: null,
-	MONITOR_DELETED: null
+    MONITOR_FILES_DATA_CHANGE: null,
+    MONITOR_UPLOADED: null,
+    MONITOR_DELETED: null
 });
 
 export const fileTypes = {
-	SNMP_TRAP: 'SNMP_TRAP',
-	SNMP_POLL: 'SNMP_POLL',
-	VES_EVENT: 'VES_EVENTS'
+    SNMP_TRAP: 'SNMP_TRAP',
+    SNMP_POLL: 'SNMP_POLL',
+    VES_EVENT: 'VES_EVENTS'
 };
 
 export const type2Name = {
-	SNMP_TRAP: 'snmpTrap',
-	SNMP_POLL: 'snmpPoll',
-	VES_EVENTS: 'vesEvent'
+    SNMP_TRAP: 'snmpTrap',
+    SNMP_POLL: 'snmpPoll',
+    VES_EVENTS: 'vesEvent'
 };
 
-
 export const type2Title = {
-	SNMP_TRAP : i18n('SNMP Trap'),
-	SNMP_POLL : i18n('SNMP Poll'),
-	VES_EVENTS: i18n('VES')
+    SNMP_TRAP: i18n('SNMP Trap'),
+    SNMP_POLL: i18n('SNMP Poll'),
+    VES_EVENTS: i18n('VES')
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
index f5cfe6f06d..61ad4ec2d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
@@ -13,23 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
+import {
+    actionTypes,
+    type2Name
+} from './SoftwareProductComponentsMonitoringConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.MONITOR_FILES_DATA_CHANGE:
-			return action.data;
-		case actionTypes.MONITOR_UPLOADED:
-			return {
-				...state,
-				[type2Name[action.data.type]]: action.data.filename
-			};
-		case actionTypes.MONITOR_DELETED:
-			return {
-				...state,
-				[type2Name[action.data.type]]: undefined
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.MONITOR_FILES_DATA_CHANGE:
+            return action.data;
+        case actionTypes.MONITOR_UPLOADED:
+            return {
+                ...state,
+                [type2Name[action.data.type]]: action.data.filename
+            };
+        case actionTypes.MONITOR_DELETED:
+            return {
+                ...state,
+                [type2Name[action.data.type]]: undefined
+            };
+        default:
+            return state;
+    }
 };
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 95d1e4e283..771bca161a 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,123 +13,133 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, {Component} 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';
-import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
-
-
+import {
+    fileTypes,
+    type2Title,
+    type2Name
+} from './SoftwareProductComponentsMonitoringConstants.js';
 
 class SoftwareProductComponentsMonitoringView extends Component {
-
-	static propTypes = {
-		isReadOnlyMode: PropTypes.bool,
-		filenames: PropTypes.object,
-		softwareProductId: PropTypes.string,
-
-		onDropMibFileToUpload: PropTypes.func,
-		onDeleteSnmpFile: PropTypes.func
-	};
-
-	state = {
-		dragging: false
-	};
-
-
-
-
-	render() {
-		return (
-			<div className='vsp-component-monitoring'>
-				{this.renderDropzoneWithType(fileTypes.VES_EVENT)}
-				{this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
-				{this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
-			</div>
-		);
-	}
-
-	renderDropzoneWithType(type) {
-		let {isReadOnlyMode, filenames} = this.props;
-		let fileByType = type2Name[type];
-		let fileName = (filenames) ? filenames[fileByType] : undefined;
-		let refAndName = `fileInput${type.toString()}`;
-		let typeDisplayName = type2Title[type];
-		return (
-			<Dropzone
-				className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
-				onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
-				onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
-				onDragLeave={() => this.setState({dragging:false})}
-				multiple={false}
-				disableClick={true}
-				ref={refAndName}
-				name={refAndName}
-				accept='.zip'>
-				<div className='draggable-wrapper'>
-					<div className='section-title'>{typeDisplayName}</div>
-					{fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
-				</div>
-			</Dropzone>
-		);
-	}
-
-	renderUploadButton(refAndName) {
-		let {isReadOnlyMode} = this.props;
-		return (
-			<DraggableUploadFileBox
-				dataTestId={`monitoring-upload-${refAndName}`}
-				className='software-product-landing-view-top-block-col-upl'
-				isReadOnlyMode={isReadOnlyMode}
-				onClick={() => this.refs[refAndName].open()}/>
-		);
-	}
-
-	renderUploadedFileName(filename, type, isReadOnlyMode) {
-		return (
-				<div className='monitoring-file'>
-					<Button
-						color='white'
-						disabled={true}
-						className='filename'>
-						{filename}
-					</Button>
-
-					<Button
-						color='gray'
-						data-test-id={`monitoring-delete-${type}`}
-						disabled={isReadOnlyMode}
-						onClick={()=>this.props.onDeleteFile(type)}
-						iconName='close'
-						className='delete'/>
-				</div>
-		);
-	}
-
-
-	handleOnDragEnter(isReadOnlyMode) {
-		if (!isReadOnlyMode) {
-			this.setState({dragging: true});
-		}
-	}
-
-	handleImport(files, rejectedFiles, {isReadOnlyMode, type, refAndName}) {
-		if (isReadOnlyMode) {
-			return;
-		}
-		if (files.length > 0) {
-			this.setState({dragging: false});
-			let file = files[0];
-			let formData = new FormData();
-			formData.append('upload', file);
-			this.refs[refAndName].value = '';
-			this.props.onDropMibFileToUpload(formData, type);
-		} else if (rejectedFiles.length > 0) {
-			this.setState({dragging: false});
-			this.props.onFileUploadError();
-		}
-	}
+    static propTypes = {
+        isReadOnlyMode: PropTypes.bool,
+        filenames: PropTypes.object,
+        softwareProductId: PropTypes.string,
+
+        onDropMibFileToUpload: PropTypes.func,
+        onDeleteSnmpFile: PropTypes.func
+    };
+
+    state = {
+        dragging: false
+    };
+
+    render() {
+        return (
+            <div className="vsp-component-monitoring">
+                {this.renderDropzoneWithType(fileTypes.VES_EVENT)}
+                {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
+                {this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
+            </div>
+        );
+    }
+
+    renderDropzoneWithType(type) {
+        let { isReadOnlyMode, filenames } = this.props;
+        let fileByType = type2Name[type];
+        let fileName = filenames ? filenames[fileByType] : undefined;
+        let refAndName = `fileInput${type.toString()}`;
+        let typeDisplayName = type2Title[type];
+        return (
+            <Dropzone
+                className={`dropzone ${
+                    this.state.dragging ? 'active-dragging' : ''
+                }`}
+                onDrop={(acceptedFiles, rejectedFiles) =>
+                    this.handleImport(acceptedFiles, rejectedFiles, {
+                        isReadOnlyMode,
+                        type,
+                        refAndName
+                    })
+                }
+                onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
+                onDragLeave={() => this.setState({ dragging: false })}
+                multiple={false}
+                disableClick={true}
+                ref={refAndName}
+                name={refAndName}
+                accept=".zip">
+                <div className="draggable-wrapper">
+                    <div className="section-title">{typeDisplayName}</div>
+                    {fileName
+                        ? this.renderUploadedFileName(
+                              fileName,
+                              type,
+                              isReadOnlyMode
+                          )
+                        : this.renderUploadButton(refAndName)}
+                </div>
+            </Dropzone>
+        );
+    }
+
+    renderUploadButton(refAndName) {
+        let { isReadOnlyMode } = this.props;
+        return (
+            <DraggableUploadFileBox
+                dataTestId={`monitoring-upload-${refAndName}`}
+                className="software-product-landing-view-top-block-col-upl"
+                isReadOnlyMode={isReadOnlyMode}
+                onClick={() => this.refs[refAndName].open()}
+            />
+        );
+    }
+
+    renderUploadedFileName(filename, type, isReadOnlyMode) {
+        return (
+            <div className="monitoring-file">
+                <Button color="white" disabled={true} className="filename">
+                    {filename}
+                </Button>
+
+                <Button
+                    color="gray"
+                    data-test-id={`monitoring-delete-${type}`}
+                    disabled={isReadOnlyMode}
+                    onClick={() => this.props.onDeleteFile(type)}
+                    iconName="close"
+                    className="delete"
+                />
+            </div>
+        );
+    }
+
+    handleOnDragEnter(isReadOnlyMode) {
+        if (!isReadOnlyMode) {
+            this.setState({ dragging: true });
+        }
+    }
+
+    handleImport(files, rejectedFiles, { isReadOnlyMode, type, refAndName }) {
+        if (isReadOnlyMode) {
+            return;
+        }
+        if (files.length > 0) {
+            this.setState({ dragging: false });
+            let file = files[0];
+            let formData = new FormData();
+            formData.append('upload', file);
+            this.refs[refAndName].value = '';
+            this.props.onDropMibFileToUpload(formData, type);
+        } else if (rejectedFiles.length > 0) {
+            this.setState({ dragging: false });
+            this.props.onFileUploadError();
+        }
+    }
 }
 
 export default SoftwareProductComponentsMonitoringView;
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 d4aaf7cc7e..e705618a65 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
@@ -13,39 +13,55 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import NICCreationActionHelper from './NICCreationActionHelper.js';
 import NICCreationView from './NICCreationView.jsx';
 import SoftwareProductComponentsNetworkActionHelper from '../SoftwareProductComponentsNetworkActionHelper.js';
-import {networkTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js';
+import {
+    networkTypes,
+    NIC_CREATION_FORM_NAME
+} from '../SoftwareProductComponentsNetworkConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct;
-	let {network: {nicCreation = {}}} = softwareProductComponents;
-	let {data, genericFieldInfo, formReady} = nicCreation;
-	data = {...data, networkType: networkTypes.EXTERNAL};
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents
+    } = softwareProduct;
+    let { network: { nicCreation = {} } } = softwareProductComponents;
+    let { data, genericFieldInfo, formReady } = nicCreation;
+    data = { ...data, networkType: networkTypes.EXTERNAL };
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {
-		currentSoftwareProduct,
-		data,
-		genericFieldInfo,
-		isFormValid,
-		formReady
-	};
+    return {
+        currentSoftwareProduct,
+        data,
+        genericFieldInfo,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: NIC_CREATION_FORM_NAME}),
-		onCancel: () => NICCreationActionHelper.close(dispatch),
-		onSubmit: ({nic, componentId}) => {
-			SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {nic, softwareProductId, componentId, version});
-			NICCreationActionHelper.close(dispatch);
-		},
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME)
-	};
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: NIC_CREATION_FORM_NAME
+            }),
+        onCancel: () => NICCreationActionHelper.close(dispatch),
+        onSubmit: ({ nic, componentId }) => {
+            SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {
+                nic,
+                softwareProductId,
+                componentId,
+                version
+            });
+            NICCreationActionHelper.close(dispatch);
+        },
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(NICCreationView);
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 a40b32d51a..4f200ce33f 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
@@ -13,35 +13,37 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from '../SoftwareProductComponentsNetworkConstants';
+import { actionTypes } from '../SoftwareProductComponentsNetworkConstants';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 
 export default {
+    open(
+        dispatch,
+        { softwareProductId, componentId, modalClassName, version }
+    ) {
+        dispatch({
+            type: actionTypes.NICCreation.OPEN
+        });
 
-	open(dispatch, {softwareProductId, componentId, modalClassName, version}) {
-		dispatch({
-			type: actionTypes.NICCreation.OPEN
-		});
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.NIC_CREATION,
+                title: i18n('Create NEW NIC'),
+                modalClassName,
+                modalComponentProps: { softwareProductId, componentId, version }
+            }
+        });
+    },
 
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.NIC_CREATION,
-				title: i18n('Create NEW NIC'),
-				modalClassName,
-				modalComponentProps: {softwareProductId, componentId, version}
-			}
-		});
-	},
-
-	close(dispatch){
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		dispatch({
-			type: actionTypes.NICCreation.CLEAR_DATA
-		});
-	}
+    close(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({
+            type: actionTypes.NICCreation.CLEAR_DATA
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
index c7e2495b3d..8309c40451 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
@@ -13,37 +13,40 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js';
+import {
+    actionTypes,
+    NIC_CREATION_FORM_NAME
+} from '../SoftwareProductComponentsNetworkConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.NICCreation.OPEN:
-			return {
-				...state,
-				data: {},
-				formName: NIC_CREATION_FORM_NAME,
-				formReady: null,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data : true}]
-					},
-					'networkDescription' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 50}]
-					}
-				}
-			};
-		case actionTypes.NICCreation.CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.NICCreation.OPEN:
+            return {
+                ...state,
+                data: {},
+                formName: NIC_CREATION_FORM_NAME,
+                formReady: null,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    networkDescription: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 50 }]
+                    }
+                }
+            };
+        case actionTypes.NICCreation.CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
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 258876844a..88525c051d 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
@@ -22,103 +22,136 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const NICPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	networkId: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    networkId: PropTypes.string
 });
 
 class NICCreationView extends React.Component {
+    static propTypes = {
+        data: NICPropType,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		data: NICPropType,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            genericFieldInfo,
+            isFormValid,
+            onValidateForm,
+            formReady
+        } = this.props;
+        let { name, description, networkDescription } = data;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => (this.form = form)}
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        submitButtonText={
+                            data.id ? i18n('Save') : i18n('Create')
+                        }
+                        onReset={() => this.props.onCancel()}
+                        labledButtons={true}
+                        isValid={isFormValid}
+                        onValidateForm={() => onValidateForm()}
+                        formReady={formReady}>
+                        <GridSection hasLastColSet>
+                            <GridItem colSpan={4} lastColInRow>
+                                <Input
+                                    value={name}
+                                    label={i18n('Name')}
+                                    data-test-id="nic-name"
+                                    onChange={name => onDataChanged({ name })}
+                                    isRequired={true}
+                                    type="text"
+                                    isValid={genericFieldInfo['name'].isValid}
+                                    errorText={
+                                        genericFieldInfo['name'].errorText
+                                    }
+                                    className="field-section"
+                                />
+                                <Input
+                                    value={description}
+                                    label={i18n('Description')}
+                                    data-test-id="nic-description"
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    isValid={
+                                        genericFieldInfo['description'].isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo['description']
+                                            .errorText
+                                    }
+                                    type="textarea"
+                                    className="field-section"
+                                />
+                            </GridItem>
+                        </GridSection>
+                        <GridSection title={i18n('Network')} hasLastColSet>
+                            <GridItem colSpan={2}>
+                                <div className="form-group">
+                                    <label className="control-label">
+                                        {i18n('Network Type')}
+                                    </label>
+                                    <div className="network-type-radio">
+                                        <Input
+                                            label={i18n('Internal')}
+                                            disabled
+                                            checked={false}
+                                            data-test-id="nic-internal"
+                                            className="network-radio disabled"
+                                            type="radio"
+                                        />
+                                        <Input
+                                            label={i18n('External')}
+                                            disabled
+                                            checked={true}
+                                            data-test-id="nic-external"
+                                            className="network-radio disabled"
+                                            type="radio"
+                                        />
+                                    </div>
+                                </div>
+                            </GridItem>
+                            <GridItem colSpan={2} lastColInRow>
+                                <Input
+                                    value={networkDescription}
+                                    label={i18n('Network Description')}
+                                    data-test-id="nic-network-description"
+                                    onChange={networkDescription =>
+                                        onDataChanged({ networkDescription })
+                                    }
+                                    isValid={
+                                        genericFieldInfo['networkDescription']
+                                            .isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo['networkDescription']
+                                            .errorText
+                                    }
+                                    type="text"
+                                    className="field-section"
+                                />
+                            </GridItem>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	render() {
-		let {data = {}, onDataChanged, genericFieldInfo, isFormValid, onValidateForm, formReady} = this.props;
-		let {name, description, networkDescription} = data;
-		return (
-			<div>
-			{genericFieldInfo && <Form
-				ref={(form) => this.form = form}
-				hasButtons={true}
-				onSubmit={ () => this.submit() }
-				submitButtonText={data.id ? i18n('Save') : i18n('Create')}
-				onReset={ () => this.props.onCancel() }
-				labledButtons={true}
-				isValid={isFormValid}
-				onValidateForm={() => onValidateForm()}
-				formReady={formReady} >
-				<GridSection hasLastColSet>
-					<GridItem colSpan={4} lastColInRow>
-						<Input
-							value={name}
-							label={i18n('Name')}
-							data-test-id='nic-name'
-							onChange={name => onDataChanged({name})}
-							isRequired={true}
-							type='text'
-							isValid={genericFieldInfo['name'].isValid}
-							errorText={genericFieldInfo['name'].errorText}
-							className='field-section'/>
-						<Input
-							value={description}
-							label={i18n('Description')}
-							data-test-id='nic-description'
-							onChange={description => onDataChanged({description})}
-							isValid={genericFieldInfo['description'].isValid}
-							errorText={genericFieldInfo['description'].errorText}
-							type='textarea'
-							className='field-section'/>
-					</GridItem>
-				</GridSection>
-				<GridSection title={i18n('Network')} hasLastColSet>
-					<GridItem colSpan={2}>
-						<div className='form-group'>
-							<label className='control-label'>{i18n('Network Type')}</label>
-							<div className='network-type-radio'>
-								<Input
-									label={i18n('Internal')}
-									disabled
-									checked={false}
-									data-test-id='nic-internal'
-									className='network-radio disabled'
-									type='radio'/>
-								<Input
-									label={i18n('External')}
-									disabled
-									checked={true}
-									data-test-id='nic-external'
-									className='network-radio disabled'
-									type='radio'/>
-							</div>
-						</div>
-					</GridItem>
-					<GridItem colSpan={2} lastColInRow>
-						<Input
-							value={networkDescription}
-							label={i18n('Network Description')}
-							data-test-id='nic-network-description'
-							onChange={networkDescription => onDataChanged({networkDescription})}
-							isValid={genericFieldInfo['networkDescription'].isValid}
-							errorText={genericFieldInfo['networkDescription'].errorText}
-							type='text'
-							className='field-section'/>
-					</GridItem>
-				</GridSection>
-			</Form>}
-			</div>
-		);
-	}
-
-
-	submit() {
-		const {data: nic, componentId} = this.props;
-		this.props.onSubmit({nic, componentId});
-	}
+    submit() {
+        const { data: nic, componentId } = this.props;
+        this.props.onSubmit({ nic, componentId });
+    }
 }
 
 export default NICCreationView;
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 93bd0bd67e..d7205b46ed 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
@@ -13,56 +13,93 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
 import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx';
 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';
+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, currentScreen}) => {
-
-	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {network: {nicEditor = {}}} = softwareProductComponents;
-	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor;
-	let {props: {isReadOnlyMode}} = currentScreen;
-	let {onboardingMethod} = currentSoftwareProduct;
-	let protocols = [];
-	if(qdata && qdata.protocols && qdata.protocols.protocols && qdata.protocols.protocols.length){
-		protocols = qdata.protocols.protocols;
-	}
-	let {version} = currentSoftwareProduct;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) &&  ValidationHelper.checkFormValid(qgenericFieldInfo);
-
-	return {
-		currentSoftwareProduct,
-		isValidityData,
-		version,
-		data,
-		qdata,
-		dataMap,
-		isFormValid,
-		formReady,
-		genericFieldInfo,
-		qgenericFieldInfo,
-		isReadOnlyMode,
-		protocols,
-		isManual: onboardingMethod === onboardingMethodTypes.MANUAL
-	};
+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 { props: { isReadOnlyMode } } = currentScreen;
+    let { onboardingMethod } = currentSoftwareProduct;
+    let protocols = [];
+    if (
+        qdata &&
+        qdata.protocols &&
+        qdata.protocols.protocols &&
+        qdata.protocols.protocols.length
+    ) {
+        protocols = qdata.protocols.protocols;
+    }
+    let { version } = currentSoftwareProduct;
+    let isFormValid =
+        ValidationHelper.checkFormValid(genericFieldInfo) &&
+        ValidationHelper.checkFormValid(qgenericFieldInfo);
 
+    return {
+        currentSoftwareProduct,
+        isValidityData,
+        version,
+        data,
+        qdata,
+        dataMap,
+        isFormValid,
+        formReady,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        isReadOnlyMode,
+        protocols,
+        isManual: onboardingMethod === onboardingMethodTypes.MANUAL
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData,
-			formName: forms.NIC_EDIT_FORM}),
-		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,
-			qName: NIC_QUESTIONNAIRE}),
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.NIC_EDIT_FORM
+            }),
+        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,
+                qName: NIC_QUESTIONNAIRE
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsNICEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentsNICEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
index dd37135d77..2da9b4b76b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
@@ -13,37 +13,37 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.NICEditor.FILL_DATA:
-			return {
-				...state,
-				data: action.nic,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data : true}]
-					},
-					'networkDescription' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				},
-				formName: forms.NIC_EDIT_FORM
-			};
-		case actionTypes.NICEditor.CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.NICEditor.FILL_DATA:
+            return {
+                ...state,
+                data: action.nic,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    networkDescription: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                },
+                formName: forms.NIC_EDIT_FORM
+            };
+        case actionTypes.NICEditor.CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
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 fbb3d53033..df2efbe39e 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
@@ -26,48 +26,113 @@ import Protocols from './nicEditorComponents/Protocols.jsx';
 import NameAndPurpose from './nicEditorComponents/NameAndPurpose.jsx';
 
 class SoftwareProductComponentsNetworkEditorView extends React.Component {
+    render() {
+        let {
+            onCancel,
+            onValidateForm,
+            isReadOnlyMode,
+            isFormValid,
+            formReady,
+            data = {},
+            qgenericFieldInfo,
+            dataMap,
+            onDataChanged,
+            protocols,
+            onQDataChanged,
+            isManual,
+            genericFieldInfo
+        } = this.props;
+        let {
+            name,
+            description,
+            networkName,
+            networkType,
+            networkDescription
+        } = data;
+        let netWorkValues = [
+            {
+                enum: networkName,
+                title: networkName
+            }
+        ];
+        return (
+            <div>
+                {qgenericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        onValidateForm={() => onValidateForm()}
+                        className="vsp-components-network-editor">
+                        <div className="editor-data">
+                            <NameAndPurpose
+                                isManual={isManual}
+                                name={name}
+                                description={description}
+                                onDataChanged={onDataChanged}
+                                isReadOnlyMode={isReadOnlyMode}
+                                genericFieldInfo={genericFieldInfo}
+                            />
+                            <Protocols
+                                protocols={protocols}
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <IpConfig
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <Network
+                                networkDescription={networkDescription}
+                                onDataChanged={onDataChanged}
+                                networkValues={netWorkValues}
+                                isReadOnlyMode={isReadOnlyMode}
+                                networkType={networkType}
+                            />
+                            <Sizing
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <InFlowTraffic
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <OutFlowTraffic
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <FlowLength
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <Acceptable
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	render() {
-		let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, qgenericFieldInfo,
-			dataMap, onDataChanged, protocols, onQDataChanged, isManual, genericFieldInfo} = this.props;
-		let {name, description, networkName, networkType, networkDescription} = data;
-		let netWorkValues = [{
-			enum: networkName,
-			title: networkName
-		}];
-		return (
-			<div>
-		{qgenericFieldInfo && <Form
-			ref={(form) => { this.form = form; }}
-			hasButtons={true}
-			onSubmit={ () => this.submit() }
-			onReset={ () => onCancel() }
-			labledButtons={true}
-			isReadOnlyMode={isReadOnlyMode}
-			isValid={isFormValid}
-			formReady={formReady}
-			onValidateForm={() => onValidateForm() }
-			className='vsp-components-network-editor'>
-				<div className='editor-data'>
-					<NameAndPurpose isManual={isManual}  name={name} description={description} onDataChanged={onDataChanged} isReadOnlyMode={isReadOnlyMode} genericFieldInfo={genericFieldInfo} />
-					<Protocols protocols={protocols} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<IpConfig dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<Network networkDescription={networkDescription} onDataChanged={onDataChanged} networkValues={netWorkValues}  isReadOnlyMode={isReadOnlyMode} networkType={networkType}  />
-					<Sizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<InFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<OutFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<FlowLength qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<Acceptable qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-				</div>
-			</Form> }
-			</div>
-		);
-	}
-
-	submit() {
-		let {data, qdata, onSubmit} = this.props;
-		onSubmit({data, qdata});
-	}
+    submit() {
+        let { data, qdata, onSubmit } = this.props;
+        onSubmit({ data, qdata });
+    }
 }
 
 export default SoftwareProductComponentsNetworkEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
index 5cfc88bdc9..a2e65142a2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
@@ -13,16 +13,22 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.NIC_LIST_UPDATE:
-			return [...action.response];
-		case actionTypes.NIC_LIST_EDIT:
-			const indexForEdit = state.findIndex(nic => nic.id === action.nic.id);
-			return [...state.slice(0, indexForEdit), action.nic, ...state.slice(indexForEdit + 1)];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.NIC_LIST_UPDATE:
+            return [...action.response];
+        case actionTypes.NIC_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                nic => nic.id === action.nic.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.nic,
+                ...state.slice(indexForEdit + 1)
+            ];
+        default:
+            return state;
+    }
 };
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 1ffbc5919f..58c816134b 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
@@ -17,127 +17,223 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper as modalPagesMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper as modalPagesMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
+import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
 
 function baseUrl(softwareProductId, version, componentId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`;
 }
 
-function createNIC({nic, vspId, componentId, version}) {
-	return RestAPIUtil.post(baseUrl(vspId, version, componentId), {
-		name: nic.name,
-		description: nic.description,
-		networkDescription: nic.networkDescription,
-		networkType: nic.networkType
-	});
+function createNIC({ nic, vspId, componentId, version }) {
+    return RestAPIUtil.post(baseUrl(vspId, version, componentId), {
+        name: nic.name,
+        description: nic.description,
+        networkDescription: nic.networkDescription,
+        networkType: nic.networkType
+    });
 }
 
-function fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`);
+function fetchNICQuestionnaire({
+    softwareProductId,
+    version,
+    componentId,
+    nicId
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${nicId}/questionnaire`
+    );
 }
 
-function fetchNIC({softwareProductId, version, componentId, nicId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`);
+function fetchNIC({ softwareProductId, version, componentId, nicId }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}/${nicId}`
+    );
 }
 
-function fetchNICsList({softwareProductId, version, componentId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchNICsList({ softwareProductId, version, componentId }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}`
+    );
 }
 
-function deleteNIC({softwareProductId, componentId, nicId, version}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`);
+function deleteNIC({ softwareProductId, componentId, nicId, version }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/${nicId}`
+    );
 }
-function saveNIC({softwareProductId, version, componentId, nic: {id, name, description, networkId, networkType, networkDescription}}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
-		name,
-		description,
-		networkId,
-		networkDescription,
-		networkType
-	});
+function saveNIC({
+    softwareProductId,
+    version,
+    componentId,
+    nic: { id, name, description, networkId, networkType, networkDescription }
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version, componentId)}/${id}`,
+        {
+            name,
+            description,
+            networkId,
+            networkDescription,
+            networkType
+        }
+    );
 }
 
-function saveNICQuestionnaire({softwareProductId, version, componentId, nicId, qdata}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`, qdata);
+function saveNICQuestionnaire({
+    softwareProductId,
+    version,
+    componentId,
+    nicId,
+    qdata
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${nicId}/questionnaire`,
+        qdata
+    );
 }
 
 const SoftwareProductComponentNetworkActionHelper = {
-
-	fetchNICsList(dispatch, {softwareProductId, version, componentId}) {
-		return fetchNICsList({softwareProductId, version, componentId}).then((response) => {
-			dispatch({
-				type: actionTypes.NIC_LIST_UPDATE,
-				response: response.results
-			});
-		});
-	},
-
-	openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName, version}) {
-		dispatch({
-			type: actionTypes.NICEditor.FILL_DATA,
-			nic: {...data, id: nic.id}
-		});
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_SHOW,
-			data: {
-				modalClassName,
-				modalComponentProps: {softwareProductId, componentId, isReadOnlyMode, version},
-				modalComponentName: modalPagesMapper.NIC_EDITOR,
-				title: i18n('Edit NIC')
-			}
-		});
-	},
-
-	closeNICEditor(dispatch) {
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_CLOSE
-		});
-		dispatch({
-			type: actionTypes.NICEditor.CLEAR_DATA
-		});
-	},
-
-	createNIC(dispatch, {nic, softwareProductId, componentId, version}){
-		return createNIC({nic, vspId: softwareProductId, componentId, version}).then(() => {
-			return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
-		});
-	},
-	loadNICData({softwareProductId, version, componentId, nicId}) {
-		return fetchNIC({softwareProductId, version, componentId, nicId});
-	},
-
-	deleteNIC(dispatch, {softwareProductId, componentId, nicId, version}) {
-		return deleteNIC({softwareProductId, componentId, nicId, version}).then(() => {
-			return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
-		});
-	},
-	loadNICQuestionnaire(dispatch, {softwareProductId, version, componentId, nicId}) {
-		return fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}).then((response) => {
-			ValidationHelper.qDataLoaded(dispatch, {qName: NIC_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}});
-		});
-	},
-
-	saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}) {
-		SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch);
-		return Promise.all([
-			saveNICQuestionnaire({softwareProductId, version, componentId, nicId: data.id, qdata}),
-			saveNIC({softwareProductId, version, componentId, nic: data}).then(() => {
-				dispatch({
-					type: actionTypes.NIC_LIST_EDIT,
-					nic: data
-				});
-			})
-		]);
-	}
+    fetchNICsList(dispatch, { softwareProductId, version, componentId }) {
+        return fetchNICsList({ softwareProductId, version, componentId }).then(
+            response => {
+                dispatch({
+                    type: actionTypes.NIC_LIST_UPDATE,
+                    response: response.results
+                });
+            }
+        );
+    },
+
+    openNICEditor(
+        dispatch,
+        {
+            nic = {},
+            data = {},
+            softwareProductId,
+            componentId,
+            isReadOnlyMode,
+            modalClassName,
+            version
+        }
+    ) {
+        dispatch({
+            type: actionTypes.NICEditor.FILL_DATA,
+            nic: { ...data, id: nic.id }
+        });
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_SHOW,
+            data: {
+                modalClassName,
+                modalComponentProps: {
+                    softwareProductId,
+                    componentId,
+                    isReadOnlyMode,
+                    version
+                },
+                modalComponentName: modalPagesMapper.NIC_EDITOR,
+                title: i18n('Edit NIC')
+            }
+        });
+    },
+
+    closeNICEditor(dispatch) {
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({
+            type: actionTypes.NICEditor.CLEAR_DATA
+        });
+    },
+
+    createNIC(dispatch, { nic, softwareProductId, componentId, version }) {
+        return createNIC({
+            nic,
+            vspId: softwareProductId,
+            componentId,
+            version
+        }).then(() => {
+            return SoftwareProductComponentNetworkActionHelper.fetchNICsList(
+                dispatch,
+                { softwareProductId, componentId, version }
+            );
+        });
+    },
+    loadNICData({ softwareProductId, version, componentId, nicId }) {
+        return fetchNIC({ softwareProductId, version, componentId, nicId });
+    },
+
+    deleteNIC(dispatch, { softwareProductId, componentId, nicId, version }) {
+        return deleteNIC({
+            softwareProductId,
+            componentId,
+            nicId,
+            version
+        }).then(() => {
+            return SoftwareProductComponentNetworkActionHelper.fetchNICsList(
+                dispatch,
+                { softwareProductId, componentId, version }
+            );
+        });
+    },
+    loadNICQuestionnaire(
+        dispatch,
+        { softwareProductId, version, componentId, nicId }
+    ) {
+        return fetchNICQuestionnaire({
+            softwareProductId,
+            version,
+            componentId,
+            nicId
+        }).then(response => {
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: NIC_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            });
+        });
+    },
+
+    saveNICDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, version, componentId, data, qdata }
+    ) {
+        SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch);
+        return Promise.all([
+            saveNICQuestionnaire({
+                softwareProductId,
+                version,
+                componentId,
+                nicId: data.id,
+                qdata
+            }),
+            saveNIC({
+                softwareProductId,
+                version,
+                componentId,
+                nic: data
+            }).then(() => {
+                dispatch({
+                    type: actionTypes.NIC_LIST_EDIT,
+                    nic: data
+                });
+            })
+        ]);
+    }
 };
 
 export default SoftwareProductComponentNetworkActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
index 8ef8fe8c18..4e361bb1a9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
@@ -16,23 +16,23 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	NIC_LIST_EDIT: null,
-	NIC_LIST_UPDATE: null,
+    NIC_LIST_EDIT: null,
+    NIC_LIST_UPDATE: null,
 
-	NICEditor: {
-		FILL_DATA: null,
-		CLEAR_DATA: null,
-	},
-	NICCreation: {
-		OPEN: null,
-		CLEAR_DATA: null,
-		DATA_CHANGED: null
-	},
+    NICEditor: {
+        FILL_DATA: null,
+        CLEAR_DATA: null
+    },
+    NICCreation: {
+        OPEN: null,
+        CLEAR_DATA: null,
+        DATA_CHANGED: null
+    }
 });
 
 export const networkTypes = {
-	EXTERNAL: 'External',
-	INTERNAL: 'Internal'
+    EXTERNAL: 'External',
+    INTERNAL: 'Internal'
 };
 export const NIC_QUESTIONNAIRE = 'nic';
 export const NIC_CREATION_FORM_NAME = 'nicCreation';
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 bb256d5d41..ac708524cf 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
@@ -13,79 +13,132 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import SoftwareProductComponentsNetworkListView from './SoftwareProductComponentsNetworkListView.jsx';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 import NICCreationActionHelper from './NICCreation/NICCreationActionHelper.js';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
 
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        network: { nicList = [] },
+        componentEditor: {
+            data: componentData,
+            qdata,
+            dataMap,
+            qgenericFieldInfo
+        }
+    } = softwareProductComponents;
+    let { version, onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
 
-export const mapStateToProps = ({softwareProduct}) => {
-
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {network: {nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
-	let {version, onboardingMethod} = currentSoftwareProduct;
-	let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
-
-	return {
-		version,
-		componentData,
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		isValidityData,
-		nicList,
-		isManual
-	};
-
+    return {
+        version,
+        componentData,
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        isValidityData,
+        nicList,
+        isManual
+    };
 };
 
-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', version}),
-		onDeleteNic: (nic) => dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_WARNING,
-			data:{
-				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, isReadOnlyMode) => {
-			Promise.all([
-				SoftwareProductComponentsNetworkActionHelper.loadNICData({
-					softwareProductId,
-					version,
-					componentId,
-					nicId: nic.id
-				}),
-				SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(dispatch, {
-					softwareProductId,
-					version,
-					componentId,
-					nicId: nic.id
-				})
-			]).then(
-				([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data,
-					isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit', version})
-			);
-		},
-		onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
-			{softwareProductId, version,
-			vspComponentId: componentId,
-			qdata});
-		}
-
-
-	};
+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',
+                version
+            }),
+        onDeleteNic: nic =>
+            dispatch({
+                type: GlobalModalActions.GLOBAL_MODAL_WARNING,
+                data: {
+                    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, isReadOnlyMode) => {
+            Promise.all([
+                SoftwareProductComponentsNetworkActionHelper.loadNICData({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    nicId: nic.id
+                }),
+                SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        version,
+                        componentId,
+                        nicId: nic.id
+                    }
+                )
+            ]).then(([{ data }]) =>
+                SoftwareProductComponentsNetworkActionHelper.openNICEditor(
+                    dispatch,
+                    {
+                        nic,
+                        data,
+                        isReadOnlyMode,
+                        softwareProductId,
+                        componentId,
+                        modalClassName: 'network-nic-modal-edit',
+                        version
+                    }
+                )
+            );
+        },
+        onSubmit: ({ qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    qdata
+                }
+            );
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsNetworkListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsNetworkListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
index 4d460c722d..c631fb24c3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
@@ -20,138 +20,203 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
-
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class SoftwareProductComponentsNetworkView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
-
-	render() {
-		let {dataMap, qgenericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
-
-		return(
-			<div className='vsp-components-network'>
-				<div className='network-data'>
-					<div>
-{ qgenericFieldInfo && <Form
-	formReady={null}
-	isValid={true}
-	onSubmit={() => this.save()}
-	isReadOnlyMode={isReadOnlyMode}
-	hasButtons={false}>
-							<h3 className='section-title'>{i18n('Network Capacity')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components'>
-									<div className='single-col'>
-										<Input
-											data-test-id='protocolWithHighestTrafficProfileAcrossAllNICs'
-											label={i18n('Protocol with Highest Traffic Profile across all NICs')}
-											type='select'
-											groupClassName='bootstrap-input-options'
-											className='input-options-select'
-											isValid={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].isValid}
-											errorText={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].errorText}
-											value={dataMap['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs']}
-											onChange={(e) => {
-												const selectedIndex = e.target.selectedIndex;
-												const val = e.target.options[selectedIndex].value;
-												onQDataChanged({'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' : val});}
-											}>
-											<option key='placeholder' value=''>{i18n('Select...')}</option>
-											{ qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].enum.map(proto =>
-												<option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
-										</Input>
-									</div>
-									<div className='single-col add-line-break'>
-										<Input
-											data-test-id='networkTransactionsPerSecond'
-											label={i18n('Network Transactions per Second')}
-											type='number'
-											onChange={(ntps) => onQDataChanged({'network/networkCapacity/networkTransactionsPerSecond' : ntps})}
-											isValid={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].isValid}
-											errorText={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].errorText}
-											value={dataMap['network/networkCapacity/networkTransactionsPerSecond']} />
-									</div>
-									<div className='empty-two-col' />
-								</div>
-							</div>
-
-						</Form> }
-					</div>
-					{this.renderNicList()}
-				</div>
-
-			</div>
-		);
-	}
-
-	renderNicList() {
-		const {localFilter} = this.state;
-		let {isReadOnlyMode, onAddNic, isManual} = this.props;
-		return (
-			<ListEditorView
-				title={i18n('Interfaces')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter NICs by Name')}
-				isReadOnlyMode={isReadOnlyMode}
-				onFilter={value => this.setState({localFilter: value})}
-				onAdd={isManual ? onAddNic : null}
-				plusButtonTitle={i18n('Add NIC')}
-				twoColumns>
-				{this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	}
+    render() {
+        let {
+            dataMap,
+            qgenericFieldInfo,
+            onQDataChanged,
+            isReadOnlyMode
+        } = this.props;
 
-	renderNicListItem(nic, isReadOnlyMode) {
-		let {id, name, description, networkName = ''} = nic;
-		let {onEditNicClick, version, isManual, onDeleteNic} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
-				onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
+        return (
+            <div className="vsp-components-network">
+                <div className="network-data">
+                    <div>
+                        {qgenericFieldInfo && (
+                            <Form
+                                formReady={null}
+                                isValid={true}
+                                onSubmit={() => this.save()}
+                                isReadOnlyMode={isReadOnlyMode}
+                                hasButtons={false}>
+                                <h3 className="section-title">
+                                    {i18n('Network Capacity')}
+                                </h3>
+                                <div className="rows-section">
+                                    <div className="row-flex-components">
+                                        <div className="single-col">
+                                            <Input
+                                                data-test-id="protocolWithHighestTrafficProfileAcrossAllNICs"
+                                                label={i18n(
+                                                    'Protocol with Highest Traffic Profile across all NICs'
+                                                )}
+                                                type="select"
+                                                groupClassName="bootstrap-input-options"
+                                                className="input-options-select"
+                                                isValid={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                    ].isValid
+                                                }
+                                                errorText={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                    ].errorText
+                                                }
+                                                value={
+                                                    dataMap[
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                    ]
+                                                }
+                                                onChange={e => {
+                                                    const selectedIndex =
+                                                        e.target.selectedIndex;
+                                                    const val =
+                                                        e.target.options[
+                                                            selectedIndex
+                                                        ].value;
+                                                    onQDataChanged({
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs': val
+                                                    });
+                                                }}>
+                                                <option
+                                                    key="placeholder"
+                                                    value="">
+                                                    {i18n('Select...')}
+                                                </option>
+                                                {qgenericFieldInfo[
+                                                    'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                ].enum.map(proto => (
+                                                    <option
+                                                        value={proto.enum}
+                                                        key={proto.enum}>
+                                                        {proto.title}
+                                                    </option>
+                                                ))}
+                                            </Input>
+                                        </div>
+                                        <div className="single-col add-line-break">
+                                            <Input
+                                                data-test-id="networkTransactionsPerSecond"
+                                                label={i18n(
+                                                    'Network Transactions per Second'
+                                                )}
+                                                type="number"
+                                                onChange={ntps =>
+                                                    onQDataChanged({
+                                                        'network/networkCapacity/networkTransactionsPerSecond': ntps
+                                                    })
+                                                }
+                                                isValid={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/networkTransactionsPerSecond'
+                                                    ].isValid
+                                                }
+                                                errorText={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/networkTransactionsPerSecond'
+                                                    ].errorText
+                                                }
+                                                value={
+                                                    dataMap[
+                                                        'network/networkCapacity/networkTransactionsPerSecond'
+                                                    ]
+                                                }
+                                            />
+                                        </div>
+                                        <div className="empty-two-col" />
+                                    </div>
+                                </div>
+                            </Form>
+                        )}
+                    </div>
+                    {this.renderNicList()}
+                </div>
+            </div>
+        );
+    }
 
-				<ListEditorItemViewField>
-					<div className='name'>{name}</div>
-				</ListEditorItemViewField>
-				<ListEditorItemViewField>
-					<div className={isManual ? 'details-col' : 'details'}>
-						<div className={isManual ? 'manual-title' : 'title'}>{i18n('Purpose of NIC')}</div>
-						{description && <div className={isManual ? 'description' : ''}>{description}</div>}
-					</div>
-					{!isManual && <div className='details'>
-						<div className='title'>{i18n('Network')}</div>
-						<div className='artifact-name'>{networkName}</div>
-					</div>}
-				</ListEditorItemViewField>
+    renderNicList() {
+        const { localFilter } = this.state;
+        let { isReadOnlyMode, onAddNic, isManual } = this.props;
+        return (
+            <ListEditorView
+                title={i18n('Interfaces')}
+                filterValue={localFilter}
+                placeholder={i18n('Filter NICs by Name')}
+                isReadOnlyMode={isReadOnlyMode}
+                onFilter={value => this.setState({ localFilter: value })}
+                onAdd={isManual ? onAddNic : null}
+                plusButtonTitle={i18n('Add NIC')}
+                twoColumns>
+                {this.filterList().map(nic =>
+                    this.renderNicListItem(nic, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-			</ListEditorItemView>
-		);
-	}
+    renderNicListItem(nic, isReadOnlyMode) {
+        let { id, name, description, networkName = '' } = nic;
+        let { onEditNicClick, version, isManual, onDeleteNic } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
+                onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
+                <ListEditorItemViewField>
+                    <div className="name">{name}</div>
+                </ListEditorItemViewField>
+                <ListEditorItemViewField>
+                    <div className={isManual ? 'details-col' : 'details'}>
+                        <div className={isManual ? 'manual-title' : 'title'}>
+                            {i18n('Purpose of NIC')}
+                        </div>
+                        {description && (
+                            <div className={isManual ? 'description' : ''}>
+                                {description}
+                            </div>
+                        )}
+                    </div>
+                    {!isManual && (
+                        <div className="details">
+                            <div className="title">{i18n('Network')}</div>
+                            <div className="artifact-name">{networkName}</div>
+                        </div>
+                    )}
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {nicList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return nicList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return nicList;
-		}
-	}
+    filterList() {
+        let { nicList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return nicList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return nicList;
+        }
+    }
 
-	save() {
-		let {onSubmit, qdata, version} = this.props;
-		return onSubmit({qdata, version});
-	}
+    save() {
+        let { onSubmit, qdata, version } = this.props;
+        return onSubmit({ qdata, version });
+    }
 }
 
 export default SoftwareProductComponentsNetworkView;
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 0fc7404c56..0b2783ebe7 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
@@ -19,57 +19,97 @@ 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 Acceptable = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<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>
-	);
+const Acceptable = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <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>
+    );
 };
 
 export default Acceptable;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
index 3745fc7c2e..32a5516eb4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
@@ -18,18 +18,20 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import PacketsBytes from './PacketsBytes.jsx';
 
 const pointers = [
-		{label: 'Peak', value: 'sizing/flowLength/packets/peak'},
-		{label: 'Avg', value: 'sizing/flowLength/packets/avg'},
-		{label: 'Peak', value: 'sizing/flowLength/bytes/peak'},
-		{label: 'Avg', value: 'sizing/flowLength/bytes/avg'},
+    { label: 'Peak', value: 'sizing/flowLength/packets/peak' },
+    { label: 'Avg', value: 'sizing/flowLength/packets/avg' },
+    { label: 'Peak', value: 'sizing/flowLength/bytes/peak' },
+    { label: 'Avg', value: 'sizing/flowLength/bytes/avg' }
 ];
 
-const  FlowLength = (props) => {
-	return(
-		<PacketsBytes {...props} title={i18n('Flow Length')} pointers={pointers}/>
-	);
+const FlowLength = props => {
+    return (
+        <PacketsBytes
+            {...props}
+            title={i18n('Flow Length')}
+            pointers={pointers}
+        />
+    );
 };
 
 export default FlowLength;
-
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
index 5476ed90e6..150e58af52 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
@@ -18,18 +18,20 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import PacketsBytes from './PacketsBytes.jsx';
 
 const pointers = [
-		{label: 'Peak', value: 'sizing/inflowTrafficPerSecond/packets/peak'},
-		{label: 'Avg', value: 'sizing/inflowTrafficPerSecond/packets/avg'},
-		{label: 'Peak', value: 'sizing/inflowTrafficPerSecond/bytes/peak'},
-		{label: 'Avg', value: 'sizing/inflowTrafficPerSecond/bytes/avg'},
+    { label: 'Peak', value: 'sizing/inflowTrafficPerSecond/packets/peak' },
+    { label: 'Avg', value: 'sizing/inflowTrafficPerSecond/packets/avg' },
+    { label: 'Peak', value: 'sizing/inflowTrafficPerSecond/bytes/peak' },
+    { label: 'Avg', value: 'sizing/inflowTrafficPerSecond/bytes/avg' }
 ];
 
-const InFlowTraffic = (props) => {
-	return(
-		<PacketsBytes {...props} title={i18n('Inflow Traffic per second')} pointers={pointers}/>
-	);
+const InFlowTraffic = props => {
+    return (
+        <PacketsBytes
+            {...props}
+            title={i18n('Inflow Traffic per second')}
+            pointers={pointers}
+        />
+    );
 };
 
 export default InFlowTraffic;
-
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
index b3a5d21625..695835606b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
@@ -19,27 +19,37 @@ 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 IpConfig = ({dataMap, onQDataChanged}) => {
-	return (
-		<GridSection title={i18n('IP Configuration')}>
-				<GridItem>
-					<Input
-						label={i18n('IPv4 Required')}
-						type='checkbox'
-						onChange={value => onQDataChanged({'ipConfiguration/ipv4Required' : value})}
-						data-test-id='ipConfiguration-ipv4Required'
-						value={dataMap['ipConfiguration/ipv4Required']} />
-				</GridItem>
-				<GridItem>
-					<Input
-						label={i18n('IPv6 Required')}
-						type='checkbox'
-						data-test-id='ipConfiguration-ipv6Required'
-						onChange={value => onQDataChanged({'ipConfiguration/ipv6Required' : value})}
-						value={dataMap['ipConfiguration/ipv6Required']} />
-				</GridItem>
-		</GridSection>
-	);
+const IpConfig = ({ dataMap, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('IP Configuration')}>
+            <GridItem>
+                <Input
+                    label={i18n('IPv4 Required')}
+                    type="checkbox"
+                    onChange={value =>
+                        onQDataChanged({
+                            'ipConfiguration/ipv4Required': value
+                        })
+                    }
+                    data-test-id="ipConfiguration-ipv4Required"
+                    value={dataMap['ipConfiguration/ipv4Required']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    label={i18n('IPv6 Required')}
+                    type="checkbox"
+                    data-test-id="ipConfiguration-ipv6Required"
+                    onChange={value =>
+                        onQDataChanged({
+                            'ipConfiguration/ipv6Required': value
+                        })
+                    }
+                    value={dataMap['ipConfiguration/ipv6Required']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default IpConfig;
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 06a2bb445c..5a89239dc6 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
@@ -20,40 +20,48 @@ 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 NameAndPurpose = ({onDataChanged, genericFieldInfo, isReadOnlyMode, name, description, isManual}) => {
-
-	return (
-		<GridSection hastLastColSet>
-			<GridItem colSpan={2}>
-				<Input
-					label={i18n('Name')}
-					value={name}
-					data-test-id='nic-name'
-					disabled={!isManual}
-					isRequired={true}
-					onChange={name => onDataChanged({name})}
-					isValid={genericFieldInfo['name'].isValid}
-					errorText={genericFieldInfo['name'].errorText}
-					type='text' />
-			</GridItem>
-			<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' />
-			</GridItem>
-		</GridSection>
-	);
+const NameAndPurpose = ({
+    onDataChanged,
+    genericFieldInfo,
+    isReadOnlyMode,
+    name,
+    description,
+    isManual
+}) => {
+    return (
+        <GridSection hastLastColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    label={i18n('Name')}
+                    value={name}
+                    data-test-id="nic-name"
+                    disabled={!isManual}
+                    isRequired={true}
+                    onChange={name => onDataChanged({ name })}
+                    isValid={genericFieldInfo['name'].isValid}
+                    errorText={genericFieldInfo['name'].errorText}
+                    type="text"
+                />
+            </GridItem>
+            <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"
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 NameAndPurpose.PropTypes = {
-	name: PropTypes.string,
-	description: PropTypes.array,
-	onDataChanged: PropTypes.func,
-	isReadOnlyMode: 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 7e6712cb5e..c440d2fbd3 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
@@ -21,56 +21,70 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import { networkTypes } from '../SoftwareProductComponentsNetworkConstants.js';
 
-const Network = ({networkValues, networkType, networkDescription, onDataChanged, isReadOnlyMode}) => {
-	const isExternal = networkType === networkTypes.EXTERNAL;
-	return (
-		<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' />
-				:
-					<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>
-		</GridSection>
-	);
+const Network = ({
+    networkValues,
+    networkType,
+    networkDescription,
+    onDataChanged,
+    isReadOnlyMode
+}) => {
+    const isExternal = networkType === networkTypes.EXTERNAL;
+    return (
+        <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"
+                    />
+                ) : (
+                    <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>
+        </GridSection>
+    );
 };
 
 Network.PropTypes = {
-	networkValues: PropTypes.array
+    networkValues: PropTypes.array
 };
 
-export default  Network;
+export default Network;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
index 80a3d1579b..7173294536 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
@@ -18,18 +18,20 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import PacketsBytes from './PacketsBytes.jsx';
 
 const pointers = [
-		{label: 'Peak', value: 'sizing/outflowTrafficPerSecond/packets/peak'},
-		{label: 'Avg', value: 'sizing/outflowTrafficPerSecond/packets/avg'},
-		{label: 'Peak', value: 'sizing/outflowTrafficPerSecond/bytes/peak'},
-		{label: 'Avg', value: 'sizing/outflowTrafficPerSecond/bytes/avg'},
+    { label: 'Peak', value: 'sizing/outflowTrafficPerSecond/packets/peak' },
+    { label: 'Avg', value: 'sizing/outflowTrafficPerSecond/packets/avg' },
+    { label: 'Peak', value: 'sizing/outflowTrafficPerSecond/bytes/peak' },
+    { label: 'Avg', value: 'sizing/outflowTrafficPerSecond/bytes/avg' }
 ];
 
-const OutFlowTraffic = (props) => {
-	return(
-		<PacketsBytes {...props} title={i18n('Outflow Traffic per second')} pointers={pointers}/>
-	);
+const OutFlowTraffic = props => {
+    return (
+        <PacketsBytes
+            {...props}
+            title={i18n('Outflow Traffic per second')}
+            pointers={pointers}
+        />
+    );
 };
 
 export default OutFlowTraffic;
-
-
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 f5f28aea59..070ac816ad 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
@@ -20,47 +20,74 @@ 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, lastColInRow}) => {
-	return (
-		<GridItem lastColInRow={lastColInRow}>
-			<Input
-				label={i18n(label)}
-				type='number'
-				data-test-id={`${value}`}
-				isValid={qgenericFieldInfo[value].isValid}
-				errorText={qgenericFieldInfo[value].errorText}
-				value={dataMap[value]}
-				onChange={val => onQDataChanged({[value]: val})} />
-		</GridItem>
-	);
+const PointerInput = ({
+    label,
+    value,
+    onQDataChanged,
+    qgenericFieldInfo,
+    dataMap,
+    lastColInRow
+}) => {
+    return (
+        <GridItem lastColInRow={lastColInRow}>
+            <Input
+                label={i18n(label)}
+                type="number"
+                data-test-id={`${value}`}
+                isValid={qgenericFieldInfo[value].isValid}
+                errorText={qgenericFieldInfo[value].errorText}
+                value={dataMap[value]}
+                onChange={val => onQDataChanged({ [value]: val })}
+            />
+        </GridItem>
+    );
 };
 
 PointerInput.PropTypes = {
-	label: PropTypes.string,
-	value: PropTypes.string
+    label: PropTypes.string,
+    value: PropTypes.string
 };
 
-const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection title={title} hasLastColSet>
-				<GridItem colSpan={2}>
-					<div className='part-title-small packets'>{i18n('Packets')}</div>
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<div className='part-title-small bytes'>{i18n('Bytes')}</div>
-				</GridItem>
-				{pointers.map((pointer, i) => {return (<PointerInput key={i} label={pointer.label} value={pointer.value}
-					qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} lastColInRow={i === 3} />);})}
-		</GridSection>
-	);
+const PacketsBytes = ({
+    title,
+    pointers = [],
+    qgenericFieldInfo,
+    dataMap,
+    onQDataChanged
+}) => {
+    return (
+        <GridSection title={title} hasLastColSet>
+            <GridItem colSpan={2}>
+                <div className="part-title-small packets">
+                    {i18n('Packets')}
+                </div>
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <div className="part-title-small bytes">{i18n('Bytes')}</div>
+            </GridItem>
+            {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: PropTypes.string,
-	pointers: PropTypes.array,
-	onQDataChanged:  PropTypes.function,
-	dataMap: PropTypes.object,
-	qgenericFieldInfo: 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 be4093da59..eb762b11b2 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
@@ -21,55 +21,83 @@ import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return (
-		<GridSection title={i18n('Protocols')} hasLastColSet>
-				<GridItem colSpan={2}>
-					<InputOptions
-						data-test-id='nic-protocols'
-						label={i18n('Protocols')}
-						type='select'
-						isMultiSelect={true}
-						isValid={qgenericFieldInfo['protocols/protocols'].isValid}
-						errorText={qgenericFieldInfo['protocols/protocols'].errorText}
-						onInputChange={()=>{}}
-						onEnumChange={protocols => {
-							onQDataChanged({'protocols/protocols' : protocols});}
-						}
-						multiSelectedEnum={dataMap['protocols/protocols']}
-						clearable={false}
-						values={qgenericFieldInfo['protocols/protocols'].enum}/>
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						data-test-id='nic-protocolWithHighestTrafficProfile'
-						label={i18n('Protocol with Highest Traffic Profile')}
-						type='select'
-						groupClassName='bootstrap-input-options'
-						className='input-options-select'
-						isValid={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].isValid}
-						errorText={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].errorText}
-						value={dataMap['protocols/protocolWithHighestTrafficProfile']}
-						onChange={(e) => {
-							const selectedIndex = e.target.selectedIndex;
-							const val = e.target.options[selectedIndex].value;
-							onQDataChanged({'protocols/protocolWithHighestTrafficProfile' : val});}
-						}>
-						{(protocols.length === 0) &&
-							<option key={'You must select protocols first...'} value=''>{i18n('You must select protocols first...')}</option>
-						}
-						{protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
-					</Input>
-				</GridItem>
-		</GridSection>
-	);
+const Protocols = ({
+    protocols,
+    qgenericFieldInfo,
+    dataMap,
+    onQDataChanged
+}) => {
+    return (
+        <GridSection title={i18n('Protocols')} hasLastColSet>
+            <GridItem colSpan={2}>
+                <InputOptions
+                    data-test-id="nic-protocols"
+                    label={i18n('Protocols')}
+                    type="select"
+                    isMultiSelect={true}
+                    isValid={qgenericFieldInfo['protocols/protocols'].isValid}
+                    errorText={
+                        qgenericFieldInfo['protocols/protocols'].errorText
+                    }
+                    onInputChange={() => {}}
+                    onEnumChange={protocols => {
+                        onQDataChanged({ 'protocols/protocols': protocols });
+                    }}
+                    multiSelectedEnum={dataMap['protocols/protocols']}
+                    clearable={false}
+                    values={qgenericFieldInfo['protocols/protocols'].enum}
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    data-test-id="nic-protocolWithHighestTrafficProfile"
+                    label={i18n('Protocol with Highest Traffic Profile')}
+                    type="select"
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={
+                        qgenericFieldInfo[
+                            'protocols/protocolWithHighestTrafficProfile'
+                        ].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo[
+                            'protocols/protocolWithHighestTrafficProfile'
+                        ].errorText
+                    }
+                    value={
+                        dataMap['protocols/protocolWithHighestTrafficProfile']
+                    }
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({
+                            'protocols/protocolWithHighestTrafficProfile': val
+                        });
+                    }}>
+                    {protocols.length === 0 && (
+                        <option
+                            key={'You must select protocols first...'}
+                            value="">
+                            {i18n('You must select protocols first...')}
+                        </option>
+                    )}
+                    {protocols.map(protocol => (
+                        <option key={protocol} value={protocol}>
+                            {protocol}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+        </GridSection>
+    );
 };
 
 Protocols.PropTypes = {
-	protocols: PropTypes.array,
-	onQDataChanged:  PropTypes.function,
-	dataMap: PropTypes.object,
-	qgenericFieldInfo: 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 202d458f25..f9ec7261ac 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
@@ -19,21 +19,32 @@ 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 Sizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('Sizing')} hasLastColSet>
-			<GridItem colSpan={4} lastColInRow>
-				<Input
-					label={i18n('Describe Quality of Service')}
-					type='textarea'
-					data-test-id='sizing-describeQualityOfService'
-					isValid={qgenericFieldInfo['sizing/describeQualityOfService'].isValid}
-					errorText={qgenericFieldInfo['sizing/describeQualityOfService'].errorText}
-					value={dataMap['sizing/describeQualityOfService']}
-					onChange={val => onQDataChanged({'sizing/describeQualityOfService' : val}) }/>
-			</GridItem>
-		</GridSection>
-	);
+const Sizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('Sizing')} hasLastColSet>
+            <GridItem colSpan={4} lastColInRow>
+                <Input
+                    label={i18n('Describe Quality of Service')}
+                    type="textarea"
+                    data-test-id="sizing-describeQualityOfService"
+                    isValid={
+                        qgenericFieldInfo['sizing/describeQualityOfService']
+                            .isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['sizing/describeQualityOfService']
+                            .errorText
+                    }
+                    value={dataMap['sizing/describeQualityOfService']}
+                    onChange={val =>
+                        onQDataChanged({
+                            'sizing/describeQualityOfService': val
+                        })
+                    }
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default Sizing;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
index b2133ad5d8..52c5cdde3d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
@@ -15,121 +15,184 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+import { actionTypes } from './SoftwareProductComponentProcessesConstants.js';
 
 function baseUrl(softwareProductId, version, componentId) {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${version.id}/components/${componentId}/processes`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${
+        version.id
+    }/components/${componentId}/processes`;
 }
 
-function fetchProcessesList({softwareProductId, version, componentId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchProcessesList({ softwareProductId, version, componentId }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}`
+    );
 }
 
-function deleteProcess({softwareProductId, version, componentId, processId}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${processId}`);
+function deleteProcess({ softwareProductId, version, componentId, processId }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/${processId}`
+    );
 }
 
-function putProcess({softwareProductId, version, componentId, process}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${process.id}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+function putProcess({ softwareProductId, version, componentId, process }) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version, componentId)}/${process.id}`,
+        {
+            name: process.name,
+            description: process.description,
+            type: process.type === '' ? null : process.type
+        }
+    );
 }
 
-function postProcess({softwareProductId, version, componentId, process}) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+function postProcess({ softwareProductId, version, componentId, process }) {
+    return RestAPIUtil.post(
+        `${baseUrl(softwareProductId, version, componentId)}`,
+        {
+            name: process.name,
+            description: process.description,
+            type: process.type === '' ? null : process.type
+        }
+    );
 }
 
-function uploadFileToProcess({softwareProductId, version, processId, componentId, formData}) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/${processId}/upload`, formData);
+function uploadFileToProcess({
+    softwareProductId,
+    version,
+    processId,
+    componentId,
+    formData
+}) {
+    return RestAPIUtil.post(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${processId}/upload`,
+        formData
+    );
 }
 
-
-
 const SoftwareProductComponentProcessesActionHelper = {
-	fetchProcessesList(dispatch, {softwareProductId, version, componentId}) {
-		dispatch({
-			type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
-			processesList: []
-		});
-
-		return fetchProcessesList({softwareProductId, version, componentId}).then(response => {
-			dispatch({
-				type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
-				processesList: response.results
-			});
-		});
-	},
-
-	deleteProcess(dispatch, {process, softwareProductId, version, componentId}) {
-		return deleteProcess({softwareProductId, version, processId:process.id, componentId}).then(() => {
-			dispatch({
-				type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
-				processId: process.id
-			});
-		});
-
-	},
-
-	saveProcess(dispatch, {softwareProductId, version, componentId, previousProcess, process}) {
-		if (previousProcess) {
-			return putProcess({softwareProductId, version, componentId,  process}).then(() => {
-				if (process.formData && process.formData.name !== previousProcess.artifactName){
-					uploadFileToProcess({softwareProductId, version, processId: process.id, formData: process.formData, componentId});
-				}
-				dispatch({
-					type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
-					process
-				});
-			});
-		}
-		else {
-			return postProcess({softwareProductId, version, componentId, process}).then(response => {
-				if (process.formData) {
-					uploadFileToProcess({softwareProductId, version, processId: response.value, formData: process.formData, componentId});
-				}
-				dispatch({
-					type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
-					process: {
-						...process,
-						id: response.value
-					}
-				});
-			});
-		}
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
-			processToDelete: false
-		});
-	},
-
-	openDeleteProcessesConfirm(dispatch, {process} ) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
-			processToDelete: process
-		});
-	},
-
-	openEditor(dispatch, process = {}) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
-			process
-		});
-	},
-	closeEditor(dispatch) {
-		dispatch({
-			type:actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
-		});
-	}
+    fetchProcessesList(dispatch, { softwareProductId, version, componentId }) {
+        dispatch({
+            type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+            processesList: []
+        });
+
+        return fetchProcessesList({
+            softwareProductId,
+            version,
+            componentId
+        }).then(response => {
+            dispatch({
+                type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+                processesList: response.results
+            });
+        });
+    },
+
+    deleteProcess(
+        dispatch,
+        { process, softwareProductId, version, componentId }
+    ) {
+        return deleteProcess({
+            softwareProductId,
+            version,
+            processId: process.id,
+            componentId
+        }).then(() => {
+            dispatch({
+                type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+                processId: process.id
+            });
+        });
+    },
+
+    saveProcess(
+        dispatch,
+        { softwareProductId, version, componentId, previousProcess, process }
+    ) {
+        if (previousProcess) {
+            return putProcess({
+                softwareProductId,
+                version,
+                componentId,
+                process
+            }).then(() => {
+                if (
+                    process.formData &&
+                    process.formData.name !== previousProcess.artifactName
+                ) {
+                    uploadFileToProcess({
+                        softwareProductId,
+                        version,
+                        processId: process.id,
+                        formData: process.formData,
+                        componentId
+                    });
+                }
+                dispatch({
+                    type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+                    process
+                });
+            });
+        } else {
+            return postProcess({
+                softwareProductId,
+                version,
+                componentId,
+                process
+            }).then(response => {
+                if (process.formData) {
+                    uploadFileToProcess({
+                        softwareProductId,
+                        version,
+                        processId: response.value,
+                        formData: process.formData,
+                        componentId
+                    });
+                }
+                dispatch({
+                    type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+                    process: {
+                        ...process,
+                        id: response.value
+                    }
+                });
+            });
+        }
+    },
+
+    hideDeleteConfirm(dispatch) {
+        dispatch({
+            type:
+                actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+            processToDelete: false
+        });
+    },
+
+    openDeleteProcessesConfirm(dispatch, { process }) {
+        dispatch({
+            type:
+                actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+            processToDelete: process
+        });
+    },
+
+    openEditor(dispatch, process = {}) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
+            process
+        });
+    },
+    closeEditor(dispatch) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
+        });
+    }
 };
 
 export default SoftwareProductComponentProcessesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
index d15432b3fb..e3ce4f8007 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
@@ -16,21 +16,22 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
-	EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
-	DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
-	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
-	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
-	FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
-	SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null
+    ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+    EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+    DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+    SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
+    SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
+    FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
+    SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null
 });
 
 export const optionsInputValues = {
-	PROCESS_TYPE: [
-		{title: 'Select...', enum: ''},
-		{title: 'Lifecycle Operations', enum: 'Lifecycle_Operations'},
-		{title: 'Other', enum: 'Other'}
-	]
+    PROCESS_TYPE: [
+        { title: 'Select...', enum: '' },
+        { title: 'Lifecycle Operations', enum: 'Lifecycle_Operations' },
+        { title: 'Other', enum: 'Other' }
+    ]
 };
 
-export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM = 'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM';
+export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM =
+    'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
index 9502e24b1a..9d2bf34b78 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
@@ -13,44 +13,68 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper';
 import SoftwareProductComponentProcessesEditorView from './SoftwareProductComponentProcessesEditorView.jsx';
-import {SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
+import { SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM } from './SoftwareProductComponentProcessesConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
-	let {processesList = [], processesEditor = {}} = componentProcesses;
-	let {data, genericFieldInfo, formReady} = processesEditor;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductComponents: { componentProcesses = {} }
+    } = softwareProduct;
+    let { processesList = [], processesEditor = {} } = componentProcesses;
+    let { data, genericFieldInfo, formReady } = processesEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let previousData;
-	const processId = data ? data.id : null;
-	if(processId) {
-		previousData = processesList.find(process => process.id === processId);
-	}
+    let previousData;
+    const processId = data ? data.id : null;
+    if (processId) {
+        previousData = processesList.find(process => process.id === processId);
+    }
 
-	return {
-		data,
-		genericFieldInfo,
-		previousData,
-		isFormValid,
-		formReady
-	};
+    return {
+        data,
+        genericFieldInfo,
+        previousData,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM}),
-		onCancel: () => SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
-		onSubmit: ({previousProcess, process}) => {
-			SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
-			SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, componentId, process});
-		},
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM)
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+            }),
+        onCancel: () =>
+            SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
+        onSubmit: ({ previousProcess, process }) => {
+            SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
+            SoftwareProductComponentProcessesActionHelper.saveProcess(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    previousProcess,
+                    componentId,
+                    process
+                }
+            );
+        },
+        onValidateForm: () =>
+            ValidationHelper.validateForm(
+                dispatch,
+                SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+            )
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentProcessesEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentProcessesEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
index 9afaa6d5fd..fd211734df 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
@@ -13,42 +13,48 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
+import {
+    actionTypes,
+    SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+} from './SoftwareProductComponentProcessesConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM,
-				genericFieldInfo: {
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'artifactName' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'type' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				},
-				data: action.process
-			};
-		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    artifactName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    type: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                },
+                data: action.process
+            };
+        case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
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 9841ecbae7..132ebe86fb 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,17 +14,18 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import  {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
+import { optionsInputValues as ComponentProcessesOptionsInputValues } from './SoftwareProductComponentProcessesConstants.js';
 import SoftwareProductProcessesEditorForm from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx';
 
-
 class SoftwareProductProcessesEditorView extends React.Component {
-
-	render() {
-		return (
-			<SoftwareProductProcessesEditorForm optionsInputValues={ComponentProcessesOptionsInputValues} {...this.props}/>
-		);
-	}
+    render() {
+        return (
+            <SoftwareProductProcessesEditorForm
+                optionsInputValues={ComponentProcessesOptionsInputValues}
+                {...this.props}
+            />
+        );
+    }
 }
 
 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 2a7152ef8b..cb6d25a6ac 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
@@ -13,45 +13,64 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
 
 import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx';
 
-export const mapStateToProps = ({softwareProduct}) => {
-
-	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
-	let{processesList = [], processesEditor = {}} = componentProcesses;
-	let {data} = processesEditor;
-
-	return {
-		currentSoftwareProduct,
-		isValidityData,
-		processesList,
-		isDisplayModal: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id)
-	};
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents: { componentProcesses = {} }
+    } = softwareProduct;
+    let { processesList = [], processesEditor = {} } = componentProcesses;
+    let { data } = processesEditor;
 
+    return {
+        currentSoftwareProduct,
+        isValidityData,
+        processesList,
+        isDisplayModal: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {componentId, softwareProductId, version}) => {
-
-	return {
-		onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(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 "{name}"?', {name: process.name}),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch,
-					{process, softwareProductId, version, componentId})
-			}
-		})
-	};
+const mapActionsToProps = (
+    dispatch,
+    { componentId, softwareProductId, version }
+) => {
+    return {
+        onAddProcess: () =>
+            SoftwareProductComponentProcessesActionHelper.openEditor(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 "{name}"?', {
+                        name: process.name
+                    }),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        SoftwareProductComponentProcessesActionHelper.deleteProcess(
+                            dispatch,
+                            { process, softwareProductId, version, componentId }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsProcessesListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsProcessesListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
index 98e24a9c21..d406f02c19 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
@@ -13,20 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+import { actionTypes } from './SoftwareProductComponentProcessesConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES:
-			return [...action.processesList];
-		case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
-			const indexForEdit = state.findIndex(process => process.id === action.process.id);
-			return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)];
-		case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
-			return [...state, action.process];
-		case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
-			return state.filter(process => process.id !== action.processId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES:
+            return [...action.processesList];
+        case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+            const indexForEdit = state.findIndex(
+                process => process.id === action.process.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.process,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+            return [...state, action.process];
+        case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+            return state.filter(process => process.id !== action.processId);
+        default:
+            return state;
+    }
 };
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 27c4b9f429..8fa2bffb27 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
@@ -21,55 +21,73 @@ import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesE
 import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx';
 
 class SoftwareProductProcessesView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    static propTypes = {
+        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
+    };
 
-	static propTypes = {
-		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() {
-		return (
-			<div className='vsp-processes-page'>
-				<div className='software-product-view'>
-					<div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'>
-						{this.renderEditor()}
-						<SoftwareProductProcessListView addButtonTitle={i18n('Add Component Process Details')} {...this.props}/>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	renderEditor() {
-		let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
-		return (
-			<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'>
-				<Modal.Header>
-					<Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
-				</Modal.Header>
-				<Modal.Body className='edit-process-modal'>
-					<SoftwareProductProcessesEditor
-						componentId={componentId}
-						softwareProductId={softwareProductId}
-						version={version}
-						isReadOnlyMode={isReadOnlyMode}/>
-				</Modal.Body>
-			</Modal>
-
-		);
-	}
+    render() {
+        return (
+            <div className="vsp-processes-page">
+                <div className="software-product-view">
+                    <div className="software-product-landing-view-right-side vsp-components-processes-page flex-column">
+                        {this.renderEditor()}
+                        <SoftwareProductProcessListView
+                            addButtonTitle={i18n(
+                                'Add Component Process Details'
+                            )}
+                            {...this.props}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
+    renderEditor() {
+        let {
+            softwareProductId,
+            version,
+            componentId,
+            isReadOnlyMode,
+            isDisplayModal,
+            isModalInEditMode
+        } = this.props;
+        return (
+            <Modal
+                show={isDisplayModal}
+                bsSize="large"
+                animation={true}
+                className="onborading-modal">
+                <Modal.Header>
+                    <Modal.Title>
+                        {isModalInEditMode
+                            ? i18n('Edit Process Details')
+                            : i18n('Create New Process Details')}
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body className="edit-process-modal">
+                    <SoftwareProductProcessesEditor
+                        componentId={componentId}
+                        softwareProductId={softwareProductId}
+                        version={version}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                </Modal.Body>
+            </Modal>
+        );
+    }
 }
 
 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 ca27a76a18..8da9b99a33 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
@@ -13,32 +13,57 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import SoftwareProductComponentStorageView from './SoftwareProductComponentStorageView.jsx';
 
-import {COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from '../SoftwareProductComponentsConstants.js';
 
-const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
-	let {componentEditor: {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents;
+const mapStateToProps = ({
+    softwareProduct: { softwareProductComponents }
+}) => {
+    let {
+        componentEditor: {
+            qdata,
+            qgenericFieldInfo: qGenericFieldInfo,
+            dataMap
+        }
+    } = softwareProductComponents;
 
-	return {
-		qdata,
-		qGenericFieldInfo,
-		dataMap
-	};
+    return {
+        qdata,
+        qGenericFieldInfo,
+        dataMap
+    };
 };
 
-const mapActionToProps = (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});
-		}
-	};
+const mapActionToProps = (
+    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, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentStorageView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductComponentStorageView);
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 8538dab6bc..ac7e4a8053 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
@@ -22,171 +22,311 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import classnames from 'classnames';
 
-const BackupSection = ({isReadOnlyMode,dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Backup')}>
-		<GridItem>
-			<div className='vertical-flex'>
-				<label key='label' className={classnames('control-label',{'disabled': isReadOnlyMode})}>{i18n('Backup Type')}</label>
-				<div className='radio-options-content-row'>
-					{qgenericFieldInfo['storage/backup/backupType'].enum.map(onSite => (
-						<Input
-							data-test-id='backupType'
-							type='radio'
-							key={onSite.enum}
-							name={'compute/guestOS/bitSize'}
-							className='radio-field'
-							value={onSite.enum}
-							label={onSite.title}
-							onChange={(site) => onQDataChanged({'storage/backup/backupType' :  site})}
-							isValid={qgenericFieldInfo['storage/backup/backupType'].isValid}
-							errorText={qgenericFieldInfo['storage/backup/backupType'].errorText}
-							checked={dataMap['storage/backup/backupType'] === onSite.enum} /> )) }
-				</div>
-			</div>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='backupSolution'
-				onChange={(backupSolution) => onQDataChanged({'storage/backup/backupSolution' : backupSolution})}
-				label={i18n('Backup Solution')}
-				type='text'
-				isValid={qgenericFieldInfo['storage/backup/backupSolution'].isValid}
-				errorText={qgenericFieldInfo['storage/backup/backupSolution'].errorText}
-				value={dataMap['storage/backup/backupSolution']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='backupStorageSize'
-				onChange={(backupStorageSize) => onQDataChanged({'storage/backup/backupStorageSize' : backupStorageSize})}
-				label={i18n('Backup Storage Size (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['storage/backup/backupStorageSize'].isValid}
-				errorText={qgenericFieldInfo['storage/backup/backupStorageSize'].errorText}
-				value={dataMap['storage/backup/backupStorageSize']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='backupNIC'
-				label={i18n('Backup NIC')}
-				type='select'
-				className='input-options-select section-field'
-				groupClassName='bootstrap-input-options'
-				isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid}
-				errorText={qgenericFieldInfo['storage/backup/backupNIC'].errorText}
-				value={dataMap['storage/backup/backupNIC']}
-				onChange={(e) => {
-					const selectedIndex = e.target.selectedIndex;
-					const val = e.target.options[selectedIndex].value;
-					onQDataChanged({'storage/backup/backupNIC' : val});}
-				}>
-				<option key='placeholder' value=''>{i18n('Select...')}</option>
-				{qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
-			</Input>
-		</GridItem>
-	</GridSection>
+const BackupSection = ({
+    isReadOnlyMode,
+    dataMap,
+    onQDataChanged,
+    qgenericFieldInfo
+}) => (
+    <GridSection title={i18n('Backup')}>
+        <GridItem>
+            <div className="vertical-flex">
+                <label
+                    key="label"
+                    className={classnames('control-label', {
+                        disabled: isReadOnlyMode
+                    })}>
+                    {i18n('Backup Type')}
+                </label>
+                <div className="radio-options-content-row">
+                    {qgenericFieldInfo['storage/backup/backupType'].enum.map(
+                        onSite => (
+                            <Input
+                                data-test-id="backupType"
+                                type="radio"
+                                key={onSite.enum}
+                                name={'compute/guestOS/bitSize'}
+                                className="radio-field"
+                                value={onSite.enum}
+                                label={onSite.title}
+                                onChange={site =>
+                                    onQDataChanged({
+                                        'storage/backup/backupType': site
+                                    })
+                                }
+                                isValid={
+                                    qgenericFieldInfo[
+                                        'storage/backup/backupType'
+                                    ].isValid
+                                }
+                                errorText={
+                                    qgenericFieldInfo[
+                                        'storage/backup/backupType'
+                                    ].errorText
+                                }
+                                checked={
+                                    dataMap['storage/backup/backupType'] ===
+                                    onSite.enum
+                                }
+                            />
+                        )
+                    )}
+                </div>
+            </div>
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="backupSolution"
+                onChange={backupSolution =>
+                    onQDataChanged({
+                        'storage/backup/backupSolution': backupSolution
+                    })
+                }
+                label={i18n('Backup Solution')}
+                type="text"
+                isValid={
+                    qgenericFieldInfo['storage/backup/backupSolution'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/backup/backupSolution'].errorText
+                }
+                value={dataMap['storage/backup/backupSolution']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="backupStorageSize"
+                onChange={backupStorageSize =>
+                    onQDataChanged({
+                        'storage/backup/backupStorageSize': backupStorageSize
+                    })
+                }
+                label={i18n('Backup Storage Size (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/backup/backupStorageSize']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/backup/backupStorageSize']
+                        .errorText
+                }
+                value={dataMap['storage/backup/backupStorageSize']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="backupNIC"
+                label={i18n('Backup NIC')}
+                type="select"
+                className="input-options-select section-field"
+                groupClassName="bootstrap-input-options"
+                isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid}
+                errorText={
+                    qgenericFieldInfo['storage/backup/backupNIC'].errorText
+                }
+                value={dataMap['storage/backup/backupNIC']}
+                onChange={e => {
+                    const selectedIndex = e.target.selectedIndex;
+                    const val = e.target.options[selectedIndex].value;
+                    onQDataChanged({ 'storage/backup/backupNIC': val });
+                }}>
+                <option key="placeholder" value="">
+                    {i18n('Select...')}
+                </option>
+                {qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => (
+                    <option value={hv.enum} key={hv.enum}>
+                        {hv.title}
+                    </option>
+                ))}
+            </Input>
+        </GridItem>
+    </GridSection>
 );
 
-const SnapshotBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Snapshot Backup')}>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='snapshotFrequency'
-				onChange={(snapshotFrequency) => onQDataChanged({'storage/snapshotBackup/snapshotFrequency' : snapshotFrequency})}
-				label={i18n('Backup Storage Size (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].isValid}
-				errorText={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].errorText}
-				value={dataMap['storage/snapshotBackup/snapshotFrequency']}/>
-		</GridItem>
-	</GridSection>
+const SnapshotBackupSection = ({
+    dataMap,
+    onQDataChanged,
+    qgenericFieldInfo
+}) => (
+    <GridSection title={i18n('Snapshot Backup')}>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="snapshotFrequency"
+                onChange={snapshotFrequency =>
+                    onQDataChanged({
+                        'storage/snapshotBackup/snapshotFrequency': snapshotFrequency
+                    })
+                }
+                label={i18n('Backup Storage Size (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo[
+                        'storage/snapshotBackup/snapshotFrequency'
+                    ].isValid
+                }
+                errorText={
+                    qgenericFieldInfo[
+                        'storage/snapshotBackup/snapshotFrequency'
+                    ].errorText
+                }
+                value={dataMap['storage/snapshotBackup/snapshotFrequency']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Log Backup')}>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='sizeOfLogFiles'
-				onChange={(sizeOfLogFiles) => onQDataChanged({'storage/logBackup/sizeOfLogFiles' : sizeOfLogFiles})}
-				label={i18n('Backup Storage Size (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].errorText}
-				value={dataMap['storage/logBackup/sizeOfLogFiles']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				label={i18n('Log Retention Period (days)')}
-				data-test-id='logRetentionPeriod'
-				onChange={(logRetentionPeriod) => onQDataChanged({'storage/logBackup/logRetentionPeriod' : logRetentionPeriod})}
-				type='number'
-				isValid={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].errorText}
-				value={dataMap['storage/logBackup/logRetentionPeriod']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				label={i18n('Log Backup Frequency (days)')}
-				data-test-id='logBackupFrequency'
-				onChange={(logBackupFrequency) => onQDataChanged({'storage/logBackup/logBackupFrequency' : logBackupFrequency})}
-				type='number'
-				isValid={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].errorText}
-				value={dataMap['storage/logBackup/logBackupFrequency']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				label={i18n('Log File Location')}
-				data-test-id='logFileLocation'
-				onChange={(logFileLocation) => onQDataChanged({'storage/logBackup/logFileLocation' : logFileLocation})}
-				type='text'
-				isValid={qgenericFieldInfo['storage/logBackup/logFileLocation'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/logFileLocation'].errorText}
-				value={dataMap['storage/logBackup/logFileLocation']}/>
-		</GridItem>
-	</GridSection>
+const LogBackupSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Log Backup')}>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="sizeOfLogFiles"
+                onChange={sizeOfLogFiles =>
+                    onQDataChanged({
+                        'storage/logBackup/sizeOfLogFiles': sizeOfLogFiles
+                    })
+                }
+                label={i18n('Backup Storage Size (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/sizeOfLogFiles']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/sizeOfLogFiles']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/sizeOfLogFiles']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                label={i18n('Log Retention Period (days)')}
+                data-test-id="logRetentionPeriod"
+                onChange={logRetentionPeriod =>
+                    onQDataChanged({
+                        'storage/logBackup/logRetentionPeriod': logRetentionPeriod
+                    })
+                }
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/logRetentionPeriod']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/logRetentionPeriod']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/logRetentionPeriod']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                label={i18n('Log Backup Frequency (days)')}
+                data-test-id="logBackupFrequency"
+                onChange={logBackupFrequency =>
+                    onQDataChanged({
+                        'storage/logBackup/logBackupFrequency': logBackupFrequency
+                    })
+                }
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/logBackupFrequency']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/logBackupFrequency']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/logBackupFrequency']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                label={i18n('Log File Location')}
+                data-test-id="logFileLocation"
+                onChange={logFileLocation =>
+                    onQDataChanged({
+                        'storage/logBackup/logFileLocation': logFileLocation
+                    })
+                }
+                type="text"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/logFileLocation']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/logFileLocation']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/logFileLocation']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
 class SoftwareProductComponentStorageView extends React.Component {
+    static propTypes = {
+        componentId: PropTypes.string,
+        onQDataChanged: PropTypes.func,
+        onSubmit: PropTypes.func,
+        isReadOnlyMode: PropTypes.bool
+    };
 
-	static propTypes = {
-		componentId: PropTypes.string,
-		onQDataChanged: PropTypes.func,
-		onSubmit: PropTypes.func,
-		isReadOnlyMode: PropTypes.bool
-	};
+    render() {
+        let {
+            onQDataChanged,
+            dataMap,
+            qGenericFieldInfo,
+            isReadOnlyMode,
+            onSubmit,
+            qdata
+        } = this.props;
 
-	render() {
-		let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} =  this.props;
+        return (
+            <div className="vsp-component-questionnaire-view">
+                {qGenericFieldInfo && (
+                    <Form
+                        ref={form => (this.form = form)}
+                        isValid={true}
+                        formReady={null}
+                        onSubmit={() => onSubmit({ qdata })}
+                        className="component-questionnaire-validation-form"
+                        isReadOnlyMode={isReadOnlyMode}
+                        hasButtons={false}>
+                        <BackupSection
+                            isReadOnlyMode={isReadOnlyMode}
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qGenericFieldInfo}
+                        />
+                        <SnapshotBackupSection
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qGenericFieldInfo}
+                        />
+                        <LogBackupSection
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qGenericFieldInfo}
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return(
-			<div className='vsp-component-questionnaire-view'>
-				{qGenericFieldInfo && <Form
-					ref={form => this.form = form }
-					isValid={true}
-					formReady={null}
-					onSubmit={() => onSubmit({qdata})}
-					className='component-questionnaire-validation-form'
-					isReadOnlyMode={isReadOnlyMode}
-					hasButtons={false}>
-					<BackupSection isReadOnlyMode={isReadOnlyMode} onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-					<SnapshotBackupSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-					<LogBackupSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-				</Form> }
-			</div>
-		);
-	}
-
-	save(){		
-		const {qdata, onSubmit} = this.props;
-		return onSubmit({qdata});
-	}
+    save() {
+        const { qdata, onSubmit } = this.props;
+        return onSubmit({ qdata });
+    }
 }
 
 export default SoftwareProductComponentStorageView;