Adding Prettier and fixing up eslint version

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

10 files changed, 612 insertions, 469 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
index aa39c87dd0..cee46abc69 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
@@ -20,80 +20,86 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
-
 class SoftwareProductProcessesListView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
-
-	static propTypes = {
-		onAddProcess: PropTypes.func.isRequired,
-		onEditProcess: PropTypes.func.isRequired,
-		onDeleteProcess: PropTypes.func.isRequired,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		currentSoftwareProduct:PropTypes.object,
-		addButtonTitle: PropTypes.string
-	};
-
-	render() {
-		const {localFilter} = this.state;
-		let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props;
+    static propTypes = {
+        onAddProcess: PropTypes.func.isRequired,
+        onEditProcess: PropTypes.func.isRequired,
+        onDeleteProcess: PropTypes.func.isRequired,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        currentSoftwareProduct: PropTypes.object,
+        addButtonTitle: PropTypes.string
+    };
 
-		return (
-			<ListEditorView
-				plusButtonTitle={addButtonTitle}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Process')}
-				onAdd={onAddProcess}
-				isReadOnlyMode={isReadOnlyMode}
-				title={i18n('Process Details')}
-				onFilter={value => this.setState({localFilter: value})}>
-				{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
-			</ListEditorView>);
-	}
+    render() {
+        const { localFilter } = this.state;
+        let { onAddProcess, isReadOnlyMode, addButtonTitle } = this.props;
 
-	renderProcessListItem(process, isReadOnlyMode) {
-		let {id, name, description, artifactName = ''} = process;
-		let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditProcess(process)}
-				onDelete={() => onDeleteProcess(process, version)}>
+        return (
+            <ListEditorView
+                plusButtonTitle={addButtonTitle}
+                filterValue={localFilter}
+                placeholder={i18n('Filter Process')}
+                onAdd={onAddProcess}
+                isReadOnlyMode={isReadOnlyMode}
+                title={i18n('Process Details')}
+                onFilter={value => this.setState({ localFilter: value })}>
+                {this.filterList().map(processes =>
+                    this.renderProcessListItem(processes, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='name'>{name}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Artifact name')}</div>
-					<div className='artifact-name'>{artifactName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Notes')}</div>
-					<div className='description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
+    renderProcessListItem(process, isReadOnlyMode) {
+        let { id, name, description, artifactName = '' } = process;
+        let {
+            currentSoftwareProduct: { version },
+            onEditProcess,
+            onDeleteProcess
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() => onEditProcess(process)}
+                onDelete={() => onDeleteProcess(process, version)}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="name">{name}</div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Artifact name')}</div>
+                    <div className="artifact-name">{artifactName}</div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Notes')}</div>
+                    <div className="description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {processesList} = this.props;
-		let {localFilter} = this.state;
+    filterList() {
+        let { processesList } = this.props;
+        let { localFilter } = this.state;
 
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return processesList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return processesList;
-		}
-	}
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return processesList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return processesList;
+        }
+    }
 }
 
 export default SoftwareProductProcessesListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
index b0403abde5..fb44530dae 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
@@ -13,40 +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 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 SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
 import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
-	let {data} = processesEditor;
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductProcesses: { processesList, processesEditor }
+    } = softwareProduct;
+    let { data } = processesEditor;
 
-	return {
-		currentSoftwareProduct,
-		processesList,
-		isDisplayEditor: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id)
-	};
+    return {
+        currentSoftwareProduct,
+        processesList,
+        isDisplayEditor: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch),
-		onEditProcess: (process) => SoftwareProductProcessesActionHelper.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: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch,
-					{process, softwareProductId, version})
-			}
-		})
-	};
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onAddProcess: () =>
+            SoftwareProductProcessesActionHelper.openEditor(dispatch),
+        onEditProcess: process =>
+            SoftwareProductProcessesActionHelper.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: () =>
+                        SoftwareProductProcessesActionHelper.deleteProcess(
+                            dispatch,
+                            {
+                                process,
+                                softwareProductId,
+                                version
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductProcessesView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductProcessesView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
index 8fd370b6cc..7c72c5b892 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
@@ -13,127 +13,145 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
 function baseUrl(vspId, version) {
-	let {id: versionId} = version;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
+    let { id: versionId } = version;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
 }
 
 function putProcess(softwareProductId, version, process) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${process.id}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version)}/${process.id}`,
+        {
+            name: process.name,
+            description: process.description,
+            type: process.type === '' ? null : process.type
+        }
+    );
 }
 
 function postProcess(softwareProductId, version, process) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+    return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+        name: process.name,
+        description: process.description,
+        type: process.type === '' ? null : process.type
+    });
 }
 
 function deleteProcess(softwareProductId, version, processId) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${processId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version)}/${processId}`
+    );
 }
 
-function uploadFileToProcess(softwareProductId, version, processId, formData)
-{
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}/${processId}/upload`, formData);
+function uploadFileToProcess(softwareProductId, version, processId, formData) {
+    return RestAPIUtil.post(
+        `${baseUrl(softwareProductId, version)}/${processId}/upload`,
+        formData
+    );
 }
 
 function fetchProcesses(softwareProductId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
 const SoftwareProductActionHelper = {
-
-	fetchProcessesList(dispatch, {softwareProductId, version}) {
-
-		dispatch({
-			type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
-			processesList: []
-		});
-
-		return fetchProcesses(softwareProductId, version).then(response => {
-			dispatch({
-				type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
-				processesList: response.results
-			});
-		});
-	},
-	openEditor(dispatch, process = {}) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
-			process
-		});
-	},
-
-	deleteProcess(dispatch, {process, softwareProductId, version}) {
-		return deleteProcess(softwareProductId, version, process.id).then(() => {
-			dispatch({
-				type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
-				processId: process.id
-			});
-		});
-
-	},
-
-	closeEditor(dispatch) {
-		dispatch({
-			type:actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
-		});
-	},
-
-	saveProcess(dispatch, {softwareProductId, version, previousProcess, process}) {
-		if (previousProcess) {
-			return putProcess(softwareProductId, version, process).then(() => {
-				if (process.formData){
-					uploadFileToProcess(softwareProductId, version, process.id, process.formData);
-				}
-				dispatch({
-					type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
-					process
-				});
-			});
-		}
-		else {
-			return postProcess(softwareProductId, version, process).then(response => {
-				if (process.formData) {
-					uploadFileToProcess(softwareProductId, version, response.value, process.formData);
-				}
-				dispatch({
-					type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
-					process: {
-						...process,
-						id: response.value
-					}
-				});
-			});
-		}
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
-			processToDelete: false
-		});
-	},
-
-	openDeleteProcessesConfirm(dispatch, {process} ) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
-			processToDelete: process
-		});
-	}
-
+    fetchProcessesList(dispatch, { softwareProductId, version }) {
+        dispatch({
+            type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+            processesList: []
+        });
+
+        return fetchProcesses(softwareProductId, version).then(response => {
+            dispatch({
+                type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+                processesList: response.results
+            });
+        });
+    },
+    openEditor(dispatch, process = {}) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
+            process
+        });
+    },
+
+    deleteProcess(dispatch, { process, softwareProductId, version }) {
+        return deleteProcess(softwareProductId, version, process.id).then(
+            () => {
+                dispatch({
+                    type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
+                    processId: process.id
+                });
+            }
+        );
+    },
+
+    closeEditor(dispatch) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
+        });
+    },
+
+    saveProcess(
+        dispatch,
+        { softwareProductId, version, previousProcess, process }
+    ) {
+        if (previousProcess) {
+            return putProcess(softwareProductId, version, process).then(() => {
+                if (process.formData) {
+                    uploadFileToProcess(
+                        softwareProductId,
+                        version,
+                        process.id,
+                        process.formData
+                    );
+                }
+                dispatch({
+                    type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
+                    process
+                });
+            });
+        } else {
+            return postProcess(softwareProductId, version, process).then(
+                response => {
+                    if (process.formData) {
+                        uploadFileToProcess(
+                            softwareProductId,
+                            version,
+                            response.value,
+                            process.formData
+                        );
+                    }
+                    dispatch({
+                        type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
+                        process: {
+                            ...process,
+                            id: response.value
+                        }
+                    });
+                }
+            );
+        }
+    },
+
+    hideDeleteConfirm(dispatch) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+            processToDelete: false
+        });
+    },
+
+    openDeleteProcessesConfirm(dispatch, { process }) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+            processToDelete: process
+        });
+    }
 };
 
 export default SoftwareProductActionHelper;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
index 6eee24cdde..7f09ea8e73 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
@@ -16,20 +16,20 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	ADD_SOFTWARE_PRODUCT_PROCESS: null,
-	EDIT_SOFTWARE_PRODUCT_PROCESS: null,
-	DELETE_SOFTWARE_PRODUCT_PROCESS: null,
-	SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
-	SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
-	FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
-	SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
+    ADD_SOFTWARE_PRODUCT_PROCESS: null,
+    EDIT_SOFTWARE_PRODUCT_PROCESS: null,
+    DELETE_SOFTWARE_PRODUCT_PROCESS: null,
+    SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
+    SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
+    FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
+    SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
 });
 
 export const optionsInputValues = {
-	PROCESS_TYPE: [
-		{title: 'Select...', enum: ''},
-		{title: 'Other', enum: 'Other'}
-	]
+    PROCESS_TYPE: [
+        { title: 'Select...', enum: '' },
+        { title: 'Other', enum: 'Other' }
+    ]
 };
 
 export const VSP_PROCESS_FORM = 'VSPPROCESSFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
index fc194fac13..58cc894a21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
@@ -13,41 +13,56 @@
  * 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 SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper';
 import SoftwareProductProcessesEditorView from './SoftwareProductProcessesEditorView.jsx';
-import {VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import { VSP_PROCESS_FORM } from './SoftwareProductProcessesConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
-	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);
-	}
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductProcesses: { processesList, processesEditor }
+    } = softwareProduct;
+    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);
+    }
 
-	return {
-		data,
-		genericFieldInfo,
-		previousData,
-		isFormValid,
-		formReady
-	};
+    return {
+        data,
+        genericFieldInfo,
+        previousData,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VSP_PROCESS_FORM}),
-		onSubmit: ({previousProcess, process}) => {
-			SoftwareProductProcessesActionHelper.closeEditor(dispatch);
-			SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process});
-		},
-		onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
-	};
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: VSP_PROCESS_FORM
+            }),
+        onSubmit: ({ previousProcess, process }) => {
+            SoftwareProductProcessesActionHelper.closeEditor(dispatch);
+            SoftwareProductProcessesActionHelper.saveProcess(dispatch, {
+                softwareProductId,
+                version,
+                previousProcess,
+                process
+            });
+        },
+        onCancel: () =>
+            SoftwareProductProcessesActionHelper.closeEditor(dispatch),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductProcessesEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductProcessesEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
index d1bd602683..6e8254f65b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -25,157 +25,212 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const SoftwareProductProcessEditorPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	artifactName: PropTypes.string,
-	type: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    artifactName: PropTypes.string,
+    type: PropTypes.string
 });
 
-
-
 class SoftwareProductProcessesEditorForm extends React.Component {
+    static propTypes = {
+        data: SoftwareProductProcessEditorPropType,
+        previousData: SoftwareProductProcessEditorPropType,
+        isReadOnlyMode: PropTypes.bool,
+        onDataChanged: PropTypes.func,
+        onSubmit: PropTypes.func,
+        onCancel: PropTypes.func
+    };
+    state = {
+        dragging: false,
+        files: []
+    };
 
+    render() {
+        let {
+            data = {},
+            isReadOnlyMode,
+            onDataChanged,
+            onCancel,
+            genericFieldInfo,
+            optionsInputValues
+        } = this.props;
+        let { name, description, artifactName, type } = data;
 
-	static propTypes = {
-		data: SoftwareProductProcessEditorPropType,
-		previousData: SoftwareProductProcessEditorPropType,
-		isReadOnlyMode: PropTypes.bool,
-		onDataChanged: PropTypes.func,
-		onSubmit: PropTypes.func,
-		onCancel: PropTypes.func
-	};
-	state = {
-		dragging: false,
-		files: []
-	};
-
-	render() {
-		let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props;
-		let {name, description, artifactName, type} = data;
-
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref='validationForm'
-					hasButtons={true}
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					onSubmit={ () => this.submit() }
-					onReset={ () => onCancel() }
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.props.onValidateForm() }
-					className='vsp-processes-editor'>
-					<div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
-						<Dropzone
-							className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
-							onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
-							onDragEnter={() => this.setState({dragging: true})}
-							onDragLeave={() => this.setState({dragging: false})}
-							multiple={false}
-							disableClick={true}
-							ref='processEditorFileInput'
-							name='processEditorFileInput'>
-							<GridSection hasLastColSet={true}>
-								<GridItem colSpan={2}>
-									<Input
-										onChange={name => onDataChanged({name})}
-										isValid={genericFieldInfo.name.isValid}
-										isRequired={true}
-										data-test-id='name'
-										errorText={genericFieldInfo.name.errorText}
-										label={i18n('Name')}
-										value={name}
-										type='text'/>
-								</GridItem>
-								<GridItem colSpan={2} lastColInRow={true}>
-									<label>&nbsp;</label>
-									<DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/>
-								</GridItem>
-							</GridSection>
-							<GridSection hasLastColSet={true}>
-								<GridItem colSpan={2}>
-									<Input
-										name='vsp-process-description'
-										groupClassName='vsp-process-description'
-										onChange={description => onDataChanged({description})}
-										isValid={genericFieldInfo.description.isValid}
-										errorText={genericFieldInfo.description.errorText}
-										label={i18n('Notes')}
-										value={description}
-										data-test-id='vsp-process-description'
-										type='textarea'/>
-								</GridItem>
-								<GridItem colSpan={2} lastColInRow={true}>
-									<Input
-										label={i18n('Artifacts')}
-										value={artifactName}
-										type='text'
-										disabled/>
-									<Input
-										onChange={e => {
-											// setting the unit to the correct value
-											const selectedIndex = e.target.selectedIndex;
-											const val = e.target.options[selectedIndex].value;
-											onDataChanged({type: val});}
-										}
-										value={type}
-										label={i18n('Process Type')}
-										className='process-type'
-										data-test-id='process-type'
-										isValid={genericFieldInfo.type.isValid}
-										errorText={genericFieldInfo.type.errorText}
-										type='select'>
-										{optionsInputValues.PROCESS_TYPE.map(mtype =>
-											<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-									</Input>
-								</GridItem>
-							</GridSection>
-						</Dropzone>
-					</div>
-				</Form>}
-			</div>
-		);
-	}
-
-	submit() {
-		const {data: process, previousData: previousProcess} = this.props;
-		let {files} = this.state;
-		let formData = false;
-		if (files.length) {
-			let file = files[0];
-			formData = new FormData();
-			formData.append('upload', file);
-		}
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() => this.props.onValidateForm()}
+                        className="vsp-processes-editor">
+                        <div
+                            className={`vsp-processes-editor-data${
+                                isReadOnlyMode ? ' disabled' : ''
+                            }`}>
+                            <Dropzone
+                                className={`vsp-process-dropzone-view ${
+                                    this.state.dragging ? 'active-dragging' : ''
+                                }`}
+                                onDrop={(acceptedFiles, rejectedFiles) =>
+                                    this.handleImportSubmit(
+                                        acceptedFiles,
+                                        rejectedFiles
+                                    )
+                                }
+                                onDragEnter={() =>
+                                    this.setState({ dragging: true })
+                                }
+                                onDragLeave={() =>
+                                    this.setState({ dragging: false })
+                                }
+                                multiple={false}
+                                disableClick={true}
+                                ref="processEditorFileInput"
+                                name="processEditorFileInput">
+                                <GridSection hasLastColSet={true}>
+                                    <GridItem colSpan={2}>
+                                        <Input
+                                            onChange={name =>
+                                                onDataChanged({ name })
+                                            }
+                                            isValid={
+                                                genericFieldInfo.name.isValid
+                                            }
+                                            isRequired={true}
+                                            data-test-id="name"
+                                            errorText={
+                                                genericFieldInfo.name.errorText
+                                            }
+                                            label={i18n('Name')}
+                                            value={name}
+                                            type="text"
+                                        />
+                                    </GridItem>
+                                    <GridItem colSpan={2} lastColInRow={true}>
+                                        <label>&nbsp;</label>
+                                        <DraggableUploadFileBox
+                                            className="process-editor-file-box"
+                                            isReadOnlyMode={isReadOnlyMode}
+                                            onClick={() =>
+                                                this.refs.processEditorFileInput.open()
+                                            }
+                                        />
+                                    </GridItem>
+                                </GridSection>
+                                <GridSection hasLastColSet={true}>
+                                    <GridItem colSpan={2}>
+                                        <Input
+                                            name="vsp-process-description"
+                                            groupClassName="vsp-process-description"
+                                            onChange={description =>
+                                                onDataChanged({ description })
+                                            }
+                                            isValid={
+                                                genericFieldInfo.description
+                                                    .isValid
+                                            }
+                                            errorText={
+                                                genericFieldInfo.description
+                                                    .errorText
+                                            }
+                                            label={i18n('Notes')}
+                                            value={description}
+                                            data-test-id="vsp-process-description"
+                                            type="textarea"
+                                        />
+                                    </GridItem>
+                                    <GridItem colSpan={2} lastColInRow={true}>
+                                        <Input
+                                            label={i18n('Artifacts')}
+                                            value={artifactName}
+                                            type="text"
+                                            disabled
+                                        />
+                                        <Input
+                                            onChange={e => {
+                                                // setting the unit to the correct value
+                                                const selectedIndex =
+                                                    e.target.selectedIndex;
+                                                const val =
+                                                    e.target.options[
+                                                        selectedIndex
+                                                    ].value;
+                                                onDataChanged({ type: val });
+                                            }}
+                                            value={type}
+                                            label={i18n('Process Type')}
+                                            className="process-type"
+                                            data-test-id="process-type"
+                                            isValid={
+                                                genericFieldInfo.type.isValid
+                                            }
+                                            errorText={
+                                                genericFieldInfo.type.errorText
+                                            }
+                                            type="select">
+                                            {optionsInputValues.PROCESS_TYPE.map(
+                                                mtype => (
+                                                    <option
+                                                        key={mtype.enum}
+                                                        value={mtype.enum}>{`${
+                                                        mtype.title
+                                                    }`}</option>
+                                                )
+                                            )}
+                                        </Input>
+                                    </GridItem>
+                                </GridSection>
+                            </Dropzone>
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		let updatedProcess = {
-			...process,
-			formData
-		};
-		this.props.onSubmit({process: updatedProcess, previousProcess});
-	}
+    submit() {
+        const { data: process, previousData: previousProcess } = this.props;
+        let { files } = this.state;
+        let formData = false;
+        if (files.length) {
+            let file = files[0];
+            formData = new FormData();
+            formData.append('upload', file);
+        }
 
+        let updatedProcess = {
+            ...process,
+            formData
+        };
+        this.props.onSubmit({ process: updatedProcess, previousProcess });
+    }
 
-	handleImportSubmit(files, rejectedFiles) {
-		if (files.length > 0) {
-			let {onDataChanged} = this.props;
-			this.setState({
-				dragging: false,
-				complete: '0',
-				files
-			});
-			onDataChanged({artifactName: files[0].name});
-		}
-		else if (rejectedFiles.length > 0) {
-			this.setState({
-				dragging: false
-			});
-			if (DEBUG) {
-				console.log('file was rejected.' + rejectedFiles[0].name);
-			}
-		}
-	}
+    handleImportSubmit(files, rejectedFiles) {
+        if (files.length > 0) {
+            let { onDataChanged } = this.props;
+            this.setState({
+                dragging: false,
+                complete: '0',
+                files
+            });
+            onDataChanged({ artifactName: files[0].name });
+        } else if (rejectedFiles.length > 0) {
+            this.setState({
+                dragging: false
+            });
+            if (DEBUG) {
+                console.log('file was rejected.' + rejectedFiles[0].name);
+            }
+        }
+    }
 }
 
 export default SoftwareProductProcessesEditorForm;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
index 11b89b17c2..a8731fd163 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
@@ -13,43 +13,49 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import {
+    actionTypes,
+    VSP_PROCESS_FORM
+} from './SoftwareProductProcessesConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: VSP_PROCESS_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_EDITOR_CLOSE:
-			return {};
+    switch (action.type) {
+        case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: VSP_PROCESS_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_EDITOR_CLOSE:
+            return {};
 
-		default:
-			return state;
-	}
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
index 9ce690a1ca..867090bb31 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -15,16 +15,18 @@
  */
 import React from 'react';
 
-import  {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
+import { optionsInputValues as ProcessesOptionsInputValues } from './SoftwareProductProcessesConstants.js';
 import SoftwareProductProcessesEditorForm from './SoftwareProductProcessesEditorForm.jsx';
 
-
 class SoftwareProductProcessesEditorView extends React.Component {
-	render() {
-		return (
-			<SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/>
-		);
-	}
+    render() {
+        return (
+            <SoftwareProductProcessesEditorForm
+                optionsInputValues={ProcessesOptionsInputValues}
+                {...this.props}
+            />
+        );
+    }
 }
 
 export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
index 20390d1f60..0e4d94650e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
@@ -13,20 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
-			return [...action.processesList];
-		case actionTypes.EDIT_SOFTWARE_PRODUCT_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_PROCESS:
-			return [...state, action.process];
-		case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
-			return state.filter(process => process.id !== action.processId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
+            return [...action.processesList];
+        case actionTypes.EDIT_SOFTWARE_PRODUCT_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_PROCESS:
+            return [...state, action.process];
+        case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
+            return state.filter(process => process.id !== action.processId);
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
index b0da767a2b..1357c31e12 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -20,45 +20,63 @@ import Modal from 'nfvo-components/modal/Modal.jsx';
 import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
 import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';
 
-
 class SoftwareProductProcessesView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
-
-	static propTypes = {
-		onAddProcess: PropTypes.func.isRequired,
-		onEditProcess: PropTypes.func.isRequired,
-		onDeleteProcess: PropTypes.func.isRequired,
-		isDisplayEditor: PropTypes.bool.isRequired,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		currentSoftwareProduct:PropTypes.object
-	};
-
-	render() {
-		return (
-			<div className='software-product-landing-view-right-side vsp-processes-page'>
-				{this.renderEditor()}
-				<SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/>
-			</div>
-		);
-	}
+    static propTypes = {
+        onAddProcess: PropTypes.func.isRequired,
+        onEditProcess: PropTypes.func.isRequired,
+        onDeleteProcess: PropTypes.func.isRequired,
+        isDisplayEditor: PropTypes.bool.isRequired,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        currentSoftwareProduct: PropTypes.object
+    };
 
-	renderEditor() {
-		let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
-		return (
+    render() {
+        return (
+            <div className="software-product-landing-view-right-side vsp-processes-page">
+                {this.renderEditor()}
+                <SoftwareProductProcessListView
+                    addButtonTitle={i18n('Add Process Details')}
+                    {...this.props}
+                />
+            </div>
+        );
+    }
 
-			<Modal show={isDisplayEditor} 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 softwareProductId={id} version={version} isReadOnlyMode={isReadOnlyMode}/>
-				</Modal.Body>
-			</Modal>
-		);
-	}
+    renderEditor() {
+        let {
+            currentSoftwareProduct: { id },
+            version,
+            isModalInEditMode,
+            isReadOnlyMode,
+            isDisplayEditor
+        } = this.props;
+        return (
+            <Modal
+                show={isDisplayEditor}
+                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
+                        softwareProductId={id}
+                        version={version}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                </Modal.Body>
+            </Modal>
+        );
+    }
 }
 
 export default SoftwareProductProcessesView;