Adding Prettier and fixing up eslint version

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

13 files changed, 798 insertions, 495 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
index 2483d0aaa2..900a9a1c46 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
@@ -1,6 +1,6 @@
-
 import Validator from 'nfvo-utils/Validator.js';
 
-export  const imageCustomValidations = {
-	'version': value => Validator.validate('version', value, [{type: 'required', data: true}])
+export const imageCustomValidations = {
+    version: value =>
+        Validator.validate('version', value, [{ type: 'required', data: true }])
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
index 8d70d6f14c..3f661b76fe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
@@ -17,157 +17,268 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
 
 function baseUrl(softwareProductId, version, componentId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
 }
 
-function fetchImagesList({softwareProductId, componentId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchImagesList({ softwareProductId, componentId, version }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}`
+    );
 }
 
-function fetchImage({softwareProductId, componentId, imageId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function fetchImage({ softwareProductId, componentId, imageId, version }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+    );
 }
 
-function destroyImage({softwareProductId, componentId, version, imageId}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function destroyImage({ softwareProductId, componentId, version, imageId }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+    );
 }
 
-function createImage({softwareProductId, componentId, version, data}) {
-	return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
-		fileName: data.fileName
-	});
+function createImage({ softwareProductId, componentId, version, data }) {
+    return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
+        fileName: data.fileName
+    });
 }
 
-function fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`);
+function fetchImageQuestionnaire({
+    softwareProductId,
+    componentId,
+    imageId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${imageId}/questionnaire`
+    );
 }
 
-function saveImage({softwareProductId, version, componentId, image: {id, fileName}}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
-		fileName
-	});
-
+function saveImage({
+    softwareProductId,
+    version,
+    componentId,
+    image: { id, fileName }
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version, componentId)}/${id}`,
+        {
+            fileName
+        }
+    );
 }
 
-function saveImageQuestionnaire({softwareProductId, componentId, version, imageId, qdata}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`, qdata);
+function saveImageQuestionnaire({
+    softwareProductId,
+    componentId,
+    version,
+    imageId,
+    qdata
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${imageId}/questionnaire`,
+        qdata
+    );
 }
 
 const SoftwareProductComponentImagesActionHelper = {
-	fetchImagesList(dispatch, {softwareProductId, componentId, version}) {
-		dispatch({
-			type: actionTypes.IMAGES_LIST_UPDATE,
-			response: []
-		});
-
-		return fetchImagesList({softwareProductId, componentId, version}).then((response) => {
-			dispatch({
-				type: actionTypes.IMAGES_LIST_UPDATE,
-				response: response.results,
-				componentId : componentId
-			});
-		});
-	},
-
-	deleteImage(dispatch, {softwareProductId, componentId, version, imageId}) {
-		return destroyImage({softwareProductId, componentId, version, imageId}).then(() => {
-			return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-		});
-	},
-
-	loadImageData({softwareProductId, componentId, imageId, version}) {
-		return fetchImage({softwareProductId, componentId, imageId, version});
-	},
-
-	openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) {
-		return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => {
-			SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, {
-				softwareProductId,
-				componentId,
-				imageId: image.id,
-				version
-			}).then(() => {
-				SoftwareProductComponentImagesActionHelper.openImageEditor(dispatch, {
-					softwareProductId,
-					componentId,
-					version,
-					isReadOnlyMode,
-					image,
-					data
-				});
-			});
-		});
-	},
-
-	openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) {
-
-		let {id} = image;
-		let title = id ?  i18n('Edit Image') : i18n('Create New Image');
-		let className = id ? 'image-modal-edit' : 'image-modal-new';
-
-		dispatch({
-			type: actionTypes.ImageEditor.OPEN,
-			image: {...data, id}
-		});
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
-				title: title,
-				modalClassName: className,
-				modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode}
-			}
-		});
-
-	},
-
-	closeImageEditor(dispatch) {
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-
-		dispatch({
-			type: actionTypes.ImageEditor.CLOSE
-		});
-
-	},
-
-	loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) {
-		return fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}).then((response) => {
-			ValidationHelper.qDataLoaded(dispatch, {qName: IMAGE_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}});
-		});
-	},
-
-	saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}) {
-		SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
-		if (data !== null && data.id) {
-			// editor in edit mode
-			return Promise.all([
-				saveImageQuestionnaire({softwareProductId, version, componentId, imageId: data.id, qdata}),
-				saveImage({softwareProductId, version, componentId, image: data}).then(() => {
-					return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-				})
-			]);
-		} else {
-			// editor in create mode
-			createImage({softwareProductId, componentId, version, data}).then(() => {
-				return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-			});
-		}
-	}
+    fetchImagesList(dispatch, { softwareProductId, componentId, version }) {
+        dispatch({
+            type: actionTypes.IMAGES_LIST_UPDATE,
+            response: []
+        });
+
+        return fetchImagesList({
+            softwareProductId,
+            componentId,
+            version
+        }).then(response => {
+            dispatch({
+                type: actionTypes.IMAGES_LIST_UPDATE,
+                response: response.results,
+                componentId: componentId
+            });
+        });
+    },
+
+    deleteImage(
+        dispatch,
+        { softwareProductId, componentId, version, imageId }
+    ) {
+        return destroyImage({
+            softwareProductId,
+            componentId,
+            version,
+            imageId
+        }).then(() => {
+            return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                dispatch,
+                { softwareProductId, componentId, version }
+            );
+        });
+    },
+
+    loadImageData({ softwareProductId, componentId, imageId, version }) {
+        return fetchImage({ softwareProductId, componentId, imageId, version });
+    },
+
+    openEditImageEditor(
+        dispatch,
+        { image, softwareProductId, componentId, version, isReadOnlyMode }
+    ) {
+        return SoftwareProductComponentImagesActionHelper.loadImageData({
+            softwareProductId,
+            componentId,
+            imageId: image.id,
+            version
+        }).then(({ data }) => {
+            SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    componentId,
+                    imageId: image.id,
+                    version
+                }
+            ).then(() => {
+                SoftwareProductComponentImagesActionHelper.openImageEditor(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        componentId,
+                        version,
+                        isReadOnlyMode,
+                        image,
+                        data
+                    }
+                );
+            });
+        });
+    },
+
+    openImageEditor(
+        dispatch,
+        {
+            image = {},
+            data = {},
+            softwareProductId,
+            componentId,
+            version,
+            isReadOnlyMode
+        }
+    ) {
+        let { id } = image;
+        let title = id ? i18n('Edit Image') : i18n('Create New Image');
+        let className = id ? 'image-modal-edit' : 'image-modal-new';
+
+        dispatch({
+            type: actionTypes.ImageEditor.OPEN,
+            image: { ...data, id }
+        });
+
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName:
+                    modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
+                title: title,
+                modalClassName: className,
+                modalComponentProps: {
+                    softwareProductId,
+                    componentId,
+                    version,
+                    isReadOnlyMode
+                }
+            }
+        });
+    },
+
+    closeImageEditor(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+
+        dispatch({
+            type: actionTypes.ImageEditor.CLOSE
+        });
+    },
+
+    loadImageQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, imageId, version }
+    ) {
+        return fetchImageQuestionnaire({
+            softwareProductId,
+            componentId,
+            imageId,
+            version
+        }).then(response => {
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: IMAGE_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            });
+        });
+    },
+
+    saveImageDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, version, data, qdata }
+    ) {
+        SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
+        if (data !== null && data.id) {
+            // editor in edit mode
+            return Promise.all([
+                saveImageQuestionnaire({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    imageId: data.id,
+                    qdata
+                }),
+                saveImage({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    image: data
+                }).then(() => {
+                    return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                        dispatch,
+                        { softwareProductId, componentId, version }
+                    );
+                })
+            ]);
+        } else {
+            // editor in create mode
+            createImage({ softwareProductId, componentId, version, data }).then(
+                () => {
+                    return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                        dispatch,
+                        { softwareProductId, componentId, version }
+                    );
+                }
+            );
+        }
+    }
 };
 
 export default SoftwareProductComponentImagesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
index 6b6c9a30e5..300b2898e1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
@@ -16,12 +16,12 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	IMAGES_LIST_UPDATE: null,
+    IMAGES_LIST_UPDATE: null,
 
-	ImageEditor: {
-		CLOSE: null,
-		OPEN: null
-	}
+    ImageEditor: {
+        CLOSE: null,
+        OPEN: null
+    }
 });
 
 export const IMAGE_QUESTIONNAIRE = 'image';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
index c5f23e7681..0243a38f1b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
@@ -13,56 +13,93 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js';
 
 export const mapStateToProps = ({
-	softwareProduct,
-	currentScreen: {props: {isReadOnlyMode}}
+    softwareProduct,
+    currentScreen: { props: { isReadOnlyMode } }
 }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
 
-	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
-
-	let {images: {imageEditor = {}}} = softwareProductComponents;
-	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor;
-	let {version, onboardingMethod} = currentSoftwareProduct;
-	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) &&  ValidationHelper.checkFormValid(qgenericFieldInfo);
-
-	return {
-		version,
-		currentSoftwareProduct,
-		isValidityData,
-		data,
-		qdata,
-		dataMap,
-		isFormValid,
-		formReady,
-		genericFieldInfo,
-		qgenericFieldInfo,
-		isReadOnlyMode,
-		isManual: isManual
-	};
+    let { images: { imageEditor = {} } } = softwareProductComponents;
+    let {
+        data,
+        qdata,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        dataMap,
+        formReady
+    } = imageEditor;
+    let { version, onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
+    let isFormValid =
+        ValidationHelper.checkFormValid(genericFieldInfo) &&
+        ValidationHelper.checkFormValid(qgenericFieldInfo);
 
+    return {
+        version,
+        currentSoftwareProduct,
+        isValidityData,
+        data,
+        qdata,
+        dataMap,
+        isFormValid,
+        formReady,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        isReadOnlyMode,
+        isManual: isManual
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}),
-		onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}),
-		onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch),
-		onValidateForm: customValidations => {
-			ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
-			ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations);
-		},
-		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: IMAGE_QUESTIONNAIRE, customValidations}),
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.IMAGE_EDIT_FORM
+            }),
+        onSubmit: ({ data, qdata }) =>
+            SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(
+                dispatch,
+                { softwareProductId, componentId, version, data, qdata }
+            ),
+        onCancel: () =>
+            SoftwareProductComponentsImageActionHelper.closeImageEditor(
+                dispatch
+            ),
+        onValidateForm: customValidations => {
+            ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
+            ValidationHelper.qValidateForm(
+                dispatch,
+                IMAGE_QUESTIONNAIRE,
+                customValidations
+            );
+        },
+        onQDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: IMAGE_QUESTIONNAIRE,
+                customValidations
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsImageEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentsImageEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
index 7c357429e5..3846d45772 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
@@ -13,30 +13,29 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.ImageEditor.CLOSE:
-			return {};
-		case actionTypes.ImageEditor.OPEN:
-			return {
-				...state,
-				data: {
-					...action.image
-				},
-				genericFieldInfo: {
-					'fileName' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				},
-				formName: forms.IMAGE_EDIT_FORM
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.ImageEditor.CLOSE:
+            return {};
+        case actionTypes.ImageEditor.OPEN:
+            return {
+                ...state,
+                data: {
+                    ...action.image
+                },
+                genericFieldInfo: {
+                    fileName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                },
+                formName: forms.IMAGE_EDIT_FORM
+            };
+        default:
+            return state;
+    }
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
index a5ef152e01..3670ab910d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
@@ -21,53 +21,81 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 
 import FileDetails from './imagesEditorComponents/FileDetails.jsx';
 import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
-import {imageCustomValidations} from './ImageValidations.js';
+import { imageCustomValidations } from './ImageValidations.js';
 
 class SoftwareProductComponentsImageEditorView extends React.Component {
-	static propTypes = {
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    static propTypes = {
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	render() {
-		let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, genericFieldInfo, qgenericFieldInfo, dataMap, onDataChanged, isManual, onQDataChanged} = this.props;
-		let {id, fileName} = data;
-		let editingMode = Boolean(id);
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref={(form) => { this.form = form; }}
-					hasButtons={true}
-					onSubmit={ () => this.submit() }
-					onReset={ () => onCancel() }
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					isValid={isFormValid}
-					formReady={formReady}
-					submitButtonText={editingMode ? i18n('Save') : i18n('Create')}
-					onValidateForm={() => onValidateForm(imageCustomValidations) }
-					className='vsp-components-image-editor'>
-					<div className='editor-data'>
-						<FileDetails
-							editingMode={editingMode}
-							genericFieldInfo={genericFieldInfo}
-							qgenericFieldInfo={qgenericFieldInfo}
-							fileName={fileName}
-							onDataChanged={onDataChanged}
-							isManual={isManual}
-							dataMap={dataMap}
-							onQDataChanged={onQDataChanged}/>
-						{editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
-					</div>
-				</Form>}
-			</div>
-		);
-	}
-	submit() {
-		let {data, qdata, onSubmit, version} = this.props;
-		onSubmit({data, qdata, version});
-	}
+    render() {
+        let {
+            onCancel,
+            onValidateForm,
+            isReadOnlyMode,
+            isFormValid,
+            formReady,
+            data = {},
+            genericFieldInfo,
+            qgenericFieldInfo,
+            dataMap,
+            onDataChanged,
+            isManual,
+            onQDataChanged
+        } = this.props;
+        let { id, fileName } = data;
+        let editingMode = Boolean(id);
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        submitButtonText={
+                            editingMode ? i18n('Save') : i18n('Create')
+                        }
+                        onValidateForm={() =>
+                            onValidateForm(imageCustomValidations)
+                        }
+                        className="vsp-components-image-editor">
+                        <div className="editor-data">
+                            <FileDetails
+                                editingMode={editingMode}
+                                genericFieldInfo={genericFieldInfo}
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                fileName={fileName}
+                                onDataChanged={onDataChanged}
+                                isManual={isManual}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            {editingMode && (
+                                <ImageDetails
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qgenericFieldInfo}
+                                    onQDataChanged={onQDataChanged}
+                                />
+                            )}
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
+    submit() {
+        let { data, qdata, onSubmit, version } = this.props;
+        onSubmit({ data, qdata, version });
+    }
 }
 
 export default SoftwareProductComponentsImageEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
index d071647058..f3c39c3048 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
@@ -13,73 +13,122 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx';
 import ImageHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsImagesActionHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        images: { imagesList = [] },
+        componentEditor: {
+            data: componentData,
+            qdata,
+            dataMap,
+            qgenericFieldInfo
+        }
+    } = softwareProductComponents;
+    let { onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
 
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
-	let {onboardingMethod} = currentSoftwareProduct;
-	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
-
-	return {
-		componentData,
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		isValidityData,
-		imagesList,
-		isManual : isManual
-	};
+    return {
+        componentData,
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        isValidityData,
+        imagesList,
+        isManual: isManual
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: COMPONENTS_QUESTIONNAIRE}),
-		onAddImage: (isReadOnlyMode) => {
-			SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch,
-				{isReadOnlyMode, softwareProductId,
-					componentId, version}
-			);},
-		onDeleteImage: (image) => {
-			let shortenedFileName = (image.fileName.length > 40) ? image.fileName.substr(0,40) + '...' : image.fileName;
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data: {
-					msg: i18n('Are you sure you want to delete "{shortenedFileName}"?', {shortenedFileName: shortenedFileName}),
-					onConfirmed: () => ImageHelper.deleteImage(dispatch, {
-						softwareProductId,
-						componentId,
-						version,
-						imageId: image.id
-					})
-				}
-			});
-		},
-		onEditImageClick: (image, isReadOnlyMode) => {
-			SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, {
-				image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'}
-			);
-		},
-		onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
-			{softwareProductId,
-				vspComponentId: componentId,
-				version,
-				qdata});
-		}
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onAddImage: isReadOnlyMode => {
+            SoftwareProductComponentsImagesActionHelper.openImageEditor(
+                dispatch,
+                {
+                    isReadOnlyMode,
+                    softwareProductId,
+                    componentId,
+                    version
+                }
+            );
+        },
+        onDeleteImage: image => {
+            let shortenedFileName =
+                image.fileName.length > 40
+                    ? image.fileName.substr(0, 40) + '...'
+                    : image.fileName;
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n(
+                        'Are you sure you want to delete "{shortenedFileName}"?',
+                        {
+                            shortenedFileName: shortenedFileName
+                        }
+                    ),
+                    onConfirmed: () =>
+                        ImageHelper.deleteImage(dispatch, {
+                            softwareProductId,
+                            componentId,
+                            version,
+                            imageId: image.id
+                        })
+                }
+            });
+        },
+        onEditImageClick: (image, isReadOnlyMode) => {
+            SoftwareProductComponentsImagesActionHelper.openEditImageEditor(
+                dispatch,
+                {
+                    image,
+                    isReadOnlyMode,
+                    softwareProductId,
+                    componentId,
+                    version,
+                    modalClassName: 'image-modal-edit'
+                }
+            );
+        },
+        onSubmit: qdata => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    vspComponentId: componentId,
+                    version,
+                    qdata
+                }
+            );
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsImageListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsImageListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
index 5dd2fb623b..a7c1bfafbe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
@@ -13,14 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-
-		case actionTypes.IMAGES_LIST_UPDATE:
-			return [...action.response];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.IMAGES_LIST_UPDATE:
+            return [...action.response];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
index 004cbebe5d..cb67856caa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
@@ -20,113 +20,152 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class SoftwareProductComponentsImageListView extends React.Component {
-	state = {
-		localFilter: ''
-	};
+    state = {
+        localFilter: ''
+    };
 
-	render() {
-		let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props;
-		return(
-			<div className='vsp-components-image'>
-				<div className='image-data'>
-					<div>
-						{ qgenericFieldInfo && <Form
-							formReady={null}
-							isValid={true}
-							onSubmit={() => this.save()}
-							isReadOnlyMode={isReadOnlyMode}
-							hasButtons={false}>
-
-							<h3 className='section-title'>{i18n('Image')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components'>
-									<div className='single-col'>
-										<Input
-											data-test-id='providedBy'
-											label={i18n('Image provided by')}
-											type='select'
-											isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
-											errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
-											value={dataMap['general/image/providedBy']}
-											onChange={(e) => {
-												const selectedIndex = e.target.selectedIndex;
-												const val = e.target.options[selectedIndex].value;
-												onQDataChanged({'general/image/providedBy' : val});}
-											}>
-											<option key='placeholder' value=''>{i18n('Select...')}</option>
-											{ qgenericFieldInfo['general/image/providedBy'].enum.map(proto =>
-												<option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
-										</Input>
-									</div>
-									<div className='empty-two-col' />
-								</div>
-							</div>
-
-						</Form> }
-					</div>
-				</div>
-	            {this.renderImagesList()}
+    render() {
+        let {
+            dataMap,
+            onQDataChanged,
+            isReadOnlyMode,
+            qgenericFieldInfo
+        } = this.props;
+        return (
+            <div className="vsp-components-image">
+                <div className="image-data">
+                    <div>
+                        {qgenericFieldInfo && (
+                            <Form
+                                formReady={null}
+                                isValid={true}
+                                onSubmit={() => this.save()}
+                                isReadOnlyMode={isReadOnlyMode}
+                                hasButtons={false}>
+                                <h3 className="section-title">
+                                    {i18n('Image')}
+                                </h3>
+                                <div className="rows-section">
+                                    <div className="row-flex-components">
+                                        <div className="single-col">
+                                            <Input
+                                                data-test-id="providedBy"
+                                                label={i18n(
+                                                    'Image provided by'
+                                                )}
+                                                type="select"
+                                                isValid={
+                                                    qgenericFieldInfo[
+                                                        'general/image/providedBy'
+                                                    ].isValid
+                                                }
+                                                errorText={
+                                                    qgenericFieldInfo[
+                                                        'general/image/providedBy'
+                                                    ].errorText
+                                                }
+                                                value={
+                                                    dataMap[
+                                                        'general/image/providedBy'
+                                                    ]
+                                                }
+                                                onChange={e => {
+                                                    const selectedIndex =
+                                                        e.target.selectedIndex;
+                                                    const val =
+                                                        e.target.options[
+                                                            selectedIndex
+                                                        ].value;
+                                                    onQDataChanged({
+                                                        'general/image/providedBy': val
+                                                    });
+                                                }}>
+                                                <option
+                                                    key="placeholder"
+                                                    value="">
+                                                    {i18n('Select...')}
+                                                </option>
+                                                {qgenericFieldInfo[
+                                                    'general/image/providedBy'
+                                                ].enum.map(proto => (
+                                                    <option
+                                                        value={proto.enum}
+                                                        key={proto.enum}>
+                                                        {proto.title}
+                                                    </option>
+                                                ))}
+                                            </Input>
+                                        </div>
+                                        <div className="empty-two-col" />
+                                    </div>
+                                </div>
+                            </Form>
+                        )}
+                    </div>
+                </div>
+                {this.renderImagesList()}
             </div>
-		);
-	};
-
-	renderImagesList() {
-		const {localFilter} = this.state;
-		let {isReadOnlyMode, onAddImage, isManual} = this.props;
-
-		return (
-			<ListEditorView
-				title={i18n('Images')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Images by Name')}
-				isReadOnlyMode={isReadOnlyMode}
-				onFilter={value => this.setState({localFilter: value})}
-				onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
-				plusButtonTitle={i18n('Add Image')}
-				twoColumns>
-				{this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	};
+        );
+    }
 
+    renderImagesList() {
+        const { localFilter } = this.state;
+        let { isReadOnlyMode, onAddImage, isManual } = this.props;
 
-	renderImagesListItem(image, isReadOnlyMode) {
-		let {id, fileName} = image;
-		let {onEditImageClick, isManual, onDeleteImage} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditImageClick(image, isReadOnlyMode)}
-				onDelete={isManual ? () => onDeleteImage(image) : null}>
+        return (
+            <ListEditorView
+                title={i18n('Images')}
+                filterValue={localFilter}
+                placeholder={i18n('Filter Images by Name')}
+                isReadOnlyMode={isReadOnlyMode}
+                onFilter={value => this.setState({ localFilter: value })}
+                onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
+                plusButtonTitle={i18n('Add Image')}
+                twoColumns>
+                {this.filterList().map(image =>
+                    this.renderImagesListItem(image, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-				<ListEditorItemViewField>
-					<div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
+    renderImagesListItem(image, isReadOnlyMode) {
+        let { id, fileName } = image;
+        let { onEditImageClick, isManual, onDeleteImage } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() => onEditImageClick(image, isReadOnlyMode)}
+                onDelete={isManual ? () => onDeleteImage(image) : null}>
+                <ListEditorItemViewField>
+                    <div className="image-filename-cell">
+                        <span className="image-filename">{fileName}</span>
+                    </div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {imagesList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return imagesList.filter(({fileName = ''}) => {
-				return escape(fileName).match(filter);
-			});
-		}
-		else {
-			return imagesList;
-		}
-	}
+    filterList() {
+        let { imagesList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return imagesList.filter(({ fileName = '' }) => {
+                return escape(fileName).match(filter);
+            });
+        } else {
+            return imagesList;
+        }
+    }
 
-	save() {
-		let {onSubmit, qdata} = this.props;
-		return onSubmit(qdata);
-	}
+    save() {
+        let { onSubmit, qdata } = this.props;
+        return onSubmit(qdata);
+    }
 }
 export default SoftwareProductComponentsImageListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
index 64367c00f2..ec173cd988 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
@@ -18,32 +18,64 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 import Format from './Format.jsx';
 import Version from './Version.jsx';
 
-const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => {
-	let fileNameCols = (editingMode) ? 3 : 4;
-	return(
-		<GridSection hasLastColSset>
-			<GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
-				<Input
-					disabled={!isManual}
-					onChange={fileName => onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)}
-					label={i18n('Image Name')}
-					data-test-id='image-filename'
-					value={fileName}
-					isValid={genericFieldInfo.fileName.isValid}
-					errorText={genericFieldInfo.fileName.errorText}
-					isRequired={true}
-					type='text'
-					className='image-filename'/>
-			</GridItem>
-			{!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>}
-			{editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
-			{editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
-		</GridSection>
-	);
+const FileDetails = ({
+    editingMode,
+    fileName,
+    onDataChanged,
+    isManual,
+    dataMap,
+    onQDataChanged,
+    genericFieldInfo,
+    qgenericFieldInfo
+}) => {
+    let fileNameCols = editingMode ? 3 : 4;
+    return (
+        <GridSection hasLastColSset>
+            <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
+                <Input
+                    disabled={!isManual}
+                    onChange={fileName =>
+                        onDataChanged({ fileName }, forms.IMAGE_EDIT_FORM)
+                    }
+                    label={i18n('Image Name')}
+                    data-test-id="image-filename"
+                    value={fileName}
+                    isValid={genericFieldInfo.fileName.isValid}
+                    errorText={genericFieldInfo.fileName.errorText}
+                    isRequired={true}
+                    type="text"
+                    className="image-filename"
+                />
+            </GridItem>
+            {!editingMode && (
+                <div className="note-text">
+                    {i18n(
+                        'After image creation you must go to Edit Image and add File Version'
+                    )}
+                </div>
+            )}
+            {editingMode && (
+                <Version
+                    isManual={isManual}
+                    dataMap={dataMap}
+                    qgenericFieldInfo={qgenericFieldInfo}
+                    onQDataChanged={onQDataChanged}
+                />
+            )}
+            {editingMode && (
+                <Format
+                    isManual={isManual}
+                    qgenericFieldInfo={qgenericFieldInfo}
+                    dataMap={dataMap}
+                    onQDataChanged={onQDataChanged}
+                />
+            )}
+        </GridSection>
+    );
 };
 export default FileDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
index 1f71c6b277..0ee8fb76d0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
@@ -18,30 +18,34 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-
-const Format = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridItem colSpan={2}>
-			<Input
-				disabled={!isManual}
-				data-test-id='image-format'
-				type='select'
-				label={i18n('Format')}
-				className='input-options-select'
-				groupClassName='bootstrap-input-options'
-				isValid={qgenericFieldInfo['format'].isValid}
-				errorText={qgenericFieldInfo['format'].errorText}
-				value={dataMap['format']}
-				onChange={(e) => {
-					const selectedIndex = e.target.selectedIndex;
-					const val = e.target.options[selectedIndex].value;
-					onQDataChanged({'format' : val});}
-				}>
-				<option key='placeholder' value=''>{i18n('Select...')}</option>
-				{qgenericFieldInfo['format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
-			</Input>
-		</GridItem>
-	);
+const Format = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridItem colSpan={2}>
+            <Input
+                disabled={!isManual}
+                data-test-id="image-format"
+                type="select"
+                label={i18n('Format')}
+                className="input-options-select"
+                groupClassName="bootstrap-input-options"
+                isValid={qgenericFieldInfo['format'].isValid}
+                errorText={qgenericFieldInfo['format'].errorText}
+                value={dataMap['format']}
+                onChange={e => {
+                    const selectedIndex = e.target.selectedIndex;
+                    const val = e.target.options[selectedIndex].value;
+                    onQDataChanged({ format: val });
+                }}>
+                <option key="placeholder" value="">
+                    {i18n('Select...')}
+                </option>
+                {qgenericFieldInfo['format'].enum.map(hv => (
+                    <option value={hv.enum} key={hv.enum}>
+                        {hv.title}
+                    </option>
+                ))}
+            </Input>
+        </GridItem>
+    );
 };
 export default Format;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
index 24e54bbbcb..ccf94bc860 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
@@ -19,21 +19,22 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const ImageDetails = ({dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('Image Details')}>
-			<GridItem colSpan={2}>
-				<Input
-					data-test-id='image-md5'
-					className='image-md5'
-					type='text'
-					label={i18n('md5')}
-					onChange={(md5) => onQDataChanged({'md5' : md5})}
-					isValid={qgenericFieldInfo['md5'].isValid}
-					errorText={qgenericFieldInfo['md5'].errorText}
-					value={dataMap['md5']}/>
-			</GridItem>
-		</GridSection>
-	);
+const ImageDetails = ({ dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('Image Details')}>
+            <GridItem colSpan={2}>
+                <Input
+                    data-test-id="image-md5"
+                    className="image-md5"
+                    type="text"
+                    label={i18n('md5')}
+                    onChange={md5 => onQDataChanged({ md5: md5 })}
+                    isValid={qgenericFieldInfo['md5'].isValid}
+                    errorText={qgenericFieldInfo['md5'].errorText}
+                    value={dataMap['md5']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 export default ImageDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
index bd55c5ba91..60454c52e7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
@@ -17,25 +17,29 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {imageCustomValidations} from '../ImageValidations.js';
+import { imageCustomValidations } from '../ImageValidations.js';
 
-
-const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridItem colSpan={1} lastColInRow>
-			<Input
-				disabled={!isManual}
-				data-test-id='image-version'
-				type='text'
-				className='image-version'
-				label={i18n('Version')}
-				isRequired={true}
-				onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})}
-				isValid={qgenericFieldInfo['version'].isValid}
-				errorText={qgenericFieldInfo['version'].errorText}
-				value={dataMap['version']}/>
-		</GridItem>
-	);
+const Version = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridItem colSpan={1} lastColInRow>
+            <Input
+                disabled={!isManual}
+                data-test-id="image-version"
+                type="text"
+                className="image-version"
+                label={i18n('Version')}
+                isRequired={true}
+                onChange={version =>
+                    onQDataChanged(
+                        { version: version },
+                        { version: imageCustomValidations['version'] }
+                    )
+                }
+                isValid={qgenericFieldInfo['version'].isValid}
+                errorText={qgenericFieldInfo['version'].errorText}
+                value={dataMap['version']}
+            />
+        </GridItem>
+    );
 };
 export default Version;
-