Adding Prettier and fixing up eslint version

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

8 files changed, 649 insertions, 382 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
index a5c70068b0..4e03926ac5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
@@ -13,37 +13,70 @@
  * 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 SoftwareProductDeploymentView from './SoftwareProductDeploymentView.jsx';
 import SoftwareProductDeploymentActionHelper from './SoftwareProductDeploymentActionHelper.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-export function mapStateToProps({softwareProduct}) {
-	let {softwareProductComponents: {componentsList}, softwareProductDeployment: {deploymentFlavors}} = softwareProduct;
-	return {
-		deploymentFlavors,
-		componentsList
-	};
+export function mapStateToProps({ softwareProduct }) {
+    let {
+        softwareProductComponents: { componentsList },
+        softwareProductDeployment: { deploymentFlavors }
+    } = softwareProduct;
+    return {
+        deploymentFlavors,
+        componentsList
+    };
 }
 
-function mapActionToProps(dispatch, {softwareProductId, version}) {
-	let modalClassName = 'deployment-flavor-editor';
-	return {
-		onAddDeployment: componentsList => SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(dispatch, {softwareProductId, modalClassName, componentsList, version}),
-		onDeleteDeployment: ({id, model}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{model}"?', {model: model}),
-				onConfirmed: () => SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: id, version})
-			}
-		}),
-		onEditDeployment: (deploymentFlavor, componentsList) =>
-			SoftwareProductDeploymentActionHelper.fetchDeploymentFlavor({softwareProductId, deploymentFlavorId: deploymentFlavor.id, version}).then(response =>
-				SoftwareProductDeploymentActionHelper
-					.openDeploymentFlavorEditor(dispatch, {softwareProductId, componentsList, modalClassName, deploymentFlavor: {...response.data, id: response.id}, isEdit: true, version}),
-			)
-	};
+function mapActionToProps(dispatch, { softwareProductId, version }) {
+    let modalClassName = 'deployment-flavor-editor';
+    return {
+        onAddDeployment: componentsList =>
+            SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(
+                dispatch,
+                { softwareProductId, modalClassName, componentsList, version }
+            ),
+        onDeleteDeployment: ({ id, model }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{model}"?', {
+                        model: model
+                    }),
+                    onConfirmed: () =>
+                        SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(
+                            dispatch,
+                            {
+                                softwareProductId,
+                                deploymentFlavorId: id,
+                                version
+                            }
+                        )
+                }
+            }),
+        onEditDeployment: (deploymentFlavor, componentsList) =>
+            SoftwareProductDeploymentActionHelper.fetchDeploymentFlavor({
+                softwareProductId,
+                deploymentFlavorId: deploymentFlavor.id,
+                version
+            }).then(response =>
+                SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        componentsList,
+                        modalClassName,
+                        deploymentFlavor: { ...response.data, id: response.id },
+                        isEdit: true,
+                        version
+                    }
+                )
+            )
+    };
 }
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(SoftwareProductDeploymentView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductDeploymentView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
index bd802b38f4..44b25311e0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
@@ -1,101 +1,183 @@
-import {actionTypes} from './SoftwareProductDeploymentConstants.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductDeploymentConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import pickBy from 'lodash/pickBy';
 
 function baseUrl(vspId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/deployment-flavors`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/deployment-flavors`;
 }
 
-function fetchDeploymentFlavorsList({softwareProductId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+function fetchDeploymentFlavorsList({ softwareProductId, version }) {
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-function fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`);
+function fetchDeploymentFlavor({
+    softwareProductId,
+    deploymentFlavorId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`
+    );
 }
 
-function deleteDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`);
+function deleteDeploymentFlavor({
+    softwareProductId,
+    deploymentFlavorId,
+    version
+}) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`
+    );
 }
 
-function createDeploymentFlavor({softwareProductId, data, version}) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, data);
+function createDeploymentFlavor({ softwareProductId, data, version }) {
+    return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, data);
 }
 
-function editDeploymentFlavor({softwareProductId, deploymentFlavorId, data, version}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`, data);
+function editDeploymentFlavor({
+    softwareProductId,
+    deploymentFlavorId,
+    data,
+    version
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`,
+        data
+    );
 }
 
 const SoftwareProductDeploymentActionHelper = {
-	fetchDeploymentFlavorsList(dispatch, {softwareProductId, version}) {
-		return fetchDeploymentFlavorsList({softwareProductId, version}).then(response => {
-			dispatch({
-				type: actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS,
-				deploymentFlavors: response.results
-			});
-		});
-	},
+    fetchDeploymentFlavorsList(dispatch, { softwareProductId, version }) {
+        return fetchDeploymentFlavorsList({ softwareProductId, version }).then(
+            response => {
+                dispatch({
+                    type: actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS,
+                    deploymentFlavors: response.results
+                });
+            }
+        );
+    },
 
-	fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
-		return fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version});
-	},
+    fetchDeploymentFlavor({ softwareProductId, deploymentFlavorId, version }) {
+        return fetchDeploymentFlavor({
+            softwareProductId,
+            deploymentFlavorId,
+            version
+        });
+    },
 
-	deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId, version}) {
-		return deleteDeploymentFlavor({softwareProductId, deploymentFlavorId, version}).then(() => {
-			return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
-		});
-	},
+    deleteDeploymentFlavor(
+        dispatch,
+        { softwareProductId, deploymentFlavorId, version }
+    ) {
+        return deleteDeploymentFlavor({
+            softwareProductId,
+            deploymentFlavorId,
+            version
+        }).then(() => {
+            return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
-	createDeploymentFlavor(dispatch, {softwareProductId, data, version}) {
-		return createDeploymentFlavor({softwareProductId, data, version}).then(() => {
-			return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
-		});
-	},
+    createDeploymentFlavor(dispatch, { softwareProductId, data, version }) {
+        return createDeploymentFlavor({
+            softwareProductId,
+            data,
+            version
+        }).then(() => {
+            return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
-	editDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId, data, version}) {
-		let dataWithoutId = pickBy(data, (val, key) => key !== 'id');
-		return editDeploymentFlavor({softwareProductId, deploymentFlavorId, data: dataWithoutId, version}).then(() => {
-			return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
-		});
-	},
+    editDeploymentFlavor(
+        dispatch,
+        { softwareProductId, deploymentFlavorId, data, version }
+    ) {
+        let dataWithoutId = pickBy(data, (val, key) => key !== 'id');
+        return editDeploymentFlavor({
+            softwareProductId,
+            deploymentFlavorId,
+            data: dataWithoutId,
+            version
+        }).then(() => {
+            return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
-	closeDeploymentFlavorEditor(dispatch) {
-		dispatch({
-			type: actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA
-		});
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_CLOSE
-		});
-	},
+    closeDeploymentFlavorEditor(dispatch) {
+        dispatch({
+            type:
+                actionTypes.deploymentFlavorEditor
+                    .SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA
+        });
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_CLOSE
+        });
+    },
 
-	openDeploymentFlavorEditor(dispatch, {softwareProductId, modalClassName, deploymentFlavor = {}, componentsList, isEdit = false, version}) {
-		let alteredDeploymentFlavor = {...deploymentFlavor};
-		if (componentsList.length) {
-			alteredDeploymentFlavor = {...alteredDeploymentFlavor, componentComputeAssociations: deploymentFlavor.componentComputeAssociations ?
-				[{...deploymentFlavor.componentComputeAssociations[0], componentId: componentsList[0].id}]
-			 	:
-				[{componentId: componentsList[0].id, computeFlavorId: null}]
-			};
-		}
-		dispatch({
-			type: actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA,
-			deploymentFlavor: alteredDeploymentFlavor
-		});
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.DEPLOYMENT_FLAVOR_EDITOR,
-				modalComponentProps: {softwareProductId, version},
-				modalClassName,
-				title: isEdit ? 'Edit Deployment Flavor' : 'Create a New Deployment Flavor'
-			}
-		});
-	},
+    openDeploymentFlavorEditor(
+        dispatch,
+        {
+            softwareProductId,
+            modalClassName,
+            deploymentFlavor = {},
+            componentsList,
+            isEdit = false,
+            version
+        }
+    ) {
+        let alteredDeploymentFlavor = { ...deploymentFlavor };
+        if (componentsList.length) {
+            alteredDeploymentFlavor = {
+                ...alteredDeploymentFlavor,
+                componentComputeAssociations: deploymentFlavor.componentComputeAssociations
+                    ? [
+                          {
+                              ...deploymentFlavor
+                                  .componentComputeAssociations[0],
+                              componentId: componentsList[0].id
+                          }
+                      ]
+                    : [
+                          {
+                              componentId: componentsList[0].id,
+                              computeFlavorId: null
+                          }
+                      ]
+            };
+        }
+        dispatch({
+            type:
+                actionTypes.deploymentFlavorEditor
+                    .SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA,
+            deploymentFlavor: alteredDeploymentFlavor
+        });
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.DEPLOYMENT_FLAVOR_EDITOR,
+                modalComponentProps: { softwareProductId, version },
+                modalClassName,
+                title: isEdit
+                    ? 'Edit Deployment Flavor'
+                    : 'Create a New Deployment Flavor'
+            }
+        });
+    }
 };
 
-export  default SoftwareProductDeploymentActionHelper;
+export default SoftwareProductDeploymentActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
index 51469b461c..6c0d3efe38 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
@@ -16,13 +16,13 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS: null,
+    FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS: null,
 
-	deploymentFlavorEditor: {
-		DATA_CHANGED: null,
-		SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA: null,
-		SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA: null
-	}
+    deploymentFlavorEditor: {
+        DATA_CHANGED: null,
+        SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA: null,
+        SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA: null
+    }
 });
 
 export const DEPLOYMENT_FLAVORS_FORM_NAME = 'DEPLOYMENT_FLAVORS_FORM_NAME';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
index 8eb91e8fcb..31bf09e945 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductDeploymentConstants.js';
+import { actionTypes } from './SoftwareProductDeploymentConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS:
-			return [...action.deploymentFlavors];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS:
+            return [...action.deploymentFlavors];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
index 860d02c343..e1bdd553a6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
@@ -22,74 +22,82 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
 export default class SoftwareProductDeployment extends React.Component {
-	state = {
-		localFilter: ''
-	};
+    state = {
+        localFilter: ''
+    };
 
-	static propTypes = {
-		onAddDeployment: PropTypes.func.isRequired,
-		onDeleteDeployment: PropTypes.func.isRequired,
-		onEditDeployment: PropTypes.func.isRequired,
-		isReadOnlyMode: PropTypes.bool.isRequired
-	};
+    static propTypes = {
+        onAddDeployment: PropTypes.func.isRequired,
+        onDeleteDeployment: PropTypes.func.isRequired,
+        onEditDeployment: PropTypes.func.isRequired,
+        isReadOnlyMode: PropTypes.bool.isRequired
+    };
 
-	render() {
-		return (
-			<div>
-				{this.renderList()}
-			</div>
-		);
-	}
+    render() {
+        return <div>{this.renderList()}</div>;
+    }
 
-	renderList() {
-		let {onAddDeployment, isReadOnlyMode, componentsList} = this.props;
-		return (
-			<ListEditorView
-				plusButtonTitle={i18n('Add Deployment Flavor')}
-				filterValue={this.state.localFilter}
-				placeholder={i18n('Filter Deployment')}
-				onAdd={() => onAddDeployment(componentsList)}
-				isReadOnlyMode={isReadOnlyMode}
-				title={i18n('Deployment Flavors')}
-				onFilter={value => this.setState({localFilter: value})}
-				twoColumns>
-				{this.filterList().map(deploymentFlavor => this.renderListItem(deploymentFlavor, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	}
+    renderList() {
+        let { onAddDeployment, isReadOnlyMode, componentsList } = this.props;
+        return (
+            <ListEditorView
+                plusButtonTitle={i18n('Add Deployment Flavor')}
+                filterValue={this.state.localFilter}
+                placeholder={i18n('Filter Deployment')}
+                onAdd={() => onAddDeployment(componentsList)}
+                isReadOnlyMode={isReadOnlyMode}
+                title={i18n('Deployment Flavors')}
+                onFilter={value => this.setState({ localFilter: value })}
+                twoColumns>
+                {this.filterList().map(deploymentFlavor =>
+                    this.renderListItem(deploymentFlavor, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-	renderListItem(deploymentFlavor, isReadOnlyMode) {
-		let {id, model, description} = deploymentFlavor;
-		let {onEditDeployment, onDeleteDeployment, componentsList} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditDeployment(deploymentFlavor, componentsList)}
-				onDelete={() => onDeleteDeployment(deploymentFlavor)}>
-				<ListEditorItemViewField>
-					<div className='model'>{model}</div>
-				</ListEditorItemViewField>
-				<ListEditorItemViewField>
-					<div className='description'>{description}</div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
+    renderListItem(deploymentFlavor, isReadOnlyMode) {
+        let { id, model, description } = deploymentFlavor;
+        let {
+            onEditDeployment,
+            onDeleteDeployment,
+            componentsList
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() =>
+                    onEditDeployment(deploymentFlavor, componentsList)
+                }
+                onDelete={() => onDeleteDeployment(deploymentFlavor)}>
+                <ListEditorItemViewField>
+                    <div className="model">{model}</div>
+                </ListEditorItemViewField>
+                <ListEditorItemViewField>
+                    <div className="description">{description}</div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {deploymentFlavors} = this.props;
-		let {localFilter} = this.state;
+    filterList() {
+        let { deploymentFlavors } = this.props;
+        let { localFilter } = this.state;
 
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return deploymentFlavors.filter(({model = '', description = ''}) => {
-				return escape(model).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return deploymentFlavors;
-		}
-	}
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return deploymentFlavors.filter(
+                ({ model = '', description = '' }) => {
+                    return (
+                        escape(model).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return deploymentFlavors;
+        }
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
index c24548b7b9..9392317692 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
@@ -13,77 +13,103 @@
  * 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 SoftwareProductDeploymentEditorView from './SoftwareProductDeploymentEditorView.jsx';
 import SoftwareProdcutDeploymentActionHelper from '../SoftwareProductDeploymentActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js';
+import { DEPLOYMENT_FLAVORS_FORM_NAME } from '../SoftwareProductDeploymentConstants.js';
 
 export function mapStateToProps({
-	licenseModel,
-	softwareProduct,
-	currentScreen: {props: {isReadOnlyMode}}
+    licenseModel,
+    softwareProduct,
+    currentScreen: { props: { isReadOnlyMode } }
 }) {
-	let {
-		softwareProductEditor: {
-			data: currentSoftwareProduct = {}
-		},
-		softwareProductComponents: {
-			componentsList,
-			computeFlavor: {
-				computesList
-			}
-		},
-		softwareProductDeployment: {
-			deploymentFlavors,
-			deploymentFlavorEditor: {
-				data = {},
-				genericFieldInfo,
-				formReady
-			}
-		}
-	} = softwareProduct;
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents: {
+            componentsList,
+            computeFlavor: { computesList }
+        },
+        softwareProductDeployment: {
+            deploymentFlavors,
+            deploymentFlavorEditor: { data = {}, genericFieldInfo, formReady }
+        }
+    } = softwareProduct;
 
-	let {
-			featureGroup: {
-				featureGroupsList
-			}
-	} = licenseModel;
+    let { featureGroup: { featureGroupsList } } = licenseModel;
 
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-	let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData ? currentSoftwareProduct.licensingData.featureGroups || [] : [];
-	let selectedFeatureGroupsList = featureGroupsList
-		.filter(featureGroup => selectedFeatureGroupsIds.includes(featureGroup.id))
-		.map(featureGroup => ({value: featureGroup.id, label: featureGroup.name}));
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData
+        ? currentSoftwareProduct.licensingData.featureGroups || []
+        : [];
+    let selectedFeatureGroupsList = featureGroupsList
+        .filter(featureGroup =>
+            selectedFeatureGroupsIds.includes(featureGroup.id)
+        )
+        .map(featureGroup => ({
+            value: featureGroup.id,
+            label: featureGroup.name
+        }));
 
-	let DFNames = {};
+    let DFNames = {};
 
-	deploymentFlavors.map(deployment => {
-		DFNames[deployment.model.toLowerCase()] = deployment.id;
-	});
+    deploymentFlavors.map(deployment => {
+        DFNames[deployment.model.toLowerCase()] = deployment.id;
+    });
 
-	return {
-		data,
-		selectedFeatureGroupsList,
-		genericFieldInfo,
-		DFNames,
-		isFormValid,
-		formReady,
-		isReadOnlyMode,
-		componentsList,
-		computesList,
-		isEdit: Boolean(data.id)
-	};
+    return {
+        data,
+        selectedFeatureGroupsList,
+        genericFieldInfo,
+        DFNames,
+        isFormValid,
+        formReady,
+        isReadOnlyMode,
+        componentsList,
+        computesList,
+        isEdit: Boolean(data.id)
+    };
 }
 
-function mapActionsToProps(dispatch, {softwareProductId, version}) {
-	return {
-		onDataChanged: (deltaData, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: DEPLOYMENT_FLAVORS_FORM_NAME, customValidations}),
-		onClose: () => SoftwareProdcutDeploymentActionHelper.closeDeploymentFlavorEditor(dispatch),
-		onCreate: data =>  SoftwareProdcutDeploymentActionHelper.createDeploymentFlavor(dispatch, {softwareProductId, data, version}),
-		onEdit: data =>  SoftwareProdcutDeploymentActionHelper.editDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: data.id, data, version}),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, DEPLOYMENT_FLAVORS_FORM_NAME)
-	};
+function mapActionsToProps(dispatch, { softwareProductId, version }) {
+    return {
+        onDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: DEPLOYMENT_FLAVORS_FORM_NAME,
+                customValidations
+            }),
+        onClose: () =>
+            SoftwareProdcutDeploymentActionHelper.closeDeploymentFlavorEditor(
+                dispatch
+            ),
+        onCreate: data =>
+            SoftwareProdcutDeploymentActionHelper.createDeploymentFlavor(
+                dispatch,
+                {
+                    softwareProductId,
+                    data,
+                    version
+                }
+            ),
+        onEdit: data =>
+            SoftwareProdcutDeploymentActionHelper.editDeploymentFlavor(
+                dispatch,
+                {
+                    softwareProductId,
+                    deploymentFlavorId: data.id,
+                    data,
+                    version
+                }
+            ),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(
+                dispatch,
+                DEPLOYMENT_FLAVORS_FORM_NAME
+            )
+    };
 }
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductDeploymentEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductDeploymentEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
index 70836e8ff9..16e73d2162 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
@@ -13,32 +13,37 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js';;
+import {
+    actionTypes,
+    DEPLOYMENT_FLAVORS_FORM_NAME
+} from '../SoftwareProductDeploymentConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA:
-			return {
-				...state,
-				data: action.deploymentFlavor,
-				formReady: null,
-				formName: DEPLOYMENT_FLAVORS_FORM_NAME,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 500}]
-					},
-					'model' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				}
-			};
-		case actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.deploymentFlavorEditor
+            .SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA:
+            return {
+                ...state,
+                data: action.deploymentFlavor,
+                formReady: null,
+                formName: DEPLOYMENT_FLAVORS_FORM_NAME,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 500 }]
+                    },
+                    model: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                }
+            };
+        case actionTypes.deploymentFlavorEditor
+            .SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
index 7c9ae438d9..e44d2bd966 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
@@ -11,127 +11,240 @@ import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.j
 import Validator from 'nfvo-utils/Validator.js';
 
 export default class SoftwareProductDeploymentEditorView extends React.Component {
-	render() {
-		let {data, isEdit, onClose, onDataChanged, isReadOnlyMode, selectedFeatureGroupsList, componentsList, computesList, genericFieldInfo} = this.props;
-		let {model, description, featureGroupId, componentComputeAssociations = []} = data;
-		let featureGroupsExist = selectedFeatureGroupsList.length > 0;
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref='validationForm'
-					hasButtons={true}
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					onSubmit={ () => this.submit() }
-					submitButtonText={isEdit ? i18n('Save') : i18n('Create')}
-					onReset={ () => onClose() }
-					onValidateForm={() => this.validate() }
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					className='vsp-deployment-editor'>
-					<GridSection hasLastColSet>
-						<GridItem colSpan={1}>
-							<Input
-								onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})}
-								label={i18n('Model')}
-								value={model}
-								data-test-id='deployment-model'
-								isValid={genericFieldInfo.model.isValid}
-								errorText={genericFieldInfo.model.errorText}
-								isRequired={true}
-								type='text'/>
-						</GridItem>
-						<GridItem colSpan={3} lastColInRow>
-							<Input
-								onChange={description => onDataChanged({description})}
-								label={i18n('Description')}
-								value={description}
-								data-test-id='deployment-description'
-								isValid={genericFieldInfo.description.isValid}
-								errorText={genericFieldInfo.description.errorText}
-								type='text'/>
-						</GridItem>
-					</GridSection>
-					<GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')} hasLastColSet>
-						<GridItem colSpan={1}>
-							<SelectInput
-								data-test-id='deployment-feature-groups'
-								label={i18n('Feature Group')}
-								value={featureGroupId}
-								onChange={featureGroup => onDataChanged({featureGroupId: featureGroup ? featureGroup.value : null})}
-								type='select'
-								clearable={true}
-								disabled={isReadOnlyMode || !featureGroupsExist}
-								className='field-section'
-								options={selectedFeatureGroupsList}/>
-						</GridItem>
-					</GridSection>
-					{!featureGroupsExist && <GridSection className='deployment-feature-group-warning-section'>
-						<GridItem colSpan={3}>
-							<span>{i18n('Please assign Feature Groups in VSP General')}</span>
-						</GridItem>
-					</GridSection>}
-					<GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table' hasLastColSet>
-						<GridItem colSpan={4} lastColInRow>
-							<SelectActionTable
-								columns={['Virtual Function Components', 'Compute Flavors']}
-								numOfIcons={0}>
-								{componentComputeAssociations.map( (association, index) =>
-									<SelectActionTableRow key={association.componentId}>
-										<SelectActionTableCell
-											options={
-												componentsList
-												.map(component => ({value: component.id, label: component.displayName}) )
-											}
-											selected={association.componentId}
-											onChange={componentId => {
-												let newAssociations = [...componentComputeAssociations];
-												newAssociations[index] = {...newAssociations[index], componentId};
-												onDataChanged({componentComputeAssociations: newAssociations});
-											}}
-											disabled={true}/>
-										<SelectActionTableCell
-											options={
-												computesList
-												.filter(compute => compute.componentId === association.componentId)
-												.map(compute => ({value: compute.computeFlavorId, label: compute.name}) )
-											}
-											selected={association.computeFlavorId}
-											onChange={computeFlavorId => {
-												let newAssociations = [...componentComputeAssociations];
-												newAssociations[index] = {...newAssociations[index], computeFlavorId};
-												onDataChanged({componentComputeAssociations: newAssociations});
-											}}
-											disabled={isReadOnlyMode}/>
-									</SelectActionTableRow>
-								)}
-							</SelectActionTable>
-						</GridItem>
-					</GridSection>
-				</Form>}
-			</div>
-		);
-	}
+    render() {
+        let {
+            data,
+            isEdit,
+            onClose,
+            onDataChanged,
+            isReadOnlyMode,
+            selectedFeatureGroupsList,
+            componentsList,
+            computesList,
+            genericFieldInfo
+        } = this.props;
+        let {
+            model,
+            description,
+            featureGroupId,
+            componentComputeAssociations = []
+        } = data;
+        let featureGroupsExist = selectedFeatureGroupsList.length > 0;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        onSubmit={() => this.submit()}
+                        submitButtonText={
+                            isEdit ? i18n('Save') : i18n('Create')
+                        }
+                        onReset={() => onClose()}
+                        onValidateForm={() => this.validate()}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        className="vsp-deployment-editor">
+                        <GridSection hasLastColSet>
+                            <GridItem colSpan={1}>
+                                <Input
+                                    onChange={model =>
+                                        onDataChanged(
+                                            { model },
+                                            {
+                                                model: model =>
+                                                    this.validateName(model)
+                                            }
+                                        )
+                                    }
+                                    label={i18n('Model')}
+                                    value={model}
+                                    data-test-id="deployment-model"
+                                    isValid={genericFieldInfo.model.isValid}
+                                    errorText={genericFieldInfo.model.errorText}
+                                    isRequired={true}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={3} lastColInRow>
+                                <Input
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    label={i18n('Description')}
+                                    value={description}
+                                    data-test-id="deployment-description"
+                                    isValid={
+                                        genericFieldInfo.description.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.description.errorText
+                                    }
+                                    type="text"
+                                />
+                            </GridItem>
+                        </GridSection>
+                        <GridSection
+                            className={`deployment-feature-groups-section${
+                                !featureGroupsExist ? ' no-feature-groups' : ''
+                            }`}
+                            title={i18n('License Details')}
+                            hasLastColSet>
+                            <GridItem colSpan={1}>
+                                <SelectInput
+                                    data-test-id="deployment-feature-groups"
+                                    label={i18n('Feature Group')}
+                                    value={featureGroupId}
+                                    onChange={featureGroup =>
+                                        onDataChanged({
+                                            featureGroupId: featureGroup
+                                                ? featureGroup.value
+                                                : null
+                                        })
+                                    }
+                                    type="select"
+                                    clearable={true}
+                                    disabled={
+                                        isReadOnlyMode || !featureGroupsExist
+                                    }
+                                    className="field-section"
+                                    options={selectedFeatureGroupsList}
+                                />
+                            </GridItem>
+                        </GridSection>
+                        {!featureGroupsExist && (
+                            <GridSection className="deployment-feature-group-warning-section">
+                                <GridItem colSpan={3}>
+                                    <span>
+                                        {i18n(
+                                            'Please assign Feature Groups in VSP General'
+                                        )}
+                                    </span>
+                                </GridItem>
+                            </GridSection>
+                        )}
+                        <GridSection
+                            title={i18n('Assign VFCs and Compute Flavors')}
+                            className="vfc-table"
+                            hasLastColSet>
+                            <GridItem colSpan={4} lastColInRow>
+                                <SelectActionTable
+                                    columns={[
+                                        'Virtual Function Components',
+                                        'Compute Flavors'
+                                    ]}
+                                    numOfIcons={0}>
+                                    {componentComputeAssociations.map(
+                                        (association, index) => (
+                                            <SelectActionTableRow
+                                                key={association.componentId}>
+                                                <SelectActionTableCell
+                                                    options={componentsList.map(
+                                                        component => ({
+                                                            value: component.id,
+                                                            label:
+                                                                component.displayName
+                                                        })
+                                                    )}
+                                                    selected={
+                                                        association.componentId
+                                                    }
+                                                    onChange={componentId => {
+                                                        let newAssociations = [
+                                                            ...componentComputeAssociations
+                                                        ];
+                                                        newAssociations[
+                                                            index
+                                                        ] = {
+                                                            ...newAssociations[
+                                                                index
+                                                            ],
+                                                            componentId
+                                                        };
+                                                        onDataChanged({
+                                                            componentComputeAssociations: newAssociations
+                                                        });
+                                                    }}
+                                                    disabled={true}
+                                                />
+                                                <SelectActionTableCell
+                                                    options={computesList
+                                                        .filter(
+                                                            compute =>
+                                                                compute.componentId ===
+                                                                association.componentId
+                                                        )
+                                                        .map(compute => ({
+                                                            value:
+                                                                compute.computeFlavorId,
+                                                            label: compute.name
+                                                        }))}
+                                                    selected={
+                                                        association.computeFlavorId
+                                                    }
+                                                    onChange={computeFlavorId => {
+                                                        let newAssociations = [
+                                                            ...componentComputeAssociations
+                                                        ];
+                                                        newAssociations[
+                                                            index
+                                                        ] = {
+                                                            ...newAssociations[
+                                                                index
+                                                            ],
+                                                            computeFlavorId
+                                                        };
+                                                        onDataChanged({
+                                                            componentComputeAssociations: newAssociations
+                                                        });
+                                                    }}
+                                                    disabled={isReadOnlyMode}
+                                                />
+                                            </SelectActionTableRow>
+                                        )
+                                    )}
+                                </SelectActionTable>
+                            </GridItem>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	validateName(value) {
-		const {data: {id = ''}, DFNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: DFNames});
+    validateName(value) {
+        const { data: { id = '' }, DFNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: DFNames
+        });
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('Deployment flavor by the name \'' + value + '\' already exists. Deployment flavor name must be unique')};
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Deployment flavor by the name '" +
+                          value +
+                          "' already exists. Deployment flavor name must be unique"
+                  )
+              };
+    }
 
-	submit(){
-		let {isEdit, onCreate, onEdit, onClose, data} = this.props;
-		if (isEdit) {
-			onEdit(data);
-		} else {
-			onCreate(data);
-		}
-		onClose();
-	}
+    submit() {
+        let { isEdit, onCreate, onEdit, onClose, data } = this.props;
+        if (isEdit) {
+            onEdit(data);
+        } else {
+            onCreate(data);
+        }
+        onClose();
+    }
 
-	validate() {
-		this.props.onValidateForm();
-	}
+    validate() {
+        this.props.onValidateForm();
+    }
 }