Adding Prettier and fixing up eslint version

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

5 files changed, 708 insertions, 449 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
index 4c3adc6a7d..d75d464f9e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
@@ -13,50 +13,65 @@
  * 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 HeatSetupView from './HeatSetupView.jsx';
 import HeatSetupActionHelper from './HeatSetupActionHelper.js';
 
-
 const BASE = true;
 
 function baseExists(modules) {
-	for (let i in modules) {
-		if (modules[i].isBase) {
-			return true;
-		}
-	}
-	return false;
+    for (let i in modules) {
+        if (modules[i].isBase) {
+            return true;
+        }
+    }
+    return false;
 }
 
-export const mapStateToProps = ({softwareProduct: {softwareProductAttachments: {heatSetup, heatSetupCache}}}) => {
-	let {modules = [], unassigned = [], artifacts = [], nested = []} = heatSetup;
-	let isBaseExist = baseExists(modules);
+export const mapStateToProps = ({
+    softwareProduct: {
+        softwareProductAttachments: { heatSetup, heatSetupCache }
+    }
+}) => {
+    let {
+        modules = [],
+        unassigned = [],
+        artifacts = [],
+        nested = []
+    } = heatSetup;
+    let isBaseExist = baseExists(modules);
 
-	return {
-		heatSetupCache,
-		modules,
-		unassigned,
-		artifacts,
-		nested,
-		isBaseExist
-	};
+    return {
+        heatSetupCache,
+        modules,
+        unassigned,
+        artifacts,
+        nested,
+        isBaseExist
+    };
 };
 
 export const mapActionsToProps = (dispatch, {}) => {
-	return {
-		onModuleRename: (oldName, newName) => HeatSetupActionHelper.renameModule(dispatch, {oldName, newName}),
-		onModuleAdd: () => HeatSetupActionHelper.addModule(dispatch, !BASE),
-		onBaseAdd: () => HeatSetupActionHelper.addModule(dispatch, BASE),
-		onModuleDelete: moduleName => HeatSetupActionHelper.deleteModule(dispatch, moduleName),
-		onModuleFileTypeChange: ({module, value, type}) => HeatSetupActionHelper.changeModuleFileType(dispatch, {
-			module,
-			value,
-			type
-		}),
-		onArtifactListChange: artifacts => HeatSetupActionHelper.changeArtifactList(dispatch, artifacts),
-		onAddAllUnassigned: () => HeatSetupActionHelper.addAllUnassignedFilesToArtifacts(dispatch)
-	};
+    return {
+        onModuleRename: (oldName, newName) =>
+            HeatSetupActionHelper.renameModule(dispatch, { oldName, newName }),
+        onModuleAdd: () => HeatSetupActionHelper.addModule(dispatch, !BASE),
+        onBaseAdd: () => HeatSetupActionHelper.addModule(dispatch, BASE),
+        onModuleDelete: moduleName =>
+            HeatSetupActionHelper.deleteModule(dispatch, moduleName),
+        onModuleFileTypeChange: ({ module, value, type }) =>
+            HeatSetupActionHelper.changeModuleFileType(dispatch, {
+                module,
+                value,
+                type
+            }),
+        onArtifactListChange: artifacts =>
+            HeatSetupActionHelper.changeArtifactList(dispatch, artifacts),
+        onAddAllUnassigned: () =>
+            HeatSetupActionHelper.addAllUnassignedFilesToArtifacts(dispatch)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(HeatSetupView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(HeatSetupView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
index 87953bb8aa..05ac408fbb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './HeatSetupConstants.js';
+import { actionTypes } from './HeatSetupConstants.js';
 import isEqual from 'lodash/isEqual.js';
 import cloneDeep from 'lodash/cloneDeep.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
@@ -21,46 +21,72 @@ import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/Soft
 // import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 
 export default {
+    addModule(dispatch, isBase) {
+        dispatch({ type: actionTypes.ADD_MODULE, data: { isBase } });
+    },
 
-	addModule(dispatch, isBase){
-		dispatch({type: actionTypes.ADD_MODULE, data: {isBase}});
-	},
+    deleteModule(dispatch, moduleName) {
+        dispatch({ type: actionTypes.REMOVE_MODULE, data: { moduleName } });
+    },
 
-	deleteModule(dispatch, moduleName){
-		dispatch({type: actionTypes.REMOVE_MODULE, data: {moduleName}});
-	},
+    renameModule(dispatch, { oldName, newName }) {
+        dispatch({
+            type: actionTypes.RENAME_MODULE,
+            data: { oldName, newName }
+        });
+    },
 
-	renameModule(dispatch, {oldName, newName}){
-		dispatch({type: actionTypes.RENAME_MODULE, data: {oldName, newName}});
-	},
+    changeModuleFileType(dispatch, { module, value, type }) {
+        if (!value) {
+            value = { value: '' };
+        }
+        dispatch({
+            type: actionTypes.FILE_ASSIGN_CHANGED,
+            data: { module, value, type }
+        });
+    },
 
-	changeModuleFileType(dispatch, {module, value, type}){
-		if (!value) {
-			value = {value: ''};
-		}
-		dispatch({type: actionTypes.FILE_ASSIGN_CHANGED, data: {module, value, type}});
-	},
+    changeArtifactList(dispatch, artifacts) {
+        dispatch({
+            type: actionTypes.ARTIFACT_LIST_CHANGE,
+            data: { artifacts: artifacts.map(artifact => artifact.value) }
+        });
+    },
 
-	changeArtifactList(dispatch, artifacts){
-		dispatch({type: actionTypes.ARTIFACT_LIST_CHANGE, data: {artifacts: artifacts.map(artifact => artifact.value)}});
-	},
+    processAndValidateHeat(
+        dispatch,
+        { softwareProductId, heatData, heatDataCache, isReadOnlyMode, version }
+    ) {
+        return isEqual({ ...heatData, softwareProductId }, heatDataCache) ||
+            isReadOnlyMode
+            ? Promise.resolve()
+            : SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+                  dispatch,
+                  { softwareProductId, heatCandidate: heatData, version }
+              )
+                  .then(() =>
+                      SoftwareProductActionHelper.processAndValidateHeatCandidate(
+                          dispatch,
+                          { softwareProductId, version }
+                      )
+                  )
+                  .then(() =>
+                      dispatch({
+                          type: actionTypes.FILL_HEAT_SETUP_CACHE,
+                          payload: { ...cloneDeep(heatData), softwareProductId }
+                      })
+                  );
+    },
 
-	processAndValidateHeat(dispatch, {softwareProductId, heatData, heatDataCache, isReadOnlyMode, version}){		
-		return (isEqual({...heatData, softwareProductId}, heatDataCache) || isReadOnlyMode) ? Promise.resolve() :
-		SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate: heatData, version})
-			.then(() => SoftwareProductActionHelper.processAndValidateHeatCandidate(dispatch, {softwareProductId, version}))
-			.then(() => dispatch({type: actionTypes.FILL_HEAT_SETUP_CACHE, payload: {...cloneDeep(heatData), softwareProductId}}));
-	},
+    addAllUnassignedFilesToArtifacts(dispatch) {
+        dispatch({ type: actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS });
+    },
 
-	addAllUnassignedFilesToArtifacts(dispatch){
-		dispatch({type: actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS});
-	},
+    heatSetupLeaveConfirmation() {
+        return Promise.resolve();
+    }
 
-	heatSetupLeaveConfirmation() {
-		return Promise.resolve();
-	}
-
-	/*heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) {
+    /*heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) {
 		return new Promise((resolve, reject) => {
 			if (isEqual({...heatSetup, softwareProductId}, heatSetupCache)) {
 				resolve();
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
index 2d6bd574a7..ff53fad27f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
@@ -16,27 +16,25 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
+    ARTIFACT_LIST_CHANGE: null,
+    ADD_ALL_UNASSIGNED_TO_ARTIFACTS: null,
+    ADD_ALL_ARTIFACTS_TO_UNASSIGNED: null,
 
-	ARTIFACT_LIST_CHANGE: null,
-	ADD_ALL_UNASSIGNED_TO_ARTIFACTS: null,
-	ADD_ALL_ARTIFACTS_TO_UNASSIGNED: null,
+    ADD_MODULE: null,
+    REMOVE_MODULE: null,
+    RENAME_MODULE: null,
+    FILL_HEAT_SETUP_CACHE: null,
+    FILE_ASSIGN_CHANGED: null,
 
-	ADD_MODULE: null,
-	REMOVE_MODULE: null,
-	RENAME_MODULE: null,
-	FILL_HEAT_SETUP_CACHE: null,
-	FILE_ASSIGN_CHANGED: null,
-
-	MANIFEST_LOADED: null,
-
-	GO_TO_VALIDATION: null,
-	IN_VALIDATION: null
+    MANIFEST_LOADED: null,
 
+    GO_TO_VALIDATION: null,
+    IN_VALIDATION: null
 });
 
 export const fileTypes = {
-	YAML: {label: 'yaml', regex: /(yaml|yml)/g},
-	ENV: {label: 'env', regex: /env/g},
-	VOL: {label: 'vol', regex: /(yaml|yml)/g},
-	VOL_ENV: {label: 'volEnv', regex: /env/g}
+    YAML: { label: 'yaml', regex: /(yaml|yml)/g },
+    ENV: { label: 'env', regex: /env/g },
+    VOL: { label: 'vol', regex: /(yaml|yml)/g },
+    VOL_ENV: { label: 'volEnv', regex: /env/g }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
index f49339ce35..8840a11c3e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
@@ -13,112 +13,163 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './HeatSetupConstants.js';
+import { actionTypes } from './HeatSetupConstants.js';
 import differenceWith from 'lodash/differenceWith.js';
 
-
 const emptyModule = (isBase, currentLength) => ({
-	name: `${isBase ? 'base_' : 'module_'}${currentLength + 1}`,
-	isBase: isBase
+    name: `${isBase ? 'base_' : 'module_'}${currentLength + 1}`,
+    isBase: isBase
 });
 
-function syncUnassignedFilesWithArtifactsChanges(unassigned, artifacts, oldArtifacts) {
-	if (artifacts.length > oldArtifacts.length) {
-		return differenceWith(unassigned, artifacts, (unassignedFile, artifact) => unassignedFile === artifact);
-	}
-	else {
-		const removedArtifact = differenceWith(oldArtifacts, artifacts, (oldArtifact, artifact) => artifact === oldArtifact);
-		return [...unassigned, removedArtifact[0]];
-	}
+function syncUnassignedFilesWithArtifactsChanges(
+    unassigned,
+    artifacts,
+    oldArtifacts
+) {
+    if (artifacts.length > oldArtifacts.length) {
+        return differenceWith(
+            unassigned,
+            artifacts,
+            (unassignedFile, artifact) => unassignedFile === artifact
+        );
+    } else {
+        const removedArtifact = differenceWith(
+            oldArtifacts,
+            artifacts,
+            (oldArtifact, artifact) => artifact === oldArtifact
+        );
+        return [...unassigned, removedArtifact[0]];
+    }
 }
 
 function findModuleIndexByName(modules, name) {
-	return modules.findIndex(module => module.name === name);
+    return modules.findIndex(module => module.name === name);
 }
 
-function addDeletedModuleFilesToUnassigned(unassigned, deletedModule){
-	let files = [];
-	for(let i in deletedModule){
-		if (deletedModule.hasOwnProperty(i)) {
-			if (typeof deletedModule[i] === 'string' && deletedModule[i] && i !== 'name') {
-				files.push(deletedModule[i]);
-			}
-		}
-	}
+function addDeletedModuleFilesToUnassigned(unassigned, deletedModule) {
+    let files = [];
+    for (let i in deletedModule) {
+        if (deletedModule.hasOwnProperty(i)) {
+            if (
+                typeof deletedModule[i] === 'string' &&
+                deletedModule[i] &&
+                i !== 'name'
+            ) {
+                files.push(deletedModule[i]);
+            }
+        }
+    }
 
-	return unassigned.concat(files);
+    return unassigned.concat(files);
 }
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.MANIFEST_LOADED:
-			return {
-				...state,
-				...action.response,
-				modules: action.response.modules.map(module => ({...module, name: module.name || module.yaml.substring(0, module.yaml.lastIndexOf('.'))}))
-			};
-		case actionTypes.ARTIFACT_LIST_CHANGE:
-			return {
-				...state,
-				artifacts: action.data.artifacts,
-				unassigned: syncUnassignedFilesWithArtifactsChanges(state.unassigned, action.data.artifacts, state.artifacts)
-			};
-		case actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS:
-			return {
-				...state,
-				artifacts: [...state.artifacts,...state.unassigned],
-				unassigned: []
-			};
-		case actionTypes.ADD_ALL_ARTIFACTS_TO_UNASSIGNED:
-			return {
-				...state,
-				artifacts: [],
-				unassigned: [...state.unassigned, ...state.artifacts]
-			};
-		case actionTypes.ADD_MODULE:
-			return {
-				...state,
-				modules: state.modules.concat({...emptyModule(action.data.isBase, state.modules.length)})
-			};
-		case actionTypes.REMOVE_MODULE:
-			const moduleIndexToDelete = findModuleIndexByName(state.modules, action.data.moduleName);
-			let unassigned = addDeletedModuleFilesToUnassigned(state.unassigned, state.modules[moduleIndexToDelete]);
-			return {
-				...state,
-				unassigned,
-				modules: [...state.modules.slice(0, moduleIndexToDelete), ...state.modules.slice(moduleIndexToDelete + 1)]
-			};
-		case actionTypes.RENAME_MODULE:
-			const indexToRename = findModuleIndexByName(state.modules, action.data.oldName);
-			let moduleToRename = state.modules[indexToRename];
-			moduleToRename.name = action.data.newName;
-			return {
-				...state,
-				modules: [...state.modules.slice(0, indexToRename), moduleToRename, ...state.modules.slice(indexToRename + 1)]
-			};
-		case actionTypes.FILE_ASSIGN_CHANGED:
-			let {module, value:{value}, type} = action.data;
-			const moduleIndexToModify = findModuleIndexByName(state.modules, module.name);
-			let moduleToModify = state.modules[moduleIndexToModify];
-			let dumpedFile = moduleToModify[type];
-			if (dumpedFile !== value) {
-				if(value) {
-					moduleToModify[type] = value;
-				}
-				else {
-					delete moduleToModify[type];
-				}
-				const newUnassignedList = dumpedFile ? [...state.unassigned.filter(file => file !== value), dumpedFile] : state.unassigned.filter(file => file !== value);
-				return {
-					...state,
-					modules: [...state.modules.slice(0, moduleIndexToModify), moduleToModify, ...state.modules.slice(moduleIndexToModify + 1)],
-					unassigned: newUnassignedList
-				};
-			}
-			else {
-				return state;
-			}
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.MANIFEST_LOADED:
+            return {
+                ...state,
+                ...action.response,
+                modules: action.response.modules.map(module => ({
+                    ...module,
+                    name:
+                        module.name ||
+                        module.yaml.substring(0, module.yaml.lastIndexOf('.'))
+                }))
+            };
+        case actionTypes.ARTIFACT_LIST_CHANGE:
+            return {
+                ...state,
+                artifacts: action.data.artifacts,
+                unassigned: syncUnassignedFilesWithArtifactsChanges(
+                    state.unassigned,
+                    action.data.artifacts,
+                    state.artifacts
+                )
+            };
+        case actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS:
+            return {
+                ...state,
+                artifacts: [...state.artifacts, ...state.unassigned],
+                unassigned: []
+            };
+        case actionTypes.ADD_ALL_ARTIFACTS_TO_UNASSIGNED:
+            return {
+                ...state,
+                artifacts: [],
+                unassigned: [...state.unassigned, ...state.artifacts]
+            };
+        case actionTypes.ADD_MODULE:
+            return {
+                ...state,
+                modules: state.modules.concat({
+                    ...emptyModule(action.data.isBase, state.modules.length)
+                })
+            };
+        case actionTypes.REMOVE_MODULE:
+            const moduleIndexToDelete = findModuleIndexByName(
+                state.modules,
+                action.data.moduleName
+            );
+            let unassigned = addDeletedModuleFilesToUnassigned(
+                state.unassigned,
+                state.modules[moduleIndexToDelete]
+            );
+            return {
+                ...state,
+                unassigned,
+                modules: [
+                    ...state.modules.slice(0, moduleIndexToDelete),
+                    ...state.modules.slice(moduleIndexToDelete + 1)
+                ]
+            };
+        case actionTypes.RENAME_MODULE:
+            const indexToRename = findModuleIndexByName(
+                state.modules,
+                action.data.oldName
+            );
+            let moduleToRename = state.modules[indexToRename];
+            moduleToRename.name = action.data.newName;
+            return {
+                ...state,
+                modules: [
+                    ...state.modules.slice(0, indexToRename),
+                    moduleToRename,
+                    ...state.modules.slice(indexToRename + 1)
+                ]
+            };
+        case actionTypes.FILE_ASSIGN_CHANGED:
+            let { module, value: { value }, type } = action.data;
+            const moduleIndexToModify = findModuleIndexByName(
+                state.modules,
+                module.name
+            );
+            let moduleToModify = state.modules[moduleIndexToModify];
+            let dumpedFile = moduleToModify[type];
+            if (dumpedFile !== value) {
+                if (value) {
+                    moduleToModify[type] = value;
+                } else {
+                    delete moduleToModify[type];
+                }
+                const newUnassignedList = dumpedFile
+                    ? [
+                          ...state.unassigned.filter(file => file !== value),
+                          dumpedFile
+                      ]
+                    : state.unassigned.filter(file => file !== value);
+                return {
+                    ...state,
+                    modules: [
+                        ...state.modules.slice(0, moduleIndexToModify),
+                        moduleToModify,
+                        ...state.modules.slice(moduleIndexToModify + 1)
+                    ],
+                    unassigned: newUnassignedList
+                };
+            } else {
+                return state;
+            }
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
index ce6d5260d7..1d4efd9104 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
@@ -21,307 +21,476 @@ import FormControl from 'react-bootstrap/lib/FormControl.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SelectInput from 'nfvo-components/input/SelectInput.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import {fileTypes} from './HeatSetupConstants.js';
-import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js';
-import {sortable} from 'react-sortable';
+import { fileTypes } from './HeatSetupConstants.js';
+import { tabsMapping } from '../SoftwareProductAttachmentsConstants.js';
+import { sortable } from 'react-sortable';
 
 class ListItem extends Component {
-
-	render() {
-		return (
-			<li {...this.props}>{this.props.children}</li>
-		);
-	}
+    render() {
+        return <li {...this.props}>{this.props.children}</li>;
+    }
 }
 
-
 const SortableListItem = sortable(ListItem);
 
 class SortableModuleFileList extends Component {
-
-	state = {
-		draggingIndex: null,
-		data: this.props.modules
-	};
-
-
-	componentWillReceiveProps(nextProps) {
-		this.setState({data: nextProps.modules});
-	}
-
-	render() {
-
-		let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props;
-		const childProps = module => ({
-			module,
-			onModuleRename,
-			onModuleDelete,
-			onModuleFileTypeChange: (value, type) => onModuleFileTypeChange({module, value, type}),
-			files: unassigned
-		});
-		let listItems = this.state.data.map(function (item, i) {
-			return (
-				<SortableListItem
-					key={i}
-					updateState={data => this.setState(data)}
-					items={this.state.data}
-					draggingIndex={this.state.draggingIndex}
-					sortId={i}
-					outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem>
-			);
-		}, this);
-
-		return (
-			<div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}>
-				<div className='modules-list-header'>
-					{!isBaseExist && <div><Button btnType='link' onClick={onBaseAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Base')}</Button></div>}
-					<div><Button btnType='link' onClick={onModuleAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Module')}</Button></div>
-				</div>
-				{(listItems.length > 0) && <ul>{listItems}</ul>}
-			</div>
-		);
-	}
+    state = {
+        draggingIndex: null,
+        data: this.props.modules
+    };
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({ data: nextProps.modules });
+    }
+
+    render() {
+        let {
+            unassigned,
+            onModuleRename,
+            onModuleDelete,
+            onModuleAdd,
+            onBaseAdd,
+            onModuleFileTypeChange,
+            isBaseExist,
+            isReadOnlyMode
+        } = this.props;
+        const childProps = module => ({
+            module,
+            onModuleRename,
+            onModuleDelete,
+            onModuleFileTypeChange: (value, type) =>
+                onModuleFileTypeChange({ module, value, type }),
+            files: unassigned
+        });
+        let listItems = this.state.data.map(function(item, i) {
+            return (
+                <SortableListItem
+                    key={i}
+                    updateState={data => this.setState(data)}
+                    items={this.state.data}
+                    draggingIndex={this.state.draggingIndex}
+                    sortId={i}
+                    outline="list">
+                    <ModuleFile
+                        {...childProps(item)}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                    />
+                </SortableListItem>
+            );
+        }, this);
+
+        return (
+            <div
+                className={`modules-list-wrapper ${
+                    listItems.length > 0 ? 'modules-list-wrapper-divider' : ''
+                }`}>
+                <div className="modules-list-header">
+                    {!isBaseExist && (
+                        <div>
+                            <Button
+                                btnType="link"
+                                onClick={onBaseAdd}
+                                disabled={
+                                    isReadOnlyMode || unassigned.length === 0
+                                }>
+                                {i18n('Add Base')}
+                            </Button>
+                        </div>
+                    )}
+                    <div>
+                        <Button
+                            btnType="link"
+                            onClick={onModuleAdd}
+                            disabled={
+                                isReadOnlyMode || unassigned.length === 0
+                            }>
+                            {i18n('Add Module')}
+                        </Button>
+                    </div>
+                </div>
+                {listItems.length > 0 && <ul>{listItems}</ul>}
+            </div>
+        );
+    }
 }
 
-const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>;
-const UnassignedFileList = (props) => {
-	return (
-		<div>
-			<div className='modules-list-header'/>
-				<div className='unassigned-files'>
-			<div className='unassigned-files-title'>{i18n('UNASSIGNED FILES')}</div>
-			<div className='unassigned-files-list'>{props.children}</div>
-			</div>
-		</div>
-	);
+const tooltip = name => <Tooltip id="tooltip-bottom">{name}</Tooltip>;
+const UnassignedFileList = props => {
+    return (
+        <div>
+            <div className="modules-list-header" />
+            <div className="unassigned-files">
+                <div className="unassigned-files-title">
+                    {i18n('UNASSIGNED FILES')}
+                </div>
+                <div className="unassigned-files-list">{props.children}</div>
+            </div>
+        </div>
+    );
 };
 
 const EmptyListContent = props => {
-	let {heatDataExist} = props;
-	let displayText = heatDataExist ? 'All Files Are Assigned' : '';
-	return (
-		<div className='go-to-validation-button-wrapper'>
-			<div className='all-files-assigned'>{i18n(displayText)}</div>			
-		</div>
-	);
+    let { heatDataExist } = props;
+    let displayText = heatDataExist ? 'All Files Are Assigned' : '';
+    return (
+        <div className="go-to-validation-button-wrapper">
+            <div className="all-files-assigned">{i18n(displayText)}</div>
+        </div>
+    );
 };
-const UnassignedFile = (props) => (
-	<OverlayTrigger placement='bottom' overlay={tooltip(props.name)} delayShow={1000}>
-		<li data-test-id='unassigned-files' className='unassigned-files-list-item'>{props.name}</li>
-	</OverlayTrigger>
+const UnassignedFile = props => (
+    <OverlayTrigger
+        placement="bottom"
+        overlay={tooltip(props.name)}
+        delayShow={1000}>
+        <li
+            data-test-id="unassigned-files"
+            className="unassigned-files-list-item">
+            {props.name}
+        </li>
+    </OverlayTrigger>
 );
 
-const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => {
-	const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
-	const action = add ? onAdd : onDelete;
-	return (
-		<Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button>
-	);
+const AddOrDeleteVolumeFiles = ({
+    add = true,
+    onAdd,
+    onDelete,
+    isReadOnlyMode
+}) => {
+    const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
+    const action = add ? onAdd : onDelete;
+    return (
+        <Button
+            disabled={isReadOnlyMode}
+            onClick={action}
+            btnType="link"
+            className="add-or-delete-volumes"
+            iconName={add ? 'plus' : 'close'}>
+            {i18n(displayText)}
+        </Button>
+    );
 };
 
-const SelectWithFileType = ({type, selected, files, onChange}) => {
-
-	let filteredFiledAccordingToType = files.filter(file => file.label.search(type.regex) > -1);
-	if (selected) {
-		filteredFiledAccordingToType = filteredFiledAccordingToType.concat({label: selected, value: selected});
-	}
-
-	return (
-		<SelectInput
-			data-test-id={`${type.label}-list`}
-			label={type.label}
-			value={selected}
-			onChange={value => value !== selected && onChange(value, type.label)}
-			disabled={filteredFiledAccordingToType.length === 0}
-			placeholder={filteredFiledAccordingToType.length === 0 ? '' : undefined}
-			clearable={true}
-			options={filteredFiledAccordingToType} />
-	);
+const SelectWithFileType = ({ type, selected, files, onChange }) => {
+    let filteredFiledAccordingToType = files.filter(
+        file => file.label.search(type.regex) > -1
+    );
+    if (selected) {
+        filteredFiledAccordingToType = filteredFiledAccordingToType.concat({
+            label: selected,
+            value: selected
+        });
+    }
+
+    return (
+        <SelectInput
+            data-test-id={`${type.label}-list`}
+            label={type.label}
+            value={selected}
+            onChange={value =>
+                value !== selected && onChange(value, type.label)
+            }
+            disabled={filteredFiledAccordingToType.length === 0}
+            placeholder={
+                filteredFiledAccordingToType.length === 0 ? '' : undefined
+            }
+            clearable={true}
+            options={filteredFiledAccordingToType}
+        />
+    );
 };
 
 class NameEditInput extends Component {
-	componentDidMount() {
-		this.input.focus();
-	}
-
-	render() {
-		return (
-			<FormControl {...this.props} className='name-edit' inputRef={input => this.input = input}/>
-		);
-	}
+    componentDidMount() {
+        this.input.focus();
+    }
+
+    render() {
+        return (
+            <FormControl
+                {...this.props}
+                className="name-edit"
+                inputRef={input => (this.input = input)}
+            />
+        );
+    }
 }
 
 class ModuleFile extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isInNameEdit: false,
-			displayVolumes: Boolean(props.module.vol || props.module.volEnv)
-		};
-	}
-
-	handleSubmit(event, name) {
-		if (event.keyCode === 13) {
-			this.handleModuleRename(event, name);
-		}
-	}
-
-	componentWillReceiveProps(nextProps) {
-		this.setState({displayVolumes: Boolean(nextProps.module.vol || nextProps.module.volEnv)});
-	}
-
-	handleModuleRename(event, name) {
-		this.setState({isInNameEdit: false});
-		this.props.onModuleRename(name, event.target.value);
-	}
-
-	deleteVolumeFiles() {
-		const { onModuleFileTypeChange} = this.props;
-		onModuleFileTypeChange(null, fileTypes.VOL.label);
-		onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
-		this.setState({displayVolumes: false});
-	}
-
-	renderNameAccordingToEditState() {
-		const {module: {name}} = this.props;
-		if (this.state.isInNameEdit) {
-			return (<NameEditInput defaultValue={name} onBlur={evt => this.handleModuleRename(evt, name)} onKeyDown={evt => this.handleSubmit(evt, name)}/>);
-		}
-		return (<span className='filename-text'>{name}</span>);
-	}
-
-	render() {
-		const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange, isReadOnlyMode} = this.props;
-		const {displayVolumes} = this.state;
-		const moduleType = isBase ? 'BASE' : 'MODULE';
-		return (
-			<div className='modules-list-item' data-test-id='module-item'>
-				<div className='modules-list-item-controllers'>
-					<div className='modules-list-item-filename'>
-						<SVGIcon name={isBase ? 'base' : 'module'} color='primary' iconClassName='heat-setup-module-icon' />
-						<span className='module-title-by-type'>{`${moduleType}: `}</span>
-						<div className={`text-and-icon ${this.state.isInNameEdit ? 'in-edit' : ''}`}>
-							{this.renderNameAccordingToEditState()}
-							{!this.state.isInNameEdit && <SVGIcon
-								name='pencil'
-								onClick={() => this.setState({isInNameEdit: true})}
-								data-test-id={isBase ? 'base-name' : 'module-name'}/>}
-						</div>
-					</div>
-					<SVGIcon name='trashO' onClick={() => onModuleDelete(name)} data-test-id='module-delete'/>
-				</div>
-				<div className='modules-list-item-selectors'>
-					<SelectWithFileType
-						type={fileTypes.YAML}
-						files={files}
-						selected={yaml}
-						onChange={onModuleFileTypeChange}/>
-					<SelectWithFileType
-						type={fileTypes.ENV}
-						files={files}
-						selected={env}
-						onChange={onModuleFileTypeChange}/>
-					{displayVolumes  && <SelectWithFileType
-						type={fileTypes.VOL}
-						files={files}
-						selected={vol}
-						onChange={onModuleFileTypeChange}/>}
-					{displayVolumes && <SelectWithFileType
-						type={fileTypes.VOL_ENV}
-						files={files}
-						selected={volEnv}
-						onChange={onModuleFileTypeChange}/>}
-					<AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
-				</div>
-			</div>
-		);
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            isInNameEdit: false,
+            displayVolumes: Boolean(props.module.vol || props.module.volEnv)
+        };
+    }
+
+    handleSubmit(event, name) {
+        if (event.keyCode === 13) {
+            this.handleModuleRename(event, name);
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            displayVolumes: Boolean(
+                nextProps.module.vol || nextProps.module.volEnv
+            )
+        });
+    }
+
+    handleModuleRename(event, name) {
+        this.setState({ isInNameEdit: false });
+        this.props.onModuleRename(name, event.target.value);
+    }
+
+    deleteVolumeFiles() {
+        const { onModuleFileTypeChange } = this.props;
+        onModuleFileTypeChange(null, fileTypes.VOL.label);
+        onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
+        this.setState({ displayVolumes: false });
+    }
+
+    renderNameAccordingToEditState() {
+        const { module: { name } } = this.props;
+        if (this.state.isInNameEdit) {
+            return (
+                <NameEditInput
+                    defaultValue={name}
+                    onBlur={evt => this.handleModuleRename(evt, name)}
+                    onKeyDown={evt => this.handleSubmit(evt, name)}
+                />
+            );
+        }
+        return <span className="filename-text">{name}</span>;
+    }
+
+    render() {
+        const {
+            module: { name, isBase, yaml, env, vol, volEnv },
+            onModuleDelete,
+            files,
+            onModuleFileTypeChange,
+            isReadOnlyMode
+        } = this.props;
+        const { displayVolumes } = this.state;
+        const moduleType = isBase ? 'BASE' : 'MODULE';
+        return (
+            <div className="modules-list-item" data-test-id="module-item">
+                <div className="modules-list-item-controllers">
+                    <div className="modules-list-item-filename">
+                        <SVGIcon
+                            name={isBase ? 'base' : 'module'}
+                            color="primary"
+                            iconClassName="heat-setup-module-icon"
+                        />
+                        <span className="module-title-by-type">{`${moduleType}: `}</span>
+                        <div
+                            className={`text-and-icon ${
+                                this.state.isInNameEdit ? 'in-edit' : ''
+                            }`}>
+                            {this.renderNameAccordingToEditState()}
+                            {!this.state.isInNameEdit && (
+                                <SVGIcon
+                                    name="pencil"
+                                    onClick={() =>
+                                        this.setState({ isInNameEdit: true })
+                                    }
+                                    data-test-id={
+                                        isBase ? 'base-name' : 'module-name'
+                                    }
+                                />
+                            )}
+                        </div>
+                    </div>
+                    <SVGIcon
+                        name="trashO"
+                        onClick={() => onModuleDelete(name)}
+                        data-test-id="module-delete"
+                    />
+                </div>
+                <div className="modules-list-item-selectors">
+                    <SelectWithFileType
+                        type={fileTypes.YAML}
+                        files={files}
+                        selected={yaml}
+                        onChange={onModuleFileTypeChange}
+                    />
+                    <SelectWithFileType
+                        type={fileTypes.ENV}
+                        files={files}
+                        selected={env}
+                        onChange={onModuleFileTypeChange}
+                    />
+                    {displayVolumes && (
+                        <SelectWithFileType
+                            type={fileTypes.VOL}
+                            files={files}
+                            selected={vol}
+                            onChange={onModuleFileTypeChange}
+                        />
+                    )}
+                    {displayVolumes && (
+                        <SelectWithFileType
+                            type={fileTypes.VOL_ENV}
+                            files={files}
+                            selected={volEnv}
+                            onChange={onModuleFileTypeChange}
+                        />
+                    )}
+                    <AddOrDeleteVolumeFiles
+                        isReadOnlyMode={isReadOnlyMode}
+                        onAdd={() => this.setState({ displayVolumes: true })}
+                        onDelete={() => this.deleteVolumeFiles()}
+                        add={!displayVolumes}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
 class ArtifactOrNestedFileList extends Component {
-
-	render() {
-		let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props;
-		return (
-			<div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}>
-				<div className='artifact-files-header'>
-					<span>
-						{type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)}
-						{`${title}`}
-					</span>
-					{type === 'artifact' && <Button disabled={isReadOnlyMode} btnType='link' className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</Button>}
-				</div>
-				{type === 'nested' ? (
-					<ul className='nested-list'>{selected.map(nested =>
-						<li key={nested} className='nested-list-item'>{nested}</li>
-					)}</ul>) :
-					(<SelectInput
-						options={options}
-						onMultiSelectChanged={onSelectChanged || (() => {
-						})}
-						value={selected}
-						clearable={false}
-						placeholder={i18n('Add Artifact')}
-						multi/>)
-				}
-			</div>
-		);
-	}
+    render() {
+        let {
+            type,
+            title,
+            selected,
+            options,
+            onSelectChanged,
+            onAddAllUnassigned,
+            isReadOnlyMode,
+            headerClassName
+        } = this.props;
+        return (
+            <div
+                className={`artifact-files ${
+                    type === 'nested' ? 'nested' : ''
+                } ${headerClassName} `}>
+                <div className="artifact-files-header">
+                    <span>
+                        {type === 'artifact' && (
+                            <SVGIcon
+                                color="primary"
+                                name="artifacts"
+                                iconClassName="heat-setup-module-icon"
+                            />
+                        )}
+                        {`${title}`}
+                    </span>
+                    {type === 'artifact' && (
+                        <Button
+                            disabled={isReadOnlyMode}
+                            btnType="link"
+                            className="add-all-unassigned"
+                            onClick={onAddAllUnassigned}>
+                            {i18n('Add All Unassigned Files')}
+                        </Button>
+                    )}
+                </div>
+                {type === 'nested' ? (
+                    <ul className="nested-list">
+                        {selected.map(nested => (
+                            <li key={nested} className="nested-list-item">
+                                {nested}
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <SelectInput
+                        options={options}
+                        onMultiSelectChanged={onSelectChanged || (() => {})}
+                        value={selected}
+                        clearable={false}
+                        placeholder={i18n('Add Artifact')}
+                        multi
+                    />
+                )}
+            </div>
+        );
+    }
 }
 
-const buildLabelValueObject = str => (typeof str === 'string' ? {value: str, label: str} : str);
+const buildLabelValueObject = str =>
+    typeof str === 'string' ? { value: str, label: str } : str;
 
 class SoftwareProductHeatSetupView extends Component {
-
-	processAndValidateHeat(heatData, heatDataCache){
-		let {onProcessAndValidate, changeAttachmentsTab, version} = this.props;
-		onProcessAndValidate({heatData, heatDataCache, version}).then(
-			() => changeAttachmentsTab(tabsMapping.VALIDATION)
-		);
-	}
-
-	render() {
-		let {modules, isReadOnlyMode, heatDataExist, unassigned, artifacts, nested, onArtifactListChange, onAddAllUnassigned} = this.props;
-
-		const formattedUnassigned = unassigned.map(buildLabelValueObject);
-		const formattedArtifacts = artifacts.map(buildLabelValueObject);
-		return (
-			<div className={`heat-setup-view ${isReadOnlyMode ? 'disabled' : ''}`}>
-				<div className='heat-setup-view-modules-and-artifacts'>
-					<SortableModuleFileList
-						{...this.props}
-						isReadOnlyMode={this.props.isReadOnlyMode}
-						artifacts={formattedArtifacts}
-						unassigned={formattedUnassigned}/>
-					<ArtifactOrNestedFileList
-						type={'artifact'}
-						title={i18n('ARTIFACTS')}
-						options={formattedUnassigned}
-						selected={formattedArtifacts}
-						onSelectChanged={onArtifactListChange}
-						isReadOnlyMode={this.props.isReadOnlyMode}
-						headerClassName={(modules && modules.length > 0) ? 'with-list-items' : ''}
-						onAddAllUnassigned={onAddAllUnassigned}/>
-					<ArtifactOrNestedFileList
-						type={'nested'}
-						title={i18n('NESTED HEAT FILES')}
-						options={[]}
-						isReadOnlyMode={this.props.isReadOnlyMode}
-						selected={nested}/>
-				</div>
-				<UnassignedFileList>
-					{
-						formattedUnassigned.length > 0 ?
-						(<ul>{formattedUnassigned.map(file => <UnassignedFile key={file.label} name={file.label}/>)}</ul>)
-						:
-						(<EmptyListContent
-							heatDataExist={heatDataExist}/>)
-					}
-				</UnassignedFileList>
-			</div>
-		);
-	}
-
+    processAndValidateHeat(heatData, heatDataCache) {
+        let {
+            onProcessAndValidate,
+            changeAttachmentsTab,
+            version
+        } = this.props;
+        onProcessAndValidate({ heatData, heatDataCache, version }).then(() =>
+            changeAttachmentsTab(tabsMapping.VALIDATION)
+        );
+    }
+
+    render() {
+        let {
+            modules,
+            isReadOnlyMode,
+            heatDataExist,
+            unassigned,
+            artifacts,
+            nested,
+            onArtifactListChange,
+            onAddAllUnassigned
+        } = this.props;
+
+        const formattedUnassigned = unassigned.map(buildLabelValueObject);
+        const formattedArtifacts = artifacts.map(buildLabelValueObject);
+        return (
+            <div
+                className={`heat-setup-view ${
+                    isReadOnlyMode ? 'disabled' : ''
+                }`}>
+                <div className="heat-setup-view-modules-and-artifacts">
+                    <SortableModuleFileList
+                        {...this.props}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                        artifacts={formattedArtifacts}
+                        unassigned={formattedUnassigned}
+                    />
+                    <ArtifactOrNestedFileList
+                        type={'artifact'}
+                        title={i18n('ARTIFACTS')}
+                        options={formattedUnassigned}
+                        selected={formattedArtifacts}
+                        onSelectChanged={onArtifactListChange}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                        headerClassName={
+                            modules && modules.length > 0
+                                ? 'with-list-items'
+                                : ''
+                        }
+                        onAddAllUnassigned={onAddAllUnassigned}
+                    />
+                    <ArtifactOrNestedFileList
+                        type={'nested'}
+                        title={i18n('NESTED HEAT FILES')}
+                        options={[]}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                        selected={nested}
+                    />
+                </div>
+                <UnassignedFileList>
+                    {formattedUnassigned.length > 0 ? (
+                        <ul>
+                            {formattedUnassigned.map(file => (
+                                <UnassignedFile
+                                    key={file.label}
+                                    name={file.label}
+                                />
+                            ))}
+                        </ul>
+                    ) : (
+                        <EmptyListContent heatDataExist={heatDataExist} />
+                    )}
+                </UnassignedFileList>
+            </div>
+        );
+    }
 }
 
 export default SoftwareProductHeatSetupView;