Adding Prettier and fixing up eslint version

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

376 files changed, 31985 insertions, 21524 deletions

diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
index c15cd1d0e8..56382d6325 100644
--- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
+++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
@@ -13,11 +13,11 @@
  * 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 ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import {Collapse} from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
 /**
  * parsing and showing the following Java Response object
  *
@@ -42,121 +42,151 @@ import {Collapse} from 'react-bootstrap';
     }
  */
 class SubmitErrorResponse extends Component {
+    render() {
+        let {
+            validationResponse: {
+                vspErrors,
+                licensingDataErrors,
+                questionnaireValidationResult,
+                uploadDataErrors
+            }
+        } = this.props;
+        return (
+            <div className="submit-error-response-view">
+                {vspErrors && this.renderVspErrors(vspErrors)}
+                {licensingDataErrors &&
+                    this.renderVspErrors(licensingDataErrors)}
+                {questionnaireValidationResult &&
+                    this.renderComponentsErrors(questionnaireValidationResult)}
+                {uploadDataErrors &&
+                    this.renderUploadDataErrors(uploadDataErrors)}
+            </div>
+        );
+    }
 
+    renderVspErrors(errors) {
+        return (
+            <ErrorBlock errorType={i18n('VSP Errors')}>
+                <div>
+                    {errors.length &&
+                        errors.map((error, i) => {
+                            return (
+                                <ErrorMessage key={i} error={error.message} />
+                            );
+                        })}
+                </div>
+            </ErrorBlock>
+        );
+    }
 
-	render() {
-		let {validationResponse : {vspErrors, licensingDataErrors, questionnaireValidationResult, uploadDataErrors}} = this.props;
-		return (
-			<div className='submit-error-response-view'>
-				{vspErrors && this.renderVspErrors(vspErrors)}
-				{licensingDataErrors && this.renderVspErrors(licensingDataErrors)}
-				{questionnaireValidationResult && this.renderComponentsErrors(questionnaireValidationResult)}
-				{uploadDataErrors && this.renderUploadDataErrors(uploadDataErrors)}
-			</div>
-		);
-	}
-
-	renderVspErrors(errors) {
-		return (
-			<ErrorBlock errorType={i18n('VSP Errors')}>
-				<div>
-					{errors.length && errors.map((error, i) => {return (<ErrorMessage key={i} error={error.message}/>);})}
-				</div>
-			</ErrorBlock>
-		);
-	}
-
-
-	renderComponentsErrors(errors) {
-		return (
-			<ErrorBlock errorType={i18n('Components Errors')}>
-				<div>
-					{errors.validationData.length && errors.validationData.map((item, i) =>{ return (<ComponentError key={i} item={item}/>);})}
-				</div>
-			</ErrorBlock>
-		);
-	}
+    renderComponentsErrors(errors) {
+        return (
+            <ErrorBlock errorType={i18n('Components Errors')}>
+                <div>
+                    {errors.validationData.length &&
+                        errors.validationData.map((item, i) => {
+                            return <ComponentError key={i} item={item} />;
+                        })}
+                </div>
+            </ErrorBlock>
+        );
+    }
 
-	renderUploadDataErrors(uploadDataErrors) {
-		return (
-			<ErrorBlock errorType={i18n('Upload Data Errors')}>
-				<div>
-					<UploadErrorList items={uploadDataErrors}/>
-				</div>
-			</ErrorBlock>
-		);
-	}
+    renderUploadDataErrors(uploadDataErrors) {
+        return (
+            <ErrorBlock errorType={i18n('Upload Data Errors')}>
+                <div>
+                    <UploadErrorList items={uploadDataErrors} />
+                </div>
+            </ErrorBlock>
+        );
+    }
 }
 
-
-const ComponentError = ({item}) => {
-	return (
-		<div>
-			<div className='component-name-header'>{item.entityName}</div>
-			{item.errors.map((error, i) => {return(<ErrorMessage key={i} error={error}/>);})}
-		</div>
-	);
+const ComponentError = ({ item }) => {
+    return (
+        <div>
+            <div className="component-name-header">{item.entityName}</div>
+            {item.errors.map((error, i) => {
+                return <ErrorMessage key={i} error={error} />;
+            })}
+        </div>
+    );
 };
 
 function* entries(obj) {
-	for (let key of Object.keys(obj)) {
-		yield {header: key, list: obj[key]};
-	}
+    for (let key of Object.keys(obj)) {
+        yield { header: key, list: obj[key] };
+    }
 }
 
-const UploadErrorList = ({items}) => {
-	let generator = entries(items);
-
-	let errors = [];
-	for (let item of generator) {errors.push(
-		<div key={item.header}>
-			<div className='component-name-header'>{item.header}</div>
-			{item.list.map((error, i) => <ErrorMessage key={i} warning={error.level === 'WARNING'} error={error.message}/> )}
-		</div>
-	);}
+const UploadErrorList = ({ items }) => {
+    let generator = entries(items);
+
+    let errors = [];
+    for (let item of generator) {
+        errors.push(
+            <div key={item.header}>
+                <div className="component-name-header">{item.header}</div>
+                {item.list.map((error, i) => (
+                    <ErrorMessage
+                        key={i}
+                        warning={error.level === 'WARNING'}
+                        error={error.message}
+                    />
+                ))}
+            </div>
+        );
+    }
 
-	return (
-		<div>
-			{errors}
-		</div>
-	);
+    return <div>{errors}</div>;
 };
 
 class ErrorBlock extends React.Component {
-	state = {
-		collapsed: false
-	};
-
-	render() {
-		let {errorType, children} = this.props;
-		return (
-			<div className='error-block'>
-				<ErrorHeader collapsed={this.state.collapsed} onClick={()=>{this.setState({collapsed: !this.state.collapsed});}} errorType={errorType}/>
-				<Collapse in={this.state.collapsed}>
-					{children}
-				</Collapse>
-			</div>
-		);
-	}
+    state = {
+        collapsed: false
+    };
+
+    render() {
+        let { errorType, children } = this.props;
+        return (
+            <div className="error-block">
+                <ErrorHeader
+                    collapsed={this.state.collapsed}
+                    onClick={() => {
+                        this.setState({ collapsed: !this.state.collapsed });
+                    }}
+                    errorType={errorType}
+                />
+                <Collapse in={this.state.collapsed}>{children}</Collapse>
+            </div>
+        );
+    }
 }
 
-const ErrorHeader = ({errorType, collapsed, onClick}) => {
-	return(
-		<div onClick={onClick} className='error-block-header'>
-			<SVGIcon iconClassName={collapsed ? '' : 'collapse-right' } name='chevronDown' label={errorType} labelPosition='right'/>
-		</div>
-	);
+const ErrorHeader = ({ errorType, collapsed, onClick }) => {
+    return (
+        <div onClick={onClick} className="error-block-header">
+            <SVGIcon
+                iconClassName={collapsed ? '' : 'collapse-right'}
+                name="chevronDown"
+                label={errorType}
+                labelPosition="right"
+            />
+        </div>
+    );
 };
 
-const ErrorMessage = ({error, warning}) => {
-	return (
-		<ListGroupItem className='error-code-list-item'>
-			<SVGIcon
-				name={warning ? 'exclamationTriangleLine' : 'error'}
-				color={warning ? 'warning' : 'negative'} />
-			<span className='icon-label'>{error}</span>
-		</ListGroupItem>
-	);
+const ErrorMessage = ({ error, warning }) => {
+    return (
+        <ListGroupItem className="error-code-list-item">
+            <SVGIcon
+                name={warning ? 'exclamationTriangleLine' : 'error'}
+                color={warning ? 'warning' : 'negative'}
+            />
+            <span className="icon-label">{error}</span>
+        </ListGroupItem>
+    );
 };
 
 export default SubmitErrorResponse;
diff --git a/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
index ac19072307..72f8de0d23 100644
--- a/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
+++ b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
@@ -4,9 +4,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,35 +18,38 @@ import React from 'react';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import PropTypes from 'prop-types';
 
-
 class Accordion extends React.Component {
+    static propTypes = {
+        title: PropTypes.string,
+        children: PropTypes.node
+    };
 
-	static propTypes = {
-		title: PropTypes.string,
-		children: PropTypes.node
-	}
-
-	constructor(props) {
-		super(props);
-		this.state = {
-			open: false
-		};
-	}
-	render() {
-		const {children, title} = this.props; 
-		const {open} = this.state;
-		return (
-			<div className='accordion'>
-				<div onClick={()=>this.setState({open: !open})} className='accordion-header'>
-					<SVGIcon name='chevronUp' iconClassName={open ? 'down' : ''}/>		
-					<div className='title'>{title}</div>
-				</div>
-				<div className={`accordion-body ${open ? 'open' : ''}`}>
-					{children}
-				</div>
-			</div>
-		);
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false
+        };
+    }
+    render() {
+        const { children, title } = this.props;
+        const { open } = this.state;
+        return (
+            <div className="accordion">
+                <div
+                    onClick={() => this.setState({ open: !open })}
+                    className="accordion-header">
+                    <SVGIcon
+                        name="chevronUp"
+                        iconClassName={open ? 'down' : ''}
+                    />
+                    <div className="title">{title}</div>
+                </div>
+                <div className={`accordion-body ${open ? 'open' : ''}`}>
+                    {children}
+                </div>
+            </div>
+        );
+    }
 }
 
-export default Accordion;
\ No newline at end of file
+export default Accordion;
diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
index 25e7e7e02d..b4bc8be9ec 100644
--- a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
+++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
@@ -5,72 +5,105 @@ import moment from 'moment';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
 class CustomInput extends React.Component {
+    static propTypes = {
+        placeHolderText: PropTypes.string,
+        onChange: PropTypes.func,
+        onClick: PropTypes.func,
+        value: PropTypes.string
+    };
 
-	static propTypes = {
-		placeHolderText: PropTypes.string,
-		onChange: PropTypes.func,
-		onClick: PropTypes.func,
-		value: PropTypes.string
-	};
-
-	render() {
-		const {placeholderText, onClick, onClear, inputRef, value: date} = this.props;
-		const text = date ? date : placeholderText;
-		const textStyle = date ? '' : 'placeholder';
-		return (
-			<div onClick={onClick} ref={inputRef} className='datepicker-custom-input'>
-				<div  className={`datepicker-text ${textStyle}`}>{text}</div>
-				{date && <SVGIcon onClick={e => {e.stopPropagation(); onClear();}} name='close' className='clear-input'/>}
-				<SVGIcon name='calendar'/>
-			</div>
-		);
-	}
-};
+    render() {
+        const {
+            placeholderText,
+            onClick,
+            onClear,
+            inputRef,
+            value: date
+        } = this.props;
+        const text = date ? date : placeholderText;
+        const textStyle = date ? '' : 'placeholder';
+        return (
+            <div
+                onClick={onClick}
+                ref={inputRef}
+                className="datepicker-custom-input">
+                <div className={`datepicker-text ${textStyle}`}>{text}</div>
+                {date && (
+                    <SVGIcon
+                        onClick={e => {
+                            e.stopPropagation();
+                            onClear();
+                        }}
+                        name="close"
+                        className="clear-input"
+                    />
+                )}
+                <SVGIcon name="calendar" />
+            </div>
+        );
+    }
+}
 
 const parseDate = (date, format) => {
-	return typeof date === 'number' ? moment.unix(date) : moment(date, format);
+    return typeof date === 'number' ? moment.unix(date) : moment(date, format);
 };
 
 class Datepicker extends React.Component {
-	static propTypes = {
-		date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-		format: PropTypes.string,
-		onChange: PropTypes.func,
-		selectsStart: PropTypes.bool,
-		selectsEnd: PropTypes.bool,
-		startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-		endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-		disabled: PropTypes.bool,
-		label: PropTypes.string,
-		isRequired: PropTypes.bool
-	}
-	render() {
-		let {date,  format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false,
-			disabled = false, inputRef} = this.props;
-		const placeholderText =  'Enter a date';
-		const props = {
-			format,
-			onChange,
-			disabled,
-			selected: date ? parseDate(date, format) : date,
-			selectsStart,
-			selectsEnd,
-			placeholderText,
-			startDate: startDate ? parseDate(startDate, format) : startDate,
-			endDate: endDate ? parseDate(endDate, format) : endDate
-		};
+    static propTypes = {
+        date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        format: PropTypes.string,
+        onChange: PropTypes.func,
+        selectsStart: PropTypes.bool,
+        selectsEnd: PropTypes.bool,
+        startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        disabled: PropTypes.bool,
+        label: PropTypes.string,
+        isRequired: PropTypes.bool
+    };
+    render() {
+        let {
+            date,
+            format,
+            onChange,
+            selectsStart = false,
+            startDate = null,
+            endDate = null,
+            selectsEnd = false,
+            disabled = false,
+            inputRef
+        } = this.props;
+        const placeholderText = 'Enter a date';
+        const props = {
+            format,
+            onChange,
+            disabled,
+            selected: date ? parseDate(date, format) : date,
+            selectsStart,
+            selectsEnd,
+            placeholderText,
+            startDate: startDate ? parseDate(startDate, format) : startDate,
+            endDate: endDate ? parseDate(endDate, format) : endDate
+        };
 
-		return (
-			<div className='customized-date-picker'>
-				<DatePicker
-					calendarClassName='customized-date-picker-calendar'
-					customInput={<CustomInput inputRef={inputRef} onClear={() => onChange(undefined)} placeholderText={placeholderText}/>}
-					minDate={selectsEnd && props.startDate}
-					maxDate={selectsStart && props.endDate}
-					{...props}/>
-			</div>
-		);
-	}
+        return (
+            <div className="customized-date-picker">
+                <DatePicker
+                    calendarClassName="customized-date-picker-calendar"
+                    customInput={
+                        <CustomInput
+                            inputRef={inputRef}
+                            onClear={() => onChange(undefined)}
+                            placeholderText={placeholderText}
+                        />
+                    }
+                    minDate={selectsEnd && props.startDate}
+                    maxDate={selectsStart && props.endDate}
+                    {...props}
+                />
+            </div>
+        );
+    }
 }
 
 export default Datepicker;
diff --git a/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
index 3c9ceed0d8..9fcd7042bc 100644
--- a/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
+++ b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
@@ -20,79 +20,106 @@ import VersionController from 'nfvo-components/panel/versionController/VersionCo
 import NavigationSideBar from 'nfvo-components/panel/NavigationSideBar.jsx';
 
 export default class TabulatedEditor extends React.Component {
+    render() {
+        const {
+            navigationBarProps,
+            onToggle,
+            onVersionSwitching,
+            onMoreVersionsClick,
+            onCreate,
+            onSave,
+            onClose,
+            onVersionControllerAction,
+            onNavigate,
+            children,
+            meta,
+            onManagePermissions,
+            onOpenCommentCommitModal,
+            onOpenPermissions,
+            onOpenRevisionsModal
+        } = this.props;
+        let { versionControllerProps } = this.props;
+        const { className = '' } = React.Children.only(children).props;
+        const child = this.prepareChild();
 
-	render() {
-		const {navigationBarProps, onToggle, onVersionSwitching, onMoreVersionsClick, onCreate, onSave, onClose,
-				onVersionControllerAction, onNavigate, children, meta, onManagePermissions, onOpenCommentCommitModal, onOpenPermissions, onOpenRevisionsModal} = this.props;
-		let {versionControllerProps} = this.props;
-		const {className = ''} = React.Children.only(children).props;
-		const child = this.prepareChild();
+        if (onClose) {
+            versionControllerProps = {
+                ...versionControllerProps,
+                onClose: () => onClose(versionControllerProps)
+            };
+        }
+        return (
+            <div className="software-product-view">
+                <div className="software-product-navigation-side-bar">
+                    <NavigationSideBar
+                        {...navigationBarProps}
+                        onSelect={onNavigate}
+                        onToggle={onToggle}
+                    />
+                </div>
+                <div className="software-product-landing-view-right-side flex-column">
+                    <VersionController
+                        {...versionControllerProps}
+                        onVersionSwitching={version =>
+                            onVersionSwitching(version, meta)
+                        }
+                        onMoreVersionsClick={onMoreVersionsClick}
+                        onManagePermissions={onManagePermissions}
+                        onOpenCommentCommitModal={onOpenCommentCommitModal}
+                        onOpenPermissions={onOpenPermissions}
+                        onOpenRevisionsModal={onOpenRevisionsModal}
+                        callVCAction={(action, version, comment) =>
+                            onVersionControllerAction(
+                                action,
+                                version,
+                                comment,
+                                meta
+                            )
+                        }
+                        onCreate={onCreate && this.handleCreate}
+                        onSave={onSave && this.handleSave}
+                    />
+                    <div className={classnames('content-area', `${className}`)}>
+                        {child}
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
-		if(onClose) {
-			versionControllerProps = {
-				...versionControllerProps,
-				onClose: () => onClose(versionControllerProps)
-			};
-		}
-		return (
-			<div className='software-product-view'>
-				<div className='software-product-navigation-side-bar'>
-					<NavigationSideBar {...navigationBarProps} onSelect={onNavigate} onToggle={onToggle}/>
-				</div>
-				<div className='software-product-landing-view-right-side flex-column'>
-					<VersionController
-						{...versionControllerProps}
-						onVersionSwitching={version => onVersionSwitching(version, meta)}
-						onMoreVersionsClick={onMoreVersionsClick}
-						onManagePermissions={onManagePermissions}
-						onOpenCommentCommitModal={onOpenCommentCommitModal}
-						onOpenPermissions={onOpenPermissions}
-						onOpenRevisionsModal={onOpenRevisionsModal}
-						callVCAction={(action, version, comment) => onVersionControllerAction(action, version, comment, meta)}
-						onCreate={onCreate && this.handleCreate}
-						onSave={onSave && this.handleSave}/>
-					<div className={classnames('content-area', `${className}`)}>
-					{
-						child
-					}
-					</div>
-				</div>
-			</div>
-		);
-	}
+    prepareChild() {
+        const { onSave, onCreate, children } = this.props;
 
-	prepareChild() {
-		const {onSave, onCreate, children} = this.props;
+        const additionalChildProps = { ref: 'editor' };
+        if (onSave) {
+            additionalChildProps.onSave = onSave;
+        }
+        if (onCreate) {
+            additionalChildProps.onCreate = onCreate;
+        }
 
-		const additionalChildProps = {ref: 'editor'};
-		if (onSave) {
-			additionalChildProps.onSave = onSave;
-		}
-		if (onCreate) {
-			additionalChildProps.onCreate = onCreate;
-		}
+        const child = React.cloneElement(
+            React.Children.only(children),
+            additionalChildProps
+        );
+        return child;
+    }
 
-		const child = React.cloneElement(React.Children.only(children), additionalChildProps);
-		return child;
-	}
+    handleSave = () => {
+        const childInstance = this.refs.editor.getWrappedInstance();
+        if (childInstance.save) {
+            return childInstance.save();
+        } else {
+            return this.props.onSave();
+        }
+    };
 
-
-
-	handleSave = () => {
-		const childInstance = this.refs.editor.getWrappedInstance();
-		if (childInstance.save) {
-			return childInstance.save();
-		} else {
-			return this.props.onSave();
-		}
-	};
-
-	handleCreate = () => {
-		const childInstance = this.refs.editor.getWrappedInstance();
-		if (childInstance.create) {
-			childInstance.create();
-		} else {
-			this.props.onCreate();
-		}
-	}
+    handleCreate = () => {
+        const childInstance = this.refs.editor.getWrappedInstance();
+        if (childInstance.create) {
+            childInstance.create();
+        } else {
+            this.props.onCreate();
+        }
+    };
 }
diff --git a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
index 5b4e0a8bee..0d47d859d9 100644
--- a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
+++ b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
@@ -26,20 +26,33 @@
  * or
  * https://github.com/JedWatson/react-select
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Button from 'sdc-ui/lib/react/Button.js';
 
 class DraggableUploadFileBox extends Component {
-	render() {
-		let {className, onClick, dataTestId, isReadOnlyMode} = this.props;
-		return (
-			<div className={`file-upload-box ${className} ${isReadOnlyMode ? 'disabled' : ''}`}>
-				<div className={`drag-text ${isReadOnlyMode ? 'disabled' : ''}`}>{i18n('Drag & drop for upload')}</div>
-				<div className='or-text'>{i18n('or')}</div>
-				<Button type='button' data-test-id={dataTestId} btnType='outline' onClick={onClick} disabled={isReadOnlyMode}>{i18n('Select File')}</Button>
-			</div>
-		);
-	}
+    render() {
+        let { className, onClick, dataTestId, isReadOnlyMode } = this.props;
+        return (
+            <div
+                className={`file-upload-box ${className} ${
+                    isReadOnlyMode ? 'disabled' : ''
+                }`}>
+                <div
+                    className={`drag-text ${isReadOnlyMode ? 'disabled' : ''}`}>
+                    {i18n('Drag & drop for upload')}
+                </div>
+                <div className="or-text">{i18n('or')}</div>
+                <Button
+                    type="button"
+                    data-test-id={dataTestId}
+                    btnType="outline"
+                    onClick={onClick}
+                    disabled={isReadOnlyMode}>
+                    {i18n('Select File')}
+                </Button>
+            </div>
+        );
+    }
 }
 export default DraggableUploadFileBox;
diff --git a/openecomp-ui/src/nfvo-components/grid/GridItem.jsx b/openecomp-ui/src/nfvo-components/grid/GridItem.jsx
index c62e042bf4..9723cde2c0 100644
--- a/openecomp-ui/src/nfvo-components/grid/GridItem.jsx
+++ b/openecomp-ui/src/nfvo-components/grid/GridItem.jsx
@@ -15,12 +15,21 @@
  */
 import React from 'react';
 
-const GridItem = ({colSpan = 1, children, lastColInRow = false, stretch = false, className = ''}) => (
-	<div className={`grid-col-${colSpan} ${lastColInRow ? 'last-col-in-row' : ''} ${className}`}>
-		<div className={`grid-item${stretch ? '-stretch' : ''}`}>
-			{children}
-		</div>
-	</div>
+const GridItem = ({
+    colSpan = 1,
+    children,
+    lastColInRow = false,
+    stretch = false,
+    className = ''
+}) => (
+    <div
+        className={`grid-col-${colSpan} ${
+            lastColInRow ? 'last-col-in-row' : ''
+        } ${className}`}>
+        <div className={`grid-item${stretch ? '-stretch' : ''}`}>
+            {children}
+        </div>
+    </div>
 );
 
 export default GridItem;
diff --git a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
index 8f4a024fdb..f2e3588d9e 100644
--- a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
+++ b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
@@ -17,21 +17,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const GridSection = ({title, children, className = '', titleClassName, hasLastColSet = false}) => {
-	return (
-		<div className={classnames('grid-section', className, {'has-last-col-set': hasLastColSet})}>
-			{title && <div className={`section-title ${titleClassName || ''}`}>{title}</div>}
-			<div className='grid-items'>
-				{children}
-			</div>
-		</div>
-	);
+const GridSection = ({
+    title,
+    children,
+    className = '',
+    titleClassName,
+    hasLastColSet = false
+}) => {
+    return (
+        <div
+            className={classnames('grid-section', className, {
+                'has-last-col-set': hasLastColSet
+            })}>
+            {title && (
+                <div className={`section-title ${titleClassName || ''}`}>
+                    {title}
+                </div>
+            )}
+            <div className="grid-items">{children}</div>
+        </div>
+    );
 };
 
 GridSection.propTypes = {
-	title: PropTypes.string,
-	titleClassName: PropTypes.string,
-	hasLastColSet: PropTypes.bool
+    title: PropTypes.string,
+    titleClassName: PropTypes.string,
+    hasLastColSet: PropTypes.bool
 };
 
 export default GridSection;
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index 82fbe1deed..3973ae8c5d 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -19,99 +19,118 @@ import ReactDOM from 'react-dom';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
-const ExpandableInputClosed = ({iconType, onClick}) => (
-	<SVGIcon className='expandable-input-wrapper closed'  data-test-id='expandable-input-closed' name={iconType} onClick={onClick} />
+const ExpandableInputClosed = ({ iconType, onClick }) => (
+    <SVGIcon
+        className="expandable-input-wrapper closed"
+        data-test-id="expandable-input-closed"
+        name={iconType}
+        onClick={onClick}
+    />
 );
 
 class ExpandableInputOpened extends React.Component {
-	componentDidMount(){
-		this.rawDomNode = ReactDOM.findDOMNode(this.searchInputNode.inputWrapper);
-		this.rawDomNode.focus();
-	}
+    componentDidMount() {
+        this.rawDomNode = ReactDOM.findDOMNode(
+            this.searchInputNode.inputWrapper
+        );
+        this.rawDomNode.focus();
+    }
 
-	componentWillReceiveProps(newProps){
-		if (!newProps.value){
-			if (!(document.activeElement === this.rawDomNode)){
-				this.props.handleBlur();
-			}
-		}
-	}
+    componentWillReceiveProps(newProps) {
+        if (!newProps.value) {
+            if (!(document.activeElement === this.rawDomNode)) {
+                this.props.handleBlur();
+            }
+        }
+    }
 
-	handleClose(){
-		this.props.onChange('');
-		this.rawDomNode.focus();
-	}
+    handleClose() {
+        this.props.onChange('');
+        this.rawDomNode.focus();
+    }
 
-	handleKeyDown(e){
-		if (e.key === 'Escape'){
-			e.preventDefault();
-			if (this.props.value) {
-				this.handleClose();
-			} else {
-				this.rawDomNode.blur();
-			}
-		};
-	}
+    handleKeyDown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            if (this.props.value) {
+                this.handleClose();
+            } else {
+                this.rawDomNode.blur();
+            }
+        }
+    }
 
-	render() {
-		let {iconType, value, onChange, handleBlur} = this.props;
-		return (
-				<div className='expandable-input-wrapper opened' key='expandable'>
-					<Input
-						type='text'
-						data-test-id='expandable-input-opened'
-						value={value}
-						ref={(input) => this.searchInputNode = input}
-						className='expandable-active'
-						groupClassName='expandable-input-control'
-						onChange={e => onChange(e)}
-						onKeyDown={e => this.handleKeyDown(e)}
-						onBlur={handleBlur}/>
-					{value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
-					{!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
-				</div>
-		);
-	}
+    render() {
+        let { iconType, value, onChange, handleBlur } = this.props;
+        return (
+            <div className="expandable-input-wrapper opened" key="expandable">
+                <Input
+                    type="text"
+                    data-test-id="expandable-input-opened"
+                    value={value}
+                    ref={input => (this.searchInputNode = input)}
+                    className="expandable-active"
+                    groupClassName="expandable-input-control"
+                    onChange={e => onChange(e)}
+                    onKeyDown={e => this.handleKeyDown(e)}
+                    onBlur={handleBlur}
+                />
+                {value && (
+                    <SVGIcon
+                        data-test-id="expandable-input-close-btn"
+                        onClick={() => this.handleClose()}
+                        name="close"
+                    />
+                )}
+                {!value && <SVGIcon name={iconType} onClick={handleBlur} />}
+            </div>
+        );
+    }
 }
 
 class ExpandableInput extends React.Component {
+    static propTypes = {
+        iconType: PropTypes.string,
+        onChange: PropTypes.func,
+        value: PropTypes.string
+    };
 
-	static propTypes = {
-		iconType: PropTypes.string,
-		onChange: PropTypes.func,
-		value: PropTypes.string
-	};
+    state = { showInput: false };
 
-	state = {showInput: false};
+    closeInput() {
+        if (!this.props.value) {
+            this.setState({ showInput: false });
+        }
+    }
 
-	closeInput(){
-		if (!this.props.value) {
-			this.setState({showInput: false});
-		}
-	}
+    getValue() {
+        return this.props.value;
+    }
 
-	getValue(){
-		return this.props.value;
-	}
-
-	render(){
-		let {iconType, value, onChange = false} = this.props;
-		return (
-			<div className='expandable-input-top'>
-				{this.state.showInput &&
-					<ExpandableInputOpened
-						key='open'
-						iconType={iconType}
-						onChange={onChange}
-						value={value}
-						handleKeyDown={(e) => this.handleKeyDown(e)}
-						handleBlur={() => this.closeInput()}/>
-				}
-				{!this.state.showInput && <ExpandableInputClosed key='closed' iconType={iconType} onClick={() => this.setState({showInput: true})} />}
-			</div>
-				);
-	}
+    render() {
+        let { iconType, value, onChange = false } = this.props;
+        return (
+            <div className="expandable-input-top">
+                {this.state.showInput && (
+                    <ExpandableInputOpened
+                        key="open"
+                        iconType={iconType}
+                        onChange={onChange}
+                        value={value}
+                        handleKeyDown={e => this.handleKeyDown(e)}
+                        handleBlur={() => this.closeInput()}
+                    />
+                )}
+                {!this.state.showInput && (
+                    <ExpandableInputClosed
+                        key="closed"
+                        iconType={iconType}
+                        onClick={() => this.setState({ showInput: true })}
+                    />
+                )}
+            </div>
+        );
+    }
 }
 
-
 export default ExpandableInput;
diff --git a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
index 03c727379e..b0e0d87d7c 100644
--- a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
@@ -26,43 +26,51 @@
  * or
  * https://github.com/JedWatson/react-select
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 class SelectInput extends Component {
+    inputValue = [];
 
-	inputValue = [];
+    render() {
+        let { label, value, ...other } = this.props;
+        const dataTestId = this.props['data-test-id']
+            ? { 'data-test-id': this.props['data-test-id'] }
+            : {};
+        return (
+            <div
+                {...dataTestId}
+                className="validation-input-wrapper dropdown-multi-select">
+                <div className="form-group">
+                    {label && <label className="control-label">{label}</label>}
+                    <Select
+                        ref="_myInput"
+                        onChange={value => this.onSelectChanged(value)}
+                        {...other}
+                        value={value}
+                    />
+                </div>
+            </div>
+        );
+    }
 
-	render() {
-		let {label, value, ...other} = this.props;
-		const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {};
-		return (
-			<div  {...dataTestId} className='validation-input-wrapper dropdown-multi-select'>
-				<div className='form-group'>
-					{label && <label className='control-label'>{label}</label>}
-					<Select ref='_myInput' onChange={value => this.onSelectChanged(value)} {...other} value={value} />
-				</div>
-			</div>
-		);
-	}
+    getValue() {
+        return this.inputValue && this.inputValue.length ? this.inputValue : '';
+    }
 
-	getValue() {
-		return this.inputValue && this.inputValue.length ? this.inputValue : '';
-	}
+    onSelectChanged(value) {
+        this.props.onMultiSelectChanged(value);
+    }
 
-	onSelectChanged(value) {
-		this.props.onMultiSelectChanged(value);
-	}
-
-	componentDidMount() {
-		let {value} = this.props;
-		this.inputValue = value ? value : [];
-	}
-	componentDidUpdate() {
-		if (this.inputValue !== this.props.value) {
-			this.inputValue = this.props.value;
-		}
-	}
+    componentDidMount() {
+        let { value } = this.props;
+        this.inputValue = value ? value : [];
+    }
+    componentDidUpdate() {
+        if (this.inputValue !== this.props.value) {
+            this.inputValue = this.props.value;
+        }
+    }
 }
 
 export default SelectInput;
diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
index 31a8a66d86..947570fa29 100644
--- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
@@ -16,55 +16,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default
-class ToggleInput extends React.Component {
+export default class ToggleInput extends React.Component {
+    static propTypes = {
+        label: PropTypes.node,
+        value: PropTypes.bool,
+        onChange: PropTypes.func,
+        disabled: PropTypes.bool
+    };
 
-	static propTypes = {
-		label: PropTypes.node,
-		value: PropTypes.bool,
-		onChange: PropTypes.func,
-		disabled: PropTypes.bool
-	}
+    static defaultProps = {
+        value: false,
+        label: ''
+    };
 
-	static defaultProps = {
-		value: false,
-		label: ''
-	}
+    state = {
+        value: this.props.value
+    };
 
-	state = {
-		value: this.props.value
-	}
+    status() {
+        return this.state.value ? 'on' : 'off';
+    }
 
-	status() {
-		return this.state.value ? 'on' : 'off';
-	}
+    render() {
+        let { label, disabled } = this.props;
+        let checked = this.status() === 'on';
+        //TODO check onclick
+        return (
+            <div
+                className="toggle-input-wrapper form-group"
+                onClick={!disabled && this.click}>
+                <div className="toggle-input-label">{label}</div>
+                <div className="toggle-switch">
+                    <input
+                        className="toggle toggle-round-flat"
+                        type="checkbox"
+                        checked={checked}
+                        readOnly
+                    />
+                    <label />
+                </div>
+            </div>
+        );
+    }
 
-	render() {
-		let {label, disabled} = this.props;
-		let checked = this.status() === 'on';
-		//TODO check onclick
-		return (
-			<div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}>
-				<div className='toggle-input-label'>{label}</div>
-				<div className='toggle-switch'>
-					<input className='toggle toggle-round-flat' type='checkbox' checked={checked} readOnly/>
-					<label></label>
-				</div>
-			</div>
-		);
-	}
+    click = () => {
+        let value = !this.state.value;
+        this.setState({ value });
 
-	click = () => {
-		let value = !this.state.value;
-		this.setState({value});
+        let onChange = this.props.onChange;
+        if (onChange) {
+            onChange(value);
+        }
+    };
 
-		let onChange = this.props.onChange;
-		if (onChange) {
-			onChange(value);
-		}
-	}
-
-	getValue() {
-		return this.state.value;
-	}
+    getValue() {
+        return this.state.value;
+    }
 }
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index a689c50778..7ab4c8242c 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -19,136 +19,224 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
 class DualListboxView extends React.Component {
-
-	static propTypes = {
-
-		availableList: PropTypes.arrayOf(PropTypes.shape({
-			id: PropTypes.string.isRequired,
-			name: PropTypes.string.isRequired
-		})),
-		filterTitle: PropTypes.shape({
-			left: PropTypes.string,
-			right: PropTypes.string
-		}),
-		selectedValuesList: PropTypes.arrayOf(PropTypes.string),
-
-		onChange: PropTypes.func.isRequired
-	};
-
-	static defaultProps = {
-		selectedValuesList: [],
-		availableList: [],
-		filterTitle: {
-			left: '',
-			right: ''
-		}
-	};
-
-	state = {
-		availableListFilter: '',
-		selectedValuesListFilter: '',
-		selectedValues: []
-	};
-
-	render() {
-		let {availableList, selectedValuesList, filterTitle, isReadOnlyMode} = this.props;
-		let {availableListFilter, selectedValuesListFilter} = this.state;
-
-		let unselectedList = availableList.filter(availableItem => !selectedValuesList.find(value => value === availableItem.id));
-		let selectedList = availableList.filter(availableItem => selectedValuesList.find(value => value === availableItem.id));
-		selectedList = selectedList.sort((a, b) => selectedValuesList.indexOf(a.id) - selectedValuesList.indexOf(b.id));
-		return (
-			<div className='dual-list-box'>
-				{this.renderListbox(filterTitle.left, unselectedList, {
-					value: availableListFilter,
-					ref: 'availableListFilter',
-					disabled: isReadOnlyMode,
-					onChange: (value) => this.setState({availableListFilter: value})
-				}, {ref: 'availableValues', disabled: isReadOnlyMode, testId: 'available',})}
-				{this.renderOperationsBar(isReadOnlyMode)}
-				{this.renderListbox(filterTitle.right, selectedList, {
-					value: selectedValuesListFilter,
-					ref: 'selectedValuesListFilter',
-					disabled: isReadOnlyMode,
-					onChange: (value) => this.setState({selectedValuesListFilter: value})
-				}, {ref: 'selectedValues', disabled: isReadOnlyMode, testId: 'selected'})}
-			</div>
-		);
-	}
-
-	renderListbox(filterTitle, list, filterProps, props) {
-		let regExFilter = new RegExp(escape(filterProps.value), 'i');
-		let matchedItems = list.filter(item => item.name.match(regExFilter));
-		let unMatchedItems = list.filter(item => !item.name.match(regExFilter));
-		return (
-			<div className='dual-search-multi-select-section'>
-				<p>{filterTitle}</p>
-				<div className='dual-text-box-search search-wrapper'>
-					<Input data-test-id={`${props.testId}-search-input`}
-						   name='search-input-control' type='text'
-						   groupClassName='search-input-control'
-						   {...filterProps}/>
-					<SVGIcon name='search' className='search-icon'/>
-				</div>
-				<Input
-					multiple
-					onChange={(event) => this.onSelectItems(event.target.selectedOptions)}
-					groupClassName='dual-list-box-multi-select'
-					type='select'
-					name='dual-list-box-multi-select'
-					data-test-id={`${props.testId}-select-input`}
-					disabled={props.disabled}
-					ref={props.ref}>
-					{matchedItems.map(item => this.renderOption(item.id, item.name))}
-					{matchedItems.length && unMatchedItems.length && <option style={{pointerEvents: 'none'}}>--------------------</option>}
-					{unMatchedItems.map(item => this.renderOption(item.id, item.name))}
-				</Input>
-			</div>
-		);
-	}
-
-	onSelectItems(selectedOptions) {
-		let selectedValues = Object.keys(selectedOptions).map((k) => selectedOptions[k].value);
-		this.setState({selectedValues});
-	}
-
-	renderOption(value, name) {
-		return (<option className='dual-list-box-multi-select-text' key={value} value={value}>{name}</option>);
-	}
-
-	renderOperationsBar(isReadOnlyMode) {
-		return (
-			<div className={`dual-list-options-bar${isReadOnlyMode ? ' disabled' : ''}`}>
-				{this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')}
-				{this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')}
-				{this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')}
-				{this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
-			</div>
-		);
-	}
-
-	renderOperationBarButton(onClick, iconName){
-		return (<div className='dual-list-option' data-test-id={`operation-icon-${iconName}`} onClick={onClick}><SVGIcon name={iconName}/></div>);
-	}
-
-	addToSelectedList() {
-		this.props.onChange(this.props.selectedValuesList.concat(this.state.selectedValues));
-		this.setState({selectedValues: []});
-	}
-
-	removeFromSelectedList() {
-		const selectedValues = this.state.selectedValues;
-		this.props.onChange(this.props.selectedValuesList.filter(value => !selectedValues.find(selectedValue => selectedValue === value)));
-		this.setState({selectedValues: []});
-	}
-
-	addAllToSelectedList() {
-		this.props.onChange(this.props.availableList.map(item => item.id));
-	}
-
-	removeAllFromSelectedList() {
-		this.props.onChange([]);
-	}
+    static propTypes = {
+        availableList: PropTypes.arrayOf(
+            PropTypes.shape({
+                id: PropTypes.string.isRequired,
+                name: PropTypes.string.isRequired
+            })
+        ),
+        filterTitle: PropTypes.shape({
+            left: PropTypes.string,
+            right: PropTypes.string
+        }),
+        selectedValuesList: PropTypes.arrayOf(PropTypes.string),
+
+        onChange: PropTypes.func.isRequired
+    };
+
+    static defaultProps = {
+        selectedValuesList: [],
+        availableList: [],
+        filterTitle: {
+            left: '',
+            right: ''
+        }
+    };
+
+    state = {
+        availableListFilter: '',
+        selectedValuesListFilter: '',
+        selectedValues: []
+    };
+
+    render() {
+        let {
+            availableList,
+            selectedValuesList,
+            filterTitle,
+            isReadOnlyMode
+        } = this.props;
+        let { availableListFilter, selectedValuesListFilter } = this.state;
+
+        let unselectedList = availableList.filter(
+            availableItem =>
+                !selectedValuesList.find(value => value === availableItem.id)
+        );
+        let selectedList = availableList.filter(availableItem =>
+            selectedValuesList.find(value => value === availableItem.id)
+        );
+        selectedList = selectedList.sort(
+            (a, b) =>
+                selectedValuesList.indexOf(a.id) -
+                selectedValuesList.indexOf(b.id)
+        );
+        return (
+            <div className="dual-list-box">
+                {this.renderListbox(
+                    filterTitle.left,
+                    unselectedList,
+                    {
+                        value: availableListFilter,
+                        ref: 'availableListFilter',
+                        disabled: isReadOnlyMode,
+                        onChange: value =>
+                            this.setState({ availableListFilter: value })
+                    },
+                    {
+                        ref: 'availableValues',
+                        disabled: isReadOnlyMode,
+                        testId: 'available'
+                    }
+                )}
+                {this.renderOperationsBar(isReadOnlyMode)}
+                {this.renderListbox(
+                    filterTitle.right,
+                    selectedList,
+                    {
+                        value: selectedValuesListFilter,
+                        ref: 'selectedValuesListFilter',
+                        disabled: isReadOnlyMode,
+                        onChange: value =>
+                            this.setState({ selectedValuesListFilter: value })
+                    },
+                    {
+                        ref: 'selectedValues',
+                        disabled: isReadOnlyMode,
+                        testId: 'selected'
+                    }
+                )}
+            </div>
+        );
+    }
+
+    renderListbox(filterTitle, list, filterProps, props) {
+        let regExFilter = new RegExp(escape(filterProps.value), 'i');
+        let matchedItems = list.filter(item => item.name.match(regExFilter));
+        let unMatchedItems = list.filter(item => !item.name.match(regExFilter));
+        return (
+            <div className="dual-search-multi-select-section">
+                <p>{filterTitle}</p>
+                <div className="dual-text-box-search search-wrapper">
+                    <Input
+                        data-test-id={`${props.testId}-search-input`}
+                        name="search-input-control"
+                        type="text"
+                        groupClassName="search-input-control"
+                        {...filterProps}
+                    />
+                    <SVGIcon name="search" className="search-icon" />
+                </div>
+                <Input
+                    multiple
+                    onChange={event =>
+                        this.onSelectItems(event.target.selectedOptions)
+                    }
+                    groupClassName="dual-list-box-multi-select"
+                    type="select"
+                    name="dual-list-box-multi-select"
+                    data-test-id={`${props.testId}-select-input`}
+                    disabled={props.disabled}
+                    ref={props.ref}>
+                    {matchedItems.map(item =>
+                        this.renderOption(item.id, item.name)
+                    )}
+                    {matchedItems.length &&
+                        unMatchedItems.length && (
+                            <option style={{ pointerEvents: 'none' }}>
+                                --------------------
+                            </option>
+                        )}
+                    {unMatchedItems.map(item =>
+                        this.renderOption(item.id, item.name)
+                    )}
+                </Input>
+            </div>
+        );
+    }
+
+    onSelectItems(selectedOptions) {
+        let selectedValues = Object.keys(selectedOptions).map(
+            k => selectedOptions[k].value
+        );
+        this.setState({ selectedValues });
+    }
+
+    renderOption(value, name) {
+        return (
+            <option
+                className="dual-list-box-multi-select-text"
+                key={value}
+                value={value}>
+                {name}
+            </option>
+        );
+    }
+
+    renderOperationsBar(isReadOnlyMode) {
+        return (
+            <div
+                className={`dual-list-options-bar${
+                    isReadOnlyMode ? ' disabled' : ''
+                }`}>
+                {this.renderOperationBarButton(
+                    () => this.addToSelectedList(),
+                    'angleRight'
+                )}
+                {this.renderOperationBarButton(
+                    () => this.removeFromSelectedList(),
+                    'angleLeft'
+                )}
+                {this.renderOperationBarButton(
+                    () => this.addAllToSelectedList(),
+                    'angleDoubleRight'
+                )}
+                {this.renderOperationBarButton(
+                    () => this.removeAllFromSelectedList(),
+                    'angleDoubleLeft'
+                )}
+            </div>
+        );
+    }
+
+    renderOperationBarButton(onClick, iconName) {
+        return (
+            <div
+                className="dual-list-option"
+                data-test-id={`operation-icon-${iconName}`}
+                onClick={onClick}>
+                <SVGIcon name={iconName} />
+            </div>
+        );
+    }
+
+    addToSelectedList() {
+        this.props.onChange(
+            this.props.selectedValuesList.concat(this.state.selectedValues)
+        );
+        this.setState({ selectedValues: [] });
+    }
+
+    removeFromSelectedList() {
+        const selectedValues = this.state.selectedValues;
+        this.props.onChange(
+            this.props.selectedValuesList.filter(
+                value =>
+                    !selectedValues.find(
+                        selectedValue => selectedValue === value
+                    )
+            )
+        );
+        this.setState({ selectedValues: [] });
+    }
+
+    addAllToSelectedList() {
+        this.props.onChange(this.props.availableList.map(item => item.id));
+    }
+
+    removeAllFromSelectedList() {
+        this.props.onChange([]);
+    }
 }
 
 export default DualListboxView;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 6df0bf9009..62fc29a55c 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -19,130 +19,160 @@ import PropTypes from 'prop-types';
 import ValidationButtons from './ValidationButtons.jsx';
 
 class Form extends React.Component {
-
-	static defaultProps = {
-		hasButtons : true,
-		onSubmit : null,
-		onReset :  null,
-		labledButtons: true,
-		onValidChange :  null,
-		isValid: true,
-		submitButtonText: null,
-		cancelButtonText: null
-	};
-
-	static propTypes = {
-		isValid : PropTypes.bool,
-		formReady : PropTypes.bool,
-		isReadOnlyMode : PropTypes.bool,
-		hasButtons : PropTypes.bool,
-		onSubmit : PropTypes.func,
-		onReset : PropTypes.func,
-		labledButtons: PropTypes.bool,
-		submitButtonText: PropTypes.string,
-		cancelButtonText: PropTypes.string,
-		onValidChange : PropTypes.func,
-		onValidityChanged: PropTypes.func,
-		onValidateForm: PropTypes.func
-	};
-
-	constructor(props) {
-		super(props);
-	}
-
-
-	render() {
-		// eslint-disable-next-line no-unused-vars
-		let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
-			 cancelButtonText, children, ...formProps} = this.props;
-		return (
-			<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
-				<div className='validation-form-content'>
-					<fieldset disabled={isReadOnlyMode}>
-						{children}
-					</fieldset>
-				</div>
-				{hasButtons && 
-					<ValidationButtons 
-						labledButtons={labledButtons} 
-						submitButtonText={submitButtonText} 
-						cancelButtonText={cancelButtonText} 
-						ref={(buttons) => this.buttons = buttons} 
-						isReadOnlyMode={isReadOnlyMode}/>}
-			</form>
-		);
-	}
-
-	handleFormValidation(event) {
-		event.preventDefault();
-		if (this.props.onValidateForm && !this.props.formReady){
-			return this.props.onValidateForm();
-		} else {
-			return this.handleFormSubmit(event);
-		}
-	}
-	handleFormSubmit(event) {
-		if (event) {
-			event.preventDefault();
-		}
-		if(this.props.onSubmit) {
-			return this.props.onSubmit(event);
-		}
-	}
-
-	componentDidMount() {
-		if (this.props.hasButtons) {
-			this.buttons.setState({isValid: this.props.isValid});
-		}
-	}
-
-
-
-	componentDidUpdate(prevProps) {
-		// only handling this programatically if the validation of the form is done outside of the view
-		// (example with a form that is dependent on the state of other forms)
-		if (prevProps.isValid !== this.props.isValid) {
-			if (this.props.hasButtons) {
-				this.buttons.setState({isValid: this.props.isValid});
-			}
-			// callback in case form is part of bigger picture in view
-			if (this.props.onValidChange) {
-				this.props.onValidChange(this.props.isValid);
-			}
-
-			// TODO - maybe this has to be part of componentWillUpdate
-			if(this.props.onValidityChanged) {
-				this.props.onValidityChanged(this.props.isValid);
-			}
-		}
-		if (this.props.formReady) { // if form validation succeeded -> continue with submit
-			this.handleFormSubmit();
-		}
-	}
-
+    static defaultProps = {
+        hasButtons: true,
+        onSubmit: null,
+        onReset: null,
+        labledButtons: true,
+        onValidChange: null,
+        isValid: true,
+        submitButtonText: null,
+        cancelButtonText: null
+    };
+
+    static propTypes = {
+        isValid: PropTypes.bool,
+        formReady: PropTypes.bool,
+        isReadOnlyMode: PropTypes.bool,
+        hasButtons: PropTypes.bool,
+        onSubmit: PropTypes.func,
+        onReset: PropTypes.func,
+        labledButtons: PropTypes.bool,
+        submitButtonText: PropTypes.string,
+        cancelButtonText: PropTypes.string,
+        onValidChange: PropTypes.func,
+        onValidityChanged: PropTypes.func,
+        onValidateForm: PropTypes.func
+    };
+
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        /* eslint-disable no-unused-vars */
+        let {
+            isValid,
+            onValidChange,
+            onValidityChanged,
+            onDataChanged,
+            formReady,
+            onValidateForm,
+            isReadOnlyMode,
+            hasButtons,
+            onSubmit,
+            labledButtons,
+            submitButtonText,
+            cancelButtonText,
+            children,
+            ...formProps
+        } = this.props;
+        /* eslint-enable no-unused-vars */
+        return (
+            <form
+                {...formProps}
+                ref={form => (this.form = form)}
+                onSubmit={event => this.handleFormValidation(event)}>
+                <div className="validation-form-content">
+                    <fieldset disabled={isReadOnlyMode}>{children}</fieldset>
+                </div>
+                {hasButtons && (
+                    <ValidationButtons
+                        labledButtons={labledButtons}
+                        submitButtonText={submitButtonText}
+                        cancelButtonText={cancelButtonText}
+                        ref={buttons => (this.buttons = buttons)}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                )}
+            </form>
+        );
+    }
+
+    handleFormValidation(event) {
+        event.preventDefault();
+        if (this.props.onValidateForm && !this.props.formReady) {
+            return this.props.onValidateForm();
+        } else {
+            return this.handleFormSubmit(event);
+        }
+    }
+    handleFormSubmit(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        if (this.props.onSubmit) {
+            return this.props.onSubmit(event);
+        }
+    }
+
+    componentDidMount() {
+        if (this.props.hasButtons) {
+            this.buttons.setState({ isValid: this.props.isValid });
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        // only handling this programatically if the validation of the form is done outside of the view
+        // (example with a form that is dependent on the state of other forms)
+        if (prevProps.isValid !== this.props.isValid) {
+            if (this.props.hasButtons) {
+                this.buttons.setState({ isValid: this.props.isValid });
+            }
+            // callback in case form is part of bigger picture in view
+            if (this.props.onValidChange) {
+                this.props.onValidChange(this.props.isValid);
+            }
+
+            // TODO - maybe this has to be part of componentWillUpdate
+            if (this.props.onValidityChanged) {
+                this.props.onValidityChanged(this.props.isValid);
+            }
+        }
+        if (this.props.formReady) {
+            // if form validation succeeded -> continue with submit
+            this.handleFormSubmit();
+        }
+    }
 }
 
 export class TabsForm extends Form {
-	render() {
-		// eslint-disable-next-line no-unused-vars
-		let {submitButtonText, cancelButtonText, isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children,
-			...formProps} = this.props;
-		return (
-			<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
-				<div className='validation-form-content'>
-						{children}
-				</div>
-				{hasButtons &&
-					<ValidationButtons
-						labledButtons={labledButtons}
-						submitButtonText={submitButtonText}
-						cancelButtonText={cancelButtonText}
-						ref={buttons => this.buttons = buttons}
-						isReadOnlyMode={isReadOnlyMode}/>
-				}
-			</form>
-		);
-	}
+    render() {
+        /* eslint-disable no-unused-vars */
+        let {
+            submitButtonText,
+            cancelButtonText,
+            isValid,
+            formReady,
+            onValidateForm,
+            isReadOnlyMode,
+            hasButtons,
+            onSubmit,
+            labledButtons,
+            onValidChange,
+            onValidityChanged,
+            onDataChanged,
+            children,
+            ...formProps
+        } = this.props;
+        /* eslint-enable no-unused-vars */
+        return (
+            <form
+                {...formProps}
+                ref={form => (this.form = form)}
+                onSubmit={event => this.handleFormValidation(event)}>
+                <div className="validation-form-content">{children}</div>
+                {hasButtons && (
+                    <ValidationButtons
+                        labledButtons={labledButtons}
+                        submitButtonText={submitButtonText}
+                        cancelButtonText={cancelButtonText}
+                        ref={buttons => (this.buttons = buttons)}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                )}
+            </form>
+        );
+    }
 }
 
 export default Form;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index 33cea933b5..a5d6f4fd7a 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -25,191 +25,249 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx';
 
 class Input extends React.Component {
+    state = {
+        value: this.props.value,
+        checked: this.props.checked,
+        selectedValues: []
+    };
 
-	state = {
-		value: this.props.value,
-		checked: this.props.checked,
-		selectedValues: []
-	};
+    render() {
+        /* eslint-disable no-unused-vars */
+        const {
+            label,
+            isReadOnlyMode,
+            value,
+            onBlur,
+            onKeyDown,
+            type,
+            disabled,
+            checked,
+            name
+        } = this.props;
+        const {
+            groupClassName,
+            isValid = true,
+            errorText,
+            isRequired,
+            overlayPos,
+            ...inputProps
+        } = this.props;
+        const {
+            dateFormat,
+            startDate,
+            endDate,
+            selectsStart,
+            selectsEnd
+        } = this.props; // Date Props
+        /* eslint-enable no-unused-vars */
+        let wrapperClassName =
+            type !== 'radio'
+                ? 'validation-input-wrapper'
+                : 'validation-radio-wrapper';
+        if (disabled) {
+            wrapperClassName += ' disabled';
+        }
+        return (
+            <div className={wrapperClassName}>
+                <FormGroup
+                    className={classNames('form-group', [groupClassName], {
+                        required: isRequired,
+                        'has-error': !isValid
+                    })}>
+                    {label &&
+                        (type !== 'checkbox' && type !== 'radio') && (
+                            <label className="control-label">{label}</label>
+                        )}
+                    {type === 'text' && (
+                        <FormControl
+                            bsClass={'form-control input-options-other'}
+                            onChange={e => this.onChange(e)}
+                            disabled={isReadOnlyMode || Boolean(disabled)}
+                            onBlur={onBlur}
+                            onKeyDown={onKeyDown}
+                            value={value || ''}
+                            inputRef={input => (this.input = input)}
+                            type={type}
+                            data-test-id={this.props['data-test-id']}
+                        />
+                    )}
+                    {type === 'number' && (
+                        <FormControl
+                            bsClass={'form-control input-options-other'}
+                            onChange={e => this.onChange(e)}
+                            disabled={isReadOnlyMode || Boolean(disabled)}
+                            onBlur={onBlur}
+                            onKeyDown={onKeyDown}
+                            value={value !== undefined ? value : ''}
+                            inputRef={input => (this.input = input)}
+                            type={type}
+                            data-test-id={this.props['data-test-id']}
+                        />
+                    )}
 
-	render() {
-		const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
-		// eslint-disable-next-line no-unused-vars
-		const {groupClassName, isValid = true, errorText, isRequired,  overlayPos, ...inputProps} = this.props;
-		const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props
-		let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper';
-		if (disabled) {
-			wrapperClassName += ' disabled';
-		}
-		return(
-			<div className={wrapperClassName}>
-				<FormGroup className={classNames('form-group', [groupClassName], {'required' : isRequired , 'has-error' : !isValid})} >
-					{(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
-					{type === 'text'  &&
-					<FormControl
-						bsClass={'form-control input-options-other'}
-						onChange={(e) => this.onChange(e)}
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						onBlur={onBlur}
-						onKeyDown={onKeyDown}
-						value={value || ''}
-						inputRef={(input) => this.input = input}
-						type={type}
-						data-test-id={this.props['data-test-id']}/>}
-					{type === 'number' &&
-					<FormControl
-						bsClass={'form-control input-options-other'}
-						onChange={(e) => this.onChange(e)}
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						onBlur={onBlur}
-						onKeyDown={onKeyDown}
-						value={(value !== undefined) ? value : ''}
-						inputRef={(input) => this.input = input}
-						type={type}
-						data-test-id={this.props['data-test-id']}/>}
+                    {type === 'textarea' && (
+                        <FormControl
+                            className="form-control input-options-other"
+                            disabled={isReadOnlyMode || Boolean(disabled)}
+                            value={value || ''}
+                            onBlur={onBlur}
+                            onKeyDown={onKeyDown}
+                            componentClass={type}
+                            onChange={e => this.onChange(e)}
+                            inputRef={input => (this.input = input)}
+                            data-test-id={this.props['data-test-id']}
+                        />
+                    )}
 
-					{type === 'textarea' &&
-					<FormControl
-						className='form-control input-options-other'
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						value={value || ''}
-						onBlur={onBlur}
-						onKeyDown={onKeyDown}
-						componentClass={type}
-						onChange={(e) => this.onChange(e)}
-						inputRef={(input) => this.input = input}
-						data-test-id={this.props['data-test-id']}/>}
+                    {type === 'checkbox' && (
+                        <Checkbox
+                            className={classNames({
+                                required: isRequired,
+                                'has-error': !isValid
+                            })}
+                            onChange={e => this.onChangeCheckBox(e)}
+                            disabled={isReadOnlyMode || Boolean(disabled)}
+                            checked={checked}
+                            data-test-id={this.props['data-test-id']}>
+                            {label}
+                        </Checkbox>
+                    )}
 
-					{type === 'checkbox' &&
-					<Checkbox
-						className={classNames({'required' : isRequired , 'has-error' : !isValid})}
-						onChange={(e)=>this.onChangeCheckBox(e)}
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						checked={checked}
-						data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
+                    {type === 'radio' && (
+                        <Radio
+                            name={name}
+                            checked={checked}
+                            disabled={isReadOnlyMode || Boolean(disabled)}
+                            value={value}
+                            onChange={isChecked =>
+                                this.onChangeRadio(isChecked)
+                            }
+                            inputRef={input => (this.input = input)}
+                            label={label}
+                            data-test-id={this.props['data-test-id']}
+                        />
+                    )}
+                    {type === 'select' && (
+                        <FormControl
+                            onClick={e => this.optionSelect(e)}
+                            className="custom-select"
+                            componentClass={type}
+                            inputRef={input => (this.input = input)}
+                            name={name}
+                            {...inputProps}
+                            data-test-id={this.props['data-test-id']}
+                        />
+                    )}
+                    {type === 'date' && (
+                        <Datepicker
+                            date={value}
+                            format={dateFormat}
+                            startDate={startDate}
+                            endDate={endDate}
+                            inputRef={input => (this.input = input)}
+                            onChange={this.props.onChange}
+                            disabled={isReadOnlyMode || Boolean(disabled)}
+                            data-test-id={this.props['data-test-id']}
+                            selectsStart={selectsStart}
+                            selectsEnd={selectsEnd}
+                        />
+                    )}
+                </FormGroup>
+                {this.renderErrorOverlay()}
+            </div>
+        );
+    }
 
-					{type === 'radio' &&
-					<Radio name={name}
-						   checked={checked}
-						   disabled={isReadOnlyMode || Boolean(disabled)}
-						   value={value}
-						onChange={(isChecked)=>this.onChangeRadio(isChecked)}
-						   inputRef={(input) => this.input = input}
-						label={label}
-						data-test-id={this.props['data-test-id']} />}
-					{type === 'select' &&
-					<FormControl onClick={ (e) => this.optionSelect(e) }
-						 className='custom-select'
-						 componentClass={type}
-						 inputRef={(input) => this.input = input}
-						 name={name} {...inputProps}
-						 data-test-id={this.props['data-test-id']}/>}
-					{type === 'date' && 
-					<Datepicker 
-						date={value}
-						format={dateFormat}
-						startDate={startDate}
-						endDate={endDate}
-						inputRef={(input) => this.input = input}
-						onChange={this.props.onChange}
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						data-test-id={this.props['data-test-id']}
-						selectsStart={selectsStart}
-						selectsEnd={selectsEnd} />}
-				</FormGroup>
-				{ this.renderErrorOverlay() }
-			</div>
-		);
-	}
+    getValue() {
+        return this.props.type !== 'select'
+            ? this.state.value
+            : this.state.selectedValues;
+    }
 
-	getValue() {
-		return this.props.type !== 'select' ? this.state.value : this.state.selectedValues;
-	}
+    getChecked() {
+        return this.state.checked;
+    }
 
-	getChecked() {
-		return this.state.checked;
-	}
+    optionSelect(e) {
+        let selectedValues = [];
+        if (e.target.value) {
+            selectedValues.push(e.target.value);
+        }
+        this.setState({
+            selectedValues
+        });
+    }
 
-	optionSelect(e) {
-		let selectedValues = [];
-		if (e.target.value) {
-			selectedValues.push(e.target.value);
-		}
-		this.setState({
-			selectedValues
-		});
-	}
+    onChange(e) {
+        const { onChange, type } = this.props;
+        let value = e.target.value;
+        if (type === 'number') {
+            if (value === '') {
+                value = undefined;
+            } else {
+                value = Number(value);
+            }
+        }
+        this.setState({
+            value
+        });
+        onChange(value);
+    }
 
-	onChange(e) {
-		const {onChange, type} = this.props;
-		let value = e.target.value;
-		if (type === 'number') {
-			if (value === '') {
-				value = undefined;
-			} else {
-				value = Number(value);
-			}
-		}
-		this.setState({
-			value
-		});
-		onChange(value);
-	}
+    onChangeCheckBox(e) {
+        let { onChange } = this.props;
+        let checked = e.target.checked;
+        this.setState({
+            checked
+        });
+        onChange(checked);
+    }
 
-	onChangeCheckBox(e) {
-		let {onChange} = this.props;
-		let checked = e.target.checked;
-		this.setState({
-			checked
-		});
-		onChange(checked);
-	}
+    onChangeRadio(isChecked) {
+        let { onChange } = this.props;
+        this.setState({
+            checked: isChecked
+        });
+        onChange(this.state.value);
+    }
 
-	onChangeRadio(isChecked) {
-		let {onChange} = this.props;
-		this.setState({
-			checked: isChecked
-		});
-		onChange(this.state.value);
-	}
+    focus() {
+        ReactDOM.findDOMNode(this.input).focus();
+    }
 
-	focus() {
-		ReactDOM.findDOMNode(this.input).focus();
-	}
+    renderErrorOverlay() {
+        let position = 'right';
+        const { errorText = '', isValid = true, type, overlayPos } = this.props;
 
-	renderErrorOverlay() {
-		let position = 'right';
-		const {errorText = '', isValid = true, type, overlayPos} = this.props;
-
-		if (overlayPos) {
-			position = overlayPos;
-		}
-		else if (type === 'text'
-			|| type === 'email'
-			|| type === 'number'
-			|| type === 'radio'
-			|| type === 'password'
-			|| type === 'date') {
-			position = 'bottom';
-		}
-
-		return (
-			<Overlay
-				show={!isValid}
-				placement={position}
-				target={() => {
-					let target = ReactDOM.findDOMNode(this.input);
-					return target.offsetParent ? target : undefined;
-				}}
-				container={this}>
-				<Tooltip
-					id={`error-${errorText.replace(' ', '-')}`}
-					className='validation-error-message'>
-					{errorText}
-				</Tooltip>
-			</Overlay>
-		);
-	}
+        if (overlayPos) {
+            position = overlayPos;
+        } else if (
+            type === 'text' ||
+            type === 'email' ||
+            type === 'number' ||
+            type === 'radio' ||
+            type === 'password' ||
+            type === 'date'
+        ) {
+            position = 'bottom';
+        }
 
+        return (
+            <Overlay
+                show={!isValid}
+                placement={position}
+                target={() => {
+                    let target = ReactDOM.findDOMNode(this.input);
+                    return target.offsetParent ? target : undefined;
+                }}
+                container={this}>
+                <Tooltip
+                    id={`error-${errorText.replace(' ', '-')}`}
+                    className="validation-error-message">
+                    {errorText}
+                </Tooltip>
+            </Overlay>
+        );
+    }
 }
-export default  Input;
+export default Input;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
index 11b07ba9da..019b6a5c70 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
@@ -22,260 +22,341 @@ import Select from 'nfvo-components/input/SelectInput.jsx';
 import Overlay from 'react-bootstrap/lib/Overlay.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 
-export const other = {OTHER: 'Other'};
+export const other = { OTHER: 'Other' };
 
 class InputOptions extends React.Component {
+    static propTypes = {
+        values: PropTypes.arrayOf(
+            PropTypes.shape({
+                enum: PropTypes.string,
+                title: PropTypes.string
+            })
+        ),
+        isEnabledOther: PropTypes.bool,
+        label: PropTypes.string,
+        selectedValue: PropTypes.string,
+        multiSelectedEnum: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.array
+        ]),
+        selectedEnum: PropTypes.string,
+        otherValue: PropTypes.string,
+        overlayPos: PropTypes.string,
+        onEnumChange: PropTypes.func,
+        onOtherChange: PropTypes.func,
+        onBlur: PropTypes.func,
+        isRequired: PropTypes.bool,
+        isMultiSelect: PropTypes.bool,
+        isValid: PropTypes.bool,
+        disabled: PropTypes.bool
+    };
 
-	static propTypes = {
-		values: PropTypes.arrayOf(PropTypes.shape({
-			enum: PropTypes.string,
-			title: PropTypes.string
-		})),
-		isEnabledOther: PropTypes.bool,
-		label: PropTypes.string,
-		selectedValue: PropTypes.string,
-		multiSelectedEnum: PropTypes.oneOfType([
-			PropTypes.string,
-			PropTypes.array
-		]),
-		selectedEnum: PropTypes.string,
-		otherValue: PropTypes.string,
-		overlayPos: PropTypes.string,
-		onEnumChange: PropTypes.func,
-		onOtherChange: PropTypes.func,
-		onBlur: PropTypes.func,
-		isRequired: PropTypes.bool,
-		isMultiSelect: PropTypes.bool,
-		isValid: PropTypes.bool,
-		disabled: PropTypes.bool
-	};
+    state = {
+        otherInputDisabled: !this.props.otherValue
+    };
 
-	state = {
-		otherInputDisabled: !this.props.otherValue
-	};
+    oldProps = {
+        selectedEnum: '',
+        otherValue: '',
+        multiSelectedEnum: []
+    };
 
-	oldProps = {
-		selectedEnum: '',
-		otherValue: '',
-		multiSelectedEnum: []
-	};
+    render() {
+        let {
+            label,
+            isRequired,
+            values,
+            otherValue,
+            onOtherChange,
+            isMultiSelect,
+            onBlur,
+            multiSelectedEnum,
+            selectedEnum,
+            isValid,
+            children,
+            isReadOnlyMode
+        } = this.props;
+        const dataTestId = this.props['data-test-id']
+            ? { 'data-test-id': this.props['data-test-id'] }
+            : {};
+        let currentMultiSelectedEnum = [];
+        let currentSelectedEnum = '';
+        let otherInputDisabled =
+            (isMultiSelect &&
+                (multiSelectedEnum === undefined ||
+                    multiSelectedEnum.length === 0 ||
+                    multiSelectedEnum[0] !== other.OTHER)) ||
+            (!isMultiSelect &&
+                (selectedEnum === undefined || selectedEnum !== other.OTHER));
+        if (isMultiSelect) {
+            currentMultiSelectedEnum = multiSelectedEnum;
+            if (!otherInputDisabled) {
+                currentSelectedEnum = multiSelectedEnum
+                    ? multiSelectedEnum.toString()
+                    : undefined;
+            }
+        } else if (selectedEnum) {
+            currentSelectedEnum = selectedEnum;
+        }
+        if (!onBlur) {
+            onBlur = () => {};
+        }
 
-	render() {
-		let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, isValid, children, isReadOnlyMode} = this.props;
-		const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {};
-		let currentMultiSelectedEnum = [];
-		let currentSelectedEnum = '';
-		let otherInputDisabled = (isMultiSelect && (multiSelectedEnum === undefined || multiSelectedEnum.length === 0 || multiSelectedEnum[0] !== other.OTHER))
-			|| (!isMultiSelect && (selectedEnum === undefined || selectedEnum !== other.OTHER));
-		if (isMultiSelect) {
-			currentMultiSelectedEnum = multiSelectedEnum;
-			if(!otherInputDisabled) {
-				currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
-			}
-		}
-		else if(selectedEnum){
-			currentSelectedEnum = selectedEnum;
-		}
-		if (!onBlur) {
-			onBlur = () => {};
-		}
+        return (
+            <div className="validation-input-wrapper">
+                <div
+                    className={classNames('form-group', {
+                        required: isRequired,
+                        'has-error': !isValid
+                    })}>
+                    {label && <label className="control-label">{label}</label>}
+                    {isMultiSelect && otherInputDisabled ? (
+                        <Select
+                            {...dataTestId}
+                            ref={input => (this.input = input)}
+                            value={currentMultiSelectedEnum}
+                            className="options-input"
+                            clearable={false}
+                            required={isRequired}
+                            disabled={
+                                isReadOnlyMode || Boolean(this.props.disabled)
+                            }
+                            onBlur={() => onBlur()}
+                            onMultiSelectChanged={value =>
+                                this.multiSelectEnumChanged(value)
+                            }
+                            options={this.renderMultiSelectOptions(values)}
+                            multi
+                        />
+                    ) : (
+                        <div
+                            className={classNames('input-options', {
+                                'has-error': !isValid
+                            })}>
+                            <select
+                                {...dataTestId}
+                                ref={input => (this.input = input)}
+                                label={label}
+                                className="form-control input-options-select"
+                                value={currentSelectedEnum}
+                                style={{
+                                    width: otherInputDisabled ? '100%' : '100px'
+                                }}
+                                onBlur={() => onBlur()}
+                                disabled={
+                                    isReadOnlyMode ||
+                                    Boolean(this.props.disabled)
+                                }
+                                onChange={value => this.enumChanged(value)}
+                                type="select">
+                                {children ||
+                                    (values &&
+                                        values.length &&
+                                        values.map((val, index) =>
+                                            this.renderOptions(val, index)
+                                        ))}
+                                {onOtherChange && (
+                                    <option key="other" value={other.OTHER}>
+                                        {i18n(other.OTHER)}
+                                    </option>
+                                )}
+                            </select>
 
-		return(
-			<div className='validation-input-wrapper' >
-				<div className={classNames('form-group', {'required' : isRequired, 'has-error' : !isValid})} >
-					{label && <label className='control-label'>{label}</label>}
-					{isMultiSelect && otherInputDisabled ?
-						<Select
-							{...dataTestId}
-							ref={(input) => this.input = input}
-							value={currentMultiSelectedEnum}
-							className='options-input'
-							clearable={false}
-							required={isRequired}
-							disabled={isReadOnlyMode || Boolean(this.props.disabled)}
-							onBlur={() => onBlur()}
-							onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
-							options={this.renderMultiSelectOptions(values)}
-							multi/> :
-						<div className={classNames('input-options',{'has-error' : !isValid})} >
-							<select
-								{...dataTestId}
-								ref={(input) => this.input = input}
-								label={label}
-								className='form-control input-options-select'
-								value={currentSelectedEnum}
-								style={{'width' : otherInputDisabled ? '100%' : '100px'}}
-								onBlur={() => onBlur()}
-								disabled={isReadOnlyMode || Boolean(this.props.disabled)}
-								onChange={ value => this.enumChanged(value)}
-								type='select'>
-								{children || (values && values.length && values.map((val, index) => this.renderOptions(val, index)))}
-								{onOtherChange && <option key='other' value={other.OTHER}>{i18n(other.OTHER)}</option>}
-							</select>
+                            {!otherInputDisabled && (
+                                <div className="input-options-separator" />
+                            )}
+                            <input
+                                className="form-control input-options-other"
+                                placeholder={i18n('other')}
+                                ref={otherValue =>
+                                    (this.otherValue = otherValue)
+                                }
+                                style={{
+                                    display: otherInputDisabled
+                                        ? 'none'
+                                        : 'block'
+                                }}
+                                disabled={
+                                    isReadOnlyMode ||
+                                    Boolean(this.props.disabled)
+                                }
+                                value={otherValue || ''}
+                                onBlur={() => onBlur()}
+                                onChange={() => this.changedOtherInput()}
+                            />
+                        </div>
+                    )}
+                </div>
+                {this.renderErrorOverlay()}
+            </div>
+        );
+    }
 
-							{!otherInputDisabled && <div className='input-options-separator'/>}
-							<input
-								className='form-control input-options-other'
-								placeholder={i18n('other')}
-								ref={(otherValue) => this.otherValue = otherValue}
-								style={{'display' : otherInputDisabled ? 'none' : 'block'}}
-								disabled={isReadOnlyMode || Boolean(this.props.disabled)}
-								value={otherValue || ''}
-								onBlur={() => onBlur()}
-								onChange={() => this.changedOtherInput()}/>
-						</div>
-					}
-					</div>
-				{ this.renderErrorOverlay() }
-			</div>
-		);
-	}
+    renderOptions(val, index) {
+        return (
+            <option key={index} value={val.enum}>
+                {val.title}
+            </option>
+        );
+    }
 
-	renderOptions(val, index){
-		return (
-			<option key={index} value={val.enum}>{val.title}</option>
-		);
-	}
+    renderMultiSelectOptions(values) {
+        let { onOtherChange } = this.props;
+        let optionsList = [];
+        if (onOtherChange) {
+            optionsList = values
+                .map(option => {
+                    return {
+                        label: option.title,
+                        value: option.enum
+                    };
+                })
+                .concat([
+                    {
+                        label: i18n(other.OTHER),
+                        value: i18n(other.OTHER)
+                    }
+                ]);
+        } else {
+            optionsList = values.map(option => {
+                return {
+                    label: option.title,
+                    value: option.enum
+                };
+            });
+        }
+        if (optionsList.length > 0 && optionsList[0].value === '') {
+            optionsList.shift();
+        }
+        return optionsList;
+    }
 
+    renderErrorOverlay() {
+        let position = 'right';
+        const { errorText = '', isValid = true, type, overlayPos } = this.props;
 
-	renderMultiSelectOptions(values) {
-		let {onOtherChange} = this.props;
-		let optionsList = [];
-		if (onOtherChange) {
-			optionsList = values.map(option => {
-				return {
-					label: option.title,
-					value: option.enum,
-				};
-			}).concat([{
-				label: i18n(other.OTHER),
-				value: i18n(other.OTHER),
-			}]);
-		}
-		else {
-			optionsList = values.map(option => {
-				return {
-					label: option.title,
-					value: option.enum,
-				};
-			});
-		}
-		if (optionsList.length > 0 && optionsList[0].value === '') {
-			optionsList.shift();
-		}
-		return optionsList;
-	}
+        if (overlayPos) {
+            position = overlayPos;
+        } else if (
+            type === 'text' ||
+            type === 'email' ||
+            type === 'number' ||
+            type === 'password'
+        ) {
+            position = 'bottom';
+        }
 
-	renderErrorOverlay() {
-		let position = 'right';
-		const {errorText = '', isValid = true, type, overlayPos} = this.props;
+        return (
+            <Overlay
+                show={!isValid}
+                placement={position}
+                target={() => {
+                    let { otherInputDisabled } = this.state;
+                    let target = otherInputDisabled
+                        ? ReactDOM.findDOMNode(this.input)
+                        : ReactDOM.findDOMNode(this.otherValue);
+                    return target.offsetParent ? target : undefined;
+                }}
+                container={this}>
+                <Tooltip
+                    id={`error-${errorText.replace(' ', '-')}`}
+                    className="validation-error-message">
+                    {errorText}
+                </Tooltip>
+            </Overlay>
+        );
+    }
 
-		if (overlayPos) {
-			position = overlayPos;
-		}
-		else if (type === 'text'
-			|| type === 'email'
-			|| type === 'number'
-			|| type === 'password') {
-			position = 'bottom';
-		}
+    getValue() {
+        let res = '';
+        let { isMultiSelect } = this.props;
+        let { otherInputDisabled } = this.state;
 
-		return (
-			<Overlay
-				show={!isValid}
-				placement={position}
-				target={() => {
-					let {otherInputDisabled} = this.state;
-					let target = otherInputDisabled ? ReactDOM.findDOMNode(this.input) :  ReactDOM.findDOMNode(this.otherValue);
-					return target.offsetParent ? target : undefined;
-				}}
-				container={this}>
-				<Tooltip
-					id={`error-${errorText.replace(' ', '-')}`}
-					className='validation-error-message'>
-					{errorText}
-				</Tooltip>
-			</Overlay>
-		);
-	}
+        if (otherInputDisabled) {
+            res = isMultiSelect ? this.input.getValue() : this.input.value;
+        } else {
+            res = this.otherValue.value;
+        }
+        return res;
+    }
 
-	getValue() {
-		let res = '';
-		let {isMultiSelect} = this.props;
-		let {otherInputDisabled} = this.state;
+    enumChanged() {
+        let enumValue = this.input.value;
+        let {
+            onEnumChange,
+            onOtherChange,
+            isMultiSelect,
+            onChange
+        } = this.props;
+        this.setState({
+            otherInputDisabled:
+                !Boolean(onOtherChange) || enumValue !== other.OTHER
+        });
 
-		if (otherInputDisabled) {
-			res = isMultiSelect ? this.input.getValue() : this.input.value;
-		} else {
-			res = this.otherValue.value;
-		}
-		return res;
-	}
+        let value = isMultiSelect ? [enumValue] : enumValue;
+        if (onEnumChange) {
+            onEnumChange(value);
+        }
+        if (onChange) {
+            onChange(value);
+        }
+    }
 
-	enumChanged() {
-		let enumValue = this.input.value;
-		let {onEnumChange, onOtherChange, isMultiSelect, onChange} = this.props;
-		this.setState({
-			otherInputDisabled: !Boolean(onOtherChange) || enumValue !== other.OTHER
-		});
+    multiSelectEnumChanged(enumValue) {
+        let { onEnumChange, onOtherChange } = this.props;
+        let selectedValues = enumValue.map(enumVal => {
+            return enumVal.value;
+        });
 
-		let value = isMultiSelect ? [enumValue] : enumValue;
-		if (onEnumChange) {
-			onEnumChange(value);
-		}
-		if (onChange) {
-			onChange(value);
-		}
-	}
+        if (this.state.otherInputDisabled === false) {
+            selectedValues.shift();
+        } else if (selectedValues.includes(i18n(other.OTHER))) {
+            selectedValues = [i18n(other.OTHER)];
+        }
 
-	multiSelectEnumChanged(enumValue) {
-		let {onEnumChange, onOtherChange} = this.props;
-		let selectedValues = enumValue.map(enumVal => {
-			return enumVal.value;
-		});
+        this.setState({
+            otherInputDisabled:
+                !Boolean(onOtherChange) ||
+                !selectedValues.includes(i18n(other.OTHER))
+        });
+        onEnumChange(selectedValues);
+    }
 
-		if (this.state.otherInputDisabled === false) {
-			selectedValues.shift();
-		}
-		else if (selectedValues.includes(i18n(other.OTHER))) {
-			selectedValues = [i18n(other.OTHER)];
-		}
+    changedOtherInput() {
+        let { onOtherChange } = this.props;
+        onOtherChange(this.otherValue.value);
+    }
 
-		this.setState({
-			otherInputDisabled: !Boolean(onOtherChange) || !selectedValues.includes(i18n(other.OTHER))
-		});
-		onEnumChange(selectedValues);
-	}
-
-	changedOtherInput() {
-		let {onOtherChange} = this.props;
-		onOtherChange(this.otherValue.value);
-	}
-
-	componentDidUpdate() {
-		let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
-		if (this.oldProps.otherValue !== otherValue
-			|| this.oldProps.selectedEnum !== selectedEnum
-			|| this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
-			this.oldProps = {
-				otherValue,
-				selectedEnum,
-				multiSelectedEnum
-			};
-			onInputChange();
-		}
-	}
-
-	static getTitleByName(values, name) {
-		for (let key of Object.keys(values)) {
-			let option = values[key].find(option => option.enum === name);
-			if (option) {
-				return option.title;
-			}
-		}
-		return name;
-	}
+    componentDidUpdate() {
+        let {
+            otherValue,
+            selectedEnum,
+            onInputChange,
+            multiSelectedEnum
+        } = this.props;
+        if (
+            this.oldProps.otherValue !== otherValue ||
+            this.oldProps.selectedEnum !== selectedEnum ||
+            this.oldProps.multiSelectedEnum !== multiSelectedEnum
+        ) {
+            this.oldProps = {
+                otherValue,
+                selectedEnum,
+                multiSelectedEnum
+            };
+            onInputChange();
+        }
+    }
 
+    static getTitleByName(values, name) {
+        for (let key of Object.keys(values)) {
+            let option = values[key].find(option => option.enum === name);
+            if (option) {
+                return option.title;
+            }
+        }
+        return name;
+    }
 }
 
 export default InputOptions;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index e440fcda69..3e0bb32ca9 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -22,114 +22,149 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js';
 import FormControl from 'react-bootstrap/lib/FormControl.js';
 
 class InputWrapper extends React.Component {
-
-	state = {
-		value: this.props.value,
-		checked: this.props.checked,
-		selectedValues: []
-	}
-
-	render() {
-		const {label, hasError, validations = {}, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
-		const {groupClassName, ...inputProps} = this.props;
-		return(
-			<FormGroup className={classNames('form-group', [groupClassName], {'required' : validations.required , 'has-error' : hasError})} >
-				{(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
-				{(type === 'text' || type === 'number') &&
-					<FormControl
-						bsClass={'form-control input-options-other'}
-						onChange={(e) => this.onChange(e)}
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						onBlur={onBlur}
-						onKeyDown={onKeyDown}
-						value={value || ''}
-						ref={(input) => this.inputWrapper = input}
-						type={type}
-						data-test-id={this.props['data-test-id']}/>}
-
-				{type === 'textarea' &&
-					<FormControl
-						className='form-control input-options-other'
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						value={value || ''}
-						onBlur={onBlur}
-						onKeyDown={onKeyDown}
-						componentClass={type}
-						onChange={(e) => this.onChange(e)}
-						data-test-id={this.props['data-test-id']}/>}
-
-				{type === 'checkbox' &&
-					<Checkbox
-						className={classNames({'required' : validations.required , 'has-error' : hasError})}
-						onChange={(e)=>this.onChangeCheckBox(e)}
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						checked={value}
-						data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
-
-				{type === 'radio' &&
-					<Radio name={name}
-						checked={checked}
-						disabled={isReadOnlyMode || Boolean(disabled)}
-						value={value}
-						ref={(input) => this.inputWrapper = input}
-						onChange={(isChecked)=>this.onChangeRadio(isChecked)} label={label}
-						data-test-id={this.props['data-test-id']} />}
-				{type === 'select' &&
-					<FormControl onClick={ (e) => this.optionSelect(e) }
-						componentClass={type}
-						name={name} {...inputProps}
-						data-test-id={this.props['data-test-id']}/>}
-
-			</FormGroup>
-
-		);
-	}
-
-	getValue() {
-		return this.props.type !== 'select' ? this.state.value : this.state.selectedValues;
-	}
-
-	getChecked() {
-		return this.state.checked;
-	}
-
-	optionSelect(e) {
-		let selectedValues = [];
-		if (e.target.value) {
-			selectedValues.push(e.target.value);
-		}
-		this.setState({
-			selectedValues
-		});
-	}
-
-	onChange(e) {
-		let {onChange} = this.props;
-		this.setState({
-			value: e.target.value
-		});
-		onChange(e.target.value);
-	}
-
-	onChangeCheckBox(e) {
-		let {onChange} = this.props;
-		this.setState({
-			checked: e.target.checked
-		});
-		onChange(e.target.checked);
-	}
-
-	onChangeRadio(isChecked) {
-		let {onChange} = this.props;
-		this.setState({
-			checked: isChecked
-		});
-		onChange(this.state.value);
-	}
-
-	focus() {
-		ReactDOM.findDOMNode(this.inputWrapper).focus();
-	}
-
+    state = {
+        value: this.props.value,
+        checked: this.props.checked,
+        selectedValues: []
+    };
+
+    render() {
+        const {
+            label,
+            hasError,
+            validations = {},
+            isReadOnlyMode,
+            value,
+            onBlur,
+            onKeyDown,
+            type,
+            disabled,
+            checked,
+            name
+        } = this.props;
+        const { groupClassName, ...inputProps } = this.props;
+        return (
+            <FormGroup
+                className={classNames('form-group', [groupClassName], {
+                    required: validations.required,
+                    'has-error': hasError
+                })}>
+                {label &&
+                    (type !== 'checkbox' && type !== 'radio') && (
+                        <label className="control-label">{label}</label>
+                    )}
+                {(type === 'text' || type === 'number') && (
+                    <FormControl
+                        bsClass={'form-control input-options-other'}
+                        onChange={e => this.onChange(e)}
+                        disabled={isReadOnlyMode || Boolean(disabled)}
+                        onBlur={onBlur}
+                        onKeyDown={onKeyDown}
+                        value={value || ''}
+                        ref={input => (this.inputWrapper = input)}
+                        type={type}
+                        data-test-id={this.props['data-test-id']}
+                    />
+                )}
+
+                {type === 'textarea' && (
+                    <FormControl
+                        className="form-control input-options-other"
+                        disabled={isReadOnlyMode || Boolean(disabled)}
+                        value={value || ''}
+                        onBlur={onBlur}
+                        onKeyDown={onKeyDown}
+                        componentClass={type}
+                        onChange={e => this.onChange(e)}
+                        data-test-id={this.props['data-test-id']}
+                    />
+                )}
+
+                {type === 'checkbox' && (
+                    <Checkbox
+                        className={classNames({
+                            required: validations.required,
+                            'has-error': hasError
+                        })}
+                        onChange={e => this.onChangeCheckBox(e)}
+                        disabled={isReadOnlyMode || Boolean(disabled)}
+                        checked={value}
+                        data-test-id={this.props['data-test-id']}>
+                        {label}
+                    </Checkbox>
+                )}
+
+                {type === 'radio' && (
+                    <Radio
+                        name={name}
+                        checked={checked}
+                        disabled={isReadOnlyMode || Boolean(disabled)}
+                        value={value}
+                        ref={input => (this.inputWrapper = input)}
+                        onChange={isChecked => this.onChangeRadio(isChecked)}
+                        label={label}
+                        data-test-id={this.props['data-test-id']}
+                    />
+                )}
+                {type === 'select' && (
+                    <FormControl
+                        onClick={e => this.optionSelect(e)}
+                        componentClass={type}
+                        name={name}
+                        {...inputProps}
+                        data-test-id={this.props['data-test-id']}
+                    />
+                )}
+            </FormGroup>
+        );
+    }
+
+    getValue() {
+        return this.props.type !== 'select'
+            ? this.state.value
+            : this.state.selectedValues;
+    }
+
+    getChecked() {
+        return this.state.checked;
+    }
+
+    optionSelect(e) {
+        let selectedValues = [];
+        if (e.target.value) {
+            selectedValues.push(e.target.value);
+        }
+        this.setState({
+            selectedValues
+        });
+    }
+
+    onChange(e) {
+        let { onChange } = this.props;
+        this.setState({
+            value: e.target.value
+        });
+        onChange(e.target.value);
+    }
+
+    onChangeCheckBox(e) {
+        let { onChange } = this.props;
+        this.setState({
+            checked: e.target.checked
+        });
+        onChange(e.target.checked);
+    }
+
+    onChangeRadio(isChecked) {
+        let { onChange } = this.props;
+        this.setState({
+            checked: isChecked
+        });
+        onChange(this.state.value);
+    }
+
+    focus() {
+        ReactDOM.findDOMNode(this.inputWrapper).focus();
+    }
 }
-export default  InputWrapper;
+export default InputWrapper;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
index 0982c133e6..429985a902 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
@@ -16,64 +16,76 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js';
+import { default as SDCTabs } from 'sdc-ui/lib/react/Tabs.js';
 import Overlay from 'react-bootstrap/lib/Overlay.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-export default
-class Tabs extends React.Component {
+export default class Tabs extends React.Component {
+    static propTypes = {
+        children: PropTypes.node
+    };
 
-	static propTypes = {
-		children: PropTypes.node
-	};
+    cloneTab(element) {
+        const { invalidTabs } = this.props;
+        return React.cloneElement(element, {
+            key: element.props.tabId,
+            className:
+                invalidTabs.indexOf(element.props.tabId) > -1
+                    ? 'invalid-tab'
+                    : 'valid-tab'
+        });
+    }
 
-	cloneTab(element) {
-		const {invalidTabs} = this.props;
-		return React.cloneElement(
-			element,
-			{
-				key: element.props.tabId,
-				className: invalidTabs.indexOf(element.props.tabId) > -1 ? 'invalid-tab' : 'valid-tab'
-			}
-		);
-	}
+    showTabsError() {
+        const { invalidTabs } = this.props;
+        const showError =
+            (invalidTabs.length === 1 &&
+                invalidTabs[0] !== this.props.activeTab) ||
+            invalidTabs.length > 1;
+        return showError;
+    }
 
-	showTabsError() {
-		const {invalidTabs} = this.props;
-		const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeTab) || (invalidTabs.length > 1));
-		return showError;
-	}
-
-	render() {
-		// eslint-disable-next-line no-unused-vars
-		let {invalidTabs, ...tabProps} = this.props;
-		return (
-			<div>
-				<SDCTabs {...tabProps} ref='tabsList' id='tabsList' >
-					{this.props.children.map(element => this.cloneTab(element))}
-				</SDCTabs>
-				<Overlay
-					animation={false}
-					show={this.showTabsError()}
-					placement='bottom'
-					target={() => {
-						let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)');
-						return target && target.offsetParent ? target : undefined;
-					}
-					}
-					container={() => {
-						let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)');
-						return target && target.offsetParent ? target.offsetParent : this;
-					}}>
-					<Tooltip
-						id='error-some-tabs-contain-errors'
-						className='validation-error-message'>
-						{i18n('One or more tabs are invalid')}
-					</Tooltip>
-				</Overlay>
-			</div>
-		);
-	}
+    render() {
+        // eslint-disable-next-line no-unused-vars
+        let { invalidTabs, ...tabProps } = this.props;
+        return (
+            <div>
+                <SDCTabs {...tabProps} ref="tabsList" id="tabsList">
+                    {this.props.children.map(element => this.cloneTab(element))}
+                </SDCTabs>
+                <Overlay
+                    animation={false}
+                    show={this.showTabsError()}
+                    placement="bottom"
+                    target={() => {
+                        let target = ReactDOM.findDOMNode(
+                            this.refs.tabsList
+                        ).querySelector(
+                            'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'
+                        );
+                        return target && target.offsetParent
+                            ? target
+                            : undefined;
+                    }}
+                    container={() => {
+                        let target = ReactDOM.findDOMNode(
+                            this.refs.tabsList
+                        ).querySelector(
+                            'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'
+                        );
+                        return target && target.offsetParent
+                            ? target.offsetParent
+                            : this;
+                    }}>
+                    <Tooltip
+                        id="error-some-tabs-contain-errors"
+                        className="validation-error-message">
+                        {i18n('One or more tabs are invalid')}
+                    </Tooltip>
+                </Overlay>
+            </div>
+        );
+    }
 }
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index 151d3fe859..e460f68a98 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -27,32 +27,63 @@ import Button from 'sdc-ui/lib/react/Button.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
 class ValidationButtons extends React.Component {
+    static propTypes = {
+        labledButtons: PropTypes.bool.isRequired,
+        isReadOnlyMode: PropTypes.bool,
+        submitButtonText: PropTypes.string,
+        cancelButtonText: PropTypes.string
+    };
 
-	static propTypes = {
-		labledButtons: PropTypes.bool.isRequired,
-		isReadOnlyMode: PropTypes.bool,
-		submitButtonText: PropTypes.string,
-		cancelButtonText: PropTypes.string
-	};
+    state = {
+        isValid: this.props.formValid
+    };
 
-	state = {
-		isValid: this.props.formValid
-	};
-
-	render() {
-		let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : <SVGIcon className='check' name='check'/>;
-		let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : <SVGIcon className='close' name='close'/>;
-		return (
-			<div className='validation-buttons'>
-				{!this.props.isReadOnlyMode ?
-					<div>
-						<Button type='submit' data-test-id='form-submit-button' disabled={!this.state.isValid}>{submitBtn}</Button>
-						<Button btnType='outline' type='reset' data-test-id='form-close-button'>{closeBtn}</Button>
-					</div>
-					: <Button btnType='outline' type='reset' data-test-id='form-close-button'>{i18n('Close')}</Button>
-				}
-			</div>
-		);
-	}
+    render() {
+        let submitBtn = this.props.labledButtons ? (
+            this.props.submitButtonText ? (
+                this.props.submitButtonText
+            ) : (
+                i18n('Save')
+            )
+        ) : (
+            <SVGIcon className="check" name="check" />
+        );
+        let closeBtn = this.props.labledButtons ? (
+            this.props.cancelButtonText ? (
+                this.props.cancelButtonText
+            ) : (
+                i18n('Cancel')
+            )
+        ) : (
+            <SVGIcon className="close" name="close" />
+        );
+        return (
+            <div className="validation-buttons">
+                {!this.props.isReadOnlyMode ? (
+                    <div>
+                        <Button
+                            type="submit"
+                            data-test-id="form-submit-button"
+                            disabled={!this.state.isValid}>
+                            {submitBtn}
+                        </Button>
+                        <Button
+                            btnType="outline"
+                            type="reset"
+                            data-test-id="form-close-button">
+                            {closeBtn}
+                        </Button>
+                    </div>
+                ) : (
+                    <Button
+                        btnType="outline"
+                        type="reset"
+                        data-test-id="form-close-button">
+                        {i18n('Close')}
+                    </Button>
+                )}
+            </div>
+        );
+    }
 }
 export default ValidationButtons;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
index 60c559a3d1..359af9d3b8 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
@@ -19,50 +19,78 @@ import classnames from 'classnames';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import store from 'sdc-app/AppStore.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 class ListEditorItem extends React.Component {
-	static propTypes = {
-		onSelect:  PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-		onDelete:  PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-		onEdit:  PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-		children: PropTypes.node,
-		isReadOnlyMode: PropTypes.bool
-	};
+    static propTypes = {
+        onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+        onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+        onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+        children: PropTypes.node,
+        isReadOnlyMode: PropTypes.bool
+    };
 
-	render() {
-		let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props;
-		let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode;
-		return (
-			<div className={classnames('list-editor-item-view', {'selectable': Boolean(onSelect)})} data-test-id='list-editor-item'>
-				<div className='list-editor-item-view-content' onClick={onSelect}>
-					{children}
-				</div>
-				{(onEdit || onDelete) && <div className='list-editor-item-view-controller'>
-					{onEdit && <SVGIcon name='sliders' onClick={() => this.onClickedItem(onEdit)}/>}
-					{onDelete && isAbilityToDelete && <SVGIcon name='trashO' data-test-id='delete-list-item' onClick={() => this.onClickedItem(onDelete)}/>}
-				</div>}
-			</div>
-		);
-	}
+    render() {
+        let {
+            onDelete,
+            onSelect,
+            onEdit,
+            children,
+            isReadOnlyMode
+        } = this.props;
+        let isAbilityToDelete =
+            isReadOnlyMode === undefined ? true : !isReadOnlyMode;
+        return (
+            <div
+                className={classnames('list-editor-item-view', {
+                    selectable: Boolean(onSelect)
+                })}
+                data-test-id="list-editor-item">
+                <div
+                    className="list-editor-item-view-content"
+                    onClick={onSelect}>
+                    {children}
+                </div>
+                {(onEdit || onDelete) && (
+                    <div className="list-editor-item-view-controller">
+                        {onEdit && (
+                            <SVGIcon
+                                name="sliders"
+                                onClick={() => this.onClickedItem(onEdit)}
+                            />
+                        )}
+                        {onDelete &&
+                            isAbilityToDelete && (
+                                <SVGIcon
+                                    name="trashO"
+                                    data-test-id="delete-list-item"
+                                    onClick={() => this.onClickedItem(onDelete)}
+                                />
+                            )}
+                    </div>
+                )}
+            </div>
+        );
+    }
 
-	onClickedItem(callBackFunc) {
-		if(typeof callBackFunc === 'function') {
-			let {isCheckedOut} = this.props;
-			if (isCheckedOut === false) {
-				store.dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_WARNING,
-					data: {
-						title: i18n('Error'),
-						msg: i18n('This item is checkedin/submitted, Click Check Out to continue')
-					}
-				});
-			}
-			else {
-				callBackFunc();
-			}
-		}
-	}
+    onClickedItem(callBackFunc) {
+        if (typeof callBackFunc === 'function') {
+            let { isCheckedOut } = this.props;
+            if (isCheckedOut === false) {
+                store.dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                    data: {
+                        title: i18n('Error'),
+                        msg: i18n(
+                            'This item is checkedin/submitted, Click Check Out to continue'
+                        )
+                    }
+                });
+            } else {
+                callBackFunc();
+            }
+        }
+    }
 }
 
 export default ListEditorItem;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
index 839f9a504a..509ea176a5 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
@@ -15,10 +15,8 @@
  */
 import React from 'react';
 
-export const ListEditorItemViewField = ({children}) => (
-	<div className='list-editor-item-view-field'>
-		{children}
-	</div>
+export const ListEditorItemViewField = ({ children }) => (
+    <div className="list-editor-item-view-field">{children}</div>
 );
 
 export default ListEditorItemViewField;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
index 16823b7dc5..f71372ce1a 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
@@ -19,69 +19,107 @@ import Button from 'sdc-ui/lib/react/Button.js';
 import classnames from 'classnames';
 import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
 
-const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => {
-	 return (
-		 <div className='list-editor-view-header'>
-			 {title && <div className='list-editor-view-title'>{title}</div>}
-			 <div>
-				 { onAdd &&
-					 <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button>
-				 }
-			 </div>
-		 </div>
-	 );
+const ListEditorHeader = ({
+    onAdd,
+    isReadOnlyMode,
+    title,
+    plusButtonTitle
+}) => {
+    return (
+        <div className="list-editor-view-header">
+            {title && <div className="list-editor-view-title">{title}</div>}
+            <div>
+                {onAdd && (
+                    <Button
+                        data-test-id="add-button"
+                        iconName="plusThin"
+                        btnType="link"
+                        onClick={onAdd}
+                        disabled={isReadOnlyMode === true}>
+                        {plusButtonTitle}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
 };
 
-const ListEditorScroller = ({children, twoColumns}) => {
-	return (
-		<div className='list-editor-view-list-scroller'>
-			<div className={classnames('list-editor-view-list', {'two-columns': twoColumns})}>
-				{children}
-			</div>
-		</div>
-	);
+const ListEditorScroller = ({ children, twoColumns }) => {
+    return (
+        <div className="list-editor-view-list-scroller">
+            <div
+                className={classnames('list-editor-view-list', {
+                    'two-columns': twoColumns
+                })}>
+                {children}
+            </div>
+        </div>
+    );
 };
 
-const FilterWrapper = ({onFilter, filterValue}) => {
-	return (
-		<div className='expandble-search-wrapper'>
-			<ExpandableInput
-				onChange={onFilter}
-				iconType='search'
-				value={filterValue}/>
-		</div>
-	);
+const FilterWrapper = ({ onFilter, filterValue }) => {
+    return (
+        <div className="expandble-search-wrapper">
+            <ExpandableInput
+                onChange={onFilter}
+                iconType="search"
+                value={filterValue}
+            />
+        </div>
+    );
 };
 
 class ListEditorView extends React.Component {
+    static defaultProps = {
+        className: '',
+        twoColumns: false
+    };
 
-	static defaultProps = {
-		className: '',
-		twoColumns: false
-	};
-
-	static propTypes = {
-		title: PropTypes.string,
-		plusButtonTitle: PropTypes.string,
-		children: PropTypes.node,
-		filterValue: PropTypes.string,
-		onFilter: PropTypes.func,
-		className: PropTypes.string,
-		isReadOnlyMode: PropTypes.bool,
-		placeholder: PropTypes.string,
-		twoColumns: PropTypes.bool
-	};
-
-	render() {
-		let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props;
-		return (
-			<div className={classnames('list-editor-view', className)}>
-				<ListEditorHeader onAdd={onAdd} isReadOnlyMode={isReadOnlyMode} plusButtonTitle={plusButtonTitle} title={title}/>
-				{onFilter && (children.length || filterValue) && <FilterWrapper onFilter={onFilter} filterValue={filterValue}/>}
-				<ListEditorScroller children={children} twoColumns={twoColumns}/>
-			</div>
-		);
-	}
+    static propTypes = {
+        title: PropTypes.string,
+        plusButtonTitle: PropTypes.string,
+        children: PropTypes.node,
+        filterValue: PropTypes.string,
+        onFilter: PropTypes.func,
+        className: PropTypes.string,
+        isReadOnlyMode: PropTypes.bool,
+        placeholder: PropTypes.string,
+        twoColumns: PropTypes.bool
+    };
 
+    render() {
+        let {
+            title,
+            plusButtonTitle,
+            onAdd,
+            children,
+            onFilter,
+            className,
+            isReadOnlyMode,
+            twoColumns,
+            filterValue
+        } = this.props;
+        return (
+            <div className={classnames('list-editor-view', className)}>
+                <ListEditorHeader
+                    onAdd={onAdd}
+                    isReadOnlyMode={isReadOnlyMode}
+                    plusButtonTitle={plusButtonTitle}
+                    title={title}
+                />
+                {onFilter &&
+                    (children.length || filterValue) && (
+                        <FilterWrapper
+                            onFilter={onFilter}
+                            filterValue={filterValue}
+                        />
+                    )}
+                <ListEditorScroller
+                    children={children}
+                    twoColumns={twoColumns}
+                />
+            </div>
+        );
+    }
 }
 export default ListEditorView;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
index 81125c84ba..67258c956d 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
+++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
@@ -1,27 +1,25 @@
 import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
+import { storiesOf, action } from '@kadira/storybook';
 import ListEditorView from './ListEditorView.jsx';
 import ListEditorItemView from './ListEditorItemView.jsx';
 import ListEditorItemField from './ListEditorItemViewField.jsx';
-import {text, number} from '@kadira/storybook-addon-knobs';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { text, number } from '@kadira/storybook-addon-knobs';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
 
-function makeChildren({onEdit = false, onDelete = false} = {}) {
-    return (
-        [...Array(number('Items', 2)).keys()].map(index => (
-            <ListEditorItemView 
-                key={index} 
-                onEdit={onEdit ? onEdit : undefined}
-                onDelete={onDelete ? onDelete : undefined}>
-				<ListEditorItemField>
-                    <div>{text('field 1', 'Lorum Ipsum')}</div>
-				</ListEditorItemField>
-				<ListEditorItemField>
-                    <div>{text('field 2', 'Lorum Ipsum')}</div>
-				</ListEditorItemField>
-            </ListEditorItemView>)
-        )
-    );
+function makeChildren({ onEdit = false, onDelete = false } = {}) {
+    return [...Array(number('Items', 2)).keys()].map(index => (
+        <ListEditorItemView
+            key={index}
+            onEdit={onEdit ? onEdit : undefined}
+            onDelete={onDelete ? onDelete : undefined}>
+            <ListEditorItemField>
+                <div>{text('field 1', 'Lorum Ipsum')}</div>
+            </ListEditorItemField>
+            <ListEditorItemField>
+                <div>{text('field 2', 'Lorum Ipsum')}</div>
+            </ListEditorItemField>
+        </ListEditorItemView>
+    ));
 }
 
 const stories = storiesOf('ListEditor', module);
@@ -29,32 +27,49 @@ stories.addDecorator(withKnobs);
 
 stories
     .add('regular', () => (
-        <ListEditorView title='List Editor'>
-        {makeChildren()}
-        </ListEditorView>
+        <ListEditorView title="List Editor">{makeChildren()}</ListEditorView>
     ))
     .add('two columns', () => (
-        <ListEditorView title='List Editor' twoColumns>
+        <ListEditorView title="List Editor" twoColumns>
             {makeChildren()}
         </ListEditorView>
     ))
     .add('with add', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren()}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren()}
         </ListEditorView>
     ))
     .add('with delete', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren({onDelete: action('onDelete')})}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren({ onDelete: action('onDelete') })}
         </ListEditorView>
     ))
     .add('with edit', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren({onEdit: action('onEdit')})}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren({ onEdit: action('onEdit') })}
         </ListEditorView>
     ))
     .add('with edit and delete', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren({
+                onDelete: action('onDelete'),
+                onEdit: action('onEdit')
+            })}
         </ListEditorView>
     ));
diff --git a/openecomp-ui/src/nfvo-components/loader/Loader.jsx b/openecomp-ui/src/nfvo-components/loader/Loader.jsx
index 9ebe52dcfc..076351bf7a 100644
--- a/openecomp-ui/src/nfvo-components/loader/Loader.jsx
+++ b/openecomp-ui/src/nfvo-components/loader/Loader.jsx
@@ -16,40 +16,39 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
-const mapStateToProps = ({loader}) => {
-	return {
-		isLoading: loader.isLoading
-	};
+const mapStateToProps = ({ loader }) => {
+    return {
+        isLoading: loader.isLoading
+    };
 };
 
 class Loader extends React.Component {
-
-	static propTypes = {
-		isLoading: PropTypes.bool.isRequired
-	};
-
-	static defaultProps = {
-		isLoading: false
-	};
-
-	shouldComponentUpdate(nextProps) {
-		return (nextProps.isLoading !== this.props.isLoading);
-	}
-
-	render() {
-		let {isLoading} = this.props;
-		return (
-			<div className='onboarding-loader'>
-				{
-					isLoading && <div className='onboarding-loader-backdrop'>
-						<div className='tlv-loader large'></div>
-					</div>
-				}
-			</div>
-		);
-	}
+    static propTypes = {
+        isLoading: PropTypes.bool.isRequired
+    };
+
+    static defaultProps = {
+        isLoading: false
+    };
+
+    shouldComponentUpdate(nextProps) {
+        return nextProps.isLoading !== this.props.isLoading;
+    }
+
+    render() {
+        let { isLoading } = this.props;
+        return (
+            <div className="onboarding-loader">
+                {isLoading && (
+                    <div className="onboarding-loader-backdrop">
+                        <div className="tlv-loader large" />
+                    </div>
+                )}
+            </div>
+        );
+    }
 }
 
-export default connect(mapStateToProps) (Loader);
+export default connect(mapStateToProps)(Loader);
diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
index 2b531b08fa..e367a74352 100644
--- a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
@@ -16,9 +16,9 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	SHOW: null,
-	HIDE: null,
+    SHOW: null,
+    HIDE: null,
 
-	SEND_REQUEST:  null,
-	RECEIVE_RESPONSE: null
+    SEND_REQUEST: null,
+    RECEIVE_RESPONSE: null
 });
diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
index 3afdad0573..1d0f6790e1 100644
--- a/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
@@ -13,43 +13,54 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {actionTypes} from './LoaderConstants.js';
+import { actionTypes } from './LoaderConstants.js';
 
-export default (state = {fetchingRequests : 0, currentlyFetching : [],  isLoading : false}, action) => {
-	let fetchingRequests = state.fetchingRequests;
-	let newArray;
-	switch (action.type) {
-		case actionTypes.SEND_REQUEST:
-			fetchingRequests++;
-			newArray = state.currentlyFetching.slice();
-			newArray.splice(0, 0, action.url);
-			if (DEBUG) {
-				console.log('Loader SEND REQUEST url: ' + action.url);
-				console.log('Loader SEND REQUEST number of fetching requests: ' + fetchingRequests);
-			}
-			return {
-				fetchingRequests: fetchingRequests,
-				currentlyFetching : newArray,
-				isLoading: true
-			};
-		case actionTypes.RECEIVE_RESPONSE:
-			fetchingRequests--;
+export default (
+    state = { fetchingRequests: 0, currentlyFetching: [], isLoading: false },
+    action
+) => {
+    let fetchingRequests = state.fetchingRequests;
+    let newArray;
+    switch (action.type) {
+        case actionTypes.SEND_REQUEST:
+            fetchingRequests++;
+            newArray = state.currentlyFetching.slice();
+            newArray.splice(0, 0, action.url);
+            if (DEBUG) {
+                console.log('Loader SEND REQUEST url: ' + action.url);
+                console.log(
+                    'Loader SEND REQUEST number of fetching requests: ' +
+                        fetchingRequests
+                );
+            }
+            return {
+                fetchingRequests: fetchingRequests,
+                currentlyFetching: newArray,
+                isLoading: true
+            };
+        case actionTypes.RECEIVE_RESPONSE:
+            fetchingRequests--;
 
-			newArray = state.currentlyFetching.filter((item) => {return item !== action.url;});
-			if (DEBUG) {
-				console.log('Loader RECEIVE_RESPONSE url: ' + action.url);
-				console.log('Loader RECEIVE_RESPONSE: number of fetching requests: ' + fetchingRequests);
-			}
-			return {
-				currentlyFetching : newArray,
-				fetchingRequests: fetchingRequests,
-				isLoading: (fetchingRequests !== 0)
-			};
-		case actionTypes.SHOW:
-			return {isLoading: true};
-		case actionTypes.HIDE:
-			return {isLoading: false};
-		default:
-			return state;
-	}
+            newArray = state.currentlyFetching.filter(item => {
+                return item !== action.url;
+            });
+            if (DEBUG) {
+                console.log('Loader RECEIVE_RESPONSE url: ' + action.url);
+                console.log(
+                    'Loader RECEIVE_RESPONSE: number of fetching requests: ' +
+                        fetchingRequests
+                );
+            }
+            return {
+                currentlyFetching: newArray,
+                fetchingRequests: fetchingRequests,
+                isLoading: fetchingRequests !== 0
+            };
+        case actionTypes.SHOW:
+            return { isLoading: true };
+        case actionTypes.HIDE:
+            return { isLoading: false };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
index 75b7983ac3..3f19bd76a3 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
@@ -16,145 +16,195 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import Modal from 'nfvo-components/modal/Modal.jsx';
 import Button from 'sdc-ui/lib/react/Button.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {modalContentComponents} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes, typeEnum} from './GlobalModalConstants.js';
-
+import { modalContentComponents } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes, typeEnum } from './GlobalModalConstants.js';
 
 const typeClass = {
-	'default': 'primary',
-	error: 'negative',
-	warning: 'warning',
-	success: 'positive'
+    default: 'primary',
+    error: 'negative',
+    warning: 'warning',
+    success: 'positive'
 };
 
 const type2HeaderColor = {
-	'default': 'primary',
-	error: 'danger',
-	warning: 'warning',
-	success: 'success'
+    default: 'primary',
+    error: 'danger',
+    warning: 'warning',
+    success: 'success'
 };
 
-
-const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => {
-	let myPropsForNoConfirmed = {};
-	if (onConfirmed) {
-		myPropsForNoConfirmed.btnType = 'outline';
-	}
-	return (
-		<Modal.Footer>
-			<div className='sdc-modal-footer'>
-				{onConfirmed && <Button data-test-id='sdc-modal-confirm-button' color={typeClass[type]} onClick={() => {
-					onConfirmed();
-					onClose();
-				}}>{confirmationButtonText}</Button>}
-				<Button {...myPropsForNoConfirmed} data-test-id='sdc-modal-cancel-button' btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => {
-					onDeclined();
-					onClose();} : () => onClose()}>
-					{cancelButtonText}
-				</Button>
-			</div>
-		</Modal.Footer>
-	);
+const ModalFooter = ({
+    type,
+    onConfirmed,
+    onDeclined,
+    onClose,
+    confirmationButtonText,
+    cancelButtonText
+}) => {
+    let myPropsForNoConfirmed = {};
+    if (onConfirmed) {
+        myPropsForNoConfirmed.btnType = 'outline';
+    }
+    return (
+        <Modal.Footer>
+            <div className="sdc-modal-footer">
+                {onConfirmed && (
+                    <Button
+                        data-test-id="sdc-modal-confirm-button"
+                        color={typeClass[type]}
+                        onClick={() => {
+                            onConfirmed();
+                            onClose();
+                        }}>
+                        {confirmationButtonText}
+                    </Button>
+                )}
+                <Button
+                    {...myPropsForNoConfirmed}
+                    data-test-id="sdc-modal-cancel-button"
+                    btnType="outline"
+                    color={typeClass[type]}
+                    onClick={
+                        onDeclined
+                            ? () => {
+                                  onDeclined();
+                                  onClose();
+                              }
+                            : () => onClose()
+                    }>
+                    {cancelButtonText}
+                </Button>
+            </div>
+        </Modal.Footer>
+    );
 };
 
 ModalFooter.defaultProps = {
-	type: 'default',
-	confirmationButtonText: i18n('OK'),
-	cancelButtonText: i18n('Cancel')
+    type: 'default',
+    confirmationButtonText: i18n('OK'),
+    cancelButtonText: i18n('Cancel')
 };
 
 ModalFooter.PropTypes = {
-	type: PropTypes.string,
-	confirmationButtonText: PropTypes.string,
-	cancelButtonText: PropTypes.string
+    type: PropTypes.string,
+    confirmationButtonText: PropTypes.string,
+    cancelButtonText: PropTypes.string
 };
 
-export const mapStateToProps = ({modal}) => {
-	const show = !!modal;
-	return {
-		show,
-		...modal
-	};
+export const mapStateToProps = ({ modal }) => {
+    const show = !!modal;
+    return {
+        show,
+        ...modal
+    };
 };
 
-export const mapActionToProps = (dispatch) => {
-	return {
-		onClose:  () => dispatch({type: actionTypes.GLOBAL_MODAL_CLOSE})
-	};
+export const mapActionToProps = dispatch => {
+    return {
+        onClose: () => dispatch({ type: actionTypes.GLOBAL_MODAL_CLOSE })
+    };
 };
 
-
-export class  GlobalModalView extends React.Component {
-
-	static propTypes = {
-		show: PropTypes.bool,
-		type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
-		title: PropTypes.string,
-		modalComponentProps: PropTypes.object,
-		modalComponentName: PropTypes.string,
-		onConfirmed: PropTypes.func,
-		onDeclined: PropTypes.func,
-		confirmationButtonText: PropTypes.string,
-		cancelButtonText: PropTypes.string
-	};
-
-	static defaultProps = {
-		show: false,
-		type: 'default',
-		title: ''
-	};
-
-	render() {
-		let {title, type, show, modalComponentName, modalComponentProps,
-		modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props;
-		const  ComponentToRender = modalContentComponents[modalComponentName];
-		return (
-			<Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${type2HeaderColor[type]}`}>
-				<Modal.Header>
-					<Modal.Title>{title}</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-					{ComponentToRender ?
-						<ComponentToRender {...modalComponentProps}/> :
-						msg && typeof msg === 'string' ?
-							<div> {msg.split('\n').map((txt, i) => <span key={i}> {txt} <br/> </span>)} </div> :
-							msg
-					}
-				</Modal.Body>
-				{(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) &&
-						<ModalFooter
-							type={type}
-							onConfirmed={onConfirmed}
-							onDeclined={onDeclined}
-							onClose={onClose}
-							confirmationButtonText={confirmationButtonText}
-							cancelButtonText={cancelButtonText}/>}
-			</Modal>
-		);
-	}
-
-	componentDidUpdate() {
-		if (this.props.timeout) {
-			setTimeout(this.props.onClose, this.props.timeout);
-		}
-	}
-};
+export class GlobalModalView extends React.Component {
+    static propTypes = {
+        show: PropTypes.bool,
+        type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+        title: PropTypes.string,
+        modalComponentProps: PropTypes.object,
+        modalComponentName: PropTypes.string,
+        onConfirmed: PropTypes.func,
+        onDeclined: PropTypes.func,
+        confirmationButtonText: PropTypes.string,
+        cancelButtonText: PropTypes.string
+    };
+
+    static defaultProps = {
+        show: false,
+        type: 'default',
+        title: ''
+    };
+
+    render() {
+        let {
+            title,
+            type,
+            show,
+            modalComponentName,
+            modalComponentProps,
+            modalClassName,
+            msg,
+            onConfirmed,
+            onDeclined,
+            confirmationButtonText,
+            cancelButtonText,
+            onClose
+        } = this.props;
+        const ComponentToRender = modalContentComponents[modalComponentName];
+        return (
+            <Modal
+                show={show}
+                bsSize={modalComponentProps && modalComponentProps.size}
+                className={`onborading-modal ${modalClassName || ''} ${
+                    type2HeaderColor[type]
+                }`}>
+                <Modal.Header>
+                    <Modal.Title>{title}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    {ComponentToRender ? (
+                        <ComponentToRender {...modalComponentProps} />
+                    ) : msg && typeof msg === 'string' ? (
+                        <div>
+                            {' '}
+                            {msg.split('\n').map((txt, i) => (
+                                <span key={i}>
+                                    {' '}
+                                    {txt} <br />{' '}
+                                </span>
+                            ))}{' '}
+                        </div>
+                    ) : (
+                        msg
+                    )}
+                </Modal.Body>
+                {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && (
+                    <ModalFooter
+                        type={type}
+                        onConfirmed={onConfirmed}
+                        onDeclined={onDeclined}
+                        onClose={onClose}
+                        confirmationButtonText={confirmationButtonText}
+                        cancelButtonText={cancelButtonText}
+                    />
+                )}
+            </Modal>
+        );
+    }
+
+    componentDidUpdate() {
+        if (this.props.timeout) {
+            setTimeout(this.props.onClose, this.props.timeout);
+        }
+    }
+}
 
 GlobalModalView.propTypes = {
-	show: PropTypes.bool,
-	type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
-	title: PropTypes.string,
-	modalComponentProps: PropTypes.object,
-	modalComponentName: PropTypes.string,
-	onConfirmed: PropTypes.func,
-	onDeclined: PropTypes.func,
-	confirmationButtonText: PropTypes.string,
-	cancelButtonText: PropTypes.string
+    show: PropTypes.bool,
+    type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+    title: PropTypes.string,
+    modalComponentProps: PropTypes.object,
+    modalComponentName: PropTypes.string,
+    onConfirmed: PropTypes.func,
+    onDeclined: PropTypes.func,
+    confirmationButtonText: PropTypes.string,
+    cancelButtonText: PropTypes.string
 };
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(GlobalModalView);
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
index 3e5545371a..e9c1853c97 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
@@ -16,23 +16,21 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	GLOBAL_MODAL_SHOW: null,
-	GLOBAL_MODAL_CLOSE: null,
-	GLOBAL_MODAL_ERROR: null,
-	GLOBAL_MODAL_WARNING: null,
-	GLOBAL_MODAL_SUCCESS: null,
-
+    GLOBAL_MODAL_SHOW: null,
+    GLOBAL_MODAL_CLOSE: null,
+    GLOBAL_MODAL_ERROR: null,
+    GLOBAL_MODAL_WARNING: null,
+    GLOBAL_MODAL_SUCCESS: null
 });
 
-
 export const typeEnum = {
-	DEFAULT: 'default',
-	ERROR: 'error',
-	WARNING: 'warning',
-	SUCCESS: 'success'
+    DEFAULT: 'default',
+    ERROR: 'error',
+    WARNING: 'warning',
+    SUCCESS: 'success'
 };
 
-export const modalSizes  = {
-	LARGE: 'large',
-	SMALL: 'small'	
+export const modalSizes = {
+    LARGE: 'large',
+    SMALL: 'small'
 };
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
index 28674ea569..b2273fa7a7 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
@@ -14,37 +14,37 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, typeEnum} from './GlobalModalConstants.js';
+import { actionTypes, typeEnum } from './GlobalModalConstants.js';
 
 export default (state = null, action) => {
-	switch (action.type) {
-		case actionTypes.GLOBAL_MODAL_SHOW:			
-			return {
-				...action.data
-			};
-		case actionTypes.GLOBAL_MODAL_ERROR:
-			return {
-				type: typeEnum.ERROR,
-				modalClassName: 'notification-modal',
-				...action.data
-			};
-		case actionTypes.GLOBAL_MODAL_WARNING:
-			return {
-				type: typeEnum.WARNING,
-				modalClassName: 'notification-modal',
-				...action.data
-			};
+    switch (action.type) {
+        case actionTypes.GLOBAL_MODAL_SHOW:
+            return {
+                ...action.data
+            };
+        case actionTypes.GLOBAL_MODAL_ERROR:
+            return {
+                type: typeEnum.ERROR,
+                modalClassName: 'notification-modal',
+                ...action.data
+            };
+        case actionTypes.GLOBAL_MODAL_WARNING:
+            return {
+                type: typeEnum.WARNING,
+                modalClassName: 'notification-modal',
+                ...action.data
+            };
 
-		case actionTypes.GLOBAL_MODAL_SUCCESS:
-			return {
-				type: typeEnum.SUCCESS,
-				modalClassName: 'notification-modal',
-				...action.data
-			};	
+        case actionTypes.GLOBAL_MODAL_SUCCESS:
+            return {
+                type: typeEnum.SUCCESS,
+                modalClassName: 'notification-modal',
+                ...action.data
+            };
 
-		case actionTypes.GLOBAL_MODAL_CLOSE:
-			return null;			
-		default:
-			return state;
-	}
+        case actionTypes.GLOBAL_MODAL_CLOSE:
+            return null;
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/nfvo-components/modal/Modal.jsx b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
index b0f704dba9..cfd757501f 100644
--- a/openecomp-ui/src/nfvo-components/modal/Modal.jsx
+++ b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
@@ -20,65 +20,63 @@ import BootstrapModal from 'react-bootstrap/lib/Modal.js';
 let nextModalId = 0;
 
 export default class Modal extends React.Component {
+    static Header = BootstrapModal.Header;
 
-	static Header = BootstrapModal.Header;
+    static Title = BootstrapModal.Title;
 
-	static Title = BootstrapModal.Title;
+    static Footer = BootstrapModal.Footer;
 
-	static Footer = BootstrapModal.Footer;
+    static Body = class ModalBody extends React.Component {
+        render() {
+            let { children, ...props } = this.props;
+            return (
+                <BootstrapModal.Body {...props}>{children}</BootstrapModal.Body>
+            );
+        }
 
-	static Body = class ModalBody extends React.Component {
+        componentDidMount() {
+            let element = ReactDOM.findDOMNode(this);
+            element.addEventListener('click', event => {
+                if (event.target.tagName === 'A') {
+                    event.preventDefault();
+                }
+            });
+            ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+                element.addEventListener(eventType, event =>
+                    event.stopPropagation()
+                )
+            );
+        }
+    };
 
-		render() {
-			let {children, ...props} = this.props;
-			return (
-				<BootstrapModal.Body {...props}>
-					{children}
-				</BootstrapModal.Body>
-			);
-		}
+    componentWillMount() {
+        this.modalId = `dox-ui-modal-${nextModalId++}`;
+    }
 
-		componentDidMount() {
-			let element = ReactDOM.findDOMNode(this);
-			element.addEventListener('click', event => {
-				if (event.target.tagName === 'A') {
-					event.preventDefault();
-				}
-			});
-			['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
-				element.addEventListener(eventType, event => event.stopPropagation())
-			);
-		}
-	};
+    componentDidMount() {
+        this.ensureRootClass();
+    }
 
-	componentWillMount() {
-		this.modalId = `dox-ui-modal-${nextModalId++}`;
-	}
+    componentDidUpdate() {
+        this.ensureRootClass();
+    }
 
-	componentDidMount() {
-		this.ensureRootClass();
-	}
+    ensureRootClass() {
+        let element = document.getElementById(this.modalId);
+        while (element && !element.hasAttribute('data-reactroot')) {
+            element = element.parentElement;
+        }
+        if (element && !element.classList.contains('dox-ui')) {
+            element.classList.add('dox-ui');
+        }
+    }
 
-	componentDidUpdate() {
-		this.ensureRootClass();
-	}
-
-	ensureRootClass() {
-		let element = document.getElementById(this.modalId);
-		while(element && !element.hasAttribute('data-reactroot')) {
-			element = element.parentElement;
-		}
-		if (element && !element.classList.contains('dox-ui')) {
-			element.classList.add('dox-ui');
-		}
-	}
-
-	render() {
-		let {children, ...props} = this.props;
-		return (
-			<BootstrapModal {...props} id={this.modalId}>
-				{children}
-			</BootstrapModal>
-		);
-	}
+    render() {
+        let { children, ...props } = this.props;
+        return (
+            <BootstrapModal {...props} id={this.modalId}>
+                {children}
+            </BootstrapModal>
+        );
+    }
 }
diff --git a/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx b/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx
index 054c1e2852..7ed898e593 100644
--- a/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx
+++ b/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx
@@ -18,23 +18,21 @@ import React from 'react';
 import enhanceWithClickOutside from 'react-click-outside';
 
 class Overlay extends React.Component {
+    handleClickOutside() {
+        if (this.props.onClose) {
+            this.props.onClose();
+        }
+    }
 
-	handleClickOutside() {
-		if (this.props.onClose) {
-			this.props.onClose();
-		}
-	}
-
-	render() {
-		return (
-			<div className='onboarding-overlay'>
-				<div className='arrow-up'></div>
-				<div className='arrow-border'/>
-				{this.props.children}
-			</div>
-		);
-	}
-
-};
+    render() {
+        return (
+            <div className="onboarding-overlay">
+                <div className="arrow-up" />
+                <div className="arrow-border" />
+                {this.props.children}
+            </div>
+        );
+    }
+}
 
 export default enhanceWithClickOutside(Overlay);
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index 2eda7e69bf..61121df335 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -19,116 +19,159 @@ import classnames from 'classnames';
 import Collapse from 'react-bootstrap/lib/Collapse.js';
 
 class NavigationSideBar extends React.Component {
-	static PropTypes = {
-		activeItemId: PropTypes.string.isRequired,
-		onSelect: PropTypes.func,
-		onToggle: PropTypes.func,
-		groups: PropTypes.array,
-		disabled: PropTypes.bool
-	};
+    static PropTypes = {
+        activeItemId: PropTypes.string.isRequired,
+        onSelect: PropTypes.func,
+        onToggle: PropTypes.func,
+        groups: PropTypes.array,
+        disabled: PropTypes.bool
+    };
 
-	constructor(props) {
-		super(props);
-		this.state = {
-			activeItemId: null
-		};
-		this.handleItemClicked = this.handleItemClicked.bind(this);
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            activeItemId: null
+        };
+        this.handleItemClicked = this.handleItemClicked.bind(this);
+    }
 
-	render() {
-		let {groups, activeItemId, disabled = false} = this.props;
+    render() {
+        let { groups, activeItemId, disabled = false } = this.props;
 
-		return (
-			<div className={`navigation-side-content ${disabled ? 'disabled' : ''}`}>
-				{groups.map(group => (
-					<NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} />
-				))}
-			</div>
-		);
-	}
+        return (
+            <div
+                className={`navigation-side-content ${
+                    disabled ? 'disabled' : ''
+                }`}>
+                {groups.map(group => (
+                    <NavigationMenu
+                        menu={group}
+                        activeItemId={activeItemId}
+                        onNavigationItemClick={this.handleItemClicked}
+                        key={'menu_' + group.id}
+                    />
+                ))}
+            </div>
+        );
+    }
 
-	handleItemClicked(event, item) {
-		event.stopPropagation();
-		if(this.props.onToggle) {
-			this.props.onToggle(this.props.groups, item.id);
-		}
-		if(item.onSelect) {
-			item.onSelect();
-		}
-		if(this.props.onSelect) {
-			this.props.onSelect(item);
-		}
-	}
+    handleItemClicked(event, item) {
+        event.stopPropagation();
+        if (this.props.onToggle) {
+            this.props.onToggle(this.props.groups, item.id);
+        }
+        if (item.onSelect) {
+            item.onSelect();
+        }
+        if (this.props.onSelect) {
+            this.props.onSelect(item);
+        }
+    }
 }
 
 class NavigationMenu extends React.Component {
-	static PropTypes = {
-		activeItemId: PropTypes.string.isRequired,
-		onNavigationItemClick: PropTypes.func,
-		menu: PropTypes.array
-	};
+    static PropTypes = {
+        activeItemId: PropTypes.string.isRequired,
+        onNavigationItemClick: PropTypes.func,
+        menu: PropTypes.array
+    };
 
-	render() {
-		const {menu, activeItemId, onNavigationItemClick} = this.props;
-		return (
-			<div className='navigation-group'  key={menu.id}>
-				<NavigationMenuHeader title={menu.name} />
-				<NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />
-			</div>);
-	}
+    render() {
+        const { menu, activeItemId, onNavigationItemClick } = this.props;
+        return (
+            <div className="navigation-group" key={menu.id}>
+                <NavigationMenuHeader title={menu.name} />
+                <NavigationMenuItems
+                    items={menu.items}
+                    activeItemId={activeItemId}
+                    onNavigationItemClick={onNavigationItemClick}
+                />
+            </div>
+        );
+    }
 }
 
 function NavigationMenuHeader(props) {
-	return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
+    return (
+        <div className="group-name" data-test-id="navbar-group-name">
+            {props.title}
+        </div>
+    );
 }
 
 function getItemDataTestId(itemId) {
-	return itemId.split('|')[0];
+    return itemId.split('|')[0];
 }
 function NavigationMenuItems(props) {
-	const {items, activeItemId, onNavigationItemClick} = props;
-	return (
-		<div className='navigation-group-items'>
-			{
-				items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />))
-			}
-		</div>
-	);
+    const { items, activeItemId, onNavigationItemClick } = props;
+    return (
+        <div className="navigation-group-items">
+            {items &&
+                items.map(item => (
+                    <NavigationMenuItem
+                        key={'menuItem_' + item.id}
+                        item={item}
+                        activeItemId={activeItemId}
+                        onNavigationItemClick={onNavigationItemClick}
+                    />
+                ))}
+        </div>
+    );
 }
 
 function NavigationMenuItem(props) {
-	const {onNavigationItemClick, item, activeItemId} = props;
-	const isGroup = item.items && item.items.length > 0;
-	return (
-		<div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
-			<NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
-			{isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + getItemDataTestId(item.id)}>
-				<div>
-						{item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId}  />)) }
-				</div>
-			</Collapse>
-			}
-		</div>
-	);
+    const { onNavigationItemClick, item, activeItemId } = props;
+    const isGroup = item.items && item.items.length > 0;
+    return (
+        <div
+            className={classnames('navigation-group-item', {
+                'selected-item': item.id === activeItemId
+            })}
+            key={'item_' + item.id}>
+            <NavigationLink
+                item={item}
+                activeItemId={activeItemId}
+                onClick={onNavigationItemClick}
+            />
+            {isGroup && (
+                <Collapse
+                    in={item.expanded}
+                    data-test-id={
+                        'navigation-group-' + getItemDataTestId(item.id)
+                    }>
+                    <div>
+                        {item.items.map(subItem => (
+                            <NavigationMenuItem
+                                key={'menuItem_' + subItem.id}
+                                item={subItem}
+                                onNavigationItemClick={onNavigationItemClick}
+                                activeItemId={activeItemId}
+                            />
+                        ))}
+                    </div>
+                </Collapse>
+            )}
+        </div>
+    );
 }
 
 function NavigationLink(props) {
-	const {item, activeItemId, onClick} = props;
-	// todo should this be button
-	return (
-		<div
-			key={'navAction_' + item.id}
-			className={classnames('navigation-group-item-name', {
-				'selected': item.id === activeItemId,
-				'disabled': item.disabled,
-				'bold-name': item.expanded,
-				'hidden': item.hidden
-			})}
-			onClick={(event) => onClick(event, item)}
-			data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
-			{item.name}
-		</div>
-	);
+    const { item, activeItemId, onClick } = props;
+    // todo should this be button
+    return (
+        <div
+            key={'navAction_' + item.id}
+            className={classnames('navigation-group-item-name', {
+                selected: item.id === activeItemId,
+                disabled: item.disabled,
+                'bold-name': item.expanded,
+                hidden: item.hidden
+            })}
+            onClick={event => onClick(event, item)}
+            data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
+            {item.name}
+        </div>
+    );
 }
 
 export default NavigationSideBar;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
index 57fa86f561..c9c5789622 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -17,125 +17,224 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {actionsEnum} from './VersionControllerConstants.js';
+import { actionsEnum } from './VersionControllerConstants.js';
 import ActionButtons from './components/ActionButtons.jsx';
 import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx';
 
-
 class VersionController extends React.Component {
-
-	static propTypes = {
-		version: PropTypes.object,
-		viewableVersions: PropTypes.array,
-		onVersionSwitching: PropTypes.func,
-		callVCAction: PropTypes.func,
-		onSave: PropTypes.func,
-		onClose: PropTypes.func,
-		isFormDataValid: PropTypes.bool,
-		onOpenCommentCommitModal: PropTypes.func,
-		isReadOnlyMode: PropTypes.bool
-	};
-
-	state = {
-		showPermissions: false,
-		showRevisions: false
-	};
-
-	render() {
-		let {version = {},  viewableVersions = [], onVersionSwitching, onMoreVersionsClick, callVCAction, onSave, isReadOnlyMode, itemPermission,
-				isFormDataValid, onClose, onManagePermissions, permissions = {}, userInfo, usersList, itemName,
-				 onOpenCommentCommitModal, onOpenRevisionsModal, isManual, candidateInProcess, isArchived} = this.props;
-		return (
-			<div className='version-controller-bar'>
-				<div className={`vc-container ${candidateInProcess ? 'disabled' : ''}`}>
-					<div className='version-status-container'>
-						<VersionSelector
-							viewableVersions={viewableVersions}
-							version={version}
-							onVersionSwitching={onVersionSwitching}
-							onMoreVersionsClick={() => onMoreVersionsClick({itemName, users: usersList})}/>
-						{isArchived && <div className='depricated-item-status'>{i18n('Archived')}</div>}	
-					</div>					
-					<div className='save-submit-cancel-container'>
-						<ActionButtons onSubmit={callVCAction ? () => this.submit(callVCAction, version) : undefined}
-							onRevert={callVCAction ? () => this.revert(callVCAction, version) : undefined}
-							onOpenRevisionsModal={onOpenRevisionsModal}
-							onSave={onSave ? () => onSave() : undefined}
-							permissions={permissions}
-							userInfo={userInfo}
-							onManagePermissions={onManagePermissions}
-							showPermissions={this.state.showPermissions}
-							onClosePermissions={()=>this.setState({showPermissions: false})}
-							onClickPermissions={() => this.onClickPermissions()}
-							onSync={callVCAction ? () => this.sync(callVCAction, version) : undefined}
-							onOpenCommentCommitModal={onOpenCommentCommitModal}
-							onCommit={callVCAction ? (comment) => this.commit(callVCAction, version, comment) : undefined}
-							isFormDataValid={isFormDataValid}
-							itemPermissions={itemPermission}
-							isArchived={isArchived}
-							isReadOnlyMode={isReadOnlyMode || candidateInProcess}
-							isManual={isManual} />
-						<div className='vc-separator'></div>
-						<NotificationsView />
-						{onClose && <div className='vc-nav-item-close' onClick={() => onClose()} data-test-id='vc-cancel-btn'> X</div>}
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	onClickPermissions() {
-		let {onOpenPermissions, usersList} = this.props;
-		let {showPermissions} = this.state;
-		let promise = showPermissions ? Promise.resolve() : onOpenPermissions({users: usersList});
-		promise.then(() => this.setState({showPermissions: !showPermissions}));
-	}
-
-
-	submit(callVCAction, version) {
-		const action = actionsEnum.SUBMIT;
-		callVCAction(action, version);
-	}
-
-	revert(callVCAction, version) {
-		const action = actionsEnum.REVERT;
-		callVCAction(action, version);
-	}
-
-	sync(callVCAction, version) {
-		const action = actionsEnum.SYNC;
-		callVCAction(action, version);
-	}
-
-	commit(callVCAction, version, comment) {
-		const action = actionsEnum.COMMIT;
-		callVCAction(action, version, comment);
-	}
-
-	permissions() {
-
-	}
+    static propTypes = {
+        version: PropTypes.object,
+        viewableVersions: PropTypes.array,
+        onVersionSwitching: PropTypes.func,
+        callVCAction: PropTypes.func,
+        onSave: PropTypes.func,
+        onClose: PropTypes.func,
+        isFormDataValid: PropTypes.bool,
+        onOpenCommentCommitModal: PropTypes.func,
+        isReadOnlyMode: PropTypes.bool
+    };
+
+    state = {
+        showPermissions: false,
+        showRevisions: false
+    };
+
+    render() {
+        let {
+            version = {},
+            viewableVersions = [],
+            onVersionSwitching,
+            onMoreVersionsClick,
+            callVCAction,
+            onSave,
+            isReadOnlyMode,
+            itemPermission,
+            isFormDataValid,
+            onClose,
+            onManagePermissions,
+            permissions = {},
+            userInfo,
+            usersList,
+            itemName,
+            onOpenCommentCommitModal,
+            onOpenRevisionsModal,
+            isManual,
+            candidateInProcess,
+            isArchived
+        } = this.props;
+        return (
+            <div className="version-controller-bar">
+                <div
+                    className={`vc-container ${
+                        candidateInProcess ? 'disabled' : ''
+                    }`}>
+                    <div className="version-status-container">
+                        <VersionSelector
+                            viewableVersions={viewableVersions}
+                            version={version}
+                            onVersionSwitching={onVersionSwitching}
+                            onMoreVersionsClick={() =>
+                                onMoreVersionsClick({
+                                    itemName,
+                                    users: usersList
+                                })
+                            }
+                        />
+                        {isArchived && (
+                            <div className="depricated-item-status">
+                                {i18n('Archived')}
+                            </div>
+                        )}
+                    </div>
+                    <div className="save-submit-cancel-container">
+                        <ActionButtons
+                            onSubmit={
+                                callVCAction
+                                    ? () => this.submit(callVCAction, version)
+                                    : undefined
+                            }
+                            onRevert={
+                                callVCAction
+                                    ? () => this.revert(callVCAction, version)
+                                    : undefined
+                            }
+                            onOpenRevisionsModal={onOpenRevisionsModal}
+                            onSave={onSave ? () => onSave() : undefined}
+                            permissions={permissions}
+                            userInfo={userInfo}
+                            onManagePermissions={onManagePermissions}
+                            showPermissions={this.state.showPermissions}
+                            onClosePermissions={() =>
+                                this.setState({ showPermissions: false })
+                            }
+                            onClickPermissions={() => this.onClickPermissions()}
+                            onSync={
+                                callVCAction
+                                    ? () => this.sync(callVCAction, version)
+                                    : undefined
+                            }
+                            onOpenCommentCommitModal={onOpenCommentCommitModal}
+                            onCommit={
+                                callVCAction
+                                    ? comment =>
+                                          this.commit(
+                                              callVCAction,
+                                              version,
+                                              comment
+                                          )
+                                    : undefined
+                            }
+                            isFormDataValid={isFormDataValid}
+                            itemPermissions={itemPermission}
+                            isArchived={isArchived}
+                            isReadOnlyMode={
+                                isReadOnlyMode || candidateInProcess
+                            }
+                            isManual={isManual}
+                        />
+                        <div className="vc-separator" />
+                        <NotificationsView />
+                        {onClose && (
+                            <div
+                                className="vc-nav-item-close"
+                                onClick={() => onClose()}
+                                data-test-id="vc-cancel-btn">
+                                {' '}
+                                X
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    onClickPermissions() {
+        let { onOpenPermissions, usersList } = this.props;
+        let { showPermissions } = this.state;
+        let promise = showPermissions
+            ? Promise.resolve()
+            : onOpenPermissions({ users: usersList });
+        promise.then(() =>
+            this.setState({ showPermissions: !showPermissions })
+        );
+    }
+
+    submit(callVCAction, version) {
+        const action = actionsEnum.SUBMIT;
+        callVCAction(action, version);
+    }
+
+    revert(callVCAction, version) {
+        const action = actionsEnum.REVERT;
+        callVCAction(action, version);
+    }
+
+    sync(callVCAction, version) {
+        const action = actionsEnum.SYNC;
+        callVCAction(action, version);
+    }
+
+    commit(callVCAction, version, comment) {
+        const action = actionsEnum.COMMIT;
+        callVCAction(action, version, comment);
+    }
+
+    permissions() {}
 }
 
 function VersionSelector(props) {
-	let {version = {}, onMoreVersionsClick, viewableVersions = [], onVersionSwitching} = props;
-	const includedVersions = viewableVersions.filter(ver => {return ver.id === version.id;});
-	return (<div className='version-section-wrapper'>
-		<select className='version-selector'
-			onChange={ev => onVersionSwitching && onVersionSwitching(viewableVersions.find(version => version.id === ev.target.value))}
-			value={version.id}
-			data-test-id='vc-versions-select-box'>
-				{viewableVersions && viewableVersions.map(viewVersion => {
-					return (
-						<option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.name} ${viewVersion.status}`}</option>
-					);
-				})
-				}
-				{!includedVersions.length &&
-				<option key={version.id} value={version.id} data-test-id='vc-selected-version-option'>{`V ${version.name} ${version.status}`}</option>}
-		</select>
-		<span onClick={onMoreVersionsClick} className='version-selector-more-versions' data-test-id='vc-versions-page-link'>{i18n('Versions Page')}</span>
-	</div>);
+    let {
+        version = {},
+        onMoreVersionsClick,
+        viewableVersions = [],
+        onVersionSwitching
+    } = props;
+    const includedVersions = viewableVersions.filter(ver => {
+        return ver.id === version.id;
+    });
+    return (
+        <div className="version-section-wrapper">
+            <select
+                className="version-selector"
+                onChange={ev =>
+                    onVersionSwitching &&
+                    onVersionSwitching(
+                        viewableVersions.find(
+                            version => version.id === ev.target.value
+                        )
+                    )
+                }
+                value={version.id}
+                data-test-id="vc-versions-select-box">
+                {viewableVersions &&
+                    viewableVersions.map(viewVersion => {
+                        return (
+                            <option
+                                key={viewVersion.id}
+                                value={viewVersion.id}
+                                data-test-id="vc-version-option">{`V ${
+                                viewVersion.name
+                            } ${viewVersion.status}`}</option>
+                        );
+                    })}
+                {!includedVersions.length && (
+                    <option
+                        key={version.id}
+                        value={version.id}
+                        data-test-id="vc-selected-version-option">{`V ${
+                        version.name
+                    } ${version.status}`}</option>
+                )}
+            </select>
+            <span
+                onClick={onMoreVersionsClick}
+                className="version-selector-more-versions"
+                data-test-id="vc-versions-page-link">
+                {i18n('Versions Page')}
+            </span>
+        </div>
+    );
 }
 
 export default VersionController;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
index ddb428a1e9..54f10c1acf 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
@@ -16,9 +16,9 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionsEnum = keyMirror({
-	REVERT: 'Revert',
-	SYNC: 'Sync',
-	SUBMIT: 'Submit',
-	COMMIT: 'Commit',
-	CREATE_PACKAGE: 'Create_Package'
+    REVERT: 'Revert',
+    SYNC: 'Sync',
+    SUBMIT: 'Submit',
+    COMMIT: 'Commit',
+    CREATE_PACKAGE: 'Create_Package'
 });
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx
index b5750817ba..4dfa117803 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.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 PropTypes from 'prop-types';
 import enhanceWithClickOutside from 'react-click-outside';
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -22,88 +22,171 @@ import Overlay from 'nfvo-components/overlay/Overlay.jsx';
 import Permissions from './Permissions.jsx';
 
 class ClickOutsideWrapper extends Component {
-	handleClickOutside() {
-		this.props.onClose();
-	}
-	render() {
-		return <div>{this.props.children}</div>;
-	}
+    handleClickOutside() {
+        this.props.onClose();
+    }
+    render() {
+        return <div>{this.props.children}</div>;
+    }
 }
 
-const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper);
+const EnhancedClickOutsideWrapper = enhanceWithClickOutside(
+    ClickOutsideWrapper
+);
 
-const VCButton = ({name, tooltipText, disabled, onClick, dataTestId}) => {
-	let onClickAction = disabled ? ()=>{} : onClick;
-	return (
-		<div className={`action-button-wrapper ${disabled ? 'disabled' : 'clickable'}`} onClick={onClickAction}>
-			<div className='action-buttons-svg'>
-				<SVGIcon label={tooltipText} labelPosition='bottom' labelClassName='action-button-label'
-					 data-test-id={dataTestId} name={name} disabled={disabled}/>
-			</div>
-		</div>
-	);
+const VCButton = ({ name, tooltipText, disabled, onClick, dataTestId }) => {
+    let onClickAction = disabled ? () => {} : onClick;
+    return (
+        <div
+            className={`action-button-wrapper ${
+                disabled ? 'disabled' : 'clickable'
+            }`}
+            onClick={onClickAction}>
+            <div className="action-buttons-svg">
+                <SVGIcon
+                    label={tooltipText}
+                    labelPosition="bottom"
+                    labelClassName="action-button-label"
+                    data-test-id={dataTestId}
+                    name={name}
+                    disabled={disabled}
+                />
+            </div>
+        </div>
+    );
 };
 
-const Separator = () => (<div className='vc-separator'></div>);
+const Separator = () => <div className="vc-separator" />;
 
-const SubmitButton = ({onClick, disabled}) => (
-	<div onClick={()=>onClick()} data-test-id='vc-submit-btn' className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
-		<SVGIcon name='check' iconClassName='vc-v-submit' disabled={disabled} />
-		{i18n('Submit')}
-	</div>
+const SubmitButton = ({ onClick, disabled }) => (
+    <div
+        onClick={() => onClick()}
+        data-test-id="vc-submit-btn"
+        className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
+        <SVGIcon name="check" iconClassName="vc-v-submit" disabled={disabled} />
+        {i18n('Submit')}
+    </div>
 );
 
-
-const ActionButtons = ({isReadOnlyMode, onSubmit, onRevert, onSave, isFormDataValid, onClickPermissions, onSync, onCommit, isArchived,
-	onOpenCommentCommitModal, showPermissions, onClosePermissions, permissions, onManagePermissions, userInfo, onOpenRevisionsModal, isManual,
-	itemPermissions: {isCertified, isCollaborator, isDirty, isOutOfSync, isUpToDate}}) => (
-	<div className='action-buttons'>
-		<EnhancedClickOutsideWrapper onClose={onClosePermissions}>
-			<VCButton disabled={isManual} dataTestId='vc-permission-btn' onClick={onClickPermissions}
-				name='version-controller-permissions' tooltipText={i18n('Permissons')} />
-			{showPermissions &&
-				<Overlay>
-					<Permissions userInfo={userInfo} onManagePermissions={onManagePermissions} permissions={permissions} onClosePermissions={onClosePermissions}/>
-				</Overlay>
-			}
-		</EnhancedClickOutsideWrapper>
-		{isCollaborator && !isArchived && <div className='collaborator-action-buttons'>
-			<Separator />
-			{onSave && <div className='vc-save-section'>
-					<VCButton dataTestId='vc-save-btn' onClick={() => onSave()}
-						name='version-controller-save'  tooltipText={i18n('Save')} disabled={isReadOnlyMode || !isFormDataValid} />
-					<Separator />
-				</div>
-			}
-			<VCButton dataTestId='vc-sync-btn' onClick={onSync}
-				name='version-controller-sync' tooltipText={i18n('Sync')} disabled={!isCollaborator || isUpToDate || isCertified} />
-			<VCButton dataTestId='vc-commit-btn' onClick={() => onOpenCommentCommitModal({onCommit, title: i18n('Commit')})}
-				name='version-controller-commit' tooltipText={i18n('Share')} disabled={isReadOnlyMode || !isDirty || isOutOfSync} />
-			{onRevert &&
-				<VCButton dataTestId='vc-revert-btn' onClick={onOpenRevisionsModal}
-					name='version-controller-revert' tooltipText={i18n('Revert')} disabled={isReadOnlyMode || isOutOfSync} />
-			}
-			{onSubmit && 
-				<div className='vc-submit-section'>
-					<Separator />
-					<SubmitButton onClick={onSubmit}
-						disabled={isReadOnlyMode || isOutOfSync || !isUpToDate || isCertified} />
-				</div>
-			}
-		</div>}
-	</div>
+const ActionButtons = ({
+    isReadOnlyMode,
+    onSubmit,
+    onRevert,
+    onSave,
+    isFormDataValid,
+    onClickPermissions,
+    onSync,
+    onCommit,
+    isArchived,
+    onOpenCommentCommitModal,
+    showPermissions,
+    onClosePermissions,
+    permissions,
+    onManagePermissions,
+    userInfo,
+    onOpenRevisionsModal,
+    isManual,
+    itemPermissions: {
+        isCertified,
+        isCollaborator,
+        isDirty,
+        isOutOfSync,
+        isUpToDate
+    }
+}) => (
+    <div className="action-buttons">
+        <EnhancedClickOutsideWrapper onClose={onClosePermissions}>
+            <VCButton
+                disabled={isManual}
+                dataTestId="vc-permission-btn"
+                onClick={onClickPermissions}
+                name="version-controller-permissions"
+                tooltipText={i18n('Permissons')}
+            />
+            {showPermissions && (
+                <Overlay>
+                    <Permissions
+                        userInfo={userInfo}
+                        onManagePermissions={onManagePermissions}
+                        permissions={permissions}
+                        onClosePermissions={onClosePermissions}
+                    />
+                </Overlay>
+            )}
+        </EnhancedClickOutsideWrapper>
+        {isCollaborator &&
+            !isArchived && (
+                <div className="collaborator-action-buttons">
+                    <Separator />
+                    {onSave && (
+                        <div className="vc-save-section">
+                            <VCButton
+                                dataTestId="vc-save-btn"
+                                onClick={() => onSave()}
+                                name="version-controller-save"
+                                tooltipText={i18n('Save')}
+                                disabled={isReadOnlyMode || !isFormDataValid}
+                            />
+                            <Separator />
+                        </div>
+                    )}
+                    <VCButton
+                        dataTestId="vc-sync-btn"
+                        onClick={onSync}
+                        name="version-controller-sync"
+                        tooltipText={i18n('Sync')}
+                        disabled={!isCollaborator || isUpToDate || isCertified}
+                    />
+                    <VCButton
+                        dataTestId="vc-commit-btn"
+                        onClick={() =>
+                            onOpenCommentCommitModal({
+                                onCommit,
+                                title: i18n('Commit')
+                            })
+                        }
+                        name="version-controller-commit"
+                        tooltipText={i18n('Share')}
+                        disabled={isReadOnlyMode || !isDirty || isOutOfSync}
+                    />
+                    {onRevert && (
+                        <VCButton
+                            dataTestId="vc-revert-btn"
+                            onClick={onOpenRevisionsModal}
+                            name="version-controller-revert"
+                            tooltipText={i18n('Revert')}
+                            disabled={isReadOnlyMode || isOutOfSync}
+                        />
+                    )}
+                    {onSubmit && (
+                        <div className="vc-submit-section">
+                            <Separator />
+                            <SubmitButton
+                                onClick={onSubmit}
+                                disabled={
+                                    isReadOnlyMode ||
+                                    isOutOfSync ||
+                                    !isUpToDate ||
+                                    isCertified
+                                }
+                            />
+                        </div>
+                    )}
+                </div>
+            )}
+    </div>
 );
 
 ActionButtons.propTypes = {
-	version: PropTypes.object,
-	onSubmit: PropTypes.func,
-	onRevert: PropTypes.func,
-	onSave: PropTypes.func,
-	isLatestVersion: PropTypes.bool,
-	isCheckedIn: PropTypes.bool,
-	isCheckedOut: PropTypes.bool,
-	isFormDataValid: PropTypes.bool,
-	isReadOnlyMode: PropTypes.bool
+    version: PropTypes.object,
+    onSubmit: PropTypes.func,
+    onRevert: PropTypes.func,
+    onSave: PropTypes.func,
+    isLatestVersion: PropTypes.bool,
+    isCheckedIn: PropTypes.bool,
+    isCheckedOut: PropTypes.bool,
+    isFormDataValid: PropTypes.bool,
+    isReadOnlyMode: PropTypes.bool
 };
 
 export default ActionButtons;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
index 600eaeefaa..ae0913f3a9 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
@@ -15,59 +15,66 @@
  */
 
 import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const CommitModalType = keyMirror({
-	COMMIT: null,
-	COMMIT_SUBMIT: null
-
+    COMMIT: null,
+    COMMIT_SUBMIT: null
 });
 
-export const mapActionToProps = (dispatch) => {
-	return {
-		onClose: () => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		})
-	};
+export const mapActionToProps = dispatch => {
+    return {
+        onClose: () =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_CLOSE
+            })
+    };
 };
 
 class CommitCommentModal extends React.Component {
+    state = {
+        comment: ''
+    };
 
-	state = {
-		comment: ''
-	};
-
-	render() {
-		const {onCommit, onClose, type} = this.props;
-		const [commitButtonText, descriptionText] = type === CommitModalType.COMMIT ?
-			[i18n('Commit'), i18n('You are about to commit your version')] :
-			[i18n('Commit & Submit'), i18n('You must commit your changes before the submit')];
+    render() {
+        const { onCommit, onClose, type } = this.props;
+        const [commitButtonText, descriptionText] =
+            type === CommitModalType.COMMIT
+                ? [i18n('Commit'), i18n('You are about to commit your version')]
+                : [
+                      i18n('Commit & Submit'),
+                      i18n('You must commit your changes before the submit')
+                  ];
 
-		return (
-			<Form
-				ref='validationForm'
-				hasButtons={true}
-				onSubmit={ () => {onCommit(this.state.comment); onClose();} }
-				onReset={onClose}
-				submitButtonText={commitButtonText}
-				labledButtons={true}
-				isValid={true}
-				className='comment-commit-form'>
-				<div className='commit-modal-text'>{descriptionText}</div>
-				<Input
-					data-test-id='commit-comment-text'
-					onChange={comment => this.setState({comment: comment})}
-					label={i18n('Enter Commit Comment:')}
-					value={this.state.comment}
-					type='textarea'/>
-			</Form>
-		);
-	}
+        return (
+            <Form
+                ref="validationForm"
+                hasButtons={true}
+                onSubmit={() => {
+                    onCommit(this.state.comment);
+                    onClose();
+                }}
+                onReset={onClose}
+                submitButtonText={commitButtonText}
+                labledButtons={true}
+                isValid={true}
+                className="comment-commit-form">
+                <div className="commit-modal-text">{descriptionText}</div>
+                <Input
+                    data-test-id="commit-comment-text"
+                    onChange={comment => this.setState({ comment: comment })}
+                    label={i18n('Enter Commit Comment:')}
+                    value={this.state.comment}
+                    type="textarea"
+                />
+            </Form>
+        );
+    }
 }
 
 export default connect(null, mapActionToProps)(CommitCommentModal);
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
index 952bd4fb58..6e0ae8187b 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
@@ -18,48 +18,76 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-const Contributor = ({name, role, id, userInfo}) => {
+const Contributor = ({ name, role, id, userInfo }) => {
+    const selected = id === userInfo.userId ? 'selected' : '';
 
-	const selected = id === userInfo.userId ? 'selected' : '';
-
-	return(
-		<div className='contributor'>
-			<div className='contributor-content'>
-				<div className={`contributor-icon-circle ${selected}`}>
-					<div className={`contributer-icon ${selected}`}>
-						<SVGIcon name='user'/>
-					</div>
-				</div>
-				<div className='contributer-info'>
-					<div className='contributer-name'>{name}</div>
-					<div className='contributer-role'><p>{role}</p></div>
-				</div>
-			</div>
-		</div>
-	);
+    return (
+        <div className="contributor">
+            <div className="contributor-content">
+                <div className={`contributor-icon-circle ${selected}`}>
+                    <div className={`contributer-icon ${selected}`}>
+                        <SVGIcon name="user" />
+                    </div>
+                </div>
+                <div className="contributer-info">
+                    <div className="contributer-name">{name}</div>
+                    <div className="contributer-role">
+                        <p>{role}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 };
 
-const Permissions = ({permissions: {owner, contributors}, onManagePermissions, userInfo, onClosePermissions}) => {
-
-	return (
-		<div className='permissions-overlay'>
-			<div className='permissions-overlay-header'>
-					<h4 className='permissions-overlay-header-title'>{i18n('PERMISSIONS')}</h4>
-				</div>
-				<div className='permissions-overlay-content'>
-					<Contributor userInfo={userInfo} id={owner.userId} key={owner.fullName} name={owner.fullName} role={owner.role}/>
-					{contributors.map(item => item.userId !== owner.userId && <Contributor userInfo={userInfo} id={item.userId} key={item.fullName} name={item.fullName} role={item.role}/>)}
-				</div>
-				<div className='permissions-overlay-footer'>
-				{
-				 owner.userId === userInfo.userId &&
-					<div onClick={() => { onClosePermissions(); onManagePermissions(); }} className='manage-permissions-btn'>
-						{i18n('Manage Permissions')}
-					</div>
-				}
-				</div>
-		</div>
-	);
+const Permissions = ({
+    permissions: { owner, contributors },
+    onManagePermissions,
+    userInfo,
+    onClosePermissions
+}) => {
+    return (
+        <div className="permissions-overlay">
+            <div className="permissions-overlay-header">
+                <h4 className="permissions-overlay-header-title">
+                    {i18n('PERMISSIONS')}
+                </h4>
+            </div>
+            <div className="permissions-overlay-content">
+                <Contributor
+                    userInfo={userInfo}
+                    id={owner.userId}
+                    key={owner.fullName}
+                    name={owner.fullName}
+                    role={owner.role}
+                />
+                {contributors.map(
+                    item =>
+                        item.userId !== owner.userId && (
+                            <Contributor
+                                userInfo={userInfo}
+                                id={item.userId}
+                                key={item.fullName}
+                                name={item.fullName}
+                                role={item.role}
+                            />
+                        )
+                )}
+            </div>
+            <div className="permissions-overlay-footer">
+                {owner.userId === userInfo.userId && (
+                    <div
+                        onClick={() => {
+                            onClosePermissions();
+                            onManagePermissions();
+                        }}
+                        className="manage-permissions-btn">
+                        {i18n('Manage Permissions')}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
 };
 
 export default Permissions;
diff --git a/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
index ca5cb3d765..cb10bb565e 100644
--- a/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
+++ b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
@@ -17,22 +17,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class ProgressBar extends React.Component {
-	static propTypes = {
-		label: PropTypes.string,
-		now: PropTypes.string.isRequired
-	}
-	render() {
-		let {label, now} = this.props;
+    static propTypes = {
+        label: PropTypes.string,
+        now: PropTypes.string.isRequired
+    };
+    render() {
+        let { label, now } = this.props;
 
-		return(
-			<div className='progress-bar-view'>
-				<div className='progress-bar-outside'>
-					<div style={{width: now + '%'}} className='progress-bar-inside'></div>
-				</div>
-				<div className='progress-bar-view-label'>{label}</div>
-			</div>
-		);
-	}
+        return (
+            <div className="progress-bar-view">
+                <div className="progress-bar-outside">
+                    <div
+                        style={{ width: now + '%' }}
+                        className="progress-bar-inside"
+                    />
+                </div>
+                <div className="progress-bar-view-label">{label}</div>
+            </div>
+        );
+    }
 }
 
 export default ProgressBar;
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
index 3f8dbba53a..ee8a9dca45 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
@@ -5,26 +5,57 @@ import Button from 'sdc-ui/lib/react/Button.js';
 import uuid from 'uuid-js';
 
 export default class SelectActionTable extends React.Component {
-
-	render() {
-		let {columns, onAdd, isReadOnlyMode, children, onAddItem, numOfIcons} = this.props;
-		return (
-			<div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}>
-				<div className='select-action-table-controllers'>
-					{onAdd && onAddItem &&
-					<Button btnType='link' disabled={isReadOnlyMode === true} color='primary' iconName='plus' data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</Button>}
-					<SVGIcon name='trashO' className='dummy-icon' />
-				</div>
-				<div className='select-action-table'>
-					<div className='select-action-table-headers'>
-						{columns.map(column => <div key={uuid.create()} className='select-action-table-header'>{i18n(column)}</div>)}
-						{Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trash-o' key={i} className='dummy-icon' />)}
-					</div>
-					<div className='select-action-table-body'>
-						{children}
-					</div>
-				</div>
-			</div>
-		);
-	}
+    render() {
+        let {
+            columns,
+            onAdd,
+            isReadOnlyMode,
+            children,
+            onAddItem,
+            numOfIcons
+        } = this.props;
+        return (
+            <div
+                className={`select-action-table-view ${
+                    isReadOnlyMode ? 'disabled' : ''
+                }`}>
+                <div className="select-action-table-controllers">
+                    {onAdd &&
+                        onAddItem && (
+                            <Button
+                                btnType="link"
+                                disabled={isReadOnlyMode === true}
+                                color="primary"
+                                iconName="plus"
+                                data-test-id="select-action-table-add"
+                                onClick={onAdd}>
+                                {onAddItem}
+                            </Button>
+                        )}
+                    <SVGIcon name="trashO" className="dummy-icon" />
+                </div>
+                <div className="select-action-table">
+                    <div className="select-action-table-headers">
+                        {columns.map(column => (
+                            <div
+                                key={uuid.create()}
+                                className="select-action-table-header">
+                                {i18n(column)}
+                            </div>
+                        ))}
+                        {Array(numOfIcons)
+                            .fill()
+                            .map((e, i) => (
+                                <SVGIcon
+                                    name="trash-o"
+                                    key={i}
+                                    className="dummy-icon"
+                                />
+                            ))}
+                    </div>
+                    <div className="select-action-table-body">{children}</div>
+                </div>
+            </div>
+        );
+    }
 }
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx
index 2664c8e944..20e4f2413c 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx
@@ -1,20 +1,28 @@
 import React from 'react';
 import SelectInput from 'nfvo-components/input/SelectInput.jsx';
 
-const SelectActionTableCell = ({options, selected, disabled, onChange, clearable = true, placeholder}) => {
-	return (
-		<div className='select-action-table-cell'>
-			<SelectInput
-				placeholder={placeholder}
-				type='select'
-				value={selected}
-				data-test-id='select-action-table-dropdown'
-				disabled={disabled}
-				onChange={option => onChange(option ? option.value : null)}
-				clearable={clearable}
-				options={options} />
-		</div>
-	);
+const SelectActionTableCell = ({
+    options,
+    selected,
+    disabled,
+    onChange,
+    clearable = true,
+    placeholder
+}) => {
+    return (
+        <div className="select-action-table-cell">
+            <SelectInput
+                placeholder={placeholder}
+                type="select"
+                value={selected}
+                data-test-id="select-action-table-dropdown"
+                disabled={disabled}
+                onChange={option => onChange(option ? option.value : null)}
+                clearable={clearable}
+                options={options}
+            />
+        </div>
+    );
 };
 
 export default SelectActionTableCell;
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
index 260d39d31c..1c2c1529f2 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
@@ -3,38 +3,65 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 
-function tooltip (msg)  {
-	return (
-  		<Tooltip className='select-action-table-error-tooltip' id='error-tooltip'>{msg}</Tooltip>
-	);
-};
+function tooltip(msg) {
+    return (
+        <Tooltip
+            className="select-action-table-error-tooltip"
+            id="error-tooltip">
+            {msg}
+        </Tooltip>
+    );
+}
 
-const IconWithOverlay = ({overlayMsg}) => (
-	<OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
-		<SVGIcon name='errorCircle' color='negative'/>
-	</OverlayTrigger>
+const IconWithOverlay = ({ overlayMsg }) => (
+    <OverlayTrigger placement="bottom" overlay={tooltip(overlayMsg)}>
+        <SVGIcon name="errorCircle" color="negative" />
+    </OverlayTrigger>
 );
 
-function renderErrorOrCheck({hasError, overlayMsg}) {
-	if (hasError === undefined) {
-		return <SVGIcon name='angleRight' className='dummy-icon' />;
-	}
+function renderErrorOrCheck({ hasError, overlayMsg }) {
+    if (hasError === undefined) {
+        return <SVGIcon name="angleRight" className="dummy-icon" />;
+    }
 
-	if (hasError) {
-		return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> :  <SVGIcon color='negative' name='errorCircle'/>;
-	}
+    if (hasError) {
+        return overlayMsg ? (
+            <IconWithOverlay overlayMsg={overlayMsg} />
+        ) : (
+            <SVGIcon color="negative" name="errorCircle" />
+        );
+    }
 
-	return <SVGIcon name='checkCircle' color='positive'/>;
+    return <SVGIcon name="checkCircle" color="positive" />;
 }
 
-const SelectActionTableRow = ({children, actionIcon, onAction, showAction, hasError, hasErrorIndication, overlayMsg}) => (
-	<div className='select-action-table-row-wrapper'>
-		<div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}>
-			{children}
-		</div>
-		{onAction && <SVGIcon color='secondary' name={actionIcon} data-test-id={`select-action-table-${actionIcon}`} onClick={onAction} iconClassName={(showAction) ? '' : 'hideDelete'}/>}
-		{hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
-	</div>
+const SelectActionTableRow = ({
+    children,
+    actionIcon,
+    onAction,
+    showAction,
+    hasError,
+    hasErrorIndication,
+    overlayMsg
+}) => (
+    <div className="select-action-table-row-wrapper">
+        <div
+            className={`select-action-table-row ${
+                hasError ? 'has-error' : ''
+            }`}>
+            {children}
+        </div>
+        {onAction && (
+            <SVGIcon
+                color="secondary"
+                name={actionIcon}
+                data-test-id={`select-action-table-${actionIcon}`}
+                onClick={onAction}
+                iconClassName={showAction ? '' : 'hideDelete'}
+            />
+        )}
+        {hasErrorIndication && renderErrorOrCheck({ hasError, overlayMsg })}
+    </div>
 );
 
 export default SelectActionTableRow;
diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.jsx b/openecomp-ui/src/nfvo-components/tree/Tree.jsx
index 682f3b6d50..39434fcdf1 100644
--- a/openecomp-ui/src/nfvo-components/tree/Tree.jsx
+++ b/openecomp-ui/src/nfvo-components/tree/Tree.jsx
@@ -1,16 +1,28 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {select} from 'd3-selection';
-import {tree, stratify} from 'd3-hierarchy';
-
+import { select } from 'd3-selection';
+import { tree, stratify } from 'd3-hierarchy';
 
 function diagonal(d) {
-
-	const offset = 50;
-	return 'M' + d.y + ',' + d.x
-		+ 'C' + (d.parent.y + offset) + ',' + d.x
-		+ ' ' + (d.parent.y + offset) + ',' + d.parent.x
-		+ ' ' + d.parent.y + ',' + d.parent.x;
+    const offset = 50;
+    return (
+        'M' +
+        d.y +
+        ',' +
+        d.x +
+        'C' +
+        (d.parent.y + offset) +
+        ',' +
+        d.x +
+        ' ' +
+        (d.parent.y + offset) +
+        ',' +
+        d.parent.x +
+        ' ' +
+        d.parent.y +
+        ',' +
+        d.parent.x
+    );
 }
 
 const nodeRadius = 8;
@@ -18,164 +30,226 @@ const verticalSpaceBetweenNodes = 70;
 const NARROW_HORIZONTAL_SPACES = 47;
 const WIDE_HORIZONTAL_SPACES = 65;
 
-const stratifyFn = stratify().id(d => d.id).parentId(d => d.parent);
+const stratifyFn = stratify()
+    .id(d => d.id)
+    .parentId(d => d.parent);
 
 class Tree extends Component {
-
-	// state = {
-	// 	startingCoordinates: null,
-	// 	isDown: false
-	// }
-
-	static propTypes = {
-		name: PropTypes.string,
-		width: PropTypes.number,
-		allowScaleWidth: PropTypes.bool,
-		nodes: PropTypes.arrayOf(PropTypes.shape({
-			id: PropTypes.string,
-			name: PropTypes.string,
-			parent: PropTypes.string
-		})),
-		selectedNodeId: PropTypes.string,
-		onNodeClick: PropTypes.func,
-		onRenderedBeyondWidth: PropTypes.func
-	};
-
-	static defaultProps = {
-		width: 500,
-		allowScaleWidth : true,
-		name: 'default-name'
-	};
-
-	render() {
-		let {width, name, scrollable = false} = this.props;
-		return (
-			<div
-				className={`tree-view ${name}-container ${scrollable ? 'scrollable' : ''}`}>
-				<svg width={width} className={name}></svg>
-			</div>
-		);
-	}
-
-	componentDidMount() {
-		this.renderTree();
-	}
-
-	// handleMouseMove(e) {
-	// 	if (!this.state.isDown) {
-	// 		return;
-	// 	}
-	// 	const container = select(`.tree-view.${this.props.name}-container`);
-	// 	let coordinates = this.getCoordinates(e);
-	// 	container.property('scrollLeft' , container.property('scrollLeft') + coordinates.x - this.state.startingCoordinates.x);
-	// 	container.property('scrollTop' , container.property('scrollTop') + coordinates.y - this.state.startingCoordinates.y);
-	// }
-
-	// handleMouseDown(e) {
-	// 	let startingCoordinates = this.getCoordinates(e);
-	// 	this.setState({
-	// 		startingCoordinates,
-	// 		isDown: true
-	// 	});
-	// }
-
-	// handleMouseUp() {
-	// 	this.setState({
-	// 		startingCorrdinates: null,
-	// 		isDown: false
-	// 	});
-	// }
-
-	// getCoordinates(e) {
-	// 	var bounds = e.target.getBoundingClientRect();
-	// 	var x = e.clientX - bounds.left;
-	// 	var y = e.clientY - bounds.top;
-	// 	return {x, y};
-	// }
-
-	componentDidUpdate(prevProps) {
-		if (this.props.nodes.length !== prevProps.nodes.length ||
-			this.props.selectedNodeId !== prevProps.selectedNodeId) {
-			console.log('update');
-			this.renderTree();
-		}
-	}
-
-	renderTree() {
-		let {width, nodes, name, allowScaleWidth, selectedNodeId, onRenderedBeyondWidth, toWiden} = this.props;
-		if (nodes.length > 0) {
-
-			let horizontalSpaceBetweenLeaves = toWiden ? WIDE_HORIZONTAL_SPACES : NARROW_HORIZONTAL_SPACES;
-			const treeFn = tree().nodeSize([horizontalSpaceBetweenLeaves, verticalSpaceBetweenNodes]);//.size([width - 50, height - 50])
-			let root = stratifyFn(nodes).sort((a, b) => a.data.name.localeCompare(b.data.name));
-			let svgHeight = verticalSpaceBetweenNodes * root.height + nodeRadius * 6;
-
-			treeFn(root);
-
-			let nodesXValue = root.descendants().map(node => node.x);
-			let maxX = Math.max(...nodesXValue);
-			let minX = Math.min(...nodesXValue);
-
-			let svgTempWidth = (maxX - minX) / 30 * (horizontalSpaceBetweenLeaves);
-			let svgWidth = svgTempWidth < width ? (width - 5) : svgTempWidth;
-			const svgEL = select(`svg.${name}`);
-			const container = select(`.tree-view.${name}-container`);
-			svgEL.html('');
-			svgEL.attr('height', svgHeight);
-			let canvasWidth = width;
-			if (svgTempWidth > width) {
-				if (allowScaleWidth) {
-					canvasWidth = svgTempWidth;
-				}
-				// we seems to have a margin of 25px that we can still see with text
-				if (((svgTempWidth - 25) > width) && onRenderedBeyondWidth !== undefined) {
-					onRenderedBeyondWidth();
-				}
-			};
-			svgEL.attr('width', canvasWidth);
-			let rootGroup = svgEL.append('g').attr('transform', `translate(${svgWidth / 2 + nodeRadius},${nodeRadius * 4}) rotate(90)`);
-
-			// handle link
-			rootGroup.selectAll('.link')
-				.data(root.descendants().slice(1))
-				.enter().append('path')
-				.attr('class', 'link')
-				.attr('d', diagonal);
-
-			let node = rootGroup.selectAll('.node')
-				.data(root.descendants())
-				.enter().append('g')
-				.attr('class', node => `node ${node.children ? ' has-children' : ' leaf'} ${node.id === selectedNodeId ? 'selectedNode' : ''} ${this.props.onNodeClick ? 'clickable' : ''}`)
-				.attr('transform', node => 'translate(' + node.y + ',' + node.x + ')')
-				.on('click', node => this.onNodeClick(node));
-
-			node.append('circle').attr('r', nodeRadius).attr('class', 'outer-circle');
-			node.append('circle').attr('r', nodeRadius - 3).attr('class', 'inner-circle');
-
-			node.append('text')
-				.attr('y', nodeRadius / 4 + 1)
-				.attr('x', - nodeRadius * 1.8)
-				.text(node => node.data.name)
-				.attr('transform', 'rotate(-90)');
-
-			let selectedNode = selectedNodeId ? root.descendants().find(node => node.id === selectedNodeId) : null;
-			if (selectedNode) {
-
-				container.property('scrollLeft', (svgWidth / 4) + (svgWidth / 4 - 100) - (selectedNode.x / 30 * horizontalSpaceBetweenLeaves));
-				container.property('scrollTop', (selectedNode.y / 100 * verticalSpaceBetweenNodes));
-
-			} else {
-				container.property('scrollLeft', (svgWidth / 4) + (svgWidth / 4 - 100));
-			}
-		}
-	}
-
-	onNodeClick(node) {
-		if (this.props.onNodeClick) {
-			this.props.onNodeClick(node.data);
-		}
-	}
-
+    // state = {
+    // 	startingCoordinates: null,
+    // 	isDown: false
+    // }
+
+    static propTypes = {
+        name: PropTypes.string,
+        width: PropTypes.number,
+        allowScaleWidth: PropTypes.bool,
+        nodes: PropTypes.arrayOf(
+            PropTypes.shape({
+                id: PropTypes.string,
+                name: PropTypes.string,
+                parent: PropTypes.string
+            })
+        ),
+        selectedNodeId: PropTypes.string,
+        onNodeClick: PropTypes.func,
+        onRenderedBeyondWidth: PropTypes.func
+    };
+
+    static defaultProps = {
+        width: 500,
+        allowScaleWidth: true,
+        name: 'default-name'
+    };
+
+    render() {
+        let { width, name, scrollable = false } = this.props;
+        return (
+            <div
+                className={`tree-view ${name}-container ${
+                    scrollable ? 'scrollable' : ''
+                }`}>
+                <svg width={width} className={name} />
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        this.renderTree();
+    }
+
+    // handleMouseMove(e) {
+    // 	if (!this.state.isDown) {
+    // 		return;
+    // 	}
+    // 	const container = select(`.tree-view.${this.props.name}-container`);
+    // 	let coordinates = this.getCoordinates(e);
+    // 	container.property('scrollLeft' , container.property('scrollLeft') + coordinates.x - this.state.startingCoordinates.x);
+    // 	container.property('scrollTop' , container.property('scrollTop') + coordinates.y - this.state.startingCoordinates.y);
+    // }
+
+    // handleMouseDown(e) {
+    // 	let startingCoordinates = this.getCoordinates(e);
+    // 	this.setState({
+    // 		startingCoordinates,
+    // 		isDown: true
+    // 	});
+    // }
+
+    // handleMouseUp() {
+    // 	this.setState({
+    // 		startingCorrdinates: null,
+    // 		isDown: false
+    // 	});
+    // }
+
+    // getCoordinates(e) {
+    // 	var bounds = e.target.getBoundingClientRect();
+    // 	var x = e.clientX - bounds.left;
+    // 	var y = e.clientY - bounds.top;
+    // 	return {x, y};
+    // }
+
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.nodes.length !== prevProps.nodes.length ||
+            this.props.selectedNodeId !== prevProps.selectedNodeId
+        ) {
+            console.log('update');
+            this.renderTree();
+        }
+    }
+
+    renderTree() {
+        let {
+            width,
+            nodes,
+            name,
+            allowScaleWidth,
+            selectedNodeId,
+            onRenderedBeyondWidth,
+            toWiden
+        } = this.props;
+        if (nodes.length > 0) {
+            let horizontalSpaceBetweenLeaves = toWiden
+                ? WIDE_HORIZONTAL_SPACES
+                : NARROW_HORIZONTAL_SPACES;
+            const treeFn = tree().nodeSize([
+                horizontalSpaceBetweenLeaves,
+                verticalSpaceBetweenNodes
+            ]); //.size([width - 50, height - 50])
+            let root = stratifyFn(nodes).sort((a, b) =>
+                a.data.name.localeCompare(b.data.name)
+            );
+            let svgHeight =
+                verticalSpaceBetweenNodes * root.height + nodeRadius * 6;
+
+            treeFn(root);
+
+            let nodesXValue = root.descendants().map(node => node.x);
+            let maxX = Math.max(...nodesXValue);
+            let minX = Math.min(...nodesXValue);
+
+            let svgTempWidth =
+                (maxX - minX) / 30 * horizontalSpaceBetweenLeaves;
+            let svgWidth = svgTempWidth < width ? width - 5 : svgTempWidth;
+            const svgEL = select(`svg.${name}`);
+            const container = select(`.tree-view.${name}-container`);
+            svgEL.html('');
+            svgEL.attr('height', svgHeight);
+            let canvasWidth = width;
+            if (svgTempWidth > width) {
+                if (allowScaleWidth) {
+                    canvasWidth = svgTempWidth;
+                }
+                // we seems to have a margin of 25px that we can still see with text
+                if (
+                    svgTempWidth - 25 > width &&
+                    onRenderedBeyondWidth !== undefined
+                ) {
+                    onRenderedBeyondWidth();
+                }
+            }
+            svgEL.attr('width', canvasWidth);
+            let rootGroup = svgEL
+                .append('g')
+                .attr(
+                    'transform',
+                    `translate(${svgWidth / 2 + nodeRadius},${nodeRadius *
+                        4}) rotate(90)`
+                );
+
+            // handle link
+            rootGroup
+                .selectAll('.link')
+                .data(root.descendants().slice(1))
+                .enter()
+                .append('path')
+                .attr('class', 'link')
+                .attr('d', diagonal);
+
+            let node = rootGroup
+                .selectAll('.node')
+                .data(root.descendants())
+                .enter()
+                .append('g')
+                .attr(
+                    'class',
+                    node =>
+                        `node ${node.children ? ' has-children' : ' leaf'} ${
+                            node.id === selectedNodeId ? 'selectedNode' : ''
+                        } ${this.props.onNodeClick ? 'clickable' : ''}`
+                )
+                .attr(
+                    'transform',
+                    node => 'translate(' + node.y + ',' + node.x + ')'
+                )
+                .on('click', node => this.onNodeClick(node));
+
+            node
+                .append('circle')
+                .attr('r', nodeRadius)
+                .attr('class', 'outer-circle');
+            node
+                .append('circle')
+                .attr('r', nodeRadius - 3)
+                .attr('class', 'inner-circle');
+
+            node
+                .append('text')
+                .attr('y', nodeRadius / 4 + 1)
+                .attr('x', -nodeRadius * 1.8)
+                .text(node => node.data.name)
+                .attr('transform', 'rotate(-90)');
+
+            let selectedNode = selectedNodeId
+                ? root.descendants().find(node => node.id === selectedNodeId)
+                : null;
+            if (selectedNode) {
+                container.property(
+                    'scrollLeft',
+                    svgWidth / 4 +
+                        (svgWidth / 4 - 100) -
+                        selectedNode.x / 30 * horizontalSpaceBetweenLeaves
+                );
+                container.property(
+                    'scrollTop',
+                    selectedNode.y / 100 * verticalSpaceBetweenNodes
+                );
+            } else {
+                container.property(
+                    'scrollLeft',
+                    svgWidth / 4 + (svgWidth / 4 - 100)
+                );
+            }
+        }
+    }
+
+    onNodeClick(node) {
+        if (this.props.onNodeClick) {
+            this.props.onNodeClick(node.data);
+        }
+    }
 }
 
 export default Tree;
diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
index b29920b3ec..aca1a13402 100644
--- a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
+++ b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
@@ -1,119 +1,141 @@
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
 import Tree from './Tree.jsx';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
 const stories = storiesOf('Version Tree', module);
 stories.addDecorator(withKnobs);
 
 const response = {
-	listCount: 6,
-	results: [
-		{
-			'id': '123',
-			'name': '1.0',
-			'description': 'string',
-			'baseId': '',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		},
-		{
-			'id': '1234',
-			'name': '1.1',
-			'description': 'string',
-			'baseId': '123',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		},
-		{
-			'id': '12345',
-			'name': '2.0',
-			'description': 'string',
-			'baseId': '123',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		},
-		{
-			'id': '123456',
-			'name': '3.0',
-			'description': 'string',
-			'baseId': '12345',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		},
-		{
-			'id': '1234567',
-			'name': '1.2',
-			'description': 'string',
-			'baseId': '1234',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		},
-		{
-			'id': '12345678',
-			'name': '2.1',
-			'description': 'string',
-			'baseId': '12345',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		},
-		{
-			'id': '123456789',
-			'name': '4.0',
-			'description': 'string',
-			'baseId': '123456',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		},
-		{
-			'id': '12345678910',
-			'name': '3.1',
-			'description': 'string',
-			'baseId': '123456',
-			'status': 'Draft',
-			'creationTime': '2017-06-08T08:55:37.831Z',
-			'modificationTime': '2017-06-08T08:55:37.831Z'
-		}
-	]
+    listCount: 6,
+    results: [
+        {
+            id: '123',
+            name: '1.0',
+            description: 'string',
+            baseId: '',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        },
+        {
+            id: '1234',
+            name: '1.1',
+            description: 'string',
+            baseId: '123',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        },
+        {
+            id: '12345',
+            name: '2.0',
+            description: 'string',
+            baseId: '123',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        },
+        {
+            id: '123456',
+            name: '3.0',
+            description: 'string',
+            baseId: '12345',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        },
+        {
+            id: '1234567',
+            name: '1.2',
+            description: 'string',
+            baseId: '1234',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        },
+        {
+            id: '12345678',
+            name: '2.1',
+            description: 'string',
+            baseId: '12345',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        },
+        {
+            id: '123456789',
+            name: '4.0',
+            description: 'string',
+            baseId: '123456',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        },
+        {
+            id: '12345678910',
+            name: '3.1',
+            description: 'string',
+            baseId: '123456',
+            status: 'Draft',
+            creationTime: '2017-06-08T08:55:37.831Z',
+            modificationTime: '2017-06-08T08:55:37.831Z'
+        }
+    ]
 };
-const divStyle = { width: '200px', borderStyle: 'solid', borderColor: 'black', border: '1px solid black'};
-const tree = response.results.map(item => ({id: item.id, name: item.name, parent: item.baseId}));
-const nodeClickHandler = function (node) {
-	window.alert(node.name);
+const divStyle = {
+    width: '200px',
+    borderStyle: 'solid',
+    borderColor: 'black',
+    border: '1px solid black'
 };
-stories.add('Classic Version Tree', () => (
-	<div>
-		<Tree nodes={tree} onNodeClick={nodeClickHandler} selectedNodeId={'1234'}/>
-	</div>
-)).add('Single Version Tree', () => (
-	<div>
-		<Tree nodes={[tree[0]]} onNodeClick={nodeClickHandler}/>
-	</div>
-)).add('Single Path Version Tree', () => (
-	<div>
-		<Tree nodes={[tree[0], tree[1]]} onNodeClick={nodeClickHandler}/>
-	</div>
-)).add('Empty Tree', () => (
-	<div>
-		<Tree nodes={[]}/>
-	</div>
-)).add('Add Tree in Version Page Frame', () => (
-	<div style={divStyle}>
-		Tree wider than frame<br/><br/><br/>
-		<Tree
-			name={'versions-tree'}
-			width={200}
-			nodes={tree}
-			onRenderedBeyondWidth={() => {console.log('rendered beyond width')}}
-			allowScaleWidth={false}
-			onNodeClick={nodeClickHandler}/>
-	</div>
-));
+const tree = response.results.map(item => ({
+    id: item.id,
+    name: item.name,
+    parent: item.baseId
+}));
+const nodeClickHandler = function(node) {
+    window.alert(node.name);
+};
+stories
+    .add('Classic Version Tree', () => (
+        <div>
+            <Tree
+                nodes={tree}
+                onNodeClick={nodeClickHandler}
+                selectedNodeId={'1234'}
+            />
+        </div>
+    ))
+    .add('Single Version Tree', () => (
+        <div>
+            <Tree nodes={[tree[0]]} onNodeClick={nodeClickHandler} />
+        </div>
+    ))
+    .add('Single Path Version Tree', () => (
+        <div>
+            <Tree nodes={[tree[0], tree[1]]} onNodeClick={nodeClickHandler} />
+        </div>
+    ))
+    .add('Empty Tree', () => (
+        <div>
+            <Tree nodes={[]} />
+        </div>
+    ))
+    .add('Add Tree in Version Page Frame', () => (
+        <div style={divStyle}>
+            Tree wider than frame<br />
+            <br />
+            <br />
+            <Tree
+                name={'versions-tree'}
+                width={200}
+                nodes={tree}
+                onRenderedBeyondWidth={() => {
+                    console.log('rendered beyond width');
+                }}
+                allowScaleWidth={false}
+                onNodeClick={nodeClickHandler}
+            />
+        </div>
+    ));
diff --git a/openecomp-ui/src/nfvo-utils/DirectedGraph.js b/openecomp-ui/src/nfvo-utils/DirectedGraph.js
index 197625a013..bdaf08b995 100644
--- a/openecomp-ui/src/nfvo-utils/DirectedGraph.js
+++ b/openecomp-ui/src/nfvo-utils/DirectedGraph.js
@@ -15,31 +15,31 @@
  */
 
 export default class Graph {
-	constructor() {
-		this.nodes = {};
-	}
+    constructor() {
+        this.nodes = {};
+    }
 
-	addNode(node) {
-		this.nodes[node] = [];
-	}
+    addNode(node) {
+        this.nodes[node] = [];
+    }
 
-	hasNode(node) {
-		return this.nodes.hasOwnProperty(node);
-	}
+    hasNode(node) {
+        return this.nodes.hasOwnProperty(node);
+    }
 
-	addEdge(firstNode, secondNode, payload) {
-		if (!this.hasNode(firstNode)) {
-			this.addNode(firstNode);
-		}
+    addEdge(firstNode, secondNode, payload) {
+        if (!this.hasNode(firstNode)) {
+            this.addNode(firstNode);
+        }
 
-		if (!this.hasNode(secondNode)) {
-			this.addNode(secondNode);
-		}
+        if (!this.hasNode(secondNode)) {
+            this.addNode(secondNode);
+        }
 
-		this.nodes[firstNode].push({...payload, target: secondNode});
-	}
+        this.nodes[firstNode].push({ ...payload, target: secondNode });
+    }
 
-	getEdges(node) {
-		return this.nodes[node];
-	}
-}
\ No newline at end of file
+    getEdges(node) {
+        return this.nodes[node];
+    }
+}
diff --git a/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js b/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js
index 13dfb1f0ab..5c55855027 100644
--- a/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js
+++ b/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js
@@ -15,62 +15,71 @@
  */
 import store from 'sdc-app/AppStore.js';
 import React from 'react';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SubmitErrorResponse from 'nfvo-components/SubmitErrorResponse.jsx';
 
 function showVariablesInMessage(variables, msg) {
-	let regex;
-	variables.forEach((value, index) => {
-		value = value.replace(';', ',');
-		regex = new RegExp('\'\%' + (index + 1) + '\'');
-		msg = msg.replace(regex, value);
-	});
-	return msg;
+    let regex;
+    variables.forEach((value, index) => {
+        value = value.replace(';', ',');
+        regex = new RegExp("'%" + (index + 1) + "'");
+        msg = msg.replace(regex, value);
+    });
+    return msg;
 }
 
 function parseCatalogExceptionObject(responseJSON) {
-	let title, msg;
-	if (responseJSON.requestError && responseJSON.requestError.policyException) {
-		title = 'Error: ' + responseJSON.requestError.policyException.messageId;
-		msg = responseJSON.requestError.policyException.text;
-	}
-	else if (responseJSON.requestError && responseJSON.requestError.serviceException) {
-		title = 'Error: ' + responseJSON.requestError.serviceException.messageId;
-		msg = responseJSON.requestError.serviceException.text;
-		let {variables} = responseJSON.requestError.serviceException;
-		if (variables) {
-			msg = showVariablesInMessage(variables, msg);
-		}
-	}
-	else if (responseJSON.uploadDataErrors) {
-		title = i18n('Error: Upload Data Error');
-		msg = (<SubmitErrorResponse validationResponse={{uploadDataErrors: responseJSON.uploadDataErrors}} />);
-	}
-	else {
-		title = responseJSON.status;
-		msg = responseJSON.message;
-	}
-	return {title, msg};
+    let title, msg;
+    if (
+        responseJSON.requestError &&
+        responseJSON.requestError.policyException
+    ) {
+        title = 'Error: ' + responseJSON.requestError.policyException.messageId;
+        msg = responseJSON.requestError.policyException.text;
+    } else if (
+        responseJSON.requestError &&
+        responseJSON.requestError.serviceException
+    ) {
+        title =
+            'Error: ' + responseJSON.requestError.serviceException.messageId;
+        msg = responseJSON.requestError.serviceException.text;
+        let { variables } = responseJSON.requestError.serviceException;
+        if (variables) {
+            msg = showVariablesInMessage(variables, msg);
+        }
+    } else if (responseJSON.uploadDataErrors) {
+        title = i18n('Error: Upload Data Error');
+        msg = (
+            <SubmitErrorResponse
+                validationResponse={{
+                    uploadDataErrors: responseJSON.uploadDataErrors
+                }}
+            />
+        );
+    } else {
+        title = responseJSON.status;
+        msg = responseJSON.message;
+    }
+    return { title, msg };
 }
 
-var errorResponseHandler = (error) => {
-	let errorData;
-	if (error.data) {
-		errorData = parseCatalogExceptionObject(error.data);
-	}
-	else {
-		errorData = {
-			title: error.statusText,
-			msg: error.responseText ? error.responseText : i18n('GENERIC_ERROR'),
-		};
-	}
-	store.dispatch({
-		type: modalActionTypes.GLOBAL_MODAL_ERROR,
-		data: {
-			...errorData
-		}
-	});
+var errorResponseHandler = error => {
+    let errorData;
+    if (error.data) {
+        errorData = parseCatalogExceptionObject(error.data);
+    } else {
+        errorData = {
+            title: error.statusText,
+            msg: error.responseText ? error.responseText : i18n('GENERIC_ERROR')
+        };
+    }
+    store.dispatch({
+        type: modalActionTypes.GLOBAL_MODAL_ERROR,
+        data: {
+            ...errorData
+        }
+    });
 };
 
 export default errorResponseHandler;
diff --git a/openecomp-ui/src/nfvo-utils/KeyMirror.js b/openecomp-ui/src/nfvo-utils/KeyMirror.js
index 220fe07430..dc351af57c 100644
--- a/openecomp-ui/src/nfvo-utils/KeyMirror.js
+++ b/openecomp-ui/src/nfvo-utils/KeyMirror.js
@@ -13,27 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-var keyMirror = function (obj) {
-	var ret = {};
-	var key;
-	var val;
-	if (!(obj instanceof Object && !Array.isArray(obj))) {
-		throw new Error('keyMirror(...): Argument must be an object.');
-	}
-	for (key in obj) {
-		if (obj.hasOwnProperty(key)) {
-			val = obj[key];
-			if (val instanceof Object) {
-				ret[key] = keyMirror(obj[key]);
-			} else if(val !== null && val !== undefined){
-				ret[key] = val;
-			}
-			else {
-				ret[key] = Symbol(key);
-			}
-		}
-	}
-	return Object.freeze(ret);
+var keyMirror = function(obj) {
+    var ret = {};
+    var key;
+    var val;
+    if (!(obj instanceof Object && !Array.isArray(obj))) {
+        throw new Error('keyMirror(...): Argument must be an object.');
+    }
+    for (key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            val = obj[key];
+            if (val instanceof Object) {
+                ret[key] = keyMirror(obj[key]);
+            } else if (val !== null && val !== undefined) {
+                ret[key] = val;
+            } else {
+                ret[key] = Symbol(key);
+            }
+        }
+    }
+    return Object.freeze(ret);
 };
 
-export default keyMirror;
\ No newline at end of file
+export default keyMirror;
diff --git a/openecomp-ui/src/nfvo-utils/RestAPIUtil.js b/openecomp-ui/src/nfvo-utils/RestAPIUtil.js
index 5b07986390..1a5817de66 100644
--- a/openecomp-ui/src/nfvo-utils/RestAPIUtil.js
+++ b/openecomp-ui/src/nfvo-utils/RestAPIUtil.js
@@ -18,7 +18,7 @@ import md5 from 'md5';
 import axios from 'axios';
 
 import store from 'sdc-app/AppStore.js';
-import {actionTypes as LoaderConstants} from 'nfvo-components/loader/LoaderConstants.js';
+import { actionTypes as LoaderConstants } from 'nfvo-components/loader/LoaderConstants.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import errorResponseHandler from './ErrorResponseHandler.js';
 
@@ -39,124 +39,133 @@ const STORAGE_AUTH_KEY = 'sdc-auth-token';
 const REQUEST_ID_HEADER = 'X-ECOMP-RequestID';
 const CONTENT_MD5_HEADER = 'Content-MD5';
 
-
 function applySecurity(options, data) {
-	let headers = options.headers || (options.headers = {});
-
-	let authToken = localStorage.getItem(STORAGE_AUTH_KEY);
-	if (authToken) {
-		headers[AUTHORIZATION_HEADER] = authToken;
-	}
-
-	let catalogApiHeaders = Configuration.get('CatalogApiHeaders'),
-		catalogUidHeader = catalogApiHeaders && catalogApiHeaders.userId;
-	if (catalogUidHeader) {
-		headers[catalogUidHeader.name] = catalogUidHeader.value;
-	}
-
-	headers[REQUEST_ID_HEADER] = uuid.create().toString();
-	if (options.md5) {
-		let headers = options.headers;
-		headers[CONTENT_MD5_HEADER] = window.btoa(md5(JSON.stringify(data)).toLowerCase());
-	}
+    let headers = options.headers || (options.headers = {});
+
+    let authToken = localStorage.getItem(STORAGE_AUTH_KEY);
+    if (authToken) {
+        headers[AUTHORIZATION_HEADER] = authToken;
+    }
+
+    let catalogApiHeaders = Configuration.get('CatalogApiHeaders'),
+        catalogUidHeader = catalogApiHeaders && catalogApiHeaders.userId;
+    if (catalogUidHeader) {
+        headers[catalogUidHeader.name] = catalogUidHeader.value;
+    }
+
+    headers[REQUEST_ID_HEADER] = uuid.create().toString();
+    if (options.md5) {
+        let headers = options.headers;
+        headers[CONTENT_MD5_HEADER] = window.btoa(
+            md5(JSON.stringify(data)).toLowerCase()
+        );
+    }
 }
 
-
 function handleSuccess(responseHeaders, requestHeaders) {
-	let authToken = responseHeaders[AUTHORIZATION_HEADER];
-	let prevToken = requestHeaders && requestHeaders[AUTHORIZATION_HEADER];
-	if (authToken && authToken !== prevToken) {
-		if (authToken === 'null') {
-			localStorage.removeItem(STORAGE_AUTH_KEY);
-		} else {
-			localStorage.setItem(STORAGE_AUTH_KEY, authToken);
-		}
-	}
+    let authToken = responseHeaders[AUTHORIZATION_HEADER];
+    let prevToken = requestHeaders && requestHeaders[AUTHORIZATION_HEADER];
+    if (authToken && authToken !== prevToken) {
+        if (authToken === 'null') {
+            localStorage.removeItem(STORAGE_AUTH_KEY);
+        } else {
+            localStorage.setItem(STORAGE_AUTH_KEY, authToken);
+        }
+    }
 }
 
-class RestAPIUtil  {
-	handleRequest(url, type, options = {}, data){
-		if (DEBUG) {
-			console.log('axios --> Making REST call (' + type + '): ' + url);
-		}
-
-		applySecurity(options, data);
-
-		// TODO see ig necessary or in transformrequest funtion
-		if (type === POST || type === PUT) {
-			if (data instanceof FormData) {
-				options.headers.contentType = MULTIPART_FORM_DATA;
-			}
-			else {
-				options.headers.contentType = APPLICATION_JSON;
-//				config.data = JSON.stringify(data);
-			}
-
-		} else {
-			data = null;
-		}
-
-		let config = {
-			method: type,
-			url: url,
-			headers : options.headers,
-			data : data
-		};
-
-		store.dispatch({type: LoaderConstants.SEND_REQUEST, url: url});
-		if (options.dataType === BINARY) {
-			config.responseType = 'arraybuffer';
-			return axios(config).
-			then(result => {
-				store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : result.config.url});
-				return ({
-					blob : new Blob([result.data] ),
-					headers : result.headers
-				});
-			}).catch(error => {
-				store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : error.config.url});
-				errorResponseHandler(error.response); });
-		} else {
-			return axios(config).
-			then(result => {
-				store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : result.config.url});
-				handleSuccess(result.headers, result.config.headers);
-				return result.data;
-			}).catch(error => {
-				store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : error.config.url});
-				errorResponseHandler(error.response);
-				return Promise.reject({responseJSON: error.response.data});
-			});
-		}
-
-	}
-
-	fetch(url, options) {
-		return this.handleRequest(url, GET, options);
-	}
-
-	get(url, options) {
-		return this.fetch(url, options);
-	}
-
-	post(url, data, options) {
-		return this.handleRequest(url, POST, options, data);
-	}
-
-	put(url, data, options) {
-		return this.handleRequest(url, PUT, options, data);
-	}
-
-	destroy(url, options) {
-		return this.handleRequest(url, DELETE, options);
-	}
-
-
-
+class RestAPIUtil {
+    handleRequest(url, type, options = {}, data) {
+        if (DEBUG) {
+            console.log('axios --> Making REST call (' + type + '): ' + url);
+        }
+
+        applySecurity(options, data);
+
+        // TODO see ig necessary or in transformrequest funtion
+        if (type === POST || type === PUT) {
+            if (data instanceof FormData) {
+                options.headers.contentType = MULTIPART_FORM_DATA;
+            } else {
+                options.headers.contentType = APPLICATION_JSON;
+                //				config.data = JSON.stringify(data);
+            }
+        } else {
+            data = null;
+        }
+
+        let config = {
+            method: type,
+            url: url,
+            headers: options.headers,
+            data: data
+        };
+
+        store.dispatch({ type: LoaderConstants.SEND_REQUEST, url: url });
+        if (options.dataType === BINARY) {
+            config.responseType = 'arraybuffer';
+            return axios(config)
+                .then(result => {
+                    store.dispatch({
+                        type: LoaderConstants.RECEIVE_RESPONSE,
+                        url: result.config.url
+                    });
+                    return {
+                        blob: new Blob([result.data]),
+                        headers: result.headers
+                    };
+                })
+                .catch(error => {
+                    store.dispatch({
+                        type: LoaderConstants.RECEIVE_RESPONSE,
+                        url: error.config.url
+                    });
+                    errorResponseHandler(error.response);
+                });
+        } else {
+            return axios(config)
+                .then(result => {
+                    store.dispatch({
+                        type: LoaderConstants.RECEIVE_RESPONSE,
+                        url: result.config.url
+                    });
+                    handleSuccess(result.headers, result.config.headers);
+                    return result.data;
+                })
+                .catch(error => {
+                    store.dispatch({
+                        type: LoaderConstants.RECEIVE_RESPONSE,
+                        url: error.config.url
+                    });
+                    errorResponseHandler(error.response);
+                    return Promise.reject({
+                        responseJSON: error.response.data
+                    });
+                });
+        }
+    }
+
+    fetch(url, options) {
+        return this.handleRequest(url, GET, options);
+    }
+
+    get(url, options) {
+        return this.fetch(url, options);
+    }
+
+    post(url, data, options) {
+        return this.handleRequest(url, POST, options, data);
+    }
+
+    put(url, data, options) {
+        return this.handleRequest(url, PUT, options, data);
+    }
+
+    destroy(url, options) {
+        return this.handleRequest(url, DELETE, options);
+    }
 }
 
 const instance = new RestAPIUtil();
 
-
-
 export default instance;
diff --git a/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js b/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js
index bddd49c700..990701c6f0 100644
--- a/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js
+++ b/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js
@@ -15,35 +15,48 @@
  */
 
 function getTimestampString() {
-	let date = new Date();
-	let z = n => n < 10 ? '0' + n : n;
-	return `${date.getFullYear()}-${z(date.getMonth())}-${z(date.getDate())}_${z(date.getHours())}-${z(date.getMinutes())}`;
+    let date = new Date();
+    let z = n => (n < 10 ? '0' + n : n);
+    return `${date.getFullYear()}-${z(date.getMonth())}-${z(
+        date.getDate()
+    )}_${z(date.getHours())}-${z(date.getMinutes())}`;
 }
 
+export default function showFileSaveDialog({
+    blob,
+    headers,
+    defaultFilename,
+    addTimestamp
+}) {
+    let filename;
+    let contentDisposition = headers['content-disposition']
+        ? headers['content-disposition']
+        : '';
+    let match = contentDisposition
+        ? contentDisposition.match(/filename=(.*?)(;|$)/)
+        : false;
+    if (match) {
+        filename = match[1];
+    } else {
+        filename = defaultFilename;
+    }
 
-export default function showFileSaveDialog({blob, headers, defaultFilename, addTimestamp}) {
-	let filename;
-	let contentDisposition = headers['content-disposition'] ? headers['content-disposition'] : '';
-	let match = contentDisposition ? contentDisposition.match(/filename=(.*?)(;|$)/) : false;
-	if (match) {
-		filename = match[1];
-	} else {
-		filename = defaultFilename;
-	}
+    if (addTimestamp) {
+        filename = filename.replace(
+            /(^.*?)\.([^.]+$)/,
+            `$1_${getTimestampString()}.$2`
+        );
+    }
 
-	if (addTimestamp) {
-		filename = filename.replace(/(^.*?)\.([^.]+$)/, `$1_${getTimestampString()}.$2`);
-	}
-
-	let link = document.createElement('a');
-	let url = URL.createObjectURL(blob);
-	link.href = url;
-	link.download = filename;
-	link.style.display = 'none';
-	document.body.appendChild(link);
-	link.click();
-	setTimeout(function(){
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	}, 0);
-};
+    let link = document.createElement('a');
+    let url = URL.createObjectURL(blob);
+    link.href = url;
+    link.download = filename;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(function() {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }, 0);
+}
diff --git a/openecomp-ui/src/nfvo-utils/UUID.js b/openecomp-ui/src/nfvo-utils/UUID.js
index e1d4c54b1f..37de994201 100644
--- a/openecomp-ui/src/nfvo-utils/UUID.js
+++ b/openecomp-ui/src/nfvo-utils/UUID.js
@@ -15,39 +15,39 @@
  */
 import UUID from 'uuid-js';
 
-let toCustomUUID = (uuid) => {
-	return 'U' + uuid.replace(/-/g, '');
+let toCustomUUID = uuid => {
+    return 'U' + uuid.replace(/-/g, '');
 };
 
 let getUUID = function(num, isSync) {
-	if (isSync) {
-		let uuid;
-		if (!num) {
-			uuid = toCustomUUID(UUID.create().toString());
-		} else {
-			uuid = [];
-			for (var i = 0; i < num; i++) {
-				uuid[i] = toCustomUUID(UUID.create().toString());
-			}
-		}
-		if (num === 1) {
-			return uuid[0];
-		} else {
-			return uuid;
-		}
-	}
-	return new Promise(resolve => {
-		let uuid;
-		if (!num) {
-			uuid = toCustomUUID(UUID.create().toString());
-		} else {
-			uuid = [];
-			for (var i = 0; i < num; i++) {
-				uuid[i] = toCustomUUID(UUID.create().toString());
-			}
-		}
-		setTimeout(() => resolve(uuid), 100);
-	});
+    if (isSync) {
+        let uuid;
+        if (!num) {
+            uuid = toCustomUUID(UUID.create().toString());
+        } else {
+            uuid = [];
+            for (var i = 0; i < num; i++) {
+                uuid[i] = toCustomUUID(UUID.create().toString());
+            }
+        }
+        if (num === 1) {
+            return uuid[0];
+        } else {
+            return uuid;
+        }
+    }
+    return new Promise(resolve => {
+        let uuid;
+        if (!num) {
+            uuid = toCustomUUID(UUID.create().toString());
+        } else {
+            uuid = [];
+            for (var i = 0; i < num; i++) {
+                uuid[i] = toCustomUUID(UUID.create().toString());
+            }
+        }
+        setTimeout(() => resolve(uuid), 100);
+    });
 };
 
 export default getUUID;
diff --git a/openecomp-ui/src/nfvo-utils/Validator.js b/openecomp-ui/src/nfvo-utils/Validator.js
index 0cb1943d66..324198ef2e 100644
--- a/openecomp-ui/src/nfvo-utils/Validator.js
+++ b/openecomp-ui/src/nfvo-utils/Validator.js
@@ -18,119 +18,189 @@ import * as ValidatorJS from 'validator';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 class Validator {
-	static get globalValidationFunctions() {
-		return {
-			required: value => {
-				return typeof value === 'string' ? value.replace(/\s+/g, '') !== '' : value !== '';
-			},
-			requiredChooseOption: value => value !== '',
-			maxLength: (value, length) => ValidatorJS.isLength(value, {max: length}),
-			minLength: (value, length) => ValidatorJS.isLength(value, {min: length}),
-			pattern: (value, pattern) => ValidatorJS.matches(value, pattern),
-			numeric: value => {
-				if (value === '') {
-					// to allow empty value which is not zero
-					return true;
-				}
-				return ValidatorJS.isNumeric(value);
-			},
-			maximum: (value, maxValue) => {return (value === undefined) ? true : (value <= maxValue);},
-			minimum: (value, minValue) => {return (value === undefined) ? true : (value >= minValue);},
-			maximumExclusive: (value, maxValue) => {return (value === undefined) ? true : (value < maxValue);},
-			minimumExclusive: (value, minValue) => {return (value === undefined) ? true : (value > minValue);},
-			alphanumeric: value => ValidatorJS.isAlphanumeric(value),
-			alphanumericWithSpaces: value => ValidatorJS.isAlphanumeric(value.replace(/ /g, '')),
-			validateName: value => ValidatorJS.isAlphanumeric(value.replace(/\s|\.|\_|\-/g, ''), 'en-US'),
-			validateVendorName: value => ValidatorJS.isAlphanumeric(value.replace(/[\x7F-\xFF]|\s/g, ''), 'en-US'),
-			freeEnglishText: value => ValidatorJS.isAlphanumeric(value.replace(/\s|\.|\_|\-|\,|\(|\)|\?/g, ''), 'en-US'),
-			email: value => ValidatorJS.isEmail(value),
-			ip: value => ValidatorJS.isIP(value),
-			url: value => ValidatorJS.isURL(value),
-			alphanumericWithUnderscores: value => ValidatorJS.isAlphanumeric(value.replace(/_/g, '')),
-			requiredChoiceWithOther: (value, otherValue) => {
-				let chosen = value.choice;
-				// if we have an empty multiple select we have a problem since it's required
-				let validationFunc = this.globalValidationFunctions['required'];
-				if (value.choices) {
-					if (value.choices.length === 0) {
-						return  false;
-					} else {
-						// continuing validation with the first chosen value in case we have the 'Other' field
-						chosen = value.choices[0];
-					}
-				}
-				if (chosen !== otherValue) {
-					return validationFunc(chosen, true);
-				} else { // when 'Other' was chosen, validate other value
-					return validationFunc(value.other, true);
-				}
-			}
-		};
-	}
+    static get globalValidationFunctions() {
+        return {
+            required: value => {
+                return typeof value === 'string'
+                    ? value.replace(/\s+/g, '') !== ''
+                    : value !== '';
+            },
+            requiredChooseOption: value => value !== '',
+            maxLength: (value, length) =>
+                ValidatorJS.isLength(value, { max: length }),
+            minLength: (value, length) =>
+                ValidatorJS.isLength(value, { min: length }),
+            pattern: (value, pattern) => ValidatorJS.matches(value, pattern),
+            numeric: value => {
+                if (value === '') {
+                    // to allow empty value which is not zero
+                    return true;
+                }
+                return ValidatorJS.isNumeric(value);
+            },
+            maximum: (value, maxValue) => {
+                return value === undefined ? true : value <= maxValue;
+            },
+            minimum: (value, minValue) => {
+                return value === undefined ? true : value >= minValue;
+            },
+            maximumExclusive: (value, maxValue) => {
+                return value === undefined ? true : value < maxValue;
+            },
+            minimumExclusive: (value, minValue) => {
+                return value === undefined ? true : value > minValue;
+            },
+            alphanumeric: value => ValidatorJS.isAlphanumeric(value),
+            alphanumericWithSpaces: value =>
+                ValidatorJS.isAlphanumeric(value.replace(/ /g, '')),
+            validateName: value =>
+                ValidatorJS.isAlphanumeric(
+                    value.replace(/\s|\.|\_|\-/g, ''),
+                    'en-US'
+                ),
+            validateVendorName: value =>
+                ValidatorJS.isAlphanumeric(
+                    value.replace(/[\x7F-\xFF]|\s/g, ''),
+                    'en-US'
+                ),
+            freeEnglishText: value =>
+                ValidatorJS.isAlphanumeric(
+                    value.replace(/\s|\.|\_|\-|\,|\(|\)|\?/g, ''),
+                    'en-US'
+                ),
+            email: value => ValidatorJS.isEmail(value),
+            ip: value => ValidatorJS.isIP(value),
+            url: value => ValidatorJS.isURL(value),
+            alphanumericWithUnderscores: value =>
+                ValidatorJS.isAlphanumeric(value.replace(/_/g, '')),
+            requiredChoiceWithOther: (value, otherValue) => {
+                let chosen = value.choice;
+                // if we have an empty multiple select we have a problem since it's required
+                let validationFunc = this.globalValidationFunctions['required'];
+                if (value.choices) {
+                    if (value.choices.length === 0) {
+                        return false;
+                    } else {
+                        // continuing validation with the first chosen value in case we have the 'Other' field
+                        chosen = value.choices[0];
+                    }
+                }
+                if (chosen !== otherValue) {
+                    return validationFunc(chosen, true);
+                } else {
+                    // when 'Other' was chosen, validate other value
+                    return validationFunc(value.other, true);
+                }
+            }
+        };
+    }
 
-	static get globalValidationMessagingFunctions() {
-		return {
-			required: () => i18n('Field is required'),
-			requiredChooseOption: () => i18n('Field should have one of these options'),
-			requiredChoiceWithOther: () => i18n('Field is required'),
-			maxLength: (value, maxLength) => i18n('Field value has exceeded it\'s limit, {maxLength}. current length: {length}', {
-				length: value.length,
-				maxLength
-			}),
-			minLength: (value, minLength) => i18n('Field value should contain at least {minLength} characters.', {minLength: minLength}),
-			pattern: (value, pattern) => i18n('Field value should match the pattern: {pattern}.', {pattern: pattern}),
-			numeric: () => i18n('Field value should contain numbers only.'),
-			maximum: (value, maxValue) => i18n('Field value should be less or equal to: {maxValue}.', {maxValue: maxValue}),
-			minimum: (value, minValue) => i18n('Field value should be at least: {minValue}.', {minValue: minValue.toString()}),
-			maximumExclusive: (value, maxValue) => i18n('Field value should be less than: {maxValue}.', {maxValue: maxValue}),
-			minimumExclusive: (value, minValue) => i18n('Field value should be more than: {minValue}.', {minValue: minValue.toString()}),
-			alphanumeric: () => i18n('Field value should contain letters or digits only.'),
-			alphanumericWithSpaces: () => i18n('Field value should contain letters, digits or spaces only.'),
-			validateName: ()=> i18n('Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'),
-			validateVendorName: ()=> i18n('Field value should contain English letters digits and spaces only.'),
-			freeEnglishText: ()=> i18n('Field value should contain  English letters, digits , spaces, underscores, dashes and dots only.'),
-			email: () => i18n('Field value should be a valid email address.'),
-			ip: () => i18n('Field value should be a valid ip address.'),
-			url: () => i18n('Field value should be a valid url address.'),
-			general: () => i18n('Field value is invalid.'),
-			alphanumericWithUnderscores: () => i18n('Field value should contain letters, digits or _ only.')
-		};
-	}
+    static get globalValidationMessagingFunctions() {
+        return {
+            required: () => i18n('Field is required'),
+            requiredChooseOption: () =>
+                i18n('Field should have one of these options'),
+            requiredChoiceWithOther: () => i18n('Field is required'),
+            maxLength: (value, maxLength) =>
+                i18n(
+                    "Field value has exceeded it's limit, {maxLength}. current length: {length}",
+                    {
+                        length: value.length,
+                        maxLength
+                    }
+                ),
+            minLength: (value, minLength) =>
+                i18n(
+                    'Field value should contain at least {minLength} characters.',
+                    {
+                        minLength: minLength
+                    }
+                ),
+            pattern: (value, pattern) =>
+                i18n('Field value should match the pattern: {pattern}.', {
+                    pattern: pattern
+                }),
+            numeric: () => i18n('Field value should contain numbers only.'),
+            maximum: (value, maxValue) =>
+                i18n('Field value should be less or equal to: {maxValue}.', {
+                    maxValue: maxValue
+                }),
+            minimum: (value, minValue) =>
+                i18n('Field value should be at least: {minValue}.', {
+                    minValue: minValue.toString()
+                }),
+            maximumExclusive: (value, maxValue) =>
+                i18n('Field value should be less than: {maxValue}.', {
+                    maxValue: maxValue
+                }),
+            minimumExclusive: (value, minValue) =>
+                i18n('Field value should be more than: {minValue}.', {
+                    minValue: minValue.toString()
+                }),
+            alphanumeric: () =>
+                i18n('Field value should contain letters or digits only.'),
+            alphanumericWithSpaces: () =>
+                i18n(
+                    'Field value should contain letters, digits or spaces only.'
+                ),
+            validateName: () =>
+                i18n(
+                    'Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'
+                ),
+            validateVendorName: () =>
+                i18n(
+                    'Field value should contain English letters digits and spaces only.'
+                ),
+            freeEnglishText: () =>
+                i18n(
+                    'Field value should contain  English letters, digits , spaces, underscores, dashes and dots only.'
+                ),
+            email: () => i18n('Field value should be a valid email address.'),
+            ip: () => i18n('Field value should be a valid ip address.'),
+            url: () => i18n('Field value should be a valid url address.'),
+            general: () => i18n('Field value is invalid.'),
+            alphanumericWithUnderscores: () =>
+                i18n('Field value should contain letters, digits or _ only.')
+        };
+    }
 
-	static validateItem(value, data, type) {
-		let validationFunc = this.globalValidationFunctions[type];
-		const isValid = validationFunc(value, data);
-		let errorText = '';
-		if (!isValid) {
-			errorText = this.globalValidationMessagingFunctions[type](value, data);
-		}
-		return {
-			isValid,
-			errorText
-		};
-	}
+    static validateItem(value, data, type) {
+        let validationFunc = this.globalValidationFunctions[type];
+        const isValid = validationFunc(value, data);
+        let errorText = '';
+        if (!isValid) {
+            errorText = this.globalValidationMessagingFunctions[type](
+                value,
+                data
+            );
+        }
+        return {
+            isValid,
+            errorText
+        };
+    }
 
-	static validate(fieldName, value, validations, state, customValidations) {
-		let result = { isValid: true, errorText: '' };
-		for (let validation of validations) {
-			result = this.validateItem(value, validation.data, validation.type);
-			if (!result.isValid) {
-				return result;
-			}
-		}
-		if (customValidations) {
-			let validationFunc = customValidations[fieldName];
-			if (validationFunc) {
-				result = validationFunc(value, state);
-			}
-		}
-		return result;
-	}
+    static validate(fieldName, value, validations, state, customValidations) {
+        let result = { isValid: true, errorText: '' };
+        for (let validation of validations) {
+            result = this.validateItem(value, validation.data, validation.type);
+            if (!result.isValid) {
+                return result;
+            }
+        }
+        if (customValidations) {
+            let validationFunc = customValidations[fieldName];
+            if (validationFunc) {
+                result = validationFunc(value, state);
+            }
+        }
+        return result;
+    }
 
-	static isItemNameAlreadyExistsInList({itemId, itemName, list}) {
-		itemName = itemName.toLowerCase();
-		return list[itemName] && list[itemName] !== itemId;
-	}
+    static isItemNameAlreadyExistsInList({ itemId, itemName, list }) {
+        itemName = itemName.toLowerCase();
+        return list[itemName] && list[itemName] !== itemId;
+    }
 }
 
 export default Validator;
diff --git a/openecomp-ui/src/nfvo-utils/WebSocketUtil.js b/openecomp-ui/src/nfvo-utils/WebSocketUtil.js
index c9dd10f1af..69f44d4da5 100644
--- a/openecomp-ui/src/nfvo-utils/WebSocketUtil.js
+++ b/openecomp-ui/src/nfvo-utils/WebSocketUtil.js
@@ -16,41 +16,50 @@
 
 import store from 'sdc-app/AppStore.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from 'sdc-app/onboarding/userNotifications/UserNotificationsConstants.js';
+import { actionTypes } from 'sdc-app/onboarding/userNotifications/UserNotificationsConstants.js';
 
-
-export const websocketUrl = 'ws://' + window.location.hostname + ':' + Configuration.get('websocketPort')
-	+ '/'  + Configuration.get('websocketPath');
+export const websocketUrl =
+    'ws://' +
+    window.location.hostname +
+    ':' +
+    Configuration.get('websocketPort') +
+    '/' +
+    Configuration.get('websocketPath');
 
 /***
  * Websocket is treated like a singleton. only need one for the application.
  */
 var websocket;
 
-
 export default {
+    open(url, { lastScanned }) {
+        if (
+            websocket === undefined ||
+            websocket.readyState === websocket.CLOSED
+        ) {
+            websocket = new WebSocket(
+                `${url}?LAST_DELIVERED_EVENT_ID=${lastScanned}`
+            );
+            websocket.onmessage = event =>
+                store.dispatch({
+                    type: actionTypes.NOTIFICATION,
+                    data: JSON.parse(event.data)
+                });
+            websocket.onclose = event => {
+                if (event.code && event.code === 1001) {
+                    // - Idle Timeout
+                    const { lastScanned } = store.getState().notifications;
+                    console.log('Reconnecting to Websocket');
+                    this.open(websocketUrl, { lastScanned });
+                }
+            };
+            websocket.onerror = event => console.log(event);
+        }
+    },
 
-	open(url, {lastScanned}) {
-		if (websocket === undefined || websocket.readyState === websocket.CLOSED) {
-			websocket = new WebSocket(`${url}?LAST_DELIVERED_EVENT_ID=${lastScanned}`);
-			websocket.onmessage = event => store.dispatch({
-				type: actionTypes.NOTIFICATION,
-				data: JSON.parse(event.data)
-			});
-			websocket.onclose = event => {
-				if(event.code && event.code === 1001) { // - Idle Timeout
-					const {lastScanned} = store.getState().notifications;
-					console.log('Reconnecting to Websocket');
-					this.open(websocketUrl, {lastScanned});
-				}
-			};
-			websocket.onerror = event => console.log(event);
-		}
-	},
-
-	close() {
-		if (websocket !== undefined) {
-			websocket.close();
-		}
-	}
+    close() {
+        if (websocket !== undefined) {
+            websocket.close();
+        }
+    }
 };
diff --git a/openecomp-ui/src/nfvo-utils/getValue.js b/openecomp-ui/src/nfvo-utils/getValue.js
index 5ab0c76d73..0cac3cd726 100644
--- a/openecomp-ui/src/nfvo-utils/getValue.js
+++ b/openecomp-ui/src/nfvo-utils/getValue.js
@@ -13,38 +13,50 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 function getValueFromObject(element) {
-	return element.choices && element.choices.length > 0 && element.choices[0] !== '' && element.choices[0] !== optionInputOther.OTHER ||
-			element.other && element.choices[0] === optionInputOther.OTHER ?
-			element : undefined;
+    return (element.choices &&
+        element.choices.length > 0 &&
+        element.choices[0] !== '' &&
+        element.choices[0] !== optionInputOther.OTHER) ||
+        (element.other && element.choices[0] === optionInputOther.OTHER)
+        ? element
+        : undefined;
 }
 
 function getValueFromVariable(variable) {
-	return variable ? variable : undefined;
+    return variable ? variable : undefined;
 }
 
 function getArrayData(variable) {
-	return variable.length ? variable : undefined;
+    return variable.length ? variable : undefined;
 }
 
- let getValue = element => {
-	return typeof element === 'object' ?
-		element instanceof Array ? getArrayData(element) : getValueFromObject(element) :
-		getValueFromVariable(element);
- };
+let getValue = element => {
+    return typeof element === 'object'
+        ? element instanceof Array
+          ? getArrayData(element)
+          : getValueFromObject(element)
+        : getValueFromVariable(element);
+};
 
 export function getStrValue(choiceObject) {
-	if (!choiceObject) {
-		return undefined;
-	}
-	if (choiceObject.choice && choiceObject.choice !== '' && choiceObject.choice !== optionInputOther.OTHER) {
-		return choiceObject.choice;
-	}
-	else if (choiceObject.other && choiceObject.choice === optionInputOther.OTHER) {
-		return choiceObject.other;
-	}
+    if (!choiceObject) {
+        return undefined;
+    }
+    if (
+        choiceObject.choice &&
+        choiceObject.choice !== '' &&
+        choiceObject.choice !== optionInputOther.OTHER
+    ) {
+        return choiceObject.choice;
+    } else if (
+        choiceObject.other &&
+        choiceObject.choice === optionInputOther.OTHER
+    ) {
+        return choiceObject.other;
+    }
 }
 
- export default getValue;
+export default getValue;
diff --git a/openecomp-ui/src/nfvo-utils/i18n/i18n.js b/openecomp-ui/src/nfvo-utils/i18n/i18n.js
index ef97b8bab4..43a183def4 100644
--- a/openecomp-ui/src/nfvo-utils/i18n/i18n.js
+++ b/openecomp-ui/src/nfvo-utils/i18n/i18n.js
@@ -22,88 +22,94 @@ import i18nJson from 'i18nJson';
  Intl libs are using out dated transpailer from ecmascript6.
  *  TODO: As soon as they fix it, remove this assignments!!!
  * */
-var Intl               = window.Intl || IntlObj.default,
-	IntlMessageFormat  = IntlMessageFormatObj.default,
-	IntlRelativeFormat = IntlRelativeFormatObj.default,
-	createFormatCache  = createFormatCacheObj.default;
+var Intl = window.Intl || IntlObj.default,
+    IntlMessageFormat = IntlMessageFormatObj.default,
+    IntlRelativeFormat = IntlRelativeFormatObj.default,
+    createFormatCache = createFormatCacheObj.default;
 
 /*extract locale*/
 var _locale = window.localStorage && localStorage.getItem('user_locale');
-if(!_locale) {
-	if(window.navigator) {
-		_locale = navigator.language || navigator.userLanguage;
+if (!_locale) {
+    if (window.navigator) {
+        _locale = navigator.language || navigator.userLanguage;
 
-		//For now removing the dashes from the language.
-		let indexOfDash = _locale.indexOf('-');
-		if(-1 !== indexOfDash) {
-			_locale = _locale.substr(0, indexOfDash);
-		}
-	}
-	if(!_locale) {
-		_locale = 'en';
-	}
+        //For now removing the dashes from the language.
+        let indexOfDash = _locale.indexOf('-');
+        if (-1 !== indexOfDash) {
+            _locale = _locale.substr(0, indexOfDash);
+        }
+    }
+    if (!_locale) {
+        _locale = 'en';
+    }
 }
 
 var _localeUpper = _locale.toUpperCase();
 var i18n = {
+    _locale: _locale,
+    _localeUpper: _localeUpper,
+    _i18nData: i18nJson || {},
 
-	_locale: _locale,
-	_localeUpper: _localeUpper,
-	_i18nData: i18nJson || {},
+    number(num) {
+        return createFormatCache(Intl.NumberFormat)(this._locale).format(num);
+    },
 
-	number(num) {
-		return createFormatCache(Intl.NumberFormat)(this._locale).format(num);
-	},
+    date(date, options, relativeDates) {
+        if (undefined === relativeDates || relativeDates) {
+            return this.dateRelative(date, options);
+        } else {
+            return this.dateNormal(date, options);
+        }
+    },
 
-	date(date, options, relativeDates) {
-		if (undefined === relativeDates || relativeDates) {
-			return this.dateRelative(date, options);
-		} else {
-			return this.dateNormal(date, options);
-		}
-	},
-
-	dateNormal(date, options) {
-		return createFormatCache(Intl.DateTimeFormat)(this._locale, options).format(date);
-	},
-
-	dateRelative(date, options) {
-		return createFormatCache(IntlRelativeFormat)(this._locale, options).format(date);
-	},
-	message(messageId, options) {
-		let messageTxt = null;
-		if (i18nJson && i18nJson[messageId]) {
-			messageTxt = i18nJson[messageId];
-		} else {
-			messageTxt = String(messageId);
-		}
-		return createFormatCache(IntlMessageFormat)(messageTxt, this._locale).format(options);
-
-	},
-	getLocale() {
-		return this._locale;
-	},
-	getLocaleUpper() {
-		return this._localeUpper;
-	},
-	setLocale(locale) {
-		localStorage.setItem('user_locale', locale);
-		window.location.reload();
-	}
+    dateNormal(date, options) {
+        return createFormatCache(Intl.DateTimeFormat)(
+            this._locale,
+            options
+        ).format(date);
+    },
 
+    dateRelative(date, options) {
+        return createFormatCache(IntlRelativeFormat)(
+            this._locale,
+            options
+        ).format(date);
+    },
+    message(messageId, options) {
+        let messageTxt = null;
+        if (i18nJson && i18nJson[messageId]) {
+            messageTxt = i18nJson[messageId];
+        } else {
+            messageTxt = String(messageId);
+        }
+        return createFormatCache(IntlMessageFormat)(
+            messageTxt,
+            this._locale
+        ).format(options);
+    },
+    getLocale() {
+        return this._locale;
+    },
+    getLocaleUpper() {
+        return this._localeUpper;
+    },
+    setLocale(locale) {
+        localStorage.setItem('user_locale', locale);
+        window.location.reload();
+    }
 };
 function i18nWrapper() {
-	return i18nWrapper.message.apply(i18nWrapper, arguments);
+    return i18nWrapper.message.apply(i18nWrapper, arguments);
 }
 
 /*replace with some kind of extend method*/
 var prop, propKey;
 for (propKey in i18n) {
-	prop = i18n[propKey];
-	if (typeof prop === 'function') {
-		prop = prop.bind(i18nWrapper);
-	}
-	i18nWrapper[propKey] = prop;
+    prop = i18n[propKey];
+    if (typeof prop === 'function') {
+        prop = prop.bind(i18nWrapper);
+    }
+    i18nWrapper[propKey] = prop;
 }
 
 export default i18nWrapper;
diff --git a/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js b/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js
index 816915b1c9..79f95057a0 100644
--- a/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js
+++ b/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js
@@ -1,35 +1,51 @@
 import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
-import {text, number} from '@kadira/storybook-addon-knobs';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import i18nJson from 'nfvo-utils/i18n/en.json';
 
 const stories = storiesOf('i18n', module);
 stories.addDecorator(withKnobs);
 
-
 i18nJson['added'] = 'this is my test';
 i18nJson['added with {param}'] = 'this is my test with {param}';
 
-stories
-	.add('i18n tests', () => {
-		let keys = [
-			'I do not exist',
-			'Delete',
-			'OrchestrationTemplateCandidate/File Structure'
-		];
-		let translations = [];
-		let i=0;
-		translations.push(<div id={i++}>KEY: VALUE</div>)
-		keys.forEach((key) => {
-			translations.push((<div id={i++}>{key} : {i18n(key)} </div>));
-		});
-		var param = 'param';
-		translations.push((<div id={i++}>added : {i18n('added')} </div>));
-		translations.push((<div id={i++}><font color="red"><b>WRONG</b></font> - added with ${param} in translation : {i18n(`added with ${param}`)} </div>));
-		translations.push((<div id={i++}><font color="green"><b>RIGHT</b></font> - added with ${param} and options object {JSON.stringify({param:param})}: {i18n('added with {param}', {param: param})} </div>));
+stories.add('i18n tests', () => {
+    let keys = [
+        'I do not exist',
+        'Delete',
+        'OrchestrationTemplateCandidate/File Structure'
+    ];
+    let translations = [];
+    let i = 0;
+    translations.push(<div id={i++}>KEY: VALUE</div>);
+    keys.forEach(key => {
+        translations.push(
+            <div id={i++}>
+                {key} : {i18n(key)}{' '}
+            </div>
+        );
+    });
+    var param = 'param';
+    translations.push(<div id={i++}>added : {i18n('added')} </div>);
+    translations.push(
+        <div id={i++}>
+            <font color="red">
+                <b>WRONG</b>
+            </font>{' '}
+            - added with ${param} in translation : {i18n(`added with ${param}`)}{' '}
+        </div>
+    );
+    translations.push(
+        <div id={i++}>
+            <font color="green">
+                <b>RIGHT</b>
+            </font>{' '}
+            - added with ${param} and options object{' '}
+            {JSON.stringify({ param: param })}:{' '}
+            {i18n('added with {param}', { param: param })}{' '}
+        </div>
+    );
 
-		return (<div>{translations}</div>);
-	})
-;
+    return <div>{translations}</div>;
+});
diff --git a/openecomp-ui/src/nfvo-utils/json/JSONPointer.js b/openecomp-ui/src/nfvo-utils/json/JSONPointer.js
index f4c0d4ed59..66c67dd234 100644
--- a/openecomp-ui/src/nfvo-utils/json/JSONPointer.js
+++ b/openecomp-ui/src/nfvo-utils/json/JSONPointer.js
@@ -14,44 +14,47 @@
  * permissions and limitations under the License.
  */
 const JSONPointer = {
-
-	extractParentPointer(pointer) {
-		return pointer.replace(/\/[^\/]+$/, '');
-	},
-
-	extractLastPart(pointer) {
-		const [,lastPart] = pointer.match(/\/([^\/]+)$/) || [];
-		return lastPart;
-	},
-
-	extractParts(pointer = '') {
-		return pointer.split('/').slice(1)
-			.map(part => part.replace(/~1/g, '/'))
-			.map(part => part.replace(/~0/g, '~'));
-	},
-
-	getValue(object, pointer) {
-		let parts = JSONPointer.extractParts(pointer);
-		return parts.reduce((object, part) => object && object[part], object);
-	},
-
-	setValue(object, pointer, value) {
-		let clone = obj => Array.isArray(obj) ? [...obj] : {...obj};
-
-		let parts = JSONPointer.extractParts(pointer),
-			newObject = clone(object),
-			subObject = object,
-			subNewObject = newObject;
-
-		for(let i = 0, n = parts.length - 1; i < n; ++i) {
-			let nextSubObject = subObject && subObject[parts[i]];
-			subNewObject = subNewObject[parts[i]] = nextSubObject ? clone(nextSubObject) : {};
-			subObject = nextSubObject;
-		}
-		subNewObject[parts[parts.length - 1]] = value;
-
-		return newObject;
-	}
+    extractParentPointer(pointer) {
+        return pointer.replace(/\/[^\/]+$/, '');
+    },
+
+    extractLastPart(pointer) {
+        const [, lastPart] = pointer.match(/\/([^\/]+)$/) || [];
+        return lastPart;
+    },
+
+    extractParts(pointer = '') {
+        return pointer
+            .split('/')
+            .slice(1)
+            .map(part => part.replace(/~1/g, '/'))
+            .map(part => part.replace(/~0/g, '~'));
+    },
+
+    getValue(object, pointer) {
+        let parts = JSONPointer.extractParts(pointer);
+        return parts.reduce((object, part) => object && object[part], object);
+    },
+
+    setValue(object, pointer, value) {
+        let clone = obj => (Array.isArray(obj) ? [...obj] : { ...obj });
+
+        let parts = JSONPointer.extractParts(pointer),
+            newObject = clone(object),
+            subObject = object,
+            subNewObject = newObject;
+
+        for (let i = 0, n = parts.length - 1; i < n; ++i) {
+            let nextSubObject = subObject && subObject[parts[i]];
+            subNewObject = subNewObject[parts[i]] = nextSubObject
+                ? clone(nextSubObject)
+                : {};
+            subObject = nextSubObject;
+        }
+        subNewObject[parts[parts.length - 1]] = value;
+
+        return newObject;
+    }
 };
 
 export default JSONPointer;
diff --git a/openecomp-ui/src/nfvo-utils/json/JSONSchema.js b/openecomp-ui/src/nfvo-utils/json/JSONSchema.js
index 3b3a9bf7b4..53d288f3ae 100644
--- a/openecomp-ui/src/nfvo-utils/json/JSONSchema.js
+++ b/openecomp-ui/src/nfvo-utils/json/JSONSchema.js
@@ -18,235 +18,264 @@ import cloneDeep from 'lodash/cloneDeep.js';
 import JSONPointer from './JSONPointer.js';
 
 export default class JSONSchema {
-
-	setSchema(schema) {
-		this._schema = schema;
-		this._fragmentsCache = new Map();
-		// this._ajv = new Ajv({
-		// 	useDefaults: true,
-		// 	coerceTypes: true
-		// });
-		// this._validate = this._ajv.compile(schema);
-	}
-
-	processData(data) {
-		data = cloneDeep(data);
-		// this._validate(data);
-		return data;
-	}
-
-	// array of names of validation functions
-	setSupportedValidationFunctions(supportedValidationFunctions) {
-		this._supportedValidationFunctions = supportedValidationFunctions;
-	}
-
-	/* FYI - I was going to support "required" but then found out that server never sends it in its schema (it was a business decision. so leaving the code commented for now */
-	flattenSchema(supportedValidationFunctions) {
-		if (supportedValidationFunctions) { this.setSupportedValidationFunctions(supportedValidationFunctions); }
-		let genericFieldInfo = {};
-		if (this._schema && this._schema.properties) {
-			this.travelProperties(this._schema.properties, genericFieldInfo/*, this._schema.required*/);
-		}
-		return {genericFieldInfo};
-	}
-
-	extractGenericFieldInfo(item) {
-		let validationsArr = [];
-		let additionalInfo = { isValid: true, errorText: ''};
-		for (let value in item) {
-			if (this._supportedValidationFunctions.includes(value)) {
-				let validationItem = this.extractValidations(item, value);
-				validationsArr[validationsArr.length] = validationItem;
-			} else {
-				let enumResult = this.extractEnum(item, value);
-				if (enumResult !== null) {
-					additionalInfo.enum = enumResult;
-				}
-				else {
-					additionalInfo[value] = item[value];
-				}
-				/*if (required.includes (property)) {
+    setSchema(schema) {
+        this._schema = schema;
+        this._fragmentsCache = new Map();
+        // this._ajv = new Ajv({
+        // 	useDefaults: true,
+        // 	coerceTypes: true
+        // });
+        // this._validate = this._ajv.compile(schema);
+    }
+
+    processData(data) {
+        data = cloneDeep(data);
+        // this._validate(data);
+        return data;
+    }
+
+    // array of names of validation functions
+    setSupportedValidationFunctions(supportedValidationFunctions) {
+        this._supportedValidationFunctions = supportedValidationFunctions;
+    }
+
+    /* FYI - I was going to support "required" but then found out that server never sends it in its schema (it was a business decision. so leaving the code commented for now */
+    flattenSchema(supportedValidationFunctions) {
+        if (supportedValidationFunctions) {
+            this.setSupportedValidationFunctions(supportedValidationFunctions);
+        }
+        let genericFieldInfo = {};
+        if (this._schema && this._schema.properties) {
+            this.travelProperties(
+                this._schema.properties,
+                genericFieldInfo /*, this._schema.required*/
+            );
+        }
+        return { genericFieldInfo };
+    }
+
+    extractGenericFieldInfo(item) {
+        let validationsArr = [];
+        let additionalInfo = { isValid: true, errorText: '' };
+        for (let value in item) {
+            if (this._supportedValidationFunctions.includes(value)) {
+                let validationItem = this.extractValidations(item, value);
+                validationsArr[validationsArr.length] = validationItem;
+            } else {
+                let enumResult = this.extractEnum(item, value);
+                if (enumResult !== null) {
+                    additionalInfo.enum = enumResult;
+                } else {
+                    additionalInfo[value] = item[value];
+                }
+                /*if (required.includes (property)) {
 				 additionalInfo[value].isRequired = true ;
 				 }*/
-			}
-		}
-
-		additionalInfo.validations = validationsArr;
-		return additionalInfo;
-	}
-
-	extractValidations(item, value) {
-		let validationItem;
-		let data = item[value];
-		if (value === 'maximum') {
-			if (item.exclusiveMaximum) {
-				value = 'maximumExclusive';
-			}
-		}
-		if (value === 'minimum') {
-			if (item.exclusiveMinimum) {
-				value = 'minimumExclusive';
-			}
-		}
-		validationItem = {type: value, data: data};
-		return validationItem;
-	}
-
-	extractEnum(item, value) {
-		let enumResult = null;
-		if (value === 'type' && item[value] === 'array') {
-			let items = item.items;
-			if (items && items.enum && items.enum.length > 0) {
-				let values = items.enum
-					.filter(value => value)
-					.map(value => ({enum: value, title: value}));
-				enumResult = values;
-			}
-		}
-		else if (value === 'enum') {
-			let items = item[value];
-			if (items && items.length > 0) {
-				let values = items
-					.filter(value => value)
-					.map(value => ({enum: value, title: value}));
-				enumResult = values;
-			}
-		}
-		return enumResult;
-	}
-
-	travelProperties(properties, genericFieldDefs, /*required = [],*/ pointer = ''){
-		let newPointer = pointer;
-		for (let property in properties) {
-			newPointer = newPointer ? newPointer + '/' + property : property;
-			if (properties[property].properties) {
-				this.travelProperties(properties[property].properties, genericFieldDefs /*, properties[property].required*/, newPointer);
-			}
-			else if (properties[property].$ref){
-				let fragment = this._getSchemaFragmentByRef(properties[property].$ref);
-				if (fragment.properties) {
-					this.travelProperties(fragment.properties, genericFieldDefs /*, properties[property].required*/, newPointer);
-				} else {
-					genericFieldDefs[newPointer] = this.extractGenericFieldInfo(fragment.properties);
-				}
-			}
-			else {
-				genericFieldDefs[newPointer] = this.extractGenericFieldInfo(properties[property]);
-			}
-			newPointer = pointer;
-		}
-	}
-
-	getTitle(pointer) {
-		return this._getSchemaFragment(pointer).title;
-	}
-
-	exists(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return !!fragment;
-	}
-
-	getDefault(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.default;
-	}
-
-	getEnum(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && (fragment.type === 'array' ? fragment.items.enum : fragment.enum);
-	}
-
-	isRequired(pointer) {
-		const parentPointer = JSONPointer.extractParentPointer(pointer);
-		const lastPart = JSONPointer.extractLastPart(pointer);
-		let parentFragment = this._getSchemaFragment(parentPointer);
-		return parentFragment && parentFragment.required && parentFragment.required.includes(lastPart);
-	}
-
-	isNumber(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.type === 'number';
-	}
-
-	getMaxValue(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.exclusiveMaximum ? fragment.maximum - 1 : fragment.maximum;
-	}
-
-	getMinValue(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.exclusiveMinimum ? fragment.minimum : fragment.minimum;
-	}
-
-	isString(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.type === 'string';
-	}
-
-	getPattern(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.pattern;
-	}
-
-	getMaxLength(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.maxLength;
-	}
-
-	getMinLength(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.minLength;
-	}
-
-	isArray(pointer) {
-		const fragment = this._getSchemaFragment(pointer);
-		return fragment && fragment.type === 'array';
-	}
-
-	_getSchemaFragment(pointer) {
-		if (this._fragmentsCache.has(pointer)) {
-			return this._fragmentsCache.get(pointer);
-		}
-
-		let parts = JSONPointer.extractParts(pointer);
-
-		let fragment = parts.reduce((fragment, part) => {
-			if (fragment === undefined) {
-				return undefined;
-			}
-
-			if (fragment.$ref) {
-				fragment = this._getSchemaFragmentByRef(fragment.$ref);
-			}
-
-			switch (fragment.type) {
-				case 'object':
-					return fragment.properties && fragment.properties[part];
-
-				case 'array':
-					return fragment.enum && fragment.enum[part];
-
-				default:
-					// throw new Error(`Incorrect/unsupported JSONPointer "${pointer}" from "${part}"`);
-					return undefined;
-			}
-		}, this._schema);
-
-		while(fragment && fragment.$ref) {
-			fragment = this._getSchemaFragmentByRef(fragment.$ref);
-		}
-
-		this._fragmentsCache.set(pointer, fragment);
-		return fragment;
-	}
-
-	_getSchemaFragmentByRef($ref) {
-		let pointer = $ref.substr(1);
-		return JSONPointer.getValue(this._schema, pointer);
-		// let fragmentAjv = new Ajv();
-		// fragmentAjv.addSchema(this._schema);
-		// let compiledFragment = fragmentAjv.compile({$ref});
-		// let fragment = compiledFragment.refVal[compiledFragment.refs[$ref]];
-		// return fragment;
-	}
-};
+            }
+        }
+
+        additionalInfo.validations = validationsArr;
+        return additionalInfo;
+    }
+
+    extractValidations(item, value) {
+        let validationItem;
+        let data = item[value];
+        if (value === 'maximum') {
+            if (item.exclusiveMaximum) {
+                value = 'maximumExclusive';
+            }
+        }
+        if (value === 'minimum') {
+            if (item.exclusiveMinimum) {
+                value = 'minimumExclusive';
+            }
+        }
+        validationItem = { type: value, data: data };
+        return validationItem;
+    }
+
+    extractEnum(item, value) {
+        let enumResult = null;
+        if (value === 'type' && item[value] === 'array') {
+            let items = item.items;
+            if (items && items.enum && items.enum.length > 0) {
+                let values = items.enum
+                    .filter(value => value)
+                    .map(value => ({ enum: value, title: value }));
+                enumResult = values;
+            }
+        } else if (value === 'enum') {
+            let items = item[value];
+            if (items && items.length > 0) {
+                let values = items
+                    .filter(value => value)
+                    .map(value => ({ enum: value, title: value }));
+                enumResult = values;
+            }
+        }
+        return enumResult;
+    }
+
+    travelProperties(
+        properties,
+        genericFieldDefs,
+        /*required = [],*/ pointer = ''
+    ) {
+        let newPointer = pointer;
+        for (let property in properties) {
+            newPointer = newPointer ? newPointer + '/' + property : property;
+            if (properties[property].properties) {
+                this.travelProperties(
+                    properties[property].properties,
+                    genericFieldDefs /*, properties[property].required*/,
+                    newPointer
+                );
+            } else if (properties[property].$ref) {
+                let fragment = this._getSchemaFragmentByRef(
+                    properties[property].$ref
+                );
+                if (fragment.properties) {
+                    this.travelProperties(
+                        fragment.properties,
+                        genericFieldDefs /*, properties[property].required*/,
+                        newPointer
+                    );
+                } else {
+                    genericFieldDefs[newPointer] = this.extractGenericFieldInfo(
+                        fragment.properties
+                    );
+                }
+            } else {
+                genericFieldDefs[newPointer] = this.extractGenericFieldInfo(
+                    properties[property]
+                );
+            }
+            newPointer = pointer;
+        }
+    }
+
+    getTitle(pointer) {
+        return this._getSchemaFragment(pointer).title;
+    }
+
+    exists(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return !!fragment;
+    }
+
+    getDefault(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.default;
+    }
+
+    getEnum(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return (
+            fragment &&
+            (fragment.type === 'array' ? fragment.items.enum : fragment.enum)
+        );
+    }
+
+    isRequired(pointer) {
+        const parentPointer = JSONPointer.extractParentPointer(pointer);
+        const lastPart = JSONPointer.extractLastPart(pointer);
+        let parentFragment = this._getSchemaFragment(parentPointer);
+        return (
+            parentFragment &&
+            parentFragment.required &&
+            parentFragment.required.includes(lastPart)
+        );
+    }
+
+    isNumber(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.type === 'number';
+    }
+
+    getMaxValue(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.exclusiveMaximum
+            ? fragment.maximum - 1
+            : fragment.maximum;
+    }
+
+    getMinValue(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.exclusiveMinimum
+            ? fragment.minimum
+            : fragment.minimum;
+    }
+
+    isString(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.type === 'string';
+    }
+
+    getPattern(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.pattern;
+    }
+
+    getMaxLength(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.maxLength;
+    }
+
+    getMinLength(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.minLength;
+    }
+
+    isArray(pointer) {
+        const fragment = this._getSchemaFragment(pointer);
+        return fragment && fragment.type === 'array';
+    }
+
+    _getSchemaFragment(pointer) {
+        if (this._fragmentsCache.has(pointer)) {
+            return this._fragmentsCache.get(pointer);
+        }
+
+        let parts = JSONPointer.extractParts(pointer);
+
+        let fragment = parts.reduce((fragment, part) => {
+            if (fragment === undefined) {
+                return undefined;
+            }
+
+            if (fragment.$ref) {
+                fragment = this._getSchemaFragmentByRef(fragment.$ref);
+            }
+
+            switch (fragment.type) {
+                case 'object':
+                    return fragment.properties && fragment.properties[part];
+
+                case 'array':
+                    return fragment.enum && fragment.enum[part];
+
+                default:
+                    // throw new Error(`Incorrect/unsupported JSONPointer "${pointer}" from "${part}"`);
+                    return undefined;
+            }
+        }, this._schema);
+
+        while (fragment && fragment.$ref) {
+            fragment = this._getSchemaFragmentByRef(fragment.$ref);
+        }
+
+        this._fragmentsCache.set(pointer, fragment);
+        return fragment;
+    }
+
+    _getSchemaFragmentByRef($ref) {
+        let pointer = $ref.substr(1);
+        return JSONPointer.getValue(this._schema, pointer);
+        // let fragmentAjv = new Ajv();
+        // fragmentAjv.addSchema(this._schema);
+        // let compiledFragment = fragmentAjv.compile({$ref});
+        // let fragment = compiledFragment.refVal[compiledFragment.refs[$ref]];
+        // return fragment;
+    }
+}
diff --git a/openecomp-ui/src/nfvo-utils/sortByStringProperty.js b/openecomp-ui/src/nfvo-utils/sortByStringProperty.js
index b415dd7e07..89e9f4034c 100644
--- a/openecomp-ui/src/nfvo-utils/sortByStringProperty.js
+++ b/openecomp-ui/src/nfvo-utils/sortByStringProperty.js
@@ -14,5 +14,7 @@
  * permissions and limitations under the License.
  */
 export default function sortByStringProperty(array, property) {
-	return [...array].sort((a, b) => a[property].toLowerCase().localeCompare(b[property].toLowerCase()));
+    return [...array].sort((a, b) =>
+        a[property].toLowerCase().localeCompare(b[property].toLowerCase())
+    );
 }
diff --git a/openecomp-ui/src/sdc-app/AppStore.js b/openecomp-ui/src/sdc-app/AppStore.js
index bafef7dcd6..bca750a930 100644
--- a/openecomp-ui/src/sdc-app/AppStore.js
+++ b/openecomp-ui/src/sdc-app/AppStore.js
@@ -14,24 +14,27 @@
  * limitations under the License.
  */
 
-import {createStore, applyMiddleware, compose} from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import Reducers from './Reducers.js';
 const thunk = store => next => action =>
-	typeof action === 'function' ?
-		action(store.dispatch, store.getState) :
-		next(action);
-
+    typeof action === 'function'
+        ? action(store.dispatch, store.getState)
+        : next(action);
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-export const storeCreator = (initialState) => createStore(Reducers, initialState, composeEnhancers(applyMiddleware(thunk)));
-
+export const storeCreator = initialState =>
+    createStore(
+        Reducers,
+        initialState,
+        composeEnhancers(applyMiddleware(thunk))
+    );
 
 const store = storeCreator();
 
 if (module.hot) {
-	module.hot.accept('./Reducers.js', () =>
-		store.replaceReducer(require('./Reducers.js').default)
-	);
+    module.hot.accept('./Reducers.js', () =>
+        store.replaceReducer(require('./Reducers.js').default)
+    );
 }
 
 export default store;
diff --git a/openecomp-ui/src/sdc-app/Application.jsx b/openecomp-ui/src/sdc-app/Application.jsx
index aa81eb384c..abebb6d89a 100644
--- a/openecomp-ui/src/sdc-app/Application.jsx
+++ b/openecomp-ui/src/sdc-app/Application.jsx
@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Provider} from 'react-redux';
+import { Provider } from 'react-redux';
 import GlobalModal from 'nfvo-components/modal/GlobalModal.js';
 import Loader from 'nfvo-components/loader/Loader.jsx';
 import WebSocketUtil from 'nfvo-utils/WebSocketUtil.js';
@@ -24,31 +24,32 @@ import store from './AppStore.js';
 import FeaturesActionHelper from 'sdc-app/features/FeaturesActionHelper.js';
 
 class Application extends React.Component {
-	static propTypes = {
-		openSocket: PropTypes.bool
-	};
-	componentDidMount() {
-		const {openSocket = true} = this.props;
-		if(openSocket) {
-			UserNotificationsActionHelper.notificationsFirstHandling(store.dispatch);
-		}
-		FeaturesActionHelper.getFeaturesList(store.dispatch);
-	}
-	componentWillUnmount() {
-		WebSocketUtil.close();
-	}
-	render() {
-		return (
-			<Provider store={store}>
-				<div>
-					<GlobalModal/>
-					{this.props.children}
-					<Loader />
-				</div>
-			</Provider>
-		);
-	}
+    static propTypes = {
+        openSocket: PropTypes.bool
+    };
+    componentDidMount() {
+        const { openSocket = true } = this.props;
+        if (openSocket) {
+            UserNotificationsActionHelper.notificationsFirstHandling(
+                store.dispatch
+            );
+        }
+        FeaturesActionHelper.getFeaturesList(store.dispatch);
+    }
+    componentWillUnmount() {
+        WebSocketUtil.close();
+    }
+    render() {
+        return (
+            <Provider store={store}>
+                <div>
+                    <GlobalModal />
+                    {this.props.children}
+                    <Loader />
+                </div>
+            </Provider>
+        );
+    }
 }
 
 export default Application;
-
diff --git a/openecomp-ui/src/sdc-app/ModulesOptions.jsx b/openecomp-ui/src/sdc-app/ModulesOptions.jsx
index 28fab80da9..63296b57c9 100644
--- a/openecomp-ui/src/sdc-app/ModulesOptions.jsx
+++ b/openecomp-ui/src/sdc-app/ModulesOptions.jsx
@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
 import LicenseModelActionHelper from './onboarding/licenseModel/LicenseModelActionHelper.js';
@@ -27,140 +27,198 @@ import LicenseKeyGroupsListEditor from './onboarding/licenseModel/licenseKeyGrou
 import LicenseKeyGroupsActionHelper from './onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
 import EntitlementPoolsListEditor from './onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
 import EntitlementPoolsActionHelper from './onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js';
-import SoftwareProductLandingPage  from './onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js';
-import SoftwareProductDetails  from './onboarding/softwareProduct/details/SoftwareProductDetails.js';
+import SoftwareProductLandingPage from './onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js';
+import SoftwareProductDetails from './onboarding/softwareProduct/details/SoftwareProductDetails.js';
 import Onboard from './onboarding/onboard/Onboard.js';
 import SoftwareProductActionHelper from './onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import FlowsListEditor from './flows/FlowsListEditor.js';
 import FlowsActions from './flows/FlowsActions.js';
 
-
-const mapStateToProps = ({licenseModelList}) => {
-	return {licenseModelList};
+const mapStateToProps = ({ licenseModelList }) => {
+    return { licenseModelList };
 };
 
-
 const mapActionsToProps = dispatch => {
-	return {
-		onBootstrapped: () => LicenseModelActionHelper.fetchLicenseModels(dispatch),
-		onLicenseAgreementListEditor: licenseModelId => LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId}),
-		onFeatureGroupsListEditor: licenseModelId => FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId}),
-		onLicenseKeyGroupsListEditor: licenseModelId =>LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId}),
-		onEntitlementPoolsListEditor: licenseModelId => EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId}),
-		onOnboardingCatalog: () => SoftwareProductActionHelper.fetchSoftwareProductList(dispatch),
-		onSoftwareProductDetails: () => SoftwareProductActionHelper.fetchSoftwareProductCategories(dispatch),
-		onFlowsListEditor: () => FlowsActions.fetchFlows(dispatch)
-	};
+    return {
+        onBootstrapped: () =>
+            LicenseModelActionHelper.fetchLicenseModels(dispatch),
+        onLicenseAgreementListEditor: licenseModelId =>
+            LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+                licenseModelId
+            }),
+        onFeatureGroupsListEditor: licenseModelId =>
+            FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+                licenseModelId
+            }),
+        onLicenseKeyGroupsListEditor: licenseModelId =>
+            LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+                licenseModelId
+            }),
+        onEntitlementPoolsListEditor: licenseModelId =>
+            EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+                licenseModelId
+            }),
+        onOnboardingCatalog: () =>
+            SoftwareProductActionHelper.fetchSoftwareProductList(dispatch),
+        onSoftwareProductDetails: () =>
+            SoftwareProductActionHelper.fetchSoftwareProductCategories(
+                dispatch
+            ),
+        onFlowsListEditor: () => FlowsActions.fetchFlows(dispatch)
+    };
 };
 
 class ModuleOptions extends React.Component {
+    static propTypes = {
+        onBootstrapped: PropTypes.func.isRequired,
+        onLicenseAgreementListEditor: PropTypes.func.isRequired,
+        onFeatureGroupsListEditor: PropTypes.func.isRequired,
+        onLicenseKeyGroupsListEditor: PropTypes.func.isRequired,
+        onEntitlementPoolsListEditor: PropTypes.func.isRequired,
+        onOnboardingCatalog: PropTypes.func.isRequired,
+        onSoftwareProductDetails: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		onBootstrapped: PropTypes.func.isRequired,
-		onLicenseAgreementListEditor: PropTypes.func.isRequired,
-		onFeatureGroupsListEditor: PropTypes.func.isRequired,
-		onLicenseKeyGroupsListEditor: PropTypes.func.isRequired,
-		onEntitlementPoolsListEditor: PropTypes.func.isRequired,
-		onOnboardingCatalog: PropTypes.func.isRequired,
-		onSoftwareProductDetails: PropTypes.func.isRequired,
-	};
-
-	state = {
-		currentModule: localStorage.getItem('default-module'),
-		licenseModelId: localStorage.getItem('default-license-model-id')
-	};
+    state = {
+        currentModule: localStorage.getItem('default-module'),
+        licenseModelId: localStorage.getItem('default-license-model-id')
+    };
 
-	componentDidMount() {
-		this.props.onBootstrapped();
-	}
+    componentDidMount() {
+        this.props.onBootstrapped();
+    }
 
-	render() {
-		let {currentModule, licenseModelId} = this.state;
-		let {licenseModelList} = this.props;
-		return (
-			<div style={{marginTop:20}}>
-				<Input
-					name='licenseModel'
-					value={licenseModelId}
-					ref='licenseModelId'
-					type='select'
-					onChange={this.handleLicenseModelIdChange}
-					className='inner-pagination select-input'>
-					<option value='' key={null}>Select License Model</option>
-					{
-						licenseModelList.map(({id, vendorName}) => <option value={id} key={id}>{`${vendorName} License Model`}</option>)
-					}
-				</Input>
-				<Input
-					name='currentView'
-					value={currentModule}
-					ref='selectedModule'
-					type='select'
-					onChange={this.handleModuleSelection}
-					className='inner-pagination select-input'>
-					<option value=''>Select Module</option>
-					<option value='EntitlementPoolsListEditor'>Entitlement Pools</option>
-					<option value='LicenseAgreementListEditor'>License Agreements</option>
-					<option value='FutureGroupListEditor'>Feature Groups</option>
-					<option value='LicenseKeyGroupsListEditor'>License Key Groups</option>
-					<option value='SoftwareProductLanding'>Software Product Landing</option>
-					<option value='SoftwareProductDetails'>Software Product Details</option>
-					<option value='OnboardingCatalog'>Onboarding Catalog</option>
-					<option value='Flows'>Flows</option>
-				</Input>
-				<div className='sub-module-view' style={{paddingTop: 10, margin: 4, borderTop: '1px solid silver'}}>
-					{this.renderModule(currentModule)}
-				</div>
-			</div>
-		);
-	}
+    render() {
+        let { currentModule, licenseModelId } = this.state;
+        let { licenseModelList } = this.props;
+        return (
+            <div style={{ marginTop: 20 }}>
+                <Input
+                    name="licenseModel"
+                    value={licenseModelId}
+                    ref="licenseModelId"
+                    type="select"
+                    onChange={this.handleLicenseModelIdChange}
+                    className="inner-pagination select-input">
+                    <option value="" key={null}>
+                        Select License Model
+                    </option>
+                    {licenseModelList.map(({ id, vendorName }) => (
+                        <option
+                            value={id}
+                            key={id}>{`${vendorName} License Model`}</option>
+                    ))}
+                </Input>
+                <Input
+                    name="currentView"
+                    value={currentModule}
+                    ref="selectedModule"
+                    type="select"
+                    onChange={this.handleModuleSelection}
+                    className="inner-pagination select-input">
+                    <option value="">Select Module</option>
+                    <option value="EntitlementPoolsListEditor">
+                        Entitlement Pools
+                    </option>
+                    <option value="LicenseAgreementListEditor">
+                        License Agreements
+                    </option>
+                    <option value="FutureGroupListEditor">
+                        Feature Groups
+                    </option>
+                    <option value="LicenseKeyGroupsListEditor">
+                        License Key Groups
+                    </option>
+                    <option value="SoftwareProductLanding">
+                        Software Product Landing
+                    </option>
+                    <option value="SoftwareProductDetails">
+                        Software Product Details
+                    </option>
+                    <option value="OnboardingCatalog">
+                        Onboarding Catalog
+                    </option>
+                    <option value="Flows">Flows</option>
+                </Input>
+                <div
+                    className="sub-module-view"
+                    style={{
+                        paddingTop: 10,
+                        margin: 4,
+                        borderTop: '1px solid silver'
+                    }}>
+                    {this.renderModule(currentModule)}
+                </div>
+            </div>
+        );
+    }
 
-	renderModule(currentModule) {
-		const {licenseModelId} = this.state;
-		if (!licenseModelId) {
-			return;
-		}
+    renderModule(currentModule) {
+        const { licenseModelId } = this.state;
+        if (!licenseModelId) {
+            return;
+        }
 
-		switch (currentModule) {
-			case 'LicenseAgreementListEditor':
-				this.props.onLicenseAgreementListEditor(licenseModelId);
-				return <LicenseAgreementListEditor licenseModelId={licenseModelId}/>;
-			case 'FutureGroupListEditor':
-				this.props.onFeatureGroupsListEditor(licenseModelId);
-				return <FeatureGroupListEditor licenseModelId={licenseModelId}/>;
-			case 'EntitlementPoolsListEditor':
-				this.props.onEntitlementPoolsListEditor(licenseModelId);
-				return <EntitlementPoolsListEditor licenseModelId={licenseModelId}/>;
-			case 'LicenseKeyGroupsListEditor':
-				this.props.onLicenseKeyGroupsListEditor(licenseModelId);
-				return <LicenseKeyGroupsListEditor licenseModelId={licenseModelId}/>;
-			case 'SoftwareProductLanding':
-				return <SoftwareProductLandingPage licenseModelId={licenseModelId}/>;
-			case 'SoftwareProductDetails':
-				this.props.onSoftwareProductDetails(licenseModelId);
-				return <SoftwareProductDetails licenseModelId={licenseModelId}/>;
-			case 'OnboardingCatalog':
-				this.props.onOnboardingCatalog();
-				return <Onboard/>;
-			case 'Flows':
-				this.props.onFlowsListEditor();
-				return <FlowsListEditor/>;
-			default:
-				return;
-		}
-	}
+        switch (currentModule) {
+            case 'LicenseAgreementListEditor':
+                this.props.onLicenseAgreementListEditor(licenseModelId);
+                return (
+                    <LicenseAgreementListEditor
+                        licenseModelId={licenseModelId}
+                    />
+                );
+            case 'FutureGroupListEditor':
+                this.props.onFeatureGroupsListEditor(licenseModelId);
+                return (
+                    <FeatureGroupListEditor licenseModelId={licenseModelId} />
+                );
+            case 'EntitlementPoolsListEditor':
+                this.props.onEntitlementPoolsListEditor(licenseModelId);
+                return (
+                    <EntitlementPoolsListEditor
+                        licenseModelId={licenseModelId}
+                    />
+                );
+            case 'LicenseKeyGroupsListEditor':
+                this.props.onLicenseKeyGroupsListEditor(licenseModelId);
+                return (
+                    <LicenseKeyGroupsListEditor
+                        licenseModelId={licenseModelId}
+                    />
+                );
+            case 'SoftwareProductLanding':
+                return (
+                    <SoftwareProductLandingPage
+                        licenseModelId={licenseModelId}
+                    />
+                );
+            case 'SoftwareProductDetails':
+                this.props.onSoftwareProductDetails(licenseModelId);
+                return (
+                    <SoftwareProductDetails licenseModelId={licenseModelId} />
+                );
+            case 'OnboardingCatalog':
+                this.props.onOnboardingCatalog();
+                return <Onboard />;
+            case 'Flows':
+                this.props.onFlowsListEditor();
+                return <FlowsListEditor />;
+            default:
+                return;
+        }
+    }
 
-	handleModuleSelection = () => {
-		let selectedModule = this.refs.selectedModule.getValue();
-		localStorage.setItem('default-module', selectedModule);
-		this.setState({currentModule: selectedModule});
-	}
+    handleModuleSelection = () => {
+        let selectedModule = this.refs.selectedModule.getValue();
+        localStorage.setItem('default-module', selectedModule);
+        this.setState({ currentModule: selectedModule });
+    };
 
-	handleLicenseModelIdChange = () => {
-		let licenseModelId = this.refs.licenseModelId.getValue();
-		localStorage.setItem('default-license-model-id', licenseModelId);
-		this.setState({licenseModelId});
-	}
+    handleLicenseModelIdChange = () => {
+        let licenseModelId = this.refs.licenseModelId.getValue();
+        localStorage.setItem('default-license-model-id', licenseModelId);
+        this.setState({ licenseModelId });
+    };
 }
 
 export default connect(mapStateToProps, mapActionsToProps)(ModuleOptions);
diff --git a/openecomp-ui/src/sdc-app/Reducers.js b/openecomp-ui/src/sdc-app/Reducers.js
index a0a8ebafa1..9f424235cb 100644
--- a/openecomp-ui/src/sdc-app/Reducers.js
+++ b/openecomp-ui/src/sdc-app/Reducers.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {combineReducers} from 'redux';
+import { combineReducers } from 'redux';
 import onBoardingReducersMap from './onboarding/OnboardingReducersMap.js';
 import flowsReducersMap from './flows/FlowsReducersMap.js';
 import loaderReducer from 'nfvo-components/loader/LoaderReducer.js';
@@ -22,12 +22,12 @@ import globalModalReducer from 'nfvo-components/modal/GlobalModalReducer.js';
 import notificationsReducer from 'sdc-app/onboarding/userNotifications/NotificationsReducer.js';
 
 export default combineReducers({
-	// on-boarding reducers
-	...onBoardingReducersMap,
+    // on-boarding reducers
+    ...onBoardingReducersMap,
 
-	// flows reducers
-	...flowsReducersMap,
-	modal: globalModalReducer,
-	loader: loaderReducer,
-	notifications: notificationsReducer
+    // flows reducers
+    ...flowsReducersMap,
+    modal: globalModalReducer,
+    loader: loaderReducer,
+    notifications: notificationsReducer
 });
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js
index a1ad437f5b..2978cacda4 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js
@@ -13,16 +13,28 @@
  * 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 ActivityLogView from './ActivityLogView.jsx';
 
-export const mapStateToProps = ({users: {usersList}, licenseModel: {activityLog}}) => {
-
-	let activities = activityLog;
-	return {
-		activities: activities.map(activity => ({...activity, user: {id: activity.user, name: usersList.find(userObject => userObject.userId === activity.user).fullName}})),
-		usersList
-	};
+export const mapStateToProps = ({
+    users: { usersList },
+    licenseModel: { activityLog }
+}) => {
+    let activities = activityLog;
+    return {
+        activities: activities.map(activity => ({
+            ...activity,
+            user: {
+                id: activity.user,
+                name: usersList.find(
+                    userObject => userObject.userId === activity.user
+                ).fullName
+            }
+        })),
+        usersList
+    };
 };
 
-export default connect(mapStateToProps, undefined, null, {withRef: true})(ActivityLogView);
+export default connect(mapStateToProps, undefined, null, { withRef: true })(
+    ActivityLogView
+);
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js
index 729d8fb5f3..6856b08c8b 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js
@@ -17,8 +17,13 @@ import ActivityLogConstants from './ActivityLogConstants.js';
 import ItemHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 
 export default {
-
-	fetchActivityLog(dispatch, {itemId, versionId}){
-		return ItemHelper.fetchActivityLog({itemId, versionId}).then(response => dispatch({type: ActivityLogConstants.ACTIVITY_LOG_UPDATED, response}));
-	}
+    fetchActivityLog(dispatch, { itemId, versionId }) {
+        return ItemHelper.fetchActivityLog({ itemId, versionId }).then(
+            response =>
+                dispatch({
+                    type: ActivityLogConstants.ACTIVITY_LOG_UPDATED,
+                    response
+                })
+        );
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js
index 69faf7cbb6..2da3c7799e 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js
@@ -16,8 +16,5 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export default keyMirror({
-
-	ACTIVITY_LOG_UPDATED: null
-
+    ACTIVITY_LOG_UPDATED: null
 });
-
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js
index fc3dfa1515..418a9b9e3d 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js
@@ -16,10 +16,10 @@
 import ActivityLogConstants from './ActivityLogConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case ActivityLogConstants.ACTIVITY_LOG_UPDATED:
-			return [...action.response.results];
-	}
+    switch (action.type) {
+        case ActivityLogConstants.ACTIVITY_LOG_UPDATED:
+            return [...action.response.results];
+    }
 
-	return state;
+    return state;
 };
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx
index 5b8c29b719..d65e667163 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.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 OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
@@ -21,108 +21,177 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import LogDetails from './LogixUtil.jsx';
 
-function ActivityLogSortableCellHeader({isHeader, data, isDes, onSort}) {
-	//TODO check icon sdc-ui
-	if (isHeader) {
-		return (
-			<span className='date-header' onClick={onSort}>
-				<span>{data}</span>
-				<span className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}></span>
-			</span>
-		);
-	}
-	return (
-		<span className='date-cell'>
-			<span>{i18n.dateNormal(data, {
-				year: 'numeric', month: 'numeric', day: 'numeric'
-			})}</span>
-			<span>{i18n.dateNormal(data, {
-				hour: 'numeric', minute: 'numeric',
-				hour12: true
-			})}</span>
-		</span>
-	);
+function ActivityLogSortableCellHeader({ isHeader, data, isDes, onSort }) {
+    //TODO check icon sdc-ui
+    if (isHeader) {
+        return (
+            <span className="date-header" onClick={onSort}>
+                <span>{data}</span>
+                <span
+                    className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}
+                />
+            </span>
+        );
+    }
+    return (
+        <span className="date-cell">
+            <span>
+                {i18n.dateNormal(data, {
+                    year: 'numeric',
+                    month: 'numeric',
+                    day: 'numeric'
+                })}
+            </span>
+            <span>
+                {i18n.dateNormal(data, {
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    hour12: true
+                })}
+            </span>
+        </span>
+    );
 }
 
-function ActivityLogStatus({status, isHeader}) {
-	if (isHeader) {
-		return <span>{status}</span>;
-	}
-	let {message, success} = status;
-	return (
-		<span>
-			<span className={`status-icon ${success}`}>{`${success ? i18n('Success') : i18n('Failure')}`}</span>
-			{success && <SVGIcon name='checkCircle' color='positive'/>}
-			{!success && <OverlayTrigger placement='bottom' overlay={<Tooltip className='activity-log-message-tooltip' id={'activity-log-message-tooltip'}>
-				<div className='message-block'>{message}</div>
-			</Tooltip>}>
-				<span className='message-further-info-icon'>{'?'}</span>
-			</OverlayTrigger>}
-		</span>
-	);
+function ActivityLogStatus({ status, isHeader }) {
+    if (isHeader) {
+        return <span>{status}</span>;
+    }
+    let { message, success } = status;
+    return (
+        <span>
+            <span className={`status-icon ${success}`}>{`${
+                success ? i18n('Success') : i18n('Failure')
+            }`}</span>
+            {success && <SVGIcon name="checkCircle" color="positive" />}
+            {!success && (
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={
+                        <Tooltip
+                            className="activity-log-message-tooltip"
+                            id={'activity-log-message-tooltip'}>
+                            <div className="message-block">{message}</div>
+                        </Tooltip>
+                    }>
+                    <span className="message-further-info-icon">{'?'}</span>
+                </OverlayTrigger>
+            )}
+        </span>
+    );
 }
 
-export function ActivityListItem({activity, isHeader, isDes, onSort}) {
-	let {type, timestamp, comment, user, status} = activity;
-	return (
-		<li className={`activity-list-item ${isHeader ? 'header' : ''}`} data-test-id='activity-list-item'>
-			<div className='table-cell activity-date' data-test-id='activity-date'><ActivityLogSortableCellHeader isHeader={isHeader} data={timestamp} isDes={isDes} onSort={onSort}/></div>
-			<div className='table-cell activity-action' data-test-id='activity-action'>{i18n(type)}</div>
-			<div className='table-cell activity-comment' title={isHeader ? '' : comment} data-test-id='activity-comment'><span>{i18n(comment)}</span></div>
-			<div className='table-cell activity-username' data-test-id='activity-username'>{isHeader ? i18n(activity.user) : `${i18n(user.name)} (${user.id})`}</div>
-			<div className='table-cell activity-status' data-test-id='activity-status'><ActivityLogStatus isHeader={isHeader} status={status}/></div>
-		</li>
-	);
+export function ActivityListItem({ activity, isHeader, isDes, onSort }) {
+    let { type, timestamp, comment, user, status } = activity;
+    return (
+        <li
+            className={`activity-list-item ${isHeader ? 'header' : ''}`}
+            data-test-id="activity-list-item">
+            <div
+                className="table-cell activity-date"
+                data-test-id="activity-date">
+                <ActivityLogSortableCellHeader
+                    isHeader={isHeader}
+                    data={timestamp}
+                    isDes={isDes}
+                    onSort={onSort}
+                />
+            </div>
+            <div
+                className="table-cell activity-action"
+                data-test-id="activity-action">
+                {i18n(type)}
+            </div>
+            <div
+                className="table-cell activity-comment"
+                title={isHeader ? '' : comment}
+                data-test-id="activity-comment">
+                <span>{i18n(comment)}</span>
+            </div>
+            <div
+                className="table-cell activity-username"
+                data-test-id="activity-username">
+                {isHeader
+                    ? i18n(activity.user)
+                    : `${i18n(user.name)} (${user.id})`}
+            </div>
+            <div
+                className="table-cell activity-status"
+                data-test-id="activity-status">
+                <ActivityLogStatus isHeader={isHeader} status={status} />
+            </div>
+        </li>
+    );
 }
 
 class ActivityLogView extends Component {
+    state = {
+        localFilter: '',
+        sortDescending: true
+    };
 
-	state = {
-		localFilter: '',
-		sortDescending: true
-	};
+    render() {
+        return (
+            <div className="activity-log-view">
+                <LogDetails display={this.state.localFilter} />
+                <ListEditorView
+                    title={i18n('Activity Log')}
+                    filterValue={this.state.localFilter}
+                    onFilter={filter => this.setState({ localFilter: filter })}>
+                    <ActivityListItem
+                        activity={{
+                            timestamp: 'Date',
+                            type: 'Action',
+                            comment: 'Comment',
+                            user: 'Username',
+                            status: 'Status'
+                        }}
+                        isDes={this.state.sortDescending}
+                        onSort={() =>
+                            this.setState({
+                                sortDescending: !this.state.sortDescending
+                            })
+                        }
+                        isHeader
+                    />
+                    {this.sortActivities(
+                        this.filterActivities(),
+                        this.state.sortDescending
+                    ).map(activity => (
+                        <ActivityListItem
+                            key={activity.id}
+                            activity={activity}
+                        />
+                    ))}
+                </ListEditorView>
+            </div>
+        );
+    }
 
-	render() {
-		return (
-			<div className='activity-log-view'>
-				<LogDetails display={this.state.localFilter}/>
-				<ListEditorView
-					title={i18n('Activity Log')}
-					filterValue={this.state.localFilter}
-					onFilter={filter => this.setState({localFilter: filter})}>
-					<ActivityListItem
-						activity={{timestamp: 'Date', type: 'Action', comment: 'Comment', user: 'Username', status: 'Status'}}
-						isDes={this.state.sortDescending}
-						onSort={() => this.setState({sortDescending: !this.state.sortDescending})}
-						isHeader/>
-					{this.sortActivities(this.filterActivities(), this.state.sortDescending).map(activity => <ActivityListItem key={activity.id} activity={activity}/>)}
-				</ListEditorView>
-			</div>
-		);
-	}
-
-	filterActivities() {
-		let {activities} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return activities.filter(({user = {id: '', name: ''}, comment = '', type = ''}) =>
-			escape(user.id).match(filter) || escape(user.name).match(filter) || escape(comment).match(filter) || escape(type).match(filter));
-		}
-		else {
-			return activities;
-		}
-	}
-
-	sortActivities(activities) {
-		if (this.state.sortDescending) {
-			return activities.sort((a, b) => a.timestamp - b.timestamp);
-		}
-		else {
-			return activities.reverse();
-		}
-	}
+    filterActivities() {
+        let { activities } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return activities.filter(
+                ({ user = { id: '', name: '' }, comment = '', type = '' }) =>
+                    escape(user.id).match(filter) ||
+                    escape(user.name).match(filter) ||
+                    escape(comment).match(filter) ||
+                    escape(type).match(filter)
+            );
+        } else {
+            return activities;
+        }
+    }
 
+    sortActivities(activities) {
+        if (this.state.sortDescending) {
+            return activities.sort((a, b) => a.timestamp - b.timestamp);
+        } else {
+            return activities.reverse();
+        }
+    }
 }
 
 export default ActivityLogView;
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx b/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx
index bd40e113e9..0dbf518768 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx
+++ b/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx
@@ -1,28 +1,36 @@
-import React, {Component} from 'react';
-// eslint-disable-next-line max-len
-const style = 'LnJhYmJpdHt3aWR0aDo1ZW07aGVpZ2h0OjNlbTtiYWNrZ3JvdW5kOiM5OTk7Ym9yZGVyLXJhZGl1czo3MCUgOTAlIDYwJSA1MCU7cG9zaXRpb246cmVsYXRpdmU7LW1vei10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy1tcy10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoLTJlbSwwKTt0cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApO2FuaW1hdGlvbjpob3AgMXMgaW5maW5pdGUgbGluZWFyO3otaW5kZXg6MX0ucmFiYml0OmFmdGVyLC5yYWJiaXQ6YmVmb3Jle2NvbnRlbnQ6IiI7cG9zaXRpb246YWJzb2x1dGU7YmFja2dyb3VuZDojZjFmMWYxfS5uby1mbGV4Ym94IC5yYWJiaXR7bWFyZ2luOjEwZW0gYXV0byAwfS5yYWJiaXQ6YmVmb3Jle3dpZHRoOjFlbTtoZWlnaHQ6MWVtO2JvcmRlci1yYWRpdXM6MTAwJTt0b3A6LjVlbTtsZWZ0Oi0uM2VtO2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDFlbSAwICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uNGVtICNmMWYxZjE7YW5pbWF0aW9uOmtpY2sgMXMgaW5maW5pdGUgbGluZWFyfS5yYWJiaXQ6YWZ0ZXJ7d2lkdGg6Ljc1ZW07aGVpZ2h0OjJlbTtib3JkZXItcmFkaXVzOjUwJSAxMDAlIDAgMDstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpO3RyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTtyaWdodDoxZW07dG9wOi0xZW07Ym9yZGVyLXRvcDoxcHggc29saWQgI2Y3ZjVmNDtib3JkZXItbGVmdDoxcHggc29saWQgI2Y3ZjVmNDtib3gtc2hhZG93Oi0uNWVtIDAgMCAtLjFlbSAjZjFmMWYxfUBrZXlmcmFtZXMgaG9wezIwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pOy1tcy10cmFuc2Zvcm06cm90YXRlKC0xMGRlZykgdHJhbnNsYXRlKDFlbSwtMmVtKTstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pO3RyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pfTQwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LW1zLXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKDEwZGVnKSB0cmFuc2xhdGUoM2VtLC00ZW0pO3RyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSl9NjAlLDc1JXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApO3RyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKX19QGtleWZyYW1lcyBraWNrezIwJSw1MCV7Ym94LXNoYWRvdzo0ZW0gLjRlbSAwIC0uMzVlbSAjM2YzMzM0LC41ZW0gMS41ZW0gMCAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjllbSAwIC0uNGVtICNmMWYxZjF9NDAle2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDJlbSAwICNmMWYxZjEsNGVtIDEuNzVlbSAwIC0uM2VtICNmMWYxZjEsNC4yZW0gMS43NWVtIDAgLS4yZW0gI2YxZjFmMSw0LjRlbSAxLjllbSAwIC0uMmVtICNmMWYxZjF9fQ==';
+import React, { Component } from 'react'; /* eslint-disable max-len */
+const style =
+    'LnJhYmJpdHt3aWR0aDo1ZW07aGVpZ2h0OjNlbTtiYWNrZ3JvdW5kOiM5OTk7Ym9yZGVyLXJhZGl1czo3MCUgOTAlIDYwJSA1MCU7cG9zaXRpb246cmVsYXRpdmU7LW1vei10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy1tcy10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoLTJlbSwwKTt0cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApO2FuaW1hdGlvbjpob3AgMXMgaW5maW5pdGUgbGluZWFyO3otaW5kZXg6MX0ucmFiYml0OmFmdGVyLC5yYWJiaXQ6YmVmb3Jle2NvbnRlbnQ6IiI7cG9zaXRpb246YWJzb2x1dGU7YmFja2dyb3VuZDojZjFmMWYxfS5uby1mbGV4Ym94IC5yYWJiaXR7bWFyZ2luOjEwZW0gYXV0byAwfS5yYWJiaXQ6YmVmb3Jle3dpZHRoOjFlbTtoZWlnaHQ6MWVtO2JvcmRlci1yYWRpdXM6MTAwJTt0b3A6LjVlbTtsZWZ0Oi0uM2VtO2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDFlbSAwICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uNGVtICNmMWYxZjE7YW5pbWF0aW9uOmtpY2sgMXMgaW5maW5pdGUgbGluZWFyfS5yYWJiaXQ6YWZ0ZXJ7d2lkdGg6Ljc1ZW07aGVpZ2h0OjJlbTtib3JkZXItcmFkaXVzOjUwJSAxMDAlIDAgMDstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpO3RyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTtyaWdodDoxZW07dG9wOi0xZW07Ym9yZGVyLXRvcDoxcHggc29saWQgI2Y3ZjVmNDtib3JkZXItbGVmdDoxcHggc29saWQgI2Y3ZjVmNDtib3gtc2hhZG93Oi0uNWVtIDAgMCAtLjFlbSAjZjFmMWYxfUBrZXlmcmFtZXMgaG9wezIwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pOy1tcy10cmFuc2Zvcm06cm90YXRlKC0xMGRlZykgdHJhbnNsYXRlKDFlbSwtMmVtKTstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pO3RyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pfTQwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LW1zLXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKDEwZGVnKSB0cmFuc2xhdGUoM2VtLC00ZW0pO3RyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSl9NjAlLDc1JXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApO3RyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKX19QGtleWZyYW1lcyBraWNrezIwJSw1MCV7Ym94LXNoYWRvdzo0ZW0gLjRlbSAwIC0uMzVlbSAjM2YzMzM0LC41ZW0gMS41ZW0gMCAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjllbSAwIC0uNGVtICNmMWYxZjF9NDAle2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDJlbSAwICNmMWYxZjEsNGVtIDEuNzVlbSAwIC0uM2VtICNmMWYxZjEsNC4yZW0gMS43NWVtIDAgLS4yZW0gI2YxZjFmMSw0LjRlbSAxLjllbSAwIC0uMmVtICNmMWYxZjF9fQ==';
+/* eslint-enable max-len */
 class LogixUtil extends Component {
+    state = {
+        whatToDisplay: false
+    };
 
-	state = {
-		whatToDisplay: false
-	};
-
-	componentWillReceiveProps(nextProps) {
-		this.setState({whatToDisplay: window.btoa(nextProps.display) === 'YnJpdG5leSBiaXRjaCE='});
-	}
-
-	render() {
-		if (this.state.whatToDisplay) {
-			setTimeout(() => this.setState({whatToDisplay: false}), 5000);
-		}
-		return (
-			<div style={{display: this.state.whatToDisplay ? 'block' : 'none', position: 'fixed',top: '50%', left: '45%'}}>
-				<style>{window.atob(style)}</style>
-				<div className='rabbit'></div>
-			</div>
-		);
-	}
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            whatToDisplay:
+                window.btoa(nextProps.display) === 'YnJpdG5leSBiaXRjaCE='
+        });
+    }
 
+    render() {
+        if (this.state.whatToDisplay) {
+            setTimeout(() => this.setState({ whatToDisplay: false }), 5000);
+        }
+        return (
+            <div
+                style={{
+                    display: this.state.whatToDisplay ? 'block' : 'none',
+                    position: 'fixed',
+                    top: '50%',
+                    left: '45%'
+                }}>
+                <style>{window.atob(style)}</style>
+                <div className="rabbit" />
+            </div>
+        );
+    }
 }
 
 export default LogixUtil;
diff --git a/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js b/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js
index 05affe981f..99ecae9887 100644
--- a/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js
+++ b/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js
@@ -15,92 +15,110 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {permissionTypes} from 'sdc-app/onboarding/permissions/PermissionsConstants.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import {actionTypes as onboardingActionTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { permissionTypes } from 'sdc-app/onboarding/permissions/PermissionsConstants.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes as onboardingActionTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import restToggle from 'sdc-app/features/restToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
 export const archiveActions = {
-	ARCHIVE: 'ARCHIVE',
-	RESTORE: 'RESTORE'
+    ARCHIVE: 'ARCHIVE',
+    RESTORE: 'RESTORE'
 };
 
 export const itemStatus = {
-	ARCHIVED: 'ARCHIVED',
-	DRAFT: 'Draft',
-	CERTIFIED: 'Certified'
+    ARCHIVED: 'ARCHIVED',
+    DRAFT: 'Draft',
+    CERTIFIED: 'Certified'
 };
 
-
 function baseUrl() {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/items`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/items`;
 }
 
 const ItemsHelper = {
-	performVCAction({itemId, version, action, comment}) {
-		const {id: versionId} = version;
-		const data = {
-			action,
-			...action === VersionControllerActionsEnum.COMMIT && {commitRequest: {message: comment}}
-		};
-		return RestAPIUtil.put(`${baseUrl()}/${itemId}/versions/${versionId}/actions`, data);
-	},
+    performVCAction({ itemId, version, action, comment }) {
+        const { id: versionId } = version;
+        const data = {
+            action,
+            ...(action === VersionControllerActionsEnum.COMMIT && {
+                commitRequest: { message: comment }
+            })
+        };
+        return RestAPIUtil.put(
+            `${baseUrl()}/${itemId}/versions/${versionId}/actions`,
+            data
+        );
+    },
 
-	fetchVersions({itemId}) {
-		return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions`);
-	},
+    fetchVersions({ itemId }) {
+        return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions`);
+    },
 
-	fetchVersion({itemId, versionId}) {
-		return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions/${versionId}`);
-	},
+    fetchVersion({ itemId, versionId }) {
+        return RestAPIUtil.fetch(
+            `${baseUrl()}/${itemId}/versions/${versionId}`
+        );
+    },
 
-	fetchActivityLog({itemId, versionId}) {
-		return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions/${versionId}/activity-logs`);
-	},
+    fetchActivityLog({ itemId, versionId }) {
+        return RestAPIUtil.fetch(
+            `${baseUrl()}/${itemId}/versions/${versionId}/activity-logs`
+        );
+    },
 
-	fetchUsers({itemId}) {
-		return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/permissions`);
-	},
+    fetchUsers({ itemId }) {
+        return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/permissions`);
+    },
 
-	updateContributors({itemId, removedUsersIds, addedUsersIds}) {
-		return RestAPIUtil.put(`${baseUrl()}/${itemId}/permissions/${permissionTypes.CONTRIBUTOR}`, {removedUsersIds, addedUsersIds});
-	},
+    updateContributors({ itemId, removedUsersIds, addedUsersIds }) {
+        return RestAPIUtil.put(
+            `${baseUrl()}/${itemId}/permissions/${permissionTypes.CONTRIBUTOR}`,
+            { removedUsersIds, addedUsersIds }
+        );
+    },
 
-	changeOwner({itemId, ownerId}) {
-		return RestAPIUtil.put(`${baseUrl()}/${itemId}/permissions/${permissionTypes.OWNER}`, {removedUsersIds: [], addedUsersIds: [ownerId]});
-	},
+    changeOwner({ itemId, ownerId }) {
+        return RestAPIUtil.put(
+            `${baseUrl()}/${itemId}/permissions/${permissionTypes.OWNER}`,
+            { removedUsersIds: [], addedUsersIds: [ownerId] }
+        );
+    },
 
-	async checkItemStatus(dispatch, {itemId, versionId}) {
-		const response = await ItemsHelper.fetchVersion({itemId, versionId});
-		let state = response && response.state || {};
-		const {baseId, description, id, name, status} = response;
-		const item = await ItemsHelper.fetchItem(itemId);
-		dispatch({
-			type: onboardingActionTypes.UPDATE_ITEM_STATUS,
-			itemState: state,
-			itemStatus: response.status,
-			archivedStatus: item.status,
-			updatedVersion: {baseId, description, id, name, status}
-		});
+    async checkItemStatus(dispatch, { itemId, versionId }) {
+        const response = await ItemsHelper.fetchVersion({ itemId, versionId });
+        let state = (response && response.state) || {};
+        const { baseId, description, id, name, status } = response;
+        const item = await ItemsHelper.fetchItem(itemId);
+        dispatch({
+            type: onboardingActionTypes.UPDATE_ITEM_STATUS,
+            itemState: state,
+            itemStatus: response.status,
+            archivedStatus: item.status,
+            updatedVersion: { baseId, description, id, name, status }
+        });
 
-		return Promise.resolve({...response, archivedStatus: item.status});
-	},
+        return Promise.resolve({ ...response, archivedStatus: item.status });
+    },
 
-	fetchItem(itemId) {
-		return restToggle({restFunction: () => RestAPIUtil.fetch(`${baseUrl()}/${itemId}`), featureName: featureToggleNames.ARCHIVE_ITEM, mockResult: {}});
-	},
+    fetchItem(itemId) {
+        return restToggle({
+            restFunction: () => RestAPIUtil.fetch(`${baseUrl()}/${itemId}`),
+            featureName: featureToggleNames.ARCHIVE_ITEM,
+            mockResult: {}
+        });
+    },
 
-	archiveItem(itemId) {
-		return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
-			action: archiveActions.ARCHIVE
-		});
-	},
-	restoreItem(itemId) {
-		return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
-			action: archiveActions.RESTORE
-		});
-	}
+    archiveItem(itemId) {
+        return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
+            action: archiveActions.ARCHIVE
+        });
+    },
+    restoreItem(itemId) {
+        return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
+            action: archiveActions.RESTORE
+        });
+    }
 };
 
 export default ItemsHelper;
diff --git a/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js b/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js
index 7c05f8456b..6f69cd0e51 100644
--- a/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js
+++ b/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js
@@ -1,225 +1,356 @@
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
-import {actionTypes as SoftwareProductActionTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes as SoftwareProductActionTypes } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 const ScreensHelper = {
-	async loadScreen(dispatch, {screen, screenType, props}) {
-		if(screen === enums.SCREEN.ONBOARDING_CATALOG) {
-			OnboardingActionHelper.navigateToOnboardingCatalog(dispatch);
-			return;
-		}
-		
-		screenType = !screenType ? this.getScreenType(screen) : screenType;
+    async loadScreen(dispatch, { screen, screenType, props }) {
+        if (screen === enums.SCREEN.ONBOARDING_CATALOG) {
+            OnboardingActionHelper.navigateToOnboardingCatalog(dispatch);
+            return;
+        }
 
-		if(screenType === screenTypes.LICENSE_MODEL) {
-			const {licenseModelId, version, licenseModel, usersList} = props;
-			const item = await ItemsHelper.fetchItem(licenseModelId);
-			let itemStatusPromise = version && screen ?
-				ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}) :
-				Promise.resolve();
-			itemStatusPromise.then((updatedVersion) => {
-				if (updatedVersion && updatedVersion.status !== version.status) {
-					dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_WARNING,
-						data: {
-							title: i18n('Commit error'),
-							msg: i18n('Item version was certified by Owner'),
-							cancelButtonText: i18n('Cancel')
-						}
-					});
-					versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
-				}
-				let newVersion = updatedVersion ? updatedVersion : version;
-				const screenProps = {licenseModelId, version: newVersion, status: item.status};
-				switch (screen) {
-					case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
-						OnboardingActionHelper.navigateToLicenseModelOverview(dispatch, screenProps);
-						break;
-					case enums.SCREEN.LICENSE_AGREEMENTS:
-						OnboardingActionHelper.navigateToLicenseAgreements(dispatch, screenProps);
-						break;
-					case enums.SCREEN.FEATURE_GROUPS:
-						OnboardingActionHelper.navigateToFeatureGroups(dispatch, screenProps);
-						break;
-					case enums.SCREEN.ENTITLEMENT_POOLS:
-						OnboardingActionHelper.navigateToEntitlementPools(dispatch, screenProps);
-						break;
-					case enums.SCREEN.LICENSE_KEY_GROUPS:
-						OnboardingActionHelper.navigateToLicenseKeyGroups(dispatch, screenProps);
-						break;
-					case enums.SCREEN.ACTIVITY_LOG:
-						OnboardingActionHelper.navigateToLicenseModelActivityLog(dispatch, screenProps);
-						break;
-					case enums.SCREEN.VERSIONS_PAGE:
-					default:
-						OnboardingActionHelper.navigateToVersionsPage(dispatch, {
-							itemId: licenseModelId,
-							itemType: itemTypes.LICENSE_MODEL,
-							itemName: licenseModel.name,
-							users: usersList
-						});
-						break;
-				}
-			});
-		}
+        screenType = !screenType ? this.getScreenType(screen) : screenType;
 
-		else if(screenType === screenTypes.SOFTWARE_PRODUCT) {
-			const {softwareProductId, componentId, version, softwareProduct, usersList} = props;
-			const item = await ItemsHelper.fetchItem(softwareProductId);
-			let itemStatusPromise = version && screen ?
-				ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id}) :
-				Promise.resolve();
-			itemStatusPromise.then((updatedVersion) => {
-				if (updatedVersion && updatedVersion.status !== version.status) {
-					dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_WARNING,
-						data: {
-							title: i18n('Commit error'),
-							msg: i18n('Item version already Certified'),
-							cancelButtonText: i18n('Cancel')
-						}
-					});
-					versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
-				}
+        if (screenType === screenTypes.LICENSE_MODEL) {
+            const { licenseModelId, version, licenseModel, usersList } = props;
+            const item = await ItemsHelper.fetchItem(licenseModelId);
+            let itemStatusPromise =
+                version && screen
+                    ? ItemsHelper.checkItemStatus(dispatch, {
+                          itemId: licenseModelId,
+                          versionId: version.id
+                      })
+                    : Promise.resolve();
+            itemStatusPromise.then(updatedVersion => {
+                if (
+                    updatedVersion &&
+                    updatedVersion.status !== version.status
+                ) {
+                    dispatch({
+                        type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                        data: {
+                            title: i18n('Commit error'),
+                            msg: i18n('Item version was certified by Owner'),
+                            cancelButtonText: i18n('Cancel')
+                        }
+                    });
+                    versionPageActionHelper.fetchVersions(dispatch, {
+                        itemType: itemTypes.LICENSE_MODEL,
+                        itemId: licenseModelId
+                    });
+                }
+                let newVersion = updatedVersion ? updatedVersion : version;
+                const screenProps = {
+                    licenseModelId,
+                    version: newVersion,
+                    status: item.status
+                };
+                switch (screen) {
+                    case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+                        OnboardingActionHelper.navigateToLicenseModelOverview(
+                            dispatch,
+                            screenProps
+                        );
+                        break;
+                    case enums.SCREEN.LICENSE_AGREEMENTS:
+                        OnboardingActionHelper.navigateToLicenseAgreements(
+                            dispatch,
+                            screenProps
+                        );
+                        break;
+                    case enums.SCREEN.FEATURE_GROUPS:
+                        OnboardingActionHelper.navigateToFeatureGroups(
+                            dispatch,
+                            screenProps
+                        );
+                        break;
+                    case enums.SCREEN.ENTITLEMENT_POOLS:
+                        OnboardingActionHelper.navigateToEntitlementPools(
+                            dispatch,
+                            screenProps
+                        );
+                        break;
+                    case enums.SCREEN.LICENSE_KEY_GROUPS:
+                        OnboardingActionHelper.navigateToLicenseKeyGroups(
+                            dispatch,
+                            screenProps
+                        );
+                        break;
+                    case enums.SCREEN.ACTIVITY_LOG:
+                        OnboardingActionHelper.navigateToLicenseModelActivityLog(
+                            dispatch,
+                            screenProps
+                        );
+                        break;
+                    case enums.SCREEN.VERSIONS_PAGE:
+                    default:
+                        OnboardingActionHelper.navigateToVersionsPage(
+                            dispatch,
+                            {
+                                itemId: licenseModelId,
+                                itemType: itemTypes.LICENSE_MODEL,
+                                itemName: licenseModel.name,
+                                users: usersList
+                            }
+                        );
+                        break;
+                }
+            });
+        } else if (screenType === screenTypes.SOFTWARE_PRODUCT) {
+            const {
+                softwareProductId,
+                componentId,
+                version,
+                softwareProduct,
+                usersList
+            } = props;
+            const item = await ItemsHelper.fetchItem(softwareProductId);
+            let itemStatusPromise =
+                version && screen
+                    ? ItemsHelper.checkItemStatus(dispatch, {
+                          itemId: softwareProductId,
+                          versionId: version.id
+                      })
+                    : Promise.resolve();
+            itemStatusPromise.then(updatedVersion => {
+                if (
+                    updatedVersion &&
+                    updatedVersion.status !== version.status
+                ) {
+                    dispatch({
+                        type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                        data: {
+                            title: i18n('Commit error'),
+                            msg: i18n('Item version already Certified'),
+                            cancelButtonText: i18n('Cancel')
+                        }
+                    });
+                    versionPageActionHelper.fetchVersions(dispatch, {
+                        itemType: itemTypes.SOFTWARE_PRODUCT,
+                        itemId: softwareProductId
+                    });
+                }
 
-				let newVersion = updatedVersion ? updatedVersion : version;
-				
-				const props = {
-					softwareProductId,
-					componentId,
-					version: newVersion,
-					status: item.status
-				};
-				if (screen === screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL) {
-					OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, props);
-				}
-				
-				switch (screen) {
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-						OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-						OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-						OnboardingActionHelper.navigateToComponentCompute(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-						OnboardingActionHelper.navigateToComponentLoadBalancing(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-						OnboardingActionHelper.navigateToComponentNetwork(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-						OnboardingActionHelper.navigateToComponentStorage(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-						OnboardingActionHelper.navigateToSoftwareProductComponentProcesses(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-						OnboardingActionHelper.navigateToSoftwareProductComponentMonitoring(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-						OnboardingActionHelper.navigateToComponentImages(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-						OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-						OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP:
-						OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION:
-						OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-						OnboardingActionHelper.navigateToSoftwareProductProcesses(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-						OnboardingActionHelper.navigateToSoftwareProductDeployment(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-						OnboardingActionHelper.navigateToSoftwareProductNetworks(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-						OnboardingActionHelper.navigateToSoftwareProductDependencies(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-						OnboardingActionHelper.navigateToSoftwareProductActivityLog(dispatch, props);
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-						OnboardingActionHelper.navigateToSoftwareProductComponents(dispatch, props);
-						dispatch({
-							type: SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
-							mapOfExpandedIds: {
-								[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true
-							}
-						});
-						break;
-					case enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE:
-					default:
-						OnboardingActionHelper.navigateToVersionsPage(dispatch, {
-							itemId: softwareProductId,
-							itemType: itemTypes.SOFTWARE_PRODUCT,
-							itemName: softwareProduct.name,
-							users: usersList,
-							additionalProps: {
-								licenseModelId: softwareProduct.vendorId,
-								licensingVersion: softwareProduct.licensingVersion
-							}
-						});
-						break;	
-				}
-			});
-		}
-	},
+                let newVersion = updatedVersion ? updatedVersion : version;
 
-	getScreenType(screen) {
-		switch (screen) {
-			case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
-			case enums.SCREEN.LICENSE_AGREEMENTS:
-			case enums.SCREEN.FEATURE_GROUPS:
-			case enums.SCREEN.ENTITLEMENT_POOLS:
-			case enums.SCREEN.LICENSE_KEY_GROUPS:
-			case enums.SCREEN.ACTIVITY_LOG:
-				return screenTypes.LICENSE_MODEL;
-			case screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-			case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
-			case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-			case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-			case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-				return screenTypes.SOFTWARE_PRODUCT;
-		}
-	},
+                const props = {
+                    softwareProductId,
+                    componentId,
+                    version: newVersion,
+                    status: item.status
+                };
+                if (
+                    screen ===
+                    screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL
+                ) {
+                    OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(
+                        dispatch,
+                        props
+                    );
+                }
 
-	loadLandingScreen(dispatch, {previousScreenName, screenType, props: {licenseModelId, softwareProductId, version}}) {
-		let selectedScreenType = screenType ? screenType : this.getScreenType(previousScreenName);
-		let screen = selectedScreenType === screenTypes.SOFTWARE_PRODUCT ?
-			enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE :
-			enums.SCREEN.LICENSE_MODEL_OVERVIEW;
-		let props = {licenseModelId, softwareProductId, version};
-		return this.loadScreen(dispatch, {screen, screenType: selectedScreenType, props});
-	}
+                switch (screen) {
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+                        OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+                        OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+                        OnboardingActionHelper.navigateToComponentCompute(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+                        OnboardingActionHelper.navigateToComponentLoadBalancing(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+                        OnboardingActionHelper.navigateToComponentNetwork(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+                        OnboardingActionHelper.navigateToComponentStorage(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+                        OnboardingActionHelper.navigateToSoftwareProductComponentProcesses(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+                        OnboardingActionHelper.navigateToSoftwareProductComponentMonitoring(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+                        OnboardingActionHelper.navigateToComponentImages(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+                        OnboardingActionHelper.navigateToSoftwareProductLandingPage(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+                        OnboardingActionHelper.navigateToSoftwareProductDetails(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP:
+                        OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION:
+                        OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+                        OnboardingActionHelper.navigateToSoftwareProductProcesses(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+                        OnboardingActionHelper.navigateToSoftwareProductDeployment(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+                        OnboardingActionHelper.navigateToSoftwareProductNetworks(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+                        OnboardingActionHelper.navigateToSoftwareProductDependencies(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+                        OnboardingActionHelper.navigateToSoftwareProductActivityLog(
+                            dispatch,
+                            props
+                        );
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+                        OnboardingActionHelper.navigateToSoftwareProductComponents(
+                            dispatch,
+                            props
+                        );
+                        dispatch({
+                            type:
+                                SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
+                            mapOfExpandedIds: {
+                                [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true
+                            }
+                        });
+                        break;
+                    case enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE:
+                    default:
+                        OnboardingActionHelper.navigateToVersionsPage(
+                            dispatch,
+                            {
+                                itemId: softwareProductId,
+                                itemType: itemTypes.SOFTWARE_PRODUCT,
+                                itemName: softwareProduct.name,
+                                users: usersList,
+                                additionalProps: {
+                                    licenseModelId: softwareProduct.vendorId,
+                                    licensingVersion:
+                                        softwareProduct.licensingVersion
+                                }
+                            }
+                        );
+                        break;
+                }
+            });
+        }
+    },
+
+    getScreenType(screen) {
+        switch (screen) {
+            case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+            case enums.SCREEN.LICENSE_AGREEMENTS:
+            case enums.SCREEN.FEATURE_GROUPS:
+            case enums.SCREEN.ENTITLEMENT_POOLS:
+            case enums.SCREEN.LICENSE_KEY_GROUPS:
+            case enums.SCREEN.ACTIVITY_LOG:
+                return screenTypes.LICENSE_MODEL;
+            case screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+            case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+            case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+            case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+            case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+                return screenTypes.SOFTWARE_PRODUCT;
+        }
+    },
+
+    loadLandingScreen(
+        dispatch,
+        {
+            previousScreenName,
+            screenType,
+            props: { licenseModelId, softwareProductId, version }
+        }
+    ) {
+        let selectedScreenType = screenType
+            ? screenType
+            : this.getScreenType(previousScreenName);
+        let screen =
+            selectedScreenType === screenTypes.SOFTWARE_PRODUCT
+                ? enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE
+                : enums.SCREEN.LICENSE_MODEL_OVERVIEW;
+        let props = { licenseModelId, softwareProductId, version };
+        return this.loadScreen(dispatch, {
+            screen,
+            screenType: selectedScreenType,
+            props
+        });
+    }
 };
 
 export default ScreensHelper;
diff --git a/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js b/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js
index cfa675278f..aa578c6692 100644
--- a/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js
+++ b/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js
@@ -13,80 +13,85 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes as commonActionTypes} from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
-import {actionTypes as qcommonActionTypes} from 'sdc-app/common/reducers/JSONSchemaReducerConstants.js';
+import { actionTypes as commonActionTypes } from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
+import { actionTypes as qcommonActionTypes } from 'sdc-app/common/reducers/JSONSchemaReducerConstants.js';
 
 class ValidationHelper {
+    static dataChanged(
+        dispatch,
+        { deltaData, formName, customValidations = {} }
+    ) {
+        dispatch({
+            type: commonActionTypes.DATA_CHANGED,
+            deltaData,
+            formName,
+            customValidations
+        });
+    }
 
-	static dataChanged(dispatch, {deltaData, formName, customValidations = {}}){
-		dispatch({
-			type: commonActionTypes.DATA_CHANGED,
-			deltaData,
-			formName,
-			customValidations
-		});
-	}
+    static validateForm(dispatch, formName) {
+        dispatch({
+            type: commonActionTypes.VALIDATE_FORM,
+            formName
+        });
+    }
 
-	static validateForm(dispatch, formName){
-		dispatch({
-			type: commonActionTypes.VALIDATE_FORM,
-			formName
-		});
-	}
+    static validateData(dispatch, { formName, data }) {
+        dispatch({
+            type: commonActionTypes.VALIDATE_DATA,
+            formName,
+            data
+        });
+    }
 
-	static validateData(dispatch, {formName, data}) {
-		dispatch({
-			type: commonActionTypes.VALIDATE_DATA,
-			formName,
-			data
-		});
-	}
+    static qValidateData(dispatch, { data, qName, customValidations = {} }) {
+        dispatch({
+            type: qcommonActionTypes.VALIDATE_DATA,
+            data,
+            qName,
+            customValidations
+        });
+    }
 
-	static qValidateData(dispatch, {data, qName, customValidations = {}}) {
-		dispatch({
-			type: qcommonActionTypes.VALIDATE_DATA,
-			data,
-			qName,
-			customValidations
-		});
-	}
+    static qValidateForm(dispatch, qName, customValidations) {
+        dispatch({
+            type: qcommonActionTypes.VALIDATE_FORM,
+            qName,
+            customValidations
+        });
+    }
 
-	static qValidateForm(dispatch, qName, customValidations){
-		dispatch({
-			type: qcommonActionTypes.VALIDATE_FORM,
-			qName,
-			customValidations
-		});
-	}
+    static qDataChanged(
+        dispatch,
+        { deltaData, qName, customValidations = {} }
+    ) {
+        dispatch({
+            type: qcommonActionTypes.DATA_CHANGED,
+            deltaData,
+            qName,
+            customValidations
+        });
+    }
 
-	static qDataChanged(dispatch, {deltaData, qName, customValidations = {}}){
-		dispatch({
-			type: qcommonActionTypes.DATA_CHANGED,
-			deltaData,
-			qName,
-			customValidations
-		});
-	}
+    static qDataLoaded(dispatch, { qName, response: { qdata, qschema } }) {
+        dispatch({
+            type: qcommonActionTypes.DATA_LOADED,
+            payload: {
+                qdata,
+                qschema
+            },
+            qName
+        });
+    }
 
-	static qDataLoaded(dispatch, {qName, response: {qdata, qschema}}) {
-		dispatch({
-			type: qcommonActionTypes.DATA_LOADED,
-			payload: {
-				qdata,
-				qschema
-			},
-			qName
-		});
-	}
-
-	static checkFormValid(genericFieldInfo) {
-		for (let field in genericFieldInfo) {
-			if (!genericFieldInfo[field].isValid) {
-				return false;
-			}
-		}
-		return true;
-	}
+    static checkFormValid(genericFieldInfo) {
+        for (let field in genericFieldInfo) {
+            if (!genericFieldInfo[field].isValid) {
+                return false;
+            }
+        }
+        return true;
+    }
 }
 
 export default ValidationHelper;
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js
index baf00cf0cf..81f7174623 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js
@@ -13,25 +13,42 @@
  * 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 MergeEditorView from './MergeEditorView.jsx';
 import MergeEditorActionHelper from './MergeEditorActionHelper.js';
 
-export const mapStateToProps = ({mergeEditor, currentScreen}) => {
-	let {props} = currentScreen;
-	let item = {
-		id: props.softwareProductId || props.licenseModelId,
-		version: props.version
-	};
-	return {...mergeEditor, item, currentScreen};
+export const mapStateToProps = ({ mergeEditor, currentScreen }) => {
+    let { props } = currentScreen;
+    let item = {
+        id: props.softwareProductId || props.licenseModelId,
+        version: props.version
+    };
+    return { ...mergeEditor, item, currentScreen };
 };
 
-export const mapActionsToProps = (dispatch) => {
-	return {
-		fetchConflict: ({cid, itemId, version}) => MergeEditorActionHelper.fetchConflict(dispatch, {itemId, version, cid}),
-		onResolveConflict: ({conflictId, resolution, itemId, version, currentScreen}) =>
-			MergeEditorActionHelper.resolveConflict(dispatch, {itemId, version, conflictId, resolution, currentScreen})
-	};
+export const mapActionsToProps = dispatch => {
+    return {
+        fetchConflict: ({ cid, itemId, version }) =>
+            MergeEditorActionHelper.fetchConflict(dispatch, {
+                itemId,
+                version,
+                cid
+            }),
+        onResolveConflict: ({
+            conflictId,
+            resolution,
+            itemId,
+            version,
+            currentScreen
+        }) =>
+            MergeEditorActionHelper.resolveConflict(dispatch, {
+                itemId,
+                version,
+                conflictId,
+                resolution,
+                currentScreen
+            })
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(MergeEditorView);
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
index 92ec60b999..c54b9feb93 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
@@ -13,431 +13,532 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, rules, dataRules, SyncStates} from './MergeEditorConstants.js';
+import {
+    actionTypes,
+    rules,
+    dataRules,
+    SyncStates
+} from './MergeEditorConstants.js';
 import cloneDeep from 'lodash/cloneDeep.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import ItemsHelper from '../../common/helpers/ItemsHelper.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {optionsInputValues as epOptionsValues} from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js';
-import {optionsInputValues as laOptionsValues} from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
-import {optionsInputValues as processOptionValues} from 'sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js';
-import {selectValues as limitSelectValues} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
+import { optionsInputValues as epOptionsValues } from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js';
+import { optionsInputValues as laOptionsValues } from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
+import { optionsInputValues as processOptionValues } from 'sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js';
+import { selectValues as limitSelectValues } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
 import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
 import LicenseAgreementActionHelper from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js';
 import moment from 'moment';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
 
 function softwareProductCategoriesUrl() {
-	const restCatalogPrefix = Configuration.get('restCatalogPrefix');
-	return `${restCatalogPrefix}/v1/categories/resources/`;
+    const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+    return `${restCatalogPrefix}/v1/categories/resources/`;
 }
 
 function versionUrl(itemId, versionId) {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}`;
 }
 
 function baseUrl(itemId, version, conflictId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	let baseUrl = `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}/conflicts`;
-	return conflictId ? `${baseUrl}/${conflictId}` : baseUrl;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    let baseUrl = `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}/conflicts`;
+    return conflictId ? `${baseUrl}/${conflictId}` : baseUrl;
 }
 
-function fetchConflicts({itemId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(itemId, version)}`);
+function fetchConflicts({ itemId, version }) {
+    return RestAPIUtil.fetch(`${baseUrl(itemId, version)}`);
 }
 
-function fetchConflictById({itemId, version, cid}) {
-	return RestAPIUtil.fetch(`${baseUrl(itemId, version, cid)}`);
+function fetchConflictById({ itemId, version, cid }) {
+    return RestAPIUtil.fetch(`${baseUrl(itemId, version, cid)}`);
 }
 
-function resolveConflict({itemId, version, conflictId, resolution}) {
-	return RestAPIUtil.put(`${baseUrl(itemId, version, conflictId)}`, {resolution});
+function resolveConflict({ itemId, version, conflictId, resolution }) {
+    return RestAPIUtil.put(`${baseUrl(itemId, version, conflictId)}`, {
+        resolution
+    });
 }
 
 function fetchCategories() {
-	return RestAPIUtil.fetch(softwareProductCategoriesUrl());
+    return RestAPIUtil.fetch(softwareProductCategoriesUrl());
 }
 
-function fetchVersion({vendorId, licensingVersion}) {
-	return RestAPIUtil.fetch(versionUrl(vendorId, licensingVersion));
+function fetchVersion({ vendorId, licensingVersion }) {
+    return RestAPIUtil.fetch(versionUrl(vendorId, licensingVersion));
 }
 
-function createCategoryStr(data, {categories}) {
-
-	let {category, subCategory} = data;
-	let foundCat = categories.find(element => element.uniqueId === category);
-	if (!foundCat) { return ''; }
-
-	let catName = foundCat.name;
-	let foundSub =  foundCat.subcategories.find(element => element.uniqueId === subCategory);
-	if (!foundSub) { return `${catName}`; }
-
-	let subcatName = foundSub.name;
-	return `${catName} - ${subcatName}`;
-
+function createCategoryStr(data, { categories }) {
+    let { category, subCategory } = data;
+    let foundCat = categories.find(element => element.uniqueId === category);
+    if (!foundCat) {
+        return '';
+    }
+
+    let catName = foundCat.name;
+    let foundSub = foundCat.subcategories.find(
+        element => element.uniqueId === subCategory
+    );
+    if (!foundSub) {
+        return `${catName}`;
+    }
+
+    let subcatName = foundSub.name;
+    return `${catName} - ${subcatName}`;
 }
 
-function getEnumValues({enums, list}) {
-
-	if (!list) { return ''; }
-	return list.map(item => enums.find(el => el.enum === item).title);
-
+function getEnumValues({ enums, list }) {
+    if (!list) {
+        return '';
+    }
+    return list.map(item => enums.find(el => el.enum === item).title);
 }
 
 const MergeEditorActionHelper = {
-
-	analyzeSyncResult(dispatch, {itemId, version}) {
-		return ItemsHelper.checkItemStatus(dispatch, {itemId, versionId: version.id}).then((response) => {
-			let inMerge = response && response.state && response.state.synchronizationState === SyncStates.MERGE;
-			if (inMerge) {
-				MergeEditorActionHelper.fetchConflicts(dispatch, {itemId, version}).then(() =>
-					dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_SHOW,
-						data: {
-							modalComponentName: modalContentMapper.MERGE_EDITOR,
-							modalClassName: 'merge-editor-modal',
-							title: `${i18n('Merge Required')} - ${version.description}`,
-							onDeclined: () => {
-								dispatch({
-									type: modalActionTypes.GLOBAL_MODAL_CLOSE
-								});
-							},
-							modalComponentProps: {
-								size: 'lg',
-								type: 'default'
-							}
-						}
-					})
-				);
-			}
-			return Promise.resolve({updatedVersion: response, inMerge, isDirty: response.state.dirty});
-		});
-	},
-
-	fetchConflicts(dispatch, {itemId, version}) {
-		return fetchConflicts({itemId, version}).then(
-			(data) => {
-				dispatch({
-					type: actionTypes.LOAD_CONFLICTS,
-					data
-				});
-				return data;
-			}
-		);
-	},
-
-	fetchConflict(dispatch, {itemId, version, cid}) {
-		fetchConflictById({itemId, version, cid}).then(
-			(data) => {
-				let newData = {};
-				newData = MergeEditorActionHelper.processConflict(dispatch, {conflict: data, itemId, cid, version});
-				dispatch({
-					type: actionTypes.LOAD_CONFLICT,
-					data: newData
-				});
-			}
-		);
-	},
-
-	resolveConflict(dispatch, {itemId, version, conflictId, resolution, currentScreen}) {
-		resolveConflict({itemId, version, conflictId, resolution}).then(() => {
-			MergeEditorActionHelper.fetchConflicts(dispatch, {itemId, version}).then(conflicts => {
-				if(conflicts.conflictInfoList && conflicts.conflictInfoList.length === 0) {
-					dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_CLOSE
-					});
-					ScreensHelper.loadLandingScreen(dispatch, {previousScreenName: currentScreen.screen, props: currentScreen.props});
-					ItemsHelper.checkItemStatus(dispatch, {itemId, versionId: version.id});
-				}
-			});
-		});
-	},
-
-	createConflictObject(data, {cid, conflict, dispatch, itemId, version, isYours}) {
-
-		let newData = {};
-
-		for (let key in data) {
-
-			if (data.hasOwnProperty(key)) {
-				let value = data[key];
-				let fieldRule = dataRules[conflict.type] && dataRules[conflict.type][key] || dataRules.general[key];
-
-				if (fieldRule) {
-					switch (fieldRule.rule) {
-
-						case rules.SKIP:
-							break;
-
-						case rules.BOOLEAN:
-							let {trueValue, falseValue} = fieldRule;
-							newData[key] = value === trueValue ? true : value === falseValue ? false : undefined;
-							break;
-
-						case rules.PARSE:
-							let {moveFields, subFields} = fieldRule;
-							if (moveFields) {
-								let fields = subFields || Object.keys(value);
-								fields.forEach(field => {
-									newData[field] = MergeEditorActionHelper.createConflictObject(
-										value[field], {cid, conflict, dispatch, itemId, version, isYours}
-									);
-								});
-							} else {
-								newData[key] = MergeEditorActionHelper.createConflictObject(
-									value, {cid, conflict, dispatch, itemId, version, isYours}
-								);
-							}
-							break;
-
-						case rules.FUNCTION:
-							let {args, functionName} = fieldRule;
-							newData[key] = MergeEditorActionHelper[functionName](data, {
-								cid, conflict, dispatch, version, fieldName: key, isYours, itemId, args
-							});
-							break;
-
-						default:
-							newData[key] = value;
-							break;
-					}
-
-				} else {
-					newData[key] = value;
-
-				}
-			}
-		}
-
-		return newData;
-
-	},
-
-	getNamesFromIDs(data, {version, cid, dispatch, itemId, fieldName, isYours, args}) {
-
-		let idList = data[fieldName] || [];
-		let {fetchFunction, fetchField} = args;
-
-		let promises = idList.map(id =>
-			new Promise(resolve =>
-				MergeEditorActionHelper[fetchFunction](
-					dispatch, {licenseModelId: itemId, [fetchField]: id, version}
-				).then(item => resolve(item.name))
-			)
-		);
-
-		Promise.all(promises).then(fetchedItems => {
-			let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
-			dispatch({
-				type: actionTypes.DATA_PROCESSED,
-				data: {
-					cid,
-					[yoursOrTheirs]: { name: fieldName, value: fetchedItems }
-				}
-			});
-		});
-
-		return idList;
-
-	},
-
-	getFeatureGroups(data, {version, cid, dispatch, itemId, fieldName, isYours}) {
-
-		let featureGroups = data[fieldName] || [];
-		if (!(featureGroups instanceof Array)) {
-			featureGroups = [featureGroups];
-		}
-
-		let promises = featureGroups.map(featureGroupId =>
-			new Promise(resolve =>
-				FeatureGroupsActionHelper.fetchFeatureGroup(
-					dispatch, {licenseModelId: itemId, featureGroupId, version}
-				).then(featureGroup => resolve(featureGroup.name))
-				.catch(reason => console.log(`getFeatureGroups Promise rejected ('${reason}')`))
-			)
-		);
-
-		Promise.all(promises).then(fetchedGroups => {
-			let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
-			dispatch({
-				type: actionTypes.DATA_PROCESSED,
-				data: {
-					cid,
-					[yoursOrTheirs]: { name: fieldName, value: fetchedGroups }
-				}
-			});
-		});
-
-		return featureGroups;
-
-	},
-
-	getLicenseAgreements(data, {version, cid, dispatch, itemId, fieldName, isYours}) {
-
-		let licenseAgreements = data[fieldName] || [];
-		if (!(licenseAgreements instanceof Array)) {
-			licenseAgreements = [licenseAgreements];
-		}
-
-		let promises = licenseAgreements.map(licenseAgreementId =>
-			new Promise(resolve =>
-				LicenseAgreementActionHelper.fetchLicenseAgreement(
-					dispatch, {licenseModelId: itemId, licenseAgreementId, version}
-				).then(licenseAgreement => resolve(licenseAgreement.name))
-				.catch(reason => console.log(`getLicenseAgreements Promise rejected ('${reason}')`))
-			)
-		);
-
-		Promise.all(promises).then(fetchedAgreements => {
-			let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
-			dispatch({
-				type: actionTypes.DATA_PROCESSED,
-				data: {
-					cid,
-					[yoursOrTheirs]: { name: fieldName, value: fetchedAgreements }
-				}
-			});
-		});
-
-		return licenseAgreements;
-
-	},
-
-	processConflict(dispatch, {conflict, cid, version, itemId,}) {
-
-		let {id, type, yours, theirs} = conflict;
-
-		let newYours = MergeEditorActionHelper.createConflictObject(
-			cloneDeep(yours), {cid, conflict, dispatch, itemId, version, isYours: true}
-		);
-		let newTheirs = MergeEditorActionHelper.createConflictObject(
-			cloneDeep(theirs), {cid, conflict, dispatch, itemId, version, isYours: false}
-		);
-
-		return {
-			id,
-			type,
-			yours: newYours,
-			theirs: newTheirs
-		};
-
-	},
-
-	reduceList(data, {fieldName, args}) {
-
-		let {subField} = args;
-		return data[fieldName].map(el => el[subField]);
-
-	},
-
-	getEnumList({fieldName}) {
-
-		const enumLists = {
-			'licenseTerm': laOptionsValues.LICENSE_MODEL_TYPE,
-			'operationalScope': epOptionsValues.OPERATIONAL_SCOPE,
-			'processType': processOptionValues.PROCESS_TYPE,
-			'limitType': [
-				{title: 'Service Provider', enum: 'ServiceProvider'},
-				{title: 'Vendor', enum: 'Vendor'}
-			],
-			'limitUnit': limitSelectValues.UNIT
-		};
-
-		return enumLists[fieldName];
-
-	},
-
-	getEnumValue(data, {fieldName, args = {}}) {
-
-		let value = data[fieldName];
-		let enumValues = MergeEditorActionHelper.getEnumList({fieldName: args.listName || fieldName});
-		let enumValue = enumValues.find(el => el.enum === value);
-
-		return enumValue && enumValue.title || value;
-
-	},
-
-	processChoice(data, {fieldName, args = {}}) {
-
-		let value = data[fieldName];
-		let enumValues = MergeEditorActionHelper.getEnumList({fieldName: args.listName || fieldName});
-		let newValue = value.other || enumValues && enumValues.find(el => el.enum === value.choice).title || value.choice;
-
-		return newValue;
-
-	},
-
-	processChoices(data, {fieldName, args = {}}) {
-
-		let value = data[fieldName];
-		let enumValues = MergeEditorActionHelper.getEnumList({fieldName: args.listName || fieldName});
-		let newValue = value.other || getEnumValues({enums: enumValues, list: value.choices}) || value.choices;
-
-		return newValue;
-
-	},
-
-	convertArrayToObject(data, {fieldName}) {
-		let value = data[fieldName];
-		let newValue = {};
-		value.forEach((el, index) => {
-			newValue[index] = el;
-		});
-		return newValue;
-	},
-
-	fetchCategory(data, {cid, isYours, fieldName, dispatch}) {
-
-		fetchCategories().then((categories) => {
-			let value = createCategoryStr(data, {categories});
-			let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
-
-			dispatch({
-				type: actionTypes.DATA_PROCESSED,
-				data: {
-					cid,
-					[yoursOrTheirs]: { name: fieldName, value }
-				}
-			});
-
-		});
-	},
-
-	fetchLMVersion(data, {cid, dispatch, isYours}) {
-
-		let {licensingVersion, vendorId} = data;
-		let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
-
-		if (licensingVersion) {
-			fetchVersion({licensingVersion, vendorId}).then(response => {
-				dispatch({
-					type: actionTypes.DATA_PROCESSED,
-					data: {
-						cid,
-						[yoursOrTheirs]: {
-							name: 'licensingVersion',
-							value: response.name
-						}
-					}
-				});
-			});
-		}
-
-	},
-
-	parseDate(data, {fieldName}) {
-
-		let date = data[fieldName];
-		return date && moment(date, DATE_FORMAT).format(DATE_FORMAT);
-
-	}
-
+    analyzeSyncResult(dispatch, { itemId, version }) {
+        return ItemsHelper.checkItemStatus(dispatch, {
+            itemId,
+            versionId: version.id
+        }).then(response => {
+            let inMerge =
+                response &&
+                response.state &&
+                response.state.synchronizationState === SyncStates.MERGE;
+            if (inMerge) {
+                MergeEditorActionHelper.fetchConflicts(dispatch, {
+                    itemId,
+                    version
+                }).then(() =>
+                    dispatch({
+                        type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                        data: {
+                            modalComponentName: modalContentMapper.MERGE_EDITOR,
+                            modalClassName: 'merge-editor-modal',
+                            title: `${i18n('Merge Required')} - ${
+                                version.description
+                            }`,
+                            onDeclined: () => {
+                                dispatch({
+                                    type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                                });
+                            },
+                            modalComponentProps: {
+                                size: 'lg',
+                                type: 'default'
+                            }
+                        }
+                    })
+                );
+            }
+            return Promise.resolve({
+                updatedVersion: response,
+                inMerge,
+                isDirty: response.state.dirty
+            });
+        });
+    },
+
+    fetchConflicts(dispatch, { itemId, version }) {
+        return fetchConflicts({ itemId, version }).then(data => {
+            dispatch({
+                type: actionTypes.LOAD_CONFLICTS,
+                data
+            });
+            return data;
+        });
+    },
+
+    fetchConflict(dispatch, { itemId, version, cid }) {
+        fetchConflictById({ itemId, version, cid }).then(data => {
+            let newData = {};
+            newData = MergeEditorActionHelper.processConflict(dispatch, {
+                conflict: data,
+                itemId,
+                cid,
+                version
+            });
+            dispatch({
+                type: actionTypes.LOAD_CONFLICT,
+                data: newData
+            });
+        });
+    },
+
+    resolveConflict(
+        dispatch,
+        { itemId, version, conflictId, resolution, currentScreen }
+    ) {
+        resolveConflict({ itemId, version, conflictId, resolution }).then(
+            () => {
+                MergeEditorActionHelper.fetchConflicts(dispatch, {
+                    itemId,
+                    version
+                }).then(conflicts => {
+                    if (
+                        conflicts.conflictInfoList &&
+                        conflicts.conflictInfoList.length === 0
+                    ) {
+                        dispatch({
+                            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                        });
+                        ScreensHelper.loadLandingScreen(dispatch, {
+                            previousScreenName: currentScreen.screen,
+                            props: currentScreen.props
+                        });
+                        ItemsHelper.checkItemStatus(dispatch, {
+                            itemId,
+                            versionId: version.id
+                        });
+                    }
+                });
+            }
+        );
+    },
+
+    createConflictObject(
+        data,
+        { cid, conflict, dispatch, itemId, version, isYours }
+    ) {
+        let newData = {};
+
+        for (let key in data) {
+            if (data.hasOwnProperty(key)) {
+                let value = data[key];
+                let fieldRule =
+                    (dataRules[conflict.type] &&
+                        dataRules[conflict.type][key]) ||
+                    dataRules.general[key];
+
+                if (fieldRule) {
+                    switch (fieldRule.rule) {
+                        case rules.SKIP:
+                            break;
+
+                        case rules.BOOLEAN:
+                            let { trueValue, falseValue } = fieldRule;
+                            newData[key] =
+                                value === trueValue
+                                    ? true
+                                    : value === falseValue ? false : undefined;
+                            break;
+
+                        case rules.PARSE:
+                            let { moveFields, subFields } = fieldRule;
+                            if (moveFields) {
+                                let fields = subFields || Object.keys(value);
+                                fields.forEach(field => {
+                                    newData[
+                                        field
+                                    ] = MergeEditorActionHelper.createConflictObject(
+                                        value[field],
+                                        {
+                                            cid,
+                                            conflict,
+                                            dispatch,
+                                            itemId,
+                                            version,
+                                            isYours
+                                        }
+                                    );
+                                });
+                            } else {
+                                newData[
+                                    key
+                                ] = MergeEditorActionHelper.createConflictObject(
+                                    value,
+                                    {
+                                        cid,
+                                        conflict,
+                                        dispatch,
+                                        itemId,
+                                        version,
+                                        isYours
+                                    }
+                                );
+                            }
+                            break;
+
+                        case rules.FUNCTION:
+                            let { args, functionName } = fieldRule;
+                            newData[key] = MergeEditorActionHelper[
+                                functionName
+                            ](data, {
+                                cid,
+                                conflict,
+                                dispatch,
+                                version,
+                                fieldName: key,
+                                isYours,
+                                itemId,
+                                args
+                            });
+                            break;
+
+                        default:
+                            newData[key] = value;
+                            break;
+                    }
+                } else {
+                    newData[key] = value;
+                }
+            }
+        }
+
+        return newData;
+    },
+
+    getNamesFromIDs(
+        data,
+        { version, cid, dispatch, itemId, fieldName, isYours, args }
+    ) {
+        let idList = data[fieldName] || [];
+        let { fetchFunction, fetchField } = args;
+
+        let promises = idList.map(
+            id =>
+                new Promise(resolve =>
+                    MergeEditorActionHelper[fetchFunction](dispatch, {
+                        licenseModelId: itemId,
+                        [fetchField]: id,
+                        version
+                    }).then(item => resolve(item.name))
+                )
+        );
+
+        Promise.all(promises).then(fetchedItems => {
+            let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+            dispatch({
+                type: actionTypes.DATA_PROCESSED,
+                data: {
+                    cid,
+                    [yoursOrTheirs]: { name: fieldName, value: fetchedItems }
+                }
+            });
+        });
+
+        return idList;
+    },
+
+    getFeatureGroups(
+        data,
+        { version, cid, dispatch, itemId, fieldName, isYours }
+    ) {
+        let featureGroups = data[fieldName] || [];
+        if (!(featureGroups instanceof Array)) {
+            featureGroups = [featureGroups];
+        }
+
+        let promises = featureGroups.map(
+            featureGroupId =>
+                new Promise(resolve =>
+                    FeatureGroupsActionHelper.fetchFeatureGroup(dispatch, {
+                        licenseModelId: itemId,
+                        featureGroupId,
+                        version
+                    })
+                        .then(featureGroup => resolve(featureGroup.name))
+                        .catch(reason =>
+                            console.log(
+                                `getFeatureGroups Promise rejected ('${reason}')`
+                            )
+                        )
+                )
+        );
+
+        Promise.all(promises).then(fetchedGroups => {
+            let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+            dispatch({
+                type: actionTypes.DATA_PROCESSED,
+                data: {
+                    cid,
+                    [yoursOrTheirs]: { name: fieldName, value: fetchedGroups }
+                }
+            });
+        });
+
+        return featureGroups;
+    },
+
+    getLicenseAgreements(
+        data,
+        { version, cid, dispatch, itemId, fieldName, isYours }
+    ) {
+        let licenseAgreements = data[fieldName] || [];
+        if (!(licenseAgreements instanceof Array)) {
+            licenseAgreements = [licenseAgreements];
+        }
+
+        let promises = licenseAgreements.map(
+            licenseAgreementId =>
+                new Promise(resolve =>
+                    LicenseAgreementActionHelper.fetchLicenseAgreement(
+                        dispatch,
+                        {
+                            licenseModelId: itemId,
+                            licenseAgreementId,
+                            version
+                        }
+                    )
+                        .then(licenseAgreement =>
+                            resolve(licenseAgreement.name)
+                        )
+                        .catch(reason =>
+                            console.log(
+                                `getLicenseAgreements Promise rejected ('${reason}')`
+                            )
+                        )
+                )
+        );
+
+        Promise.all(promises).then(fetchedAgreements => {
+            let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+            dispatch({
+                type: actionTypes.DATA_PROCESSED,
+                data: {
+                    cid,
+                    [yoursOrTheirs]: {
+                        name: fieldName,
+                        value: fetchedAgreements
+                    }
+                }
+            });
+        });
+
+        return licenseAgreements;
+    },
+
+    processConflict(dispatch, { conflict, cid, version, itemId }) {
+        let { id, type, yours, theirs } = conflict;
+
+        let newYours = MergeEditorActionHelper.createConflictObject(
+            cloneDeep(yours),
+            { cid, conflict, dispatch, itemId, version, isYours: true }
+        );
+        let newTheirs = MergeEditorActionHelper.createConflictObject(
+            cloneDeep(theirs),
+            { cid, conflict, dispatch, itemId, version, isYours: false }
+        );
+
+        return {
+            id,
+            type,
+            yours: newYours,
+            theirs: newTheirs
+        };
+    },
+
+    reduceList(data, { fieldName, args }) {
+        let { subField } = args;
+        return data[fieldName].map(el => el[subField]);
+    },
+
+    getEnumList({ fieldName }) {
+        const enumLists = {
+            licenseTerm: laOptionsValues.LICENSE_MODEL_TYPE,
+            operationalScope: epOptionsValues.OPERATIONAL_SCOPE,
+            processType: processOptionValues.PROCESS_TYPE,
+            limitType: [
+                { title: 'Service Provider', enum: 'ServiceProvider' },
+                { title: 'Vendor', enum: 'Vendor' }
+            ],
+            limitUnit: limitSelectValues.UNIT
+        };
+
+        return enumLists[fieldName];
+    },
+
+    getEnumValue(data, { fieldName, args = {} }) {
+        let value = data[fieldName];
+        let enumValues = MergeEditorActionHelper.getEnumList({
+            fieldName: args.listName || fieldName
+        });
+        let enumValue = enumValues.find(el => el.enum === value);
+
+        return (enumValue && enumValue.title) || value;
+    },
+
+    processChoice(data, { fieldName, args = {} }) {
+        let value = data[fieldName];
+        let enumValues = MergeEditorActionHelper.getEnumList({
+            fieldName: args.listName || fieldName
+        });
+        let newValue =
+            value.other ||
+            (enumValues &&
+                enumValues.find(el => el.enum === value.choice).title) ||
+            value.choice;
+
+        return newValue;
+    },
+
+    processChoices(data, { fieldName, args = {} }) {
+        let value = data[fieldName];
+        let enumValues = MergeEditorActionHelper.getEnumList({
+            fieldName: args.listName || fieldName
+        });
+        let newValue =
+            value.other ||
+            getEnumValues({ enums: enumValues, list: value.choices }) ||
+            value.choices;
+
+        return newValue;
+    },
+
+    convertArrayToObject(data, { fieldName }) {
+        let value = data[fieldName];
+        let newValue = {};
+        value.forEach((el, index) => {
+            newValue[index] = el;
+        });
+        return newValue;
+    },
+
+    fetchCategory(data, { cid, isYours, fieldName, dispatch }) {
+        fetchCategories().then(categories => {
+            let value = createCategoryStr(data, { categories });
+            let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+
+            dispatch({
+                type: actionTypes.DATA_PROCESSED,
+                data: {
+                    cid,
+                    [yoursOrTheirs]: { name: fieldName, value }
+                }
+            });
+        });
+    },
+
+    fetchLMVersion(data, { cid, dispatch, isYours }) {
+        let { licensingVersion, vendorId } = data;
+        let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+
+        if (licensingVersion) {
+            fetchVersion({ licensingVersion, vendorId }).then(response => {
+                dispatch({
+                    type: actionTypes.DATA_PROCESSED,
+                    data: {
+                        cid,
+                        [yoursOrTheirs]: {
+                            name: 'licensingVersion',
+                            value: response.name
+                        }
+                    }
+                });
+            });
+        }
+    },
+
+    parseDate(data, { fieldName }) {
+        let date = data[fieldName];
+        return date && moment(date, DATE_FORMAT).format(DATE_FORMAT);
+    }
 };
 
 export default MergeEditorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js
index f7f6d4195e..b82d08683f 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js
@@ -17,208 +17,205 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	LOAD_CONFLICTS: null,
-	ADD_ACTIONS: null,
-	LOAD_CONFLICT: null,
-	DATA_PROCESSED: null
+    LOAD_CONFLICTS: null,
+    ADD_ACTIONS: null,
+    LOAD_CONFLICT: null,
+    DATA_PROCESSED: null
 });
 
 export const rules = {
-	SKIP: 'skip',
-	PARSE: 'parse',
-	FUNCTION: 'function',
-	BOOLEAN: 'boolean'
+    SKIP: 'skip',
+    PARSE: 'parse',
+    FUNCTION: 'function',
+    BOOLEAN: 'boolean'
 };
 
 export const SyncStates = {
-	MERGE : 'Merging',
-	OUT_OF_SYNC: 'OutOfSync',
-	UP_TO_DATE: 'UpToDate'
+    MERGE: 'Merging',
+    OUT_OF_SYNC: 'OutOfSync',
+    UP_TO_DATE: 'UpToDate'
 };
 
 export const ResolutionTypes = {
-	YOURS: 'YOURS',
-	THEIRS: 'THEIRS'
+    YOURS: 'YOURS',
+    THEIRS: 'THEIRS'
 };
 
 export const fileTypes = {
-	LKG : 'LicenseKeyGroup',
-	VLM : 'VendorLicenseModel',
-	EP  : 'EntitlementPool',
-	FG  : 'FeatureGroup',
-	LA  : 'LicenseAgreement',
-	VSP : 'VendorSoftwareProduct',
-	LIMIT : 'Limit',
-	VSP_Q : 'VSPQuestionnaire',
-	COMPONENT : 'Component',
-	COMPONENT_Q : 'ComponentQuestionnaire',
-	COMPONENT_DEP : 'ComponentDependencies',
-	COMPUTE_Q : 'ComputeQuestionnaire',
-	COMPUTE : 'Compute',
-	COMPUTE_FLAVOR: 'ComputeFlavor',
-	NIC : 'Nic',
-	NIC_Q : 'NicQuestionnaire',
-	IMAGE : 'Image',
-	IMAGE_Q : 'ImageQuestionnaire',
-	PROCESS : 'Process',
-	DEPLOYMENT_FLAVOR : 'DeploymentFlavor',
-	VENDOR : 'Vendor',
-	NETWORK : 'Network',
-	ORCHESTRATION_TEMPLATE_CANDIDATE : 'OrchestrationTemplateCandidate'
+    LKG: 'LicenseKeyGroup',
+    VLM: 'VendorLicenseModel',
+    EP: 'EntitlementPool',
+    FG: 'FeatureGroup',
+    LA: 'LicenseAgreement',
+    VSP: 'VendorSoftwareProduct',
+    LIMIT: 'Limit',
+    VSP_Q: 'VSPQuestionnaire',
+    COMPONENT: 'Component',
+    COMPONENT_Q: 'ComponentQuestionnaire',
+    COMPONENT_DEP: 'ComponentDependencies',
+    COMPUTE_Q: 'ComputeQuestionnaire',
+    COMPUTE: 'Compute',
+    COMPUTE_FLAVOR: 'ComputeFlavor',
+    NIC: 'Nic',
+    NIC_Q: 'NicQuestionnaire',
+    IMAGE: 'Image',
+    IMAGE_Q: 'ImageQuestionnaire',
+    PROCESS: 'Process',
+    DEPLOYMENT_FLAVOR: 'DeploymentFlavor',
+    VENDOR: 'Vendor',
+    NETWORK: 'Network',
+    ORCHESTRATION_TEMPLATE_CANDIDATE: 'OrchestrationTemplateCandidate'
 };
 
 export const dataRules = {
-	general: {
-		id: {
-			rule: rules.SKIP
-		},
-		questionareData: {
-			rule: rules.PARSE,
-			moveFields: true
-		},
-		startDate: {
-			rule: rules.FUNCTION,
-			functionName: 'parseDate'
-		},
-		expiryDate: {
-			rule: rules.FUNCTION,
-			functionName: 'parseDate'
-		},
-		featureGroups: {
-			rule: rules.FUNCTION,
-			functionName: 'reduceList',
-			args: {subField: 'name'}
-		},
-		licenseKeyGroups: {
-			rule: rules.FUNCTION,
-			functionName: 'reduceList',
-			args: {subField: 'name'}
-		},
-		entitlementPools: {
-			rule: rules.FUNCTION,
-			functionName: 'reduceList',
-			args: {subField: 'name'}
-		},
-	},
-	[fileTypes.COMPONENT] : {
-	},
-	[fileTypes.COMPUTE_FLAVOR] : {
-		associatedToDeploymentFlavor: {
-			rule: rules.BOOLEAN,
-			trueValue: 'true'
-		}
-	},
-	[fileTypes.COMPUTE_Q] : {
-	},
-	[fileTypes.COMPONENT_Q] : {
-		isComponentMandatory: {
-			rule: rules.BOOLEAN,
-			trueValue: 'YES',
-			falseValue: 'NO'
-		}
-	},
-	[fileTypes.EP] : {
-		referencingFeatureGroups: {
-			rule: rules.SKIP,
-			functionName: 'getFeatureGroups'
-		},
-		operationalScope: {
-			rule: rules.FUNCTION,
-			functionName: 'processChoices'
-		},
-	},
-	[fileTypes.FG] : {
-		referencingLicenseAgreements: {
-			rule: rules.SKIP,
-			functionName: 'getLicenseAgreements'
-		}
-	},
-	[fileTypes.LA] : {
-		licenseTerm : {
-			rule: rules.FUNCTION,
-			functionName: 'processChoice'
-		}
-	},
-	[fileTypes.LIMIT] : {
-		type: {
-			rule: rules.FUNCTION,
-			functionName: 'getEnumValue',
-			args: {listName: 'limitType'}
-		},
-		unit: {
-			rule: rules.FUNCTION,
-			functionName: 'getEnumValue',
-			args: {listName: 'limitUnit'}
-		}
-	},
-	[fileTypes.LKG] : {
-		operationalScope: {
-			rule: rules.FUNCTION,
-			functionName: 'processChoices'
-		},
-		referencingFeatureGroups: {
-			rule: rules.SKIP,
-			functionName: 'getFeatureGroups'
-		},
-	},
-	[fileTypes.NIC] : {
-		networkId: {
-			rule: rules.SKIP
-		}
-	},
-	[fileTypes.NIC_Q] : {
-	},
-	[fileTypes.PROCESS] : {
-		type: {
-			rule: rules.FUNCTION,
-			functionName: 'getEnumValue',
-			args: {listName: 'processType'}
-		}
-	},
-	[fileTypes.VLM] : {
-		iconRef: {
-			rule: rules.SKIP
-		}
-	},
-	[fileTypes.VSP] : {
-		vendorId: {
-			rule: rules.SKIP
-		},
-		onboardingMethod: {
-			rule: rules.SKIP
-		},
-		validationData: {
-			rule: rules.SKIP
-		},
-		isOldVersion: {
-			rule: rules.SKIP
-		},
-		licensingVersion: {
-			rule: rules.FUNCTION,
-			functionName: 'fetchLMVersion'
-		},
-		category: {
-			rule: rules.FUNCTION,
-			functionName: 'fetchCategory'
-		},
-		subCategory: {
-			rule: rules.SKIP
-		},
-	},
-	[fileTypes.VSP_Q] : {
-		affinityData: {
-			rule: rules.SKIP
-		},
-		storageReplicationAcrossRegion: {
-			rule: rules.BOOLEAN,
-			trueValue: 'true',
-			falseValue: 'false'
-		}
-	},
-	[fileTypes.ORCHESTRATION_TEMPLATE_CANDIDATE] : {
-		modules: {
-			rule: rules.FUNCTION,
-			functionName: 'convertArrayToObject'
-		},
-	},
+    general: {
+        id: {
+            rule: rules.SKIP
+        },
+        questionareData: {
+            rule: rules.PARSE,
+            moveFields: true
+        },
+        startDate: {
+            rule: rules.FUNCTION,
+            functionName: 'parseDate'
+        },
+        expiryDate: {
+            rule: rules.FUNCTION,
+            functionName: 'parseDate'
+        },
+        featureGroups: {
+            rule: rules.FUNCTION,
+            functionName: 'reduceList',
+            args: { subField: 'name' }
+        },
+        licenseKeyGroups: {
+            rule: rules.FUNCTION,
+            functionName: 'reduceList',
+            args: { subField: 'name' }
+        },
+        entitlementPools: {
+            rule: rules.FUNCTION,
+            functionName: 'reduceList',
+            args: { subField: 'name' }
+        }
+    },
+    [fileTypes.COMPONENT]: {},
+    [fileTypes.COMPUTE_FLAVOR]: {
+        associatedToDeploymentFlavor: {
+            rule: rules.BOOLEAN,
+            trueValue: 'true'
+        }
+    },
+    [fileTypes.COMPUTE_Q]: {},
+    [fileTypes.COMPONENT_Q]: {
+        isComponentMandatory: {
+            rule: rules.BOOLEAN,
+            trueValue: 'YES',
+            falseValue: 'NO'
+        }
+    },
+    [fileTypes.EP]: {
+        referencingFeatureGroups: {
+            rule: rules.SKIP,
+            functionName: 'getFeatureGroups'
+        },
+        operationalScope: {
+            rule: rules.FUNCTION,
+            functionName: 'processChoices'
+        }
+    },
+    [fileTypes.FG]: {
+        referencingLicenseAgreements: {
+            rule: rules.SKIP,
+            functionName: 'getLicenseAgreements'
+        }
+    },
+    [fileTypes.LA]: {
+        licenseTerm: {
+            rule: rules.FUNCTION,
+            functionName: 'processChoice'
+        }
+    },
+    [fileTypes.LIMIT]: {
+        type: {
+            rule: rules.FUNCTION,
+            functionName: 'getEnumValue',
+            args: { listName: 'limitType' }
+        },
+        unit: {
+            rule: rules.FUNCTION,
+            functionName: 'getEnumValue',
+            args: { listName: 'limitUnit' }
+        }
+    },
+    [fileTypes.LKG]: {
+        operationalScope: {
+            rule: rules.FUNCTION,
+            functionName: 'processChoices'
+        },
+        referencingFeatureGroups: {
+            rule: rules.SKIP,
+            functionName: 'getFeatureGroups'
+        }
+    },
+    [fileTypes.NIC]: {
+        networkId: {
+            rule: rules.SKIP
+        }
+    },
+    [fileTypes.NIC_Q]: {},
+    [fileTypes.PROCESS]: {
+        type: {
+            rule: rules.FUNCTION,
+            functionName: 'getEnumValue',
+            args: { listName: 'processType' }
+        }
+    },
+    [fileTypes.VLM]: {
+        iconRef: {
+            rule: rules.SKIP
+        }
+    },
+    [fileTypes.VSP]: {
+        vendorId: {
+            rule: rules.SKIP
+        },
+        onboardingMethod: {
+            rule: rules.SKIP
+        },
+        validationData: {
+            rule: rules.SKIP
+        },
+        isOldVersion: {
+            rule: rules.SKIP
+        },
+        licensingVersion: {
+            rule: rules.FUNCTION,
+            functionName: 'fetchLMVersion'
+        },
+        category: {
+            rule: rules.FUNCTION,
+            functionName: 'fetchCategory'
+        },
+        subCategory: {
+            rule: rules.SKIP
+        }
+    },
+    [fileTypes.VSP_Q]: {
+        affinityData: {
+            rule: rules.SKIP
+        },
+        storageReplicationAcrossRegion: {
+            rule: rules.BOOLEAN,
+            trueValue: 'true',
+            falseValue: 'false'
+        }
+    },
+    [fileTypes.ORCHESTRATION_TEMPLATE_CANDIDATE]: {
+        modules: {
+            rule: rules.FUNCTION,
+            functionName: 'convertArrayToObject'
+        }
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js
index 6985fcfaca..1630849b64 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js
@@ -13,54 +13,54 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './MergeEditorConstants.js';
+import { actionTypes } from './MergeEditorConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.LOAD_CONFLICT: {
-			let cdata = {...action.data};
-			// let data = state.conflicts ? {...state.conflicts.data} : {} ;
-			// data[cdata.id] = cdata;
-			let conflicts = state.conflicts ? {...state.conflicts} : {};
-			conflicts[cdata.id] = cdata;
-			return {
-				...state,
-				conflicts
-			};
-		}
-		case actionTypes.DATA_PROCESSED: {
-			let conflicts = {...state.conflicts};
-			let {data} = action;
-			if (data && data.cid) {
-				let yours = {...conflicts[data.cid].yours};
-				let theirs = {...conflicts[data.cid].theirs};
-				let {yoursField, theirsField} = data;
-				if (yoursField) {
-					yours[yoursField.name] = yoursField.value;
-					conflicts[data.cid].yours = yours;
-				}
-				if (theirsField) {
-					theirs[theirsField.name] = theirsField.value;
-					conflicts[data.cid].theirs = theirs;
-				}
-			}
-			return {
-				...state,
-				conflicts: {
-					...conflicts
-				}
-			};
-		}
-		case actionTypes.LOAD_CONFLICTS:
-			let conflictFiles = [];
-			if (action.data) {
-				conflictFiles = [...action.data.conflictInfoList];
-			}
-			return {
-				inMerge: conflictFiles.length > 0,
-				conflictFiles
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.LOAD_CONFLICT: {
+            let cdata = { ...action.data };
+            // let data = state.conflicts ? {...state.conflicts.data} : {} ;
+            // data[cdata.id] = cdata;
+            let conflicts = state.conflicts ? { ...state.conflicts } : {};
+            conflicts[cdata.id] = cdata;
+            return {
+                ...state,
+                conflicts
+            };
+        }
+        case actionTypes.DATA_PROCESSED: {
+            let conflicts = { ...state.conflicts };
+            let { data } = action;
+            if (data && data.cid) {
+                let yours = { ...conflicts[data.cid].yours };
+                let theirs = { ...conflicts[data.cid].theirs };
+                let { yoursField, theirsField } = data;
+                if (yoursField) {
+                    yours[yoursField.name] = yoursField.value;
+                    conflicts[data.cid].yours = yours;
+                }
+                if (theirsField) {
+                    theirs[theirsField.name] = theirsField.value;
+                    conflicts[data.cid].theirs = theirs;
+                }
+            }
+            return {
+                ...state,
+                conflicts: {
+                    ...conflicts
+                }
+            };
+        }
+        case actionTypes.LOAD_CONFLICTS:
+            let conflictFiles = [];
+            if (action.data) {
+                conflictFiles = [...action.data.conflictInfoList];
+            }
+            return {
+                inMerge: conflictFiles.length > 0,
+                conflictFiles
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
index 34d86419e7..a7e36a39fc 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
@@ -24,233 +24,389 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Radio from 'sdc-ui/lib/react/Radio.js';
 import equal from 'deep-equal';
-import {ResolutionTypes} from './MergeEditorConstants.js';
+import { ResolutionTypes } from './MergeEditorConstants.js';
 
-class ConflictCategory extends React.Component  {
-	state = {
-		resolution: ResolutionTypes.YOURS
-	};
+class ConflictCategory extends React.Component {
+    state = {
+        resolution: ResolutionTypes.YOURS
+    };
 
-	getTitle(conflictType, conflictName) {
-		if (typeof conflictName === 'undefined' || conflictType === conflictName) {
-			return i18n(conflictType);
-		} else {
-			return `${i18n(conflictType)}: ${conflictName}`;
-		}
-	}
+    getTitle(conflictType, conflictName) {
+        if (
+            typeof conflictName === 'undefined' ||
+            conflictType === conflictName
+        ) {
+            return i18n(conflictType);
+        } else {
+            return `${i18n(conflictType)}: ${conflictName}`;
+        }
+    }
 
-	render() {
-		let {collapseExpand, conflict: {id: conflictId, type, name}, isCollapsed, item: {id: itemId, version}, onResolveConflict} = this.props;
-		let {resolution} = this.state;
-		const iconClass = isCollapsed ? 'merge-chevron' : 'merge-chevron right';
+    render() {
+        let {
+            collapseExpand,
+            conflict: { id: conflictId, type, name },
+            isCollapsed,
+            item: { id: itemId, version },
+            onResolveConflict
+        } = this.props;
+        let { resolution } = this.state;
+        const iconClass = isCollapsed ? 'merge-chevron' : 'merge-chevron right';
 
-		return (
-			<div key={'conflictCategory_' + conflictId}  >
-				<GridSection className='conflict-section'>
-					<GridItem >
-						<div className='collapsible-section' onClick={collapseExpand}>
-							<SVGIcon name={isCollapsed ? 'chevronDown' : 'chevronUp'} iconClassName={iconClass} />
-							<div className='conflict-title'>{this.getTitle(type, name)}</div>
-						</div>
-					</GridItem>
-					<GridItem className='yours'>
-						<Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.YOURS} value='yours'
-							   onChange={() => this.setState({resolution: ResolutionTypes.YOURS})} data-test-id={'radio_' + conflictId + '_yours'} />
-					</GridItem>
-					<GridItem className='theirs'>
-						<Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.THEIRS} value='theirs'
-							   onChange={() => this.setState({resolution: ResolutionTypes.THEIRS})} data-test-id={'radio_' + conflictId + '_theirs'} /></GridItem>
-					<GridItem className='resolve'>
-						<Button className='conflict-resolve-btn' btnType='outline' color='gray'
-							onClick={() => onResolveConflict({conflictId, resolution, itemId, version})}>
-							{i18n('Resolve')}
-						</Button>
-					</GridItem>
-				</GridSection>
-				<div>
-					{isCollapsed && this.props.children}
-				</div>
-			</div>
-		);
-	}
-
-};
-
-class TextCompare extends React.Component  {
-	render() {
-		// let rand = Math.random() * (3000 - 1) + 1;
-		let {yours, theirs, field, type, isObjName, conflictsOnly} = this.props;
-		let typeYours = typeof yours;
-		let typeTheirs = typeof theirs;
+        return (
+            <div key={'conflictCategory_' + conflictId}>
+                <GridSection className="conflict-section">
+                    <GridItem>
+                        <div
+                            className="collapsible-section"
+                            onClick={collapseExpand}>
+                            <SVGIcon
+                                name={isCollapsed ? 'chevronDown' : 'chevronUp'}
+                                iconClassName={iconClass}
+                            />
+                            <div className="conflict-title">
+                                {this.getTitle(type, name)}
+                            </div>
+                        </div>
+                    </GridItem>
+                    <GridItem className="yours">
+                        <Radio
+                            name={'radio_' + conflictId}
+                            checked={resolution === ResolutionTypes.YOURS}
+                            value="yours"
+                            onChange={() =>
+                                this.setState({
+                                    resolution: ResolutionTypes.YOURS
+                                })
+                            }
+                            data-test-id={'radio_' + conflictId + '_yours'}
+                        />
+                    </GridItem>
+                    <GridItem className="theirs">
+                        <Radio
+                            name={'radio_' + conflictId}
+                            checked={resolution === ResolutionTypes.THEIRS}
+                            value="theirs"
+                            onChange={() =>
+                                this.setState({
+                                    resolution: ResolutionTypes.THEIRS
+                                })
+                            }
+                            data-test-id={'radio_' + conflictId + '_theirs'}
+                        />
+                    </GridItem>
+                    <GridItem className="resolve">
+                        <Button
+                            className="conflict-resolve-btn"
+                            btnType="outline"
+                            color="gray"
+                            onClick={() =>
+                                onResolveConflict({
+                                    conflictId,
+                                    resolution,
+                                    itemId,
+                                    version
+                                })
+                            }>
+                            {i18n('Resolve')}
+                        </Button>
+                    </GridItem>
+                </GridSection>
+                <div>{isCollapsed && this.props.children}</div>
+            </div>
+        );
+    }
+}
 
-		let parsedType = `${type}/${field}`.replace(/\/[0-9]+/g,'/index');
-		let level = type.split('/').length;
+class TextCompare extends React.Component {
+    render() {
+        // let rand = Math.random() * (3000 - 1) + 1;
+        let {
+            yours,
+            theirs,
+            field,
+            type,
+            isObjName,
+            conflictsOnly
+        } = this.props;
+        let typeYours = typeof yours;
+        let typeTheirs = typeof theirs;
 
-		if (typeYours === 'boolean' || typeTheirs === 'boolean') {
-			yours = yours ? i18n('Yes') : i18n('No');
-			theirs = theirs ? i18n('Yes') : i18n('No');
-		}
+        let parsedType = `${type}/${field}`.replace(/\/[0-9]+/g, '/index');
+        let level = type.split('/').length;
 
+        if (typeYours === 'boolean' || typeTheirs === 'boolean') {
+            yours = yours ? i18n('Yes') : i18n('No');
+            theirs = theirs ? i18n('Yes') : i18n('No');
+        }
 
-		/*if ((typeYours !== 'string' && typeYours !== 'undefined') || (typeTheirs !== 'string' && typeTheirs !== 'undefined')) {
+        /*if ((typeYours !== 'string' && typeYours !== 'undefined') || (typeTheirs !== 'string' && typeTheirs !== 'undefined')) {
 			return (<div className='merge-editor-text-field field-error'>{field} cannot be parsed for display</div>);
 		}*/
-		let isDiff = yours !== theirs;
-		if (!isObjName &&
-			((!isDiff && conflictsOnly) ||
-			 (yours === '' && theirs === '') ||
-			 (typeYours === 'undefined' && typeTheirs === 'undefined')
-			)
-		) {
-			return null;
-		}
+        let isDiff = yours !== theirs;
+        if (
+            !isObjName &&
+            ((!isDiff && conflictsOnly) ||
+                (yours === '' && theirs === '') ||
+                (typeYours === 'undefined' && typeTheirs === 'undefined'))
+        ) {
+            return null;
+        }
 
-		return (
-			<GridSection className={isDiff ? 'merge-editor-text-field diff' : 'merge-editor-text-field'}>
-				<GridItem className='field-col grid-col-title' stretch>
-					<div className={`field ${isDiff ? 'diff' : ''} field-name level-${level} ${isObjName ? 'field-object-name' : ''}`}>
-						{i18n(parsedType)}
-					</div>
-				</GridItem>
-				<GridItem className='field-col grid-col-yours' stretch>
-					<div className={`field field-yours ${!yours ? 'empty-field' : ''}`} >{yours || (isObjName ? '' : '━━')}</div>
-				</GridItem>
-				<GridItem className='field-col grid-col-theirs' stretch>
-					<div className={`field field-theirs ${!theirs ? 'empty-field' : ''}`}>{theirs || (isObjName ? '' : '━━')}</div>
-				</GridItem>
-				<GridItem stretch/>
-			</GridSection>
-		);
-	}
-};
+        return (
+            <GridSection
+                className={
+                    isDiff
+                        ? 'merge-editor-text-field diff'
+                        : 'merge-editor-text-field'
+                }>
+                <GridItem className="field-col grid-col-title" stretch>
+                    <div
+                        className={`field ${
+                            isDiff ? 'diff' : ''
+                        } field-name level-${level} ${
+                            isObjName ? 'field-object-name' : ''
+                        }`}>
+                        {i18n(parsedType)}
+                    </div>
+                </GridItem>
+                <GridItem className="field-col grid-col-yours" stretch>
+                    <div
+                        className={`field field-yours ${
+                            !yours ? 'empty-field' : ''
+                        }`}>
+                        {yours || (isObjName ? '' : '━━')}
+                    </div>
+                </GridItem>
+                <GridItem className="field-col grid-col-theirs" stretch>
+                    <div
+                        className={`field field-theirs ${
+                            !theirs ? 'empty-field' : ''
+                        }`}>
+                        {theirs || (isObjName ? '' : '━━')}
+                    </div>
+                </GridItem>
+                <GridItem stretch />
+            </GridSection>
+        );
+    }
+}
 
 class MergeEditorView extends React.Component {
-	state = {
-		collapsingSections: {},
-		conflictsOnly: false
-	};
+    state = {
+        collapsingSections: {},
+        conflictsOnly: false
+    };
 
-	render() {
-		let {conflicts, item, conflictFiles, onResolveConflict, currentScreen, resolution} = this.props;
+    render() {
+        let {
+            conflicts,
+            item,
+            conflictFiles,
+            onResolveConflict,
+            currentScreen,
+            resolution
+        } = this.props;
 
-		return (
-		<div className='merge-editor'>
-			{conflictFiles && this.renderConflictTableTitles()}
-			<div className='merge-editor-body'>
-				{conflictFiles && conflictFiles.sort((a, b) => a.type > b.type).map(file => (
-				<ConflictCategory key={'conflict_' + file.id} conflict={file} item={item} isCollapsed={this.state.collapsingSections[file.id]}
-					collapseExpand={()=>{this.updateCollapseState(file.id);}}
-					onResolveConflict={cDetails => onResolveConflict({...cDetails, currentScreen})}>
-					{(conflicts && conflicts[file.id]) &&
-						this.getUnion(conflicts[file.id].yours, conflicts[file.id].theirs).map(field => {
-							return this.renderField(field, file, conflicts[file.id].yours[field], conflicts[file.id].theirs[field], resolution);
-						})}
-				</ConflictCategory>))}
-			</div>
-		</div>);
-	}
+        return (
+            <div className="merge-editor">
+                {conflictFiles && this.renderConflictTableTitles()}
+                <div className="merge-editor-body">
+                    {conflictFiles &&
+                        conflictFiles
+                            .sort((a, b) => a.type > b.type)
+                            .map(file => (
+                                <ConflictCategory
+                                    key={'conflict_' + file.id}
+                                    conflict={file}
+                                    item={item}
+                                    isCollapsed={
+                                        this.state.collapsingSections[file.id]
+                                    }
+                                    collapseExpand={() => {
+                                        this.updateCollapseState(file.id);
+                                    }}
+                                    onResolveConflict={cDetails =>
+                                        onResolveConflict({
+                                            ...cDetails,
+                                            currentScreen
+                                        })
+                                    }>
+                                    {conflicts &&
+                                        conflicts[file.id] &&
+                                        this.getUnion(
+                                            conflicts[file.id].yours,
+                                            conflicts[file.id].theirs
+                                        ).map(field => {
+                                            return this.renderField(
+                                                field,
+                                                file,
+                                                conflicts[file.id].yours[field],
+                                                conflicts[file.id].theirs[
+                                                    field
+                                                ],
+                                                resolution
+                                            );
+                                        })}
+                                </ConflictCategory>
+                            ))}
+                </div>
+            </div>
+        );
+    }
 
-	renderConflictTableTitles()
-	{
-		return (<GridSection className='conflict-titles-section'>
-			<GridItem>
-				{i18n('Page')}
-			</GridItem>
-			<GridItem className='yours'>
-				{i18n('Local (Me)')}
-			</GridItem>
-			<GridItem className='theirs'>
-				{i18n('Last Committed')}
-			</GridItem>
-			<GridItem className='resolve'>
-				<Input
-					label={i18n('Show Conflicts Only')}
-					type='checkbox'
-					value={this.state.conflictsOnly}
-					onChange={e => this.setState({conflictsOnly: e}) } />
-			</GridItem>
-		</GridSection>);
-	}
-	// <Checkbox
-	// 	label={i18n('Show Conflicts Only')}
-	// 	value={this.state.conflictsOnly}
-	// 	checked={this.state.conflictsOnly}
-	// 	onChange={checked => this.setState({conflictsOnly: checked})} />
+    renderConflictTableTitles() {
+        return (
+            <GridSection className="conflict-titles-section">
+                <GridItem>{i18n('Page')}</GridItem>
+                <GridItem className="yours">{i18n('Local (Me)')}</GridItem>
+                <GridItem className="theirs">{i18n('Last Committed')}</GridItem>
+                <GridItem className="resolve">
+                    <Input
+                        label={i18n('Show Conflicts Only')}
+                        type="checkbox"
+                        value={this.state.conflictsOnly}
+                        onChange={e => this.setState({ conflictsOnly: e })}
+                    />
+                </GridItem>
+            </GridSection>
+        );
+    }
+    // <Checkbox
+    // 	label={i18n('Show Conflicts Only')}
+    // 	value={this.state.conflictsOnly}
+    // 	checked={this.state.conflictsOnly}
+    // 	onChange={checked => this.setState({conflictsOnly: checked})} />
 
-	renderObjects(yours, theirs, fileType, field, id, resolution) {
-		if (equal(yours, theirs)) {
-			return;
-		}
-		let {conflictsOnly} = this.state;
-		return (
-			<div key={`obj_${fileType}/${field}_${id}`}>
-				<TextCompare field={field} type={fileType} conflictsOnly={conflictsOnly} yours='' theirs='' isObjName resolution={resolution} />
-				<div className='field-objects'>
-					<div>
-						{this.getUnion(yours, theirs).map(key =>
-							this.renderField(
-								key,
-								{type: `${fileType}/${field}`, id},
-								yours && yours[key],
-								theirs && theirs[key]
-							)
-						)}
-					</div>
-				</div>
-			</div>
-		);
-	}
+    renderObjects(yours, theirs, fileType, field, id, resolution) {
+        if (equal(yours, theirs)) {
+            return;
+        }
+        let { conflictsOnly } = this.state;
+        return (
+            <div key={`obj_${fileType}/${field}_${id}`}>
+                <TextCompare
+                    field={field}
+                    type={fileType}
+                    conflictsOnly={conflictsOnly}
+                    yours=""
+                    theirs=""
+                    isObjName
+                    resolution={resolution}
+                />
+                <div className="field-objects">
+                    <div>
+                        {this.getUnion(yours, theirs).map(key =>
+                            this.renderField(
+                                key,
+                                { type: `${fileType}/${field}`, id },
+                                yours && yours[key],
+                                theirs && theirs[key]
+                            )
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
-	renderList(yours = [], theirs = [], type, field, id, resolution) {
-		let theirsList = theirs.join(', ');
-		let yoursList = yours.join(', ');
-		let {conflictsOnly} = this.state;
-		return (<TextCompare key={'text_' + id + '_' + field}
-			 field={field} type={type} yours={yoursList} theirs={theirsList} conflictsOnly={conflictsOnly} resolution={resolution} />);
-	}
+    renderList(yours = [], theirs = [], type, field, id, resolution) {
+        let theirsList = theirs.join(', ');
+        let yoursList = yours.join(', ');
+        let { conflictsOnly } = this.state;
+        return (
+            <TextCompare
+                key={'text_' + id + '_' + field}
+                field={field}
+                type={type}
+                yours={yoursList}
+                theirs={theirsList}
+                conflictsOnly={conflictsOnly}
+                resolution={resolution}
+            />
+        );
+    }
 
-	renderField(field, file, yours, theirs, resolution) {
-		if (yours) {
-			if (Array.isArray(yours)) {
-				return this.renderList(yours, theirs, file.type, field, file.id, resolution);
-			}
-			else if (typeof yours === 'object') {
-				return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
-			}
-		} else if (theirs) {
-			if (Array.isArray(theirs)) {
-				return this.renderList(yours, theirs, file.type, field, file.id, resolution);
-			}
-			else if (typeof theirs === 'object') {
-				return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
-			}
-		}
-		let {conflictsOnly} = this.state;
-		return (<TextCompare key={'text_' + file.id + '_' + field} resolution={resolution}
-			 field={field} type={file.type} yours={yours} theirs={theirs} conflictsOnly={conflictsOnly} />);
-	}
+    renderField(field, file, yours, theirs, resolution) {
+        if (yours) {
+            if (Array.isArray(yours)) {
+                return this.renderList(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            } else if (typeof yours === 'object') {
+                return this.renderObjects(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            }
+        } else if (theirs) {
+            if (Array.isArray(theirs)) {
+                return this.renderList(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            } else if (typeof theirs === 'object') {
+                return this.renderObjects(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            }
+        }
+        let { conflictsOnly } = this.state;
+        return (
+            <TextCompare
+                key={'text_' + file.id + '_' + field}
+                resolution={resolution}
+                field={field}
+                type={file.type}
+                yours={yours}
+                theirs={theirs}
+                conflictsOnly={conflictsOnly}
+            />
+        );
+    }
 
-	getUnion(yours = {},theirs = {}) {
-		let yoursKeys = Object.keys(yours);
-		let theirsKeys = Object.keys(theirs);
-		let myUn = union(yoursKeys, theirsKeys);
-		return myUn;//.sort((a, b) => a > b);
-	}
+    getUnion(yours = {}, theirs = {}) {
+        let yoursKeys = Object.keys(yours);
+        let theirsKeys = Object.keys(theirs);
+        let myUn = union(yoursKeys, theirsKeys);
+        return myUn; //.sort((a, b) => a > b);
+    }
 
-	updateCollapseState(conflictId) {
-		const {fetchConflict, item: {id: itemId, version}, /*conflicts*/} = this.props;
-		let isCollapsed = this.state.collapsingSections[conflictId];
-		// if (!isCollapsed && !(conflicts && conflictId in conflicts)) {
-		if (!isCollapsed) {
-			fetchConflict({cid: conflictId, itemId, version});
-		}
-		this.setState({
-			collapsingSections: {
-				...this.state.collapsingSections,
-				[conflictId]: !isCollapsed
-			}
-		});
-	}
+    updateCollapseState(conflictId) {
+        const {
+            fetchConflict,
+            item: { id: itemId, version } /*conflicts*/
+        } = this.props;
+        let isCollapsed = this.state.collapsingSections[conflictId];
+        // if (!isCollapsed && !(conflicts && conflictId in conflicts)) {
+        if (!isCollapsed) {
+            fetchConflict({ cid: conflictId, itemId, version });
+        }
+        this.setState({
+            collapsingSections: {
+                ...this.state.collapsingSections,
+                [conflictId]: !isCollapsed
+            }
+        });
+    }
 }
 
 export default MergeEditorView;
diff --git a/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js b/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
index b17536f446..5b28c5d7fa 100644
--- a/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
+++ b/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
@@ -32,40 +32,40 @@ import Revisions from 'sdc-app/onboarding/revisions/Revisions.js';
 import VendorSelector from 'sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx';
 
 export const modalContentMapper = {
-	SOFTWARE_PRODUCT_CREATION: 'SOFTWARE_PRODUCT_CREATION',
-	LICENSE_MODEL_CREATION: 'LICENSE_MODEL_CREATION',
-	SUMBIT_ERROR_RESPONSE: 'SUMBIT_ERROR_RESPONSE',
-	COMPONENT_COMPUTE_FLAVOR_EDITOR: 'COMPONENT_COMPUTE_FLAVOR_EDITOR',
-	NIC_EDITOR: 'NIC_EDITOR',
-	NIC_CREATION: 'NIC_CREATION',
-	COMPONENT_CREATION: 'COMPONENT_CREATION',
-	SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR : 'SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR',
-	DEPLOYMENT_FLAVOR_EDITOR: 'DEPLOYMENT_FLAVOR_EDITOR',
-	MANAGE_PERMISSIONS: 'MANAGE_PERMISSIONS',
-	VERSION_CREATION: 'VERSION_CREATION',
-	COMMIT_COMMENT: 'COMMIT_COMMENT',
-	VERSION_TREE: 'VERSION_TREE',
-	MERGE_EDITOR: 'MERGE_EDITOR',
-	REVISIONS_LIST: 'REVISIONS_LIST',
-	VENDOR_SELECTOR: 'VENDOR_SELECTOR'
-
+    SOFTWARE_PRODUCT_CREATION: 'SOFTWARE_PRODUCT_CREATION',
+    LICENSE_MODEL_CREATION: 'LICENSE_MODEL_CREATION',
+    SUMBIT_ERROR_RESPONSE: 'SUMBIT_ERROR_RESPONSE',
+    COMPONENT_COMPUTE_FLAVOR_EDITOR: 'COMPONENT_COMPUTE_FLAVOR_EDITOR',
+    NIC_EDITOR: 'NIC_EDITOR',
+    NIC_CREATION: 'NIC_CREATION',
+    COMPONENT_CREATION: 'COMPONENT_CREATION',
+    SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR:
+        'SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR',
+    DEPLOYMENT_FLAVOR_EDITOR: 'DEPLOYMENT_FLAVOR_EDITOR',
+    MANAGE_PERMISSIONS: 'MANAGE_PERMISSIONS',
+    VERSION_CREATION: 'VERSION_CREATION',
+    COMMIT_COMMENT: 'COMMIT_COMMENT',
+    VERSION_TREE: 'VERSION_TREE',
+    MERGE_EDITOR: 'MERGE_EDITOR',
+    REVISIONS_LIST: 'REVISIONS_LIST',
+    VENDOR_SELECTOR: 'VENDOR_SELECTOR'
 };
 
 export const modalContentComponents = {
-	SUMBIT_ERROR_RESPONSE: SubmitErrorResponse,
-	SOFTWARE_PRODUCT_CREATION: SoftwareProductCreation,
-	VERSION_CREATION: VersionPageCreation,
-	LICENSE_MODEL_CREATION: LicenseModelCreation,
-	COMPONENT_COMPUTE_FLAVOR_EDITOR: ComputeFlavorEditor,
-	NIC_EDITOR: SoftwareProductComponentsNICEditor,
-	NIC_CREATION: NICCreation,
-	COMPONENT_CREATION: ComponentCreation,
-	SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR : SoftwareProductComponentImageEditor,
-	DEPLOYMENT_FLAVOR_EDITOR: SoftwareProductDeploymentEditor,
-	MANAGE_PERMISSIONS: PermissionsManager,
-	COMMIT_COMMENT: CommitCommentModal,
-	VERSION_TREE: Tree,
-	MERGE_EDITOR: MergeEditor,
-	REVISIONS_LIST: Revisions,
-	VENDOR_SELECTOR: VendorSelector
+    SUMBIT_ERROR_RESPONSE: SubmitErrorResponse,
+    SOFTWARE_PRODUCT_CREATION: SoftwareProductCreation,
+    VERSION_CREATION: VersionPageCreation,
+    LICENSE_MODEL_CREATION: LicenseModelCreation,
+    COMPONENT_COMPUTE_FLAVOR_EDITOR: ComputeFlavorEditor,
+    NIC_EDITOR: SoftwareProductComponentsNICEditor,
+    NIC_CREATION: NICCreation,
+    COMPONENT_CREATION: ComponentCreation,
+    SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR: SoftwareProductComponentImageEditor,
+    DEPLOYMENT_FLAVOR_EDITOR: SoftwareProductDeploymentEditor,
+    MANAGE_PERMISSIONS: PermissionsManager,
+    COMMIT_COMMENT: CommitCommentModal,
+    VERSION_TREE: Tree,
+    MERGE_EDITOR: MergeEditor,
+    REVISIONS_LIST: Revisions,
+    VENDOR_SELECTOR: VendorSelector
 };
diff --git a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js
index 916f724b40..6ac6d753d4 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js
@@ -13,133 +13,185 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './JSONSchemaReducerConstants.js';
+import { actionTypes } from './JSONSchemaReducerConstants.js';
 import Validator from 'nfvo-utils/Validator.js';
 import JSONSchema from 'nfvo-utils/json/JSONSchema.js';
 import JSONPointer from 'nfvo-utils/json/JSONPointer.js';
 import forOwn from 'lodash/forOwn.js';
 import isArray from 'lodash/isArray.js';
 
-
 function flattenData(data, result, pointer = '') {
-	let newPointer = pointer;
-	if (typeof data === 'object' && !isArray(data)) {
-		for (let i in data) {
-			newPointer = newPointer ? newPointer + '/' + i : i;
-			flattenData(data[i], result, newPointer);
-			newPointer = pointer;
-		}
-	} else {
-		result[newPointer] = data;
-	}
+    let newPointer = pointer;
+    if (typeof data === 'object' && !isArray(data)) {
+        for (let i in data) {
+            newPointer = newPointer ? newPointer + '/' + i : i;
+            flattenData(data[i], result, newPointer);
+            newPointer = pointer;
+        }
+    } else {
+        result[newPointer] = data;
+    }
 }
 
-function updateSchemaDataAndValidateReducer (state = {}, action, questionnaireName) {
-	let genericFieldInfoClone;
-	switch (action.type) {
-		case actionTypes.DATA_LOADED:
-			if (questionnaireName !== action.qName) {return {...state};}
-			const schema = action.payload.qschema;
-			let schemaLoader = new JSONSchema();
-			schemaLoader.setSchema(schema);
-			schemaLoader.setSupportedValidationFunctions(Object.keys(Validator.globalValidationFunctions));
-			let {genericFieldInfo} = schemaLoader.flattenSchema();
-
-			let data = action.payload.qdata;
-			let dataMap =  {};
-			flattenData(data, dataMap);
-
-			return {
-				...state,
-				qdata: action.payload.qdata, // the original hierarchical data. to be used for submit and save
-				qgenericFieldInfo : genericFieldInfo, // information about the fields that the view will require and reducer will need, such as validations, enum to use, etc.
-				dataMap //  flattened schema data for ease of use
-			};
-
-		case actionTypes.DATA_CHANGED:
-			let changedData = action.deltaData;
-			if (questionnaireName !== action.qName)  {return {...state};}
-
-			genericFieldInfoClone = {...state.qgenericFieldInfo};
-			let qDataClone = {...state.qdata};
-			let dataMapClone = {...state.dataMap};
-
-			forOwn(changedData,(value, key) => {
-				if (state.qgenericFieldInfo[key]) {
-					let result = Validator.validate(key, value, state.qgenericFieldInfo[key].validations, state, action.customValidations);
-					genericFieldInfoClone[key] = {...genericFieldInfoClone[key], isValid: result.isValid, errorText: result.errorText};
-					qDataClone = JSONPointer.setValue(state.qdata, '/' + key, value);
-					dataMapClone[key] = value;
-				}
-			});
-
-			return {
-				...state,
-				qdata: qDataClone,
-				dataMap: dataMapClone,
-				qgenericFieldInfo: genericFieldInfoClone
-			};
-
-		case actionTypes.VALIDATE_DATA:
-			let specificFields = action.data;
-			if (questionnaireName !== action.qName)  {return {...state};}
-			genericFieldInfoClone = {...state.qgenericFieldInfo};
-			forOwn(specificFields,(value, key) => {
-				let result = Validator.validate(key, value, state.qgenericFieldInfo[key].validations, state, action.customValidations);
-				genericFieldInfoClone[key] = {...genericFieldInfoClone[key], isValid: result.isValid, errorText: result.errorText};
-			});
-			return {
-				...state,
-				formReady: null,
-				qgenericFieldInfo: genericFieldInfoClone
-			};
-
-		case actionTypes.VALIDATE_FORM:
-			if (questionnaireName !== action.qName)  {return {...state};}
-			genericFieldInfoClone = {...state.qgenericFieldInfo};
-			let formReady = true;
-			forOwn(state.qgenericFieldInfo,(value, key) => {
-				let val = state.dataMap[key] ? state.dataMap[key] : '';
-				let result = Validator.validate(key, val, state.qgenericFieldInfo[key].validations, state, action.customValidations);
-				genericFieldInfoClone[key] = {...genericFieldInfoClone[key], isValid: result.isValid, errorText: result.errorText};
-				if (!result.isValid) {
-					formReady = false;
-				}
-			});
-			return {
-				...state,
-				formReady,
-				qgenericFieldInfo: genericFieldInfoClone
-			};
-
-		default:
-			return state;
-	}
-};
+function updateSchemaDataAndValidateReducer(
+    state = {},
+    action,
+    questionnaireName
+) {
+    let genericFieldInfoClone;
+    switch (action.type) {
+        case actionTypes.DATA_LOADED:
+            if (questionnaireName !== action.qName) {
+                return { ...state };
+            }
+            const schema = action.payload.qschema;
+            let schemaLoader = new JSONSchema();
+            schemaLoader.setSchema(schema);
+            schemaLoader.setSupportedValidationFunctions(
+                Object.keys(Validator.globalValidationFunctions)
+            );
+            let { genericFieldInfo } = schemaLoader.flattenSchema();
+
+            let data = action.payload.qdata;
+            let dataMap = {};
+            flattenData(data, dataMap);
+
+            return {
+                ...state,
+                qdata: action.payload.qdata, // the original hierarchical data. to be used for submit and save
+                qgenericFieldInfo: genericFieldInfo, // information about the fields that the view will require and reducer will need, such as validations, enum to use, etc.
+                dataMap //  flattened schema data for ease of use
+            };
+
+        case actionTypes.DATA_CHANGED:
+            let changedData = action.deltaData;
+            if (questionnaireName !== action.qName) {
+                return { ...state };
+            }
+
+            genericFieldInfoClone = { ...state.qgenericFieldInfo };
+            let qDataClone = { ...state.qdata };
+            let dataMapClone = { ...state.dataMap };
+
+            forOwn(changedData, (value, key) => {
+                if (state.qgenericFieldInfo[key]) {
+                    let result = Validator.validate(
+                        key,
+                        value,
+                        state.qgenericFieldInfo[key].validations,
+                        state,
+                        action.customValidations
+                    );
+                    genericFieldInfoClone[key] = {
+                        ...genericFieldInfoClone[key],
+                        isValid: result.isValid,
+                        errorText: result.errorText
+                    };
+                    qDataClone = JSONPointer.setValue(
+                        state.qdata,
+                        '/' + key,
+                        value
+                    );
+                    dataMapClone[key] = value;
+                }
+            });
+
+            return {
+                ...state,
+                qdata: qDataClone,
+                dataMap: dataMapClone,
+                qgenericFieldInfo: genericFieldInfoClone
+            };
+
+        case actionTypes.VALIDATE_DATA:
+            let specificFields = action.data;
+            if (questionnaireName !== action.qName) {
+                return { ...state };
+            }
+            genericFieldInfoClone = { ...state.qgenericFieldInfo };
+            forOwn(specificFields, (value, key) => {
+                let result = Validator.validate(
+                    key,
+                    value,
+                    state.qgenericFieldInfo[key].validations,
+                    state,
+                    action.customValidations
+                );
+                genericFieldInfoClone[key] = {
+                    ...genericFieldInfoClone[key],
+                    isValid: result.isValid,
+                    errorText: result.errorText
+                };
+            });
+            return {
+                ...state,
+                formReady: null,
+                qgenericFieldInfo: genericFieldInfoClone
+            };
+
+        case actionTypes.VALIDATE_FORM:
+            if (questionnaireName !== action.qName) {
+                return { ...state };
+            }
+            genericFieldInfoClone = { ...state.qgenericFieldInfo };
+            let formReady = true;
+            forOwn(state.qgenericFieldInfo, (value, key) => {
+                let val = state.dataMap[key] ? state.dataMap[key] : '';
+                let result = Validator.validate(
+                    key,
+                    val,
+                    state.qgenericFieldInfo[key].validations,
+                    state,
+                    action.customValidations
+                );
+                genericFieldInfoClone[key] = {
+                    ...genericFieldInfoClone[key],
+                    isValid: result.isValid,
+                    errorText: result.errorText
+                };
+                if (!result.isValid) {
+                    formReady = false;
+                }
+            });
+            return {
+                ...state,
+                formReady,
+                qgenericFieldInfo: genericFieldInfoClone
+            };
+
+        default:
+            return state;
+    }
+}
 
 export function createJSONSchemaReducer(questionnaireName) {
-	return (state = {}, action) => {
-		return updateSchemaDataAndValidateReducer(state, action, questionnaireName);
-	};
-};
-
-export function createComposedJSONSchemaReducer(questionnaireName, additionalActionsReducer) {
-	return (state = {}, action) => {
-		if(action.type === actionTypes.VALIDATE_DATA ||
-			action.type === actionTypes.VALIDATE_FORM ||
-			action.type === actionTypes.DATA_CHANGED ||
-			action.type === actionTypes.DATA_LOADED
-		) {
-			return updateSchemaDataAndValidateReducer(state, action, questionnaireName);
-		} else {
-			return additionalActionsReducer(state, action);
-		}
-	};
-};
-
-
-
-
-
-
+    return (state = {}, action) => {
+        return updateSchemaDataAndValidateReducer(
+            state,
+            action,
+            questionnaireName
+        );
+    };
+}
 
+export function createComposedJSONSchemaReducer(
+    questionnaireName,
+    additionalActionsReducer
+) {
+    return (state = {}, action) => {
+        if (
+            action.type === actionTypes.VALIDATE_DATA ||
+            action.type === actionTypes.VALIDATE_FORM ||
+            action.type === actionTypes.DATA_CHANGED ||
+            action.type === actionTypes.DATA_LOADED
+        ) {
+            return updateSchemaDataAndValidateReducer(
+                state,
+                action,
+                questionnaireName
+            );
+        } else {
+            return additionalActionsReducer(state, action);
+        }
+    };
+}
diff --git a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js
index 6007b878dd..439613d949 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js
@@ -16,8 +16,8 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	DATA_LOADED: null,
-	DATA_CHANGED: null,
-	VALIDATE_FORM: null,
-	VALIDATE_DATA: null
+    DATA_LOADED: null,
+    DATA_CHANGED: null,
+    VALIDATE_FORM: null,
+    VALIDATE_DATA: null
 });
diff --git a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js
index 49f1e3d415..30497704b4 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js
@@ -13,89 +13,135 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './PlainDataReducerConstants.js';
+import { actionTypes } from './PlainDataReducerConstants.js';
 import Validator from 'nfvo-utils/Validator.js';
 import forOwn from 'lodash/forOwn.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 function updateDataAndValidateReducer(state = {}, action) {
-	let genericFieldInfoCopy;
-	switch (action.type) {
-		case actionTypes.DATA_CHANGED:
-			let changed = action.deltaData;
-			if (!action.formName || (state.formName !== action.formName)) {return {...state};}
-			genericFieldInfoCopy = {...state.genericFieldInfo};
-			forOwn(changed,(value, key) => {
-				if (state.genericFieldInfo[key]) {
-					let result = Validator.validate(key, value, state.genericFieldInfo[key].validations, state, action.customValidations);
-					genericFieldInfoCopy[key] = {...genericFieldInfoCopy[key], isValid: result.isValid, errorText: result.errorText};
-				}
-			});
-			return {
-				...state,
-				formReady: null,
-				data: {
-					...state.data,
-					...action.deltaData
-				},
-				genericFieldInfo: genericFieldInfoCopy
-			};
-		case actionTypes.VALIDATE_FORM:
-			if (!action.formName || (state.formName !== action.formName)) {return {...state};}
-			genericFieldInfoCopy = {...state.genericFieldInfo};
-			let formReady = true;
-			forOwn(state.genericFieldInfo,(value, key) => {
-				let val = state.data && state.data[key] ? state.data[key] : '';
-				let result = Validator.validate(key, val, state.genericFieldInfo[key].validations, state, {});
-				if(val.choice !== undefined) {
-					result = Validator.validate(key, val.choice, state.genericFieldInfo[key].validations, state, {});
-				}
-				if(val.choice !== undefined && val.choice === optionInputOther.OTHER) {
-					result = Validator.validate(key, val.other, state.genericFieldInfo[key].validations, state, {});
-				}
-				genericFieldInfoCopy[key] = {...genericFieldInfoCopy[key], isValid: result.isValid, errorText: result.errorText};
-				if (!result.isValid) {
-					formReady = false;
-				}
-			});
-			return {
-				...state,
-				formReady,
-				genericFieldInfo: genericFieldInfoCopy
-			};
-		case actionTypes.VALIDATE_DATA:
-			let specificFields = action.data;
-			if (!action.formName || (state.formName !== action.formName)) {return {...state};}
-			genericFieldInfoCopy = {...state.genericFieldInfo};
-			forOwn(specificFields,(value, key) => {
-				let result = Validator.validate(key, value, state.genericFieldInfo[key].validations, state, action.customValidations);
-				genericFieldInfoCopy[key] = {...genericFieldInfoCopy[key], isValid: result.isValid, errorText: result.errorText};
-			});
-			return {
-				...state,
-				formReady: null,
-				genericFieldInfo: genericFieldInfoCopy
-			};
-		default:
-			return state;
-	}
-};
+    let genericFieldInfoCopy;
+    switch (action.type) {
+        case actionTypes.DATA_CHANGED:
+            let changed = action.deltaData;
+            if (!action.formName || state.formName !== action.formName) {
+                return { ...state };
+            }
+            genericFieldInfoCopy = { ...state.genericFieldInfo };
+            forOwn(changed, (value, key) => {
+                if (state.genericFieldInfo[key]) {
+                    let result = Validator.validate(
+                        key,
+                        value,
+                        state.genericFieldInfo[key].validations,
+                        state,
+                        action.customValidations
+                    );
+                    genericFieldInfoCopy[key] = {
+                        ...genericFieldInfoCopy[key],
+                        isValid: result.isValid,
+                        errorText: result.errorText
+                    };
+                }
+            });
+            return {
+                ...state,
+                formReady: null,
+                data: {
+                    ...state.data,
+                    ...action.deltaData
+                },
+                genericFieldInfo: genericFieldInfoCopy
+            };
+        case actionTypes.VALIDATE_FORM:
+            if (!action.formName || state.formName !== action.formName) {
+                return { ...state };
+            }
+            genericFieldInfoCopy = { ...state.genericFieldInfo };
+            let formReady = true;
+            forOwn(state.genericFieldInfo, (value, key) => {
+                let val = state.data && state.data[key] ? state.data[key] : '';
+                let result = Validator.validate(
+                    key,
+                    val,
+                    state.genericFieldInfo[key].validations,
+                    state,
+                    {}
+                );
+                if (val.choice !== undefined) {
+                    result = Validator.validate(
+                        key,
+                        val.choice,
+                        state.genericFieldInfo[key].validations,
+                        state,
+                        {}
+                    );
+                }
+                if (
+                    val.choice !== undefined &&
+                    val.choice === optionInputOther.OTHER
+                ) {
+                    result = Validator.validate(
+                        key,
+                        val.other,
+                        state.genericFieldInfo[key].validations,
+                        state,
+                        {}
+                    );
+                }
+                genericFieldInfoCopy[key] = {
+                    ...genericFieldInfoCopy[key],
+                    isValid: result.isValid,
+                    errorText: result.errorText
+                };
+                if (!result.isValid) {
+                    formReady = false;
+                }
+            });
+            return {
+                ...state,
+                formReady,
+                genericFieldInfo: genericFieldInfoCopy
+            };
+        case actionTypes.VALIDATE_DATA:
+            let specificFields = action.data;
+            if (!action.formName || state.formName !== action.formName) {
+                return { ...state };
+            }
+            genericFieldInfoCopy = { ...state.genericFieldInfo };
+            forOwn(specificFields, (value, key) => {
+                let result = Validator.validate(
+                    key,
+                    value,
+                    state.genericFieldInfo[key].validations,
+                    state,
+                    action.customValidations
+                );
+                genericFieldInfoCopy[key] = {
+                    ...genericFieldInfoCopy[key],
+                    isValid: result.isValid,
+                    errorText: result.errorText
+                };
+            });
+            return {
+                ...state,
+                formReady: null,
+                genericFieldInfo: genericFieldInfoCopy
+            };
+        default:
+            return state;
+    }
+}
 
 export function createPlainDataReducer(loadReducer) {
-	return (state = {}, action) => {
-		if(action.type === actionTypes.VALIDATE_DATA ||
-			action.type === actionTypes.VALIDATE_FORM ||
-			action.type === actionTypes.DATA_CHANGED
-		) {
-			return updateDataAndValidateReducer(state, action);
-		} else {
-			return loadReducer(state, action);
-		}
-	};
-};
-
-
-
-
-
-
+    return (state = {}, action) => {
+        if (
+            action.type === actionTypes.VALIDATE_DATA ||
+            action.type === actionTypes.VALIDATE_FORM ||
+            action.type === actionTypes.DATA_CHANGED
+        ) {
+            return updateDataAndValidateReducer(state, action);
+        } else {
+            return loadReducer(state, action);
+        }
+    };
+}
diff --git a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js
index 135361dd20..8c38483267 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js
@@ -16,7 +16,7 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	DATA_CHANGED: null,
-	VALIDATE_FORM: null,
-	VALIDATE_DATA: null
+    DATA_CHANGED: null,
+    VALIDATE_FORM: null,
+    VALIDATE_DATA: null
 });
diff --git a/openecomp-ui/src/sdc-app/config/Configuration.js b/openecomp-ui/src/sdc-app/config/Configuration.js
index 8444e3fa61..b450d47352 100644
--- a/openecomp-ui/src/sdc-app/config/Configuration.js
+++ b/openecomp-ui/src/sdc-app/config/Configuration.js
@@ -16,47 +16,55 @@
 import configData from './config.json';
 
 class Configuration {
+    get(key) {
+        return configData[key];
+    }
 
-	get(key) {
-		return configData[key];
-	}
+    set(key, value) {
+        var prev = configData[key];
+        configData[key] = value;
+        return prev;
+    }
 
-	set(key, value) {
-		var prev = configData[key];
-		configData[key] = value;
-		return prev;
-	}
+    setCatalogApiRoot(CatalogApiRoot) {
+        let restCatalogPrefix = CatalogApiRoot,
+            restPrefix = CatalogApiRoot.replace(
+                /\/feProxy\b[^:]*$/,
+                '/feProxy/onboarding-api'
+            );
 
-	setCatalogApiRoot(CatalogApiRoot) {
-		let restCatalogPrefix = CatalogApiRoot,
-			restPrefix = CatalogApiRoot.replace(/\/feProxy\b[^:]*$/, '/feProxy/onboarding-api');
+        this.set('restPrefix', restPrefix);
+        this.set('restCatalogPrefix', restCatalogPrefix);
+    }
 
-		this.set('restPrefix', restPrefix);
-		this.set('restCatalogPrefix', restCatalogPrefix);
-	}
+    setCatalogApiHeaders(CatalogApiHeaders) {
+        this.set('CatalogApiHeaders', CatalogApiHeaders);
 
-	setCatalogApiHeaders(CatalogApiHeaders) {
-		this.set('CatalogApiHeaders', CatalogApiHeaders);
-
-		let {userId: {value: UserID} = {}} = CatalogApiHeaders;
-		this.set('UserID', UserID);
-	}
+        let { userId: { value: UserID } = {} } = CatalogApiHeaders;
+        this.set('UserID', UserID);
+    }
 }
 
 const configuration = new Configuration();
 
 (function setDefaultRestPrefixes(configuration) {
-	configuration.set('restPrefix', configuration.get('defaultRestPrefix'));
-	configuration.set('restCatalogPrefix', configuration.get('defaultRestCatalogPrefix'));
-	configuration.set('appContextPath', configuration.get('appContextPath'));
+    configuration.set('restPrefix', configuration.get('defaultRestPrefix'));
+    configuration.set(
+        'restCatalogPrefix',
+        configuration.get('defaultRestCatalogPrefix')
+    );
+    configuration.set('appContextPath', configuration.get('appContextPath'));
 })(configuration);
 (function setDefaultWebsocketConfig(configuration) {
-	let websocketPort = configuration.get('defaultWebsocketPort');
-	if (DEBUG) {
-		websocketPort = configuration.get('defaultDebugWebsocketPort');
-	}
-	configuration.set('websocketPort', websocketPort);
-	configuration.set('websocketPath', configuration.get('defaultWebsocketPath'));
+    let websocketPort = configuration.get('defaultWebsocketPort');
+    if (DEBUG) {
+        websocketPort = configuration.get('defaultDebugWebsocketPort');
+    }
+    configuration.set('websocketPort', websocketPort);
+    configuration.set(
+        'websocketPath',
+        configuration.get('defaultWebsocketPath')
+    );
 })(configuration);
 
 export default configuration;
diff --git a/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js b/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js
index 5bb911d090..5ab5480167 100644
--- a/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js
@@ -15,26 +15,30 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './FeaturesConstants.js';
-
+import { actionTypes } from './FeaturesConstants.js';
 
 function baseUrl() {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/togglz`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/togglz`;
 }
 
 function fetchList() {
-	return RestAPIUtil.fetch(baseUrl());
+    return RestAPIUtil.fetch(baseUrl());
 }
 
 export default {
-	getFeaturesList(dispatch) {
-		return fetchList().then(response => {
-			dispatch({
-				type: actionTypes.FEATURES_LIST_LOADED,
-				features: response.features
-			});
-		}).catch(() => console.error('An exception occured while trying to fetch the toggleZ features.') );
-	}
+    getFeaturesList(dispatch) {
+        return fetchList()
+            .then(response => {
+                dispatch({
+                    type: actionTypes.FEATURES_LIST_LOADED,
+                    features: response.features
+                });
+            })
+            .catch(() =>
+                console.error(
+                    'An exception occured while trying to fetch the toggleZ features.'
+                )
+            );
+    }
 };
-
diff --git a/openecomp-ui/src/sdc-app/features/FeaturesConstants.js b/openecomp-ui/src/sdc-app/features/FeaturesConstants.js
index f962d243d5..314e86ad3d 100644
--- a/openecomp-ui/src/sdc-app/features/FeaturesConstants.js
+++ b/openecomp-ui/src/sdc-app/features/FeaturesConstants.js
@@ -16,10 +16,10 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	FEATURES_LIST_LOADED: null
+    FEATURES_LIST_LOADED: null
 });
 
 export const featureToggleNames = {
-	ARCHIVE_ITEM: 'ARCHIVE_ITEM',
-	FILTER: 'FILTER'
-};
\ No newline at end of file
+    ARCHIVE_ITEM: 'ARCHIVE_ITEM',
+    FILTER: 'FILTER'
+};
diff --git a/openecomp-ui/src/sdc-app/features/FeaturesReducer.js b/openecomp-ui/src/sdc-app/features/FeaturesReducer.js
index d7c8624d54..064afe992d 100644
--- a/openecomp-ui/src/sdc-app/features/FeaturesReducer.js
+++ b/openecomp-ui/src/sdc-app/features/FeaturesReducer.js
@@ -14,13 +14,13 @@
  * permissions and limitations under the License.
  */
 
- import {actionTypes} from './FeaturesConstants.js';
+import { actionTypes } from './FeaturesConstants.js';
 
- export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FEATURES_LIST_LOADED:
-			return [...action.features];
-		default:
-			return state;
-	}            
- };
\ No newline at end of file
+export default (state = [], action) => {
+    switch (action.type) {
+        case actionTypes.FEATURES_LIST_LOADED:
+            return [...action.features];
+        default:
+            return state;
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/features/featureToggle.js b/openecomp-ui/src/sdc-app/features/featureToggle.js
index 5e0df1448f..d33c76e523 100644
--- a/openecomp-ui/src/sdc-app/features/featureToggle.js
+++ b/openecomp-ui/src/sdc-app/features/featureToggle.js
@@ -14,47 +14,48 @@
  * permissions and limitations under the License.
  */
 
-
- /**
+/**
  * Feature toggling decorator
- * 	usage: 
- * 
+ * 	usage:
+ *
  * @featureToggle('FeatureName')
  * class Example extends React.Component {
  * 		render() {
  * 			return (<div>test feature</div>);
  * 		}
  * }
- * 
- *  OR 
- * 
+ *
+ *  OR
+ *
  * const TestFeature = () => (<div>test feature</div>)
  * export default featureToggle('FeatureName')(TestFeature)
- * 
+ *
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
+
+export const FeatureComponent = props => {
+    const { features = [], featureName, InnerComponent, ...otherProps } = props;
+    const AComp = InnerComponent.AComp ? InnerComponent.AComp : InnerComponent;
 
-export const FeatureComponent = (props) => {
-	const {features = [], featureName, InnerComponent, ...otherProps} = props;
-	const AComp = InnerComponent.AComp ? InnerComponent.AComp : InnerComponent;
-	
-	return !!features.find(el => el.name === featureName && el.active) ?
-		 <AComp {...otherProps}/> 
-		 : InnerComponent.BComp ? <InnerComponent.BComp {...otherProps}/> : null;
+    return !!features.find(el => el.name === featureName && el.active) ? (
+        <AComp {...otherProps} />
+    ) : InnerComponent.BComp ? (
+        <InnerComponent.BComp {...otherProps} />
+    ) : null;
 };
 
 FeatureComponent.propTypes = {
-	features: PropTypes.array,
-	featureName: PropTypes.string.isRequired
+    features: PropTypes.array,
+    featureName: PropTypes.string.isRequired
 };
 
-
 export default function featureToggle(featureName) {
-	return (InnerComponent) => {		
-		return connect(({features}) => {return {features, featureName, InnerComponent};})(FeatureComponent);
-	};
+    return InnerComponent => {
+        return connect(({ features }) => {
+            return { features, featureName, InnerComponent };
+        })(FeatureComponent);
+    };
 }
-
diff --git a/openecomp-ui/src/sdc-app/features/restToggle.js b/openecomp-ui/src/sdc-app/features/restToggle.js
index c90521dd7e..505dace4e7 100644
--- a/openecomp-ui/src/sdc-app/features/restToggle.js
+++ b/openecomp-ui/src/sdc-app/features/restToggle.js
@@ -16,9 +16,9 @@
 
 import store from 'sdc-app/AppStore.js';
 
-
-export default ({featureName, restFunction, mockResult}) => {
-	const {features} = store.getState();
-	return !!features.find(el => el.name === featureName && el.active) ? 
-		restFunction() : Promise.resolve(mockResult);
-};
\ No newline at end of file
+export default ({ featureName, restFunction, mockResult }) => {
+    const { features } = store.getState();
+    return !!features.find(el => el.name === featureName && el.active)
+        ? restFunction()
+        : Promise.resolve(mockResult);
+};
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsActions.js b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
index 61a419b314..9fb65f37d4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsActions.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
@@ -15,171 +15,204 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes, enums} from './FlowsConstants.js';
+import { actionTypes, enums } from './FlowsConstants.js';
 import SequenceDiagramModelHelper from './SequenceDiagramModelHelper.js';
 
-
 function baseUrl(serviceId, artifactId = '') {
-	const restCatalogPrefix = Configuration.get('restCatalogPrefix');
-	return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
+    const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+    return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
 }
 
 function encodeDataToBase64(dataAsString) {
-	return window.btoa(dataAsString);
+    return window.btoa(dataAsString);
 }
 
 function decodeDataToBase64(encodedData) {
-	return window.atob(encodedData);
+    return window.atob(encodedData);
 }
 
 function encodeContent(flowData) {
-	let data = {
-		VERSION: {
-			major: 1,
-			minor: 0
-		},
-		description: flowData.description,
-		sequenceDiagramModel: flowData.sequenceDiagramModel
-	};
-
-	return encodeDataToBase64(JSON.stringify(data));
+    let data = {
+        VERSION: {
+            major: 1,
+            minor: 0
+        },
+        description: flowData.description,
+        sequenceDiagramModel: flowData.sequenceDiagramModel
+    };
+
+    return encodeDataToBase64(JSON.stringify(data));
 }
 
 function decodeContent(base64Contents) {
-	let description, sequenceDiagramModel;
-	let payload = JSON.parse(decodeDataToBase64(base64Contents));
-
-	if (payload.VERSION === undefined) {
-		description = payload.description || 'Please, provide description...';
-		sequenceDiagramModel = payload.data || payload;
-		sequenceDiagramModel = sequenceDiagramModel.model || sequenceDiagramModel;
-
-	}
-	else if (payload.VERSION.major === 1) {
-		description = payload.description;
-		sequenceDiagramModel = payload.sequenceDiagramModel;
-	}
-
-	return {
-		description,
-		sequenceDiagramModel
-	};
+    let description, sequenceDiagramModel;
+    let payload = JSON.parse(decodeDataToBase64(base64Contents));
+
+    if (payload.VERSION === undefined) {
+        description = payload.description || 'Please, provide description...';
+        sequenceDiagramModel = payload.data || payload;
+        sequenceDiagramModel =
+            sequenceDiagramModel.model || sequenceDiagramModel;
+    } else if (payload.VERSION.major === 1) {
+        description = payload.description;
+        sequenceDiagramModel = payload.sequenceDiagramModel;
+    }
+
+    return {
+        description,
+        sequenceDiagramModel
+    };
 }
 
 function createOrUpdate(flowData) {
-	let createOrUpdateRequest = {
-		payloadData: encodeContent(flowData),
-		artifactLabel: flowData.artifactLabel || flowData.artifactName,
-		artifactName: flowData.artifactName,
-		artifactType: flowData.artifactType,
-		artifactGroupType: enums.INFORMATIONAL,
-		description: flowData.description
-	};
-
-	return RestAPIUtil.post(
-		baseUrl(flowData.serviceID, flowData.uniqueId),
-		createOrUpdateRequest,
-		{md5: true}
-	);
+    let createOrUpdateRequest = {
+        payloadData: encodeContent(flowData),
+        artifactLabel: flowData.artifactLabel || flowData.artifactName,
+        artifactName: flowData.artifactName,
+        artifactType: flowData.artifactType,
+        artifactGroupType: enums.INFORMATIONAL,
+        description: flowData.description
+    };
+
+    return RestAPIUtil.post(
+        baseUrl(flowData.serviceID, flowData.uniqueId),
+        createOrUpdateRequest,
+        { md5: true }
+    );
 }
 
 const FlowsActions = Object.freeze({
-
-	fetchFlowArtifacts(dispatch, {artifacts, diagramType, participants, serviceID, readonly}) {
-		let results = [];
-		if (!Object.keys(artifacts).length) {
-			dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly});
-			if (!readonly) {
-				FlowsActions.openFlowDetailsEditor(dispatch);
-			}
-		}
-		else {
-			Object.keys(artifacts).forEach(artifact => results.push({
-				artifactType: diagramType,
-				participants,
-				serviceID,
-				...artifacts[artifact]
-			}));
-			dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly});
-		}
-	},
-
-	fetchArtifact(dispatch, {flow}){
-		let {serviceID, uniqueId, participants} = flow;
-		return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(response => {
-
-			let {artifactName, base64Contents} = response;
-			let {sequenceDiagramModel, ...other} = decodeContent(base64Contents);
-
-			if (!sequenceDiagramModel) {
-				sequenceDiagramModel = SequenceDiagramModelHelper.createModel({
-					id: uniqueId,
-					name: artifactName,
-					lifelines: participants
-				});
-			}
-			else {
-				sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(sequenceDiagramModel, {
-					name: artifactName,
-					lifelines: participants
-				});
-			}
-
-			flow = {
-				...flow,
-				...other,
-				uniqueId,
-				artifactName,
-				sequenceDiagramModel
-			};
-
-			dispatch({type: actionTypes.ARTIFACT_LOADED, flow});
-			FlowsActions.openFlowDiagramEditor(dispatch, {flow});
-		});
-	},
-
-	createOrUpdateFlow(dispatch, {flow}, isNew) {
-		if (!isNew && flow.sequenceDiagramModel) {
-			flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(flow.sequenceDiagramModel, {
-				name: flow.artifactName
-			});
-		}
-		return createOrUpdate(flow).then(response => {
-			let {uniqueId, artifactLabel} = response;
-			flow = {...flow, uniqueId, artifactLabel};
-			if (isNew) {
-				flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel({id: uniqueId, name: flow.artifactName});
-			}
-			dispatch({type: actionTypes.ADD_OR_UPDATE_FLOW, flow});
-		});
-	},
-
-	deleteFlow(dispatch, {flow}) {
-		return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(() => dispatch({
-			type: actionTypes.DELETE_FLOW,
-			flow
-		}));
-	},
-
-	openFlowDetailsEditor(dispatch, flow) {
-		dispatch({type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow});
-	},
-
-	closeFlowDetailsEditor(dispatch) {
-		dispatch({type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR});
-	},
-
-	openFlowDiagramEditor(dispatch, {flow}) {
-		dispatch({type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow});
-	},
-
-	closeFlowDiagramEditor(dispatch) {
-		dispatch({type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR});
-	},
-
-	reset(dispatch) {
-		dispatch({type: actionTypes.RESET});
-	}
+    fetchFlowArtifacts(
+        dispatch,
+        { artifacts, diagramType, participants, serviceID, readonly }
+    ) {
+        let results = [];
+        if (!Object.keys(artifacts).length) {
+            dispatch({
+                type: actionTypes.FLOW_LIST_LOADED,
+                results,
+                participants,
+                serviceID,
+                diagramType,
+                readonly
+            });
+            if (!readonly) {
+                FlowsActions.openFlowDetailsEditor(dispatch);
+            }
+        } else {
+            Object.keys(artifacts).forEach(artifact =>
+                results.push({
+                    artifactType: diagramType,
+                    participants,
+                    serviceID,
+                    ...artifacts[artifact]
+                })
+            );
+            dispatch({
+                type: actionTypes.FLOW_LIST_LOADED,
+                results,
+                participants,
+                serviceID,
+                diagramType,
+                readonly
+            });
+        }
+    },
+
+    fetchArtifact(dispatch, { flow }) {
+        let { serviceID, uniqueId, participants } = flow;
+        return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(
+            response => {
+                let { artifactName, base64Contents } = response;
+                let { sequenceDiagramModel, ...other } = decodeContent(
+                    base64Contents
+                );
+
+                if (!sequenceDiagramModel) {
+                    sequenceDiagramModel = SequenceDiagramModelHelper.createModel(
+                        {
+                            id: uniqueId,
+                            name: artifactName,
+                            lifelines: participants
+                        }
+                    );
+                } else {
+                    sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(
+                        sequenceDiagramModel,
+                        {
+                            name: artifactName,
+                            lifelines: participants
+                        }
+                    );
+                }
+
+                flow = {
+                    ...flow,
+                    ...other,
+                    uniqueId,
+                    artifactName,
+                    sequenceDiagramModel
+                };
+
+                dispatch({ type: actionTypes.ARTIFACT_LOADED, flow });
+                FlowsActions.openFlowDiagramEditor(dispatch, { flow });
+            }
+        );
+    },
+
+    createOrUpdateFlow(dispatch, { flow }, isNew) {
+        if (!isNew && flow.sequenceDiagramModel) {
+            flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(
+                flow.sequenceDiagramModel,
+                {
+                    name: flow.artifactName
+                }
+            );
+        }
+        return createOrUpdate(flow).then(response => {
+            let { uniqueId, artifactLabel } = response;
+            flow = { ...flow, uniqueId, artifactLabel };
+            if (isNew) {
+                flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel(
+                    {
+                        id: uniqueId,
+                        name: flow.artifactName
+                    }
+                );
+            }
+            dispatch({ type: actionTypes.ADD_OR_UPDATE_FLOW, flow });
+        });
+    },
+
+    deleteFlow(dispatch, { flow }) {
+        return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(
+            () =>
+                dispatch({
+                    type: actionTypes.DELETE_FLOW,
+                    flow
+                })
+        );
+    },
+
+    openFlowDetailsEditor(dispatch, flow) {
+        dispatch({ type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow });
+    },
+
+    closeFlowDetailsEditor(dispatch) {
+        dispatch({ type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR });
+    },
+
+    openFlowDiagramEditor(dispatch, { flow }) {
+        dispatch({ type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow });
+    },
+
+    closeFlowDiagramEditor(dispatch) {
+        dispatch({ type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR });
+    },
+
+    reset(dispatch) {
+        dispatch({ type: actionTypes.RESET });
+    }
 });
 
 export default FlowsActions;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
index 2b3d86bae2..4dcd840ff3 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
@@ -16,30 +16,28 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
+    OPEN_FLOW_DETAILS_EDITOR: null,
+    CLOSE_FLOW_DETAILS_EDITOR: null,
 
-	OPEN_FLOW_DETAILS_EDITOR: null,
-	CLOSE_FLOW_DETAILS_EDITOR: null,
+    OPEN_FLOW_DIAGRAM_EDITOR: null,
+    CLOSE_FLOW_DIAGRAM_EDITOR: null,
 
-	OPEN_FLOW_DIAGRAM_EDITOR: null,
-	CLOSE_FLOW_DIAGRAM_EDITOR: null,
+    FLOW_LIST_LOADED: null,
+    ADD_OR_UPDATE_FLOW: null,
+    ARTIFACT_LOADED: null,
+    DELETE_FLOW: null,
 
-	FLOW_LIST_LOADED: null,
-	ADD_OR_UPDATE_FLOW: null,
-	ARTIFACT_LOADED: null,
-	DELETE_FLOW: null,
-
-	CURRENT_FLOW_DATA_CHANGED: null,
-
-	RESET: null
+    CURRENT_FLOW_DATA_CHANGED: null,
 
+    RESET: null
 });
 
 export const enums = {
-	WORKFLOW: 'WORKFLOW',
-	NETWORK: 'NETWORK_CALL_FLOW',
-	INFORMATIONAL: 'INFORMATIONAL',
-	INSTANTIATION_FLOWS: 'instantiationflows',
-	MESSAGE_FLOWS: 'messageflows'
+    WORKFLOW: 'WORKFLOW',
+    NETWORK: 'NETWORK_CALL_FLOW',
+    INFORMATIONAL: 'INFORMATIONAL',
+    INSTANTIATION_FLOWS: 'instantiationflows',
+    MESSAGE_FLOWS: 'messageflows'
 };
 
 export const FLOWS_EDITOR_FORM = 'FLOWS_FORM';
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
index f9585f985f..b45a9fc54e 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
@@ -13,44 +13,57 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import FlowsEditorModalView from './FlowsEditorModalView.jsx';
 import FlowsActions from './FlowsActions.js';
-import {FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { FLOWS_EDITOR_FORM } from './FlowsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-export const mapStateToProps = ({flows}) => {
+export const mapStateToProps = ({ flows }) => {
+    let {
+        data = { artifactName: '', description: '' },
+        serviceID,
+        diagramType,
+        flowParticipants,
+        genericFieldInfo,
+        formReady
+    } = flows;
+    if (!data.serviceID) {
+        data.serviceID = serviceID;
+    }
+    if (!data.artifactType) {
+        data.artifactType = diagramType;
+    }
+    if (!data.participants) {
+        data.participants = flowParticipants;
+    }
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let {data = {artifactName: '', description: ''}, serviceID, diagramType, flowParticipants, genericFieldInfo, formReady} = flows;
-	if(!data.serviceID){
-		data.serviceID = serviceID;
-	}
-	if(!data.artifactType){
-		data.artifactType = diagramType;
-	}
-	if(!data.participants){
-		data.participants = flowParticipants;
-	}
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
-	return {
-		currentFlow: data,
-		genericFieldInfo,
-		isFormValid,
-		formReady
-	};
+    return {
+        currentFlow: data,
+        genericFieldInfo,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {isNewArtifact}) => {
-	return {
-		onSubmit: flow => {
-			FlowsActions.closeFlowDetailsEditor(dispatch);
-			FlowsActions.createOrUpdateFlow(dispatch, {flow}, isNewArtifact);
-		},
-		onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
-		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: FLOWS_EDITOR_FORM}),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
-	};
+const mapActionsToProps = (dispatch, { isNewArtifact }) => {
+    return {
+        onSubmit: flow => {
+            FlowsActions.closeFlowDetailsEditor(dispatch);
+            FlowsActions.createOrUpdateFlow(dispatch, { flow }, isNewArtifact);
+        },
+        onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: FLOWS_EDITOR_FORM
+            }),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(FlowsEditorModalView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    FlowsEditorModalView
+);
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
index 1250a0b58e..8c805cca9c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
@@ -13,52 +13,73 @@
  * 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 i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 
 class FlowsEditorModalView extends Component {
+    render() {
+        let {
+            onCancel,
+            onDataChanged,
+            currentFlow,
+            genericFieldInfo,
+            formReady,
+            isFormValid,
+            onValidateForm
+        } = this.props;
+        let { artifactName, description } = currentFlow;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        onSubmit={() => this.onSaveClicked()}
+                        onReset={onCancel}
+                        formReady={formReady}
+                        isValid={isFormValid}
+                        onValidateForm={() => onValidateForm()}>
+                        <Input
+                            type="text"
+                            name="name"
+                            label={i18n('Name')}
+                            isValid={genericFieldInfo['artifactName'].isValid}
+                            errorText={
+                                genericFieldInfo['artifactName'].errorText
+                            }
+                            isRequired={true}
+                            value={artifactName}
+                            onChange={artifactName =>
+                                onDataChanged({ artifactName })
+                            }
+                        />
+                        <Input
+                            type="textarea"
+                            name="description"
+                            label={i18n('Description')}
+                            isValid={genericFieldInfo['description'].isValid}
+                            errorText={
+                                genericFieldInfo['description'].errorText
+                            }
+                            isRequired={true}
+                            value={description}
+                            overlayPos="bottom"
+                            onChange={description =>
+                                onDataChanged({ description })
+                            }
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	render() {
-		let {onCancel, onDataChanged, currentFlow, genericFieldInfo, formReady, isFormValid, onValidateForm} = this.props;
-		let {artifactName, description} = currentFlow;
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					onSubmit={() => this.onSaveClicked()}
-					onReset={onCancel} formReady={formReady} isValid={isFormValid} onValidateForm={() => onValidateForm()} >
-				<Input
-					type='text'
-					name='name'
-					label={i18n('Name')}
-					isValid={genericFieldInfo['artifactName'].isValid}
-					errorText={genericFieldInfo['artifactName'].errorText}
-					isRequired={true}
-					value={artifactName}
-					onChange={artifactName => onDataChanged({artifactName})}/>
-				<Input
-					type='textarea'
-					name='description'
-					label={i18n('Description')}
-					isValid={genericFieldInfo['description'].isValid}
-					errorText={genericFieldInfo['description'].errorText}
-					isRequired={true}
-					value={description}
-					overlayPos='bottom'
-					onChange={description => onDataChanged({description})}/>
-			</Form> }
-			</div>
-		);
-	}
-
-	onSaveClicked() {
-		let {currentFlow, onSubmit} = this.props;
-		if (onSubmit) {
-			onSubmit(currentFlow);
-		}
-	}
-
+    onSaveClicked() {
+        let { currentFlow, onSubmit } = this.props;
+        if (onSubmit) {
+            onSubmit(currentFlow);
+        }
+    }
 }
 
 export default FlowsEditorModalView;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
index 642c578eb7..2718c19aaa 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
@@ -13,40 +13,50 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import FlowsActions from './FlowsActions.js';
 import FlowsListEditorView from './FlowsListEditorView.jsx';
 
-export const mapStateToProps = ({flows}) => {
-	let {flowList = [], isDisplayModal, isModalInEditMode, shouldShowWorkflowsEditor = true, data = undefined, readonly} = flows;
-	let isCheckedOut = !readonly;
-	if(data && data.readonly){
-		isCheckedOut = !data.readonly;
-	}
+export const mapStateToProps = ({ flows }) => {
+    let {
+        flowList = [],
+        isDisplayModal,
+        isModalInEditMode,
+        shouldShowWorkflowsEditor = true,
+        data = undefined,
+        readonly
+    } = flows;
+    let isCheckedOut = !readonly;
+    if (data && data.readonly) {
+        isCheckedOut = !data.readonly;
+    }
 
-	return {
-		flowList,
-		isDisplayModal,
-		isCheckedOut,
-		isModalInEditMode,
-		shouldShowWorkflowsEditor,
-		currentFlow: data,
-		readonly
-	};
+    return {
+        flowList,
+        isDisplayModal,
+        isCheckedOut,
+        isModalInEditMode,
+        shouldShowWorkflowsEditor,
+        currentFlow: data,
+        readonly
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch),
-		onEditFlowDetailsClick: flow => FlowsActions.openFlowDetailsEditor(dispatch, flow),
-		onEditFlowDiagramClick: flow => FlowsActions.fetchArtifact(dispatch, {flow}),
-		onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, {flow}),
-		onSequenceDiagramSaveClick: flow => {
-			FlowsActions.closeFlowDiagramEditor(dispatch);
-			FlowsActions.createOrUpdateFlow(dispatch, {flow});
-		},
-		onSequenceDiagramCloseClick: () => FlowsActions.closeFlowDiagramEditor(dispatch)
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch),
+        onEditFlowDetailsClick: flow =>
+            FlowsActions.openFlowDetailsEditor(dispatch, flow),
+        onEditFlowDiagramClick: flow =>
+            FlowsActions.fetchArtifact(dispatch, { flow }),
+        onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, { flow }),
+        onSequenceDiagramSaveClick: flow => {
+            FlowsActions.closeFlowDiagramEditor(dispatch);
+            FlowsActions.createOrUpdateFlow(dispatch, { flow });
+        },
+        onSequenceDiagramCloseClick: () =>
+            FlowsActions.closeFlowDiagramEditor(dispatch)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(FlowsListEditorView);
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
index 365b7f1bdf..3b2ff0619c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.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 PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
@@ -25,125 +25,146 @@ import FlowsEditorModal from './FlowsEditorModal.js';
 import SequenceDiagram from './SequenceDiagram.jsx';
 
 class FlowsListEditorView extends Component {
-
-	static propTypes = {
-		flowList: PropTypes.array,
-		currentFlow: PropTypes.object,
-		isDisplayModal: PropTypes.bool,
-		isModalInEditMode: PropTypes.bool,
-		isCheckedOut: PropTypes.bool,
-		shouldShowWorkflowsEditor: PropTypes.bool,
-		readonly: PropTypes.bool,
-
-		onAddWorkflowClick: PropTypes.func,
-		onEditFlowDetailsClick: PropTypes.func,
-		onEditFlowDiagramClick: PropTypes.func,
-		onDeleteFlowClick: PropTypes.func,
-		onSequenceDiagramSaveClick: PropTypes.func,
-		onSequenceDiagramCloseClick: PropTypes.func
-	};
-
-	state = {
-		localFilter: ''
-	};
-
-	render() {
-		let CurrentView = null;
-		if (this.props.shouldShowWorkflowsEditor) {
-			CurrentView = this.renderWorkflowsEditor();
-		}
-		else {
-			CurrentView = this.renderSequenceDiagramTool();
-		}
-
-		return CurrentView;
-	}
-
-	renderWorkflowsEditor() {
-		let {isDisplayModal, onAddWorkflowClick, isCheckedOut} = this.props;
-		const {localFilter} = this.state;
-
-		return (
-			<div className='workflows license-agreement-list-editor'>
-				<FlowRelatedView display={localFilter}/>
-				<ListEditorView
-					plusButtonTitle={i18n('Add Workflow')}
-					onAdd={onAddWorkflowClick}
-					filterValue={localFilter}
-					onFilter={filter => this.setState({localFilter: filter})}
-					isReadOnlyMode={!isCheckedOut}>
-					{this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))}
-				</ListEditorView>
-
-				{isDisplayModal && this.renderWorkflowEditorModal()}
-
-			</div>
-		);
-	}
-
-	renderWorkflowEditorModal() {
-		let { isDisplayModal, isModalInEditMode} = this.props;
-		return (
-			<Modal show={isDisplayModal} animation={true} className='onborading-modal workflows-editor-modal'>
-				<Modal.Header>
-					<Modal.Title>
-						{`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`}
-					</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-					<FlowsEditorModal isNewArtifact={!isModalInEditMode}/>
-				</Modal.Body>
-			</Modal>
-		);
-	}
-
-	renderSequenceDiagramTool() {
-		let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props;
-		return (
-			<SequenceDiagram
-				onSave={sequenceDiagramModel => onSequenceDiagramSaveClick({...currentFlow, sequenceDiagramModel})}
-				onClose={onSequenceDiagramCloseClick}
-				model={currentFlow.sequenceDiagramModel}/>
-		);
-	}
-
-	filterList() {
-		let {flowList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return flowList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return flowList;
-		}
-	}
-
-	renderWorkflowListItem(flow, isCheckedOut) {
-		let {uniqueId, artifactName, description} = flow;
-		let {onEditFlowDetailsClick, onEditFlowDiagramClick, onDeleteFlowClick} = this.props;
-		return (
-			<ListEditorItemView
-				key={uniqueId}
-				onSelect={() => onEditFlowDetailsClick(flow)}
-				onDelete={() => onDeleteFlowClick(flow)}
-				onEdit={() => onEditFlowDiagramClick(flow)}
-				className='list-editor-item-view'
-				isCheckedOut={isCheckedOut}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='text name'>{artifactName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
-					<div className='text description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
-
+    static propTypes = {
+        flowList: PropTypes.array,
+        currentFlow: PropTypes.object,
+        isDisplayModal: PropTypes.bool,
+        isModalInEditMode: PropTypes.bool,
+        isCheckedOut: PropTypes.bool,
+        shouldShowWorkflowsEditor: PropTypes.bool,
+        readonly: PropTypes.bool,
+
+        onAddWorkflowClick: PropTypes.func,
+        onEditFlowDetailsClick: PropTypes.func,
+        onEditFlowDiagramClick: PropTypes.func,
+        onDeleteFlowClick: PropTypes.func,
+        onSequenceDiagramSaveClick: PropTypes.func,
+        onSequenceDiagramCloseClick: PropTypes.func
+    };
+
+    state = {
+        localFilter: ''
+    };
+
+    render() {
+        let CurrentView = null;
+        if (this.props.shouldShowWorkflowsEditor) {
+            CurrentView = this.renderWorkflowsEditor();
+        } else {
+            CurrentView = this.renderSequenceDiagramTool();
+        }
+
+        return CurrentView;
+    }
+
+    renderWorkflowsEditor() {
+        let { isDisplayModal, onAddWorkflowClick, isCheckedOut } = this.props;
+        const { localFilter } = this.state;
+
+        return (
+            <div className="workflows license-agreement-list-editor">
+                <FlowRelatedView display={localFilter} />
+                <ListEditorView
+                    plusButtonTitle={i18n('Add Workflow')}
+                    onAdd={onAddWorkflowClick}
+                    filterValue={localFilter}
+                    onFilter={filter => this.setState({ localFilter: filter })}
+                    isReadOnlyMode={!isCheckedOut}>
+                    {this.filterList().map(flow =>
+                        this.renderWorkflowListItem(flow, isCheckedOut)
+                    )}
+                </ListEditorView>
+
+                {isDisplayModal && this.renderWorkflowEditorModal()}
+            </div>
+        );
+    }
+
+    renderWorkflowEditorModal() {
+        let { isDisplayModal, isModalInEditMode } = this.props;
+        return (
+            <Modal
+                show={isDisplayModal}
+                animation={true}
+                className="onborading-modal workflows-editor-modal">
+                <Modal.Header>
+                    <Modal.Title>
+                        {`${
+                            isModalInEditMode
+                                ? i18n('Edit Workflow')
+                                : i18n('Create New Workflow')
+                        }`}
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <FlowsEditorModal isNewArtifact={!isModalInEditMode} />
+                </Modal.Body>
+            </Modal>
+        );
+    }
+
+    renderSequenceDiagramTool() {
+        let {
+            onSequenceDiagramSaveClick,
+            onSequenceDiagramCloseClick,
+            currentFlow
+        } = this.props;
+        return (
+            <SequenceDiagram
+                onSave={sequenceDiagramModel =>
+                    onSequenceDiagramSaveClick({
+                        ...currentFlow,
+                        sequenceDiagramModel
+                    })
+                }
+                onClose={onSequenceDiagramCloseClick}
+                model={currentFlow.sequenceDiagramModel}
+            />
+        );
+    }
+
+    filterList() {
+        let { flowList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return flowList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return flowList;
+        }
+    }
+
+    renderWorkflowListItem(flow, isCheckedOut) {
+        let { uniqueId, artifactName, description } = flow;
+        let {
+            onEditFlowDetailsClick,
+            onEditFlowDiagramClick,
+            onDeleteFlowClick
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={uniqueId}
+                onSelect={() => onEditFlowDetailsClick(flow)}
+                onDelete={() => onDeleteFlowClick(flow)}
+                onEdit={() => onEditFlowDiagramClick(flow)}
+                className="list-editor-item-view"
+                isCheckedOut={isCheckedOut}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="text name">{artifactName}</div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Description')}</div>
+                    <div className="text description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
 }
 
 export default FlowsListEditorView;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
index 14bf595050..0279824ac4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
@@ -13,87 +13,91 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { actionTypes, FLOWS_EDITOR_FORM } from './FlowsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.FLOW_LIST_LOADED:
-			return {
-				...state,
-				flowList: action.results,
-				flowParticipants: action.participants,
-				serviceID: action.serviceID,
-				diagramType: action.diagramType,
-				readonly: action.readonly
-			};
-		case actionTypes.ADD_OR_UPDATE_FLOW:
-		case actionTypes.ARTIFACT_LOADED:
-			let flowList = state.flowList || [];
-			let index = flowList.findIndex(flow => flow.uniqueId === action.flow.uniqueId);
-			if (index === -1) {
-				index = flowList.length;
-			}
-			let flowToBeUpdated = flowList[index];
-			flowList = [
-				...flowList.slice(0, index),
-				{...flowToBeUpdated, ...action.flow},
-				...flowList.slice(index + 1)
-			];
-			return {
-				...state,
-				flowList,
-				serviceID: action.flow.serviceID,
-				diagramType: action.flow.artifactType || state.diagramType
-			};
-		case actionTypes.DELETE_FLOW:
-			return {
-				...state,
-				flowList: state.flowList.filter(flow => flow.uniqueId !== action.flow.uniqueId)
-			};
-		case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
-			return {
-				...state,
-				formName: FLOWS_EDITOR_FORM,
-				formReady: null,
-				genericFieldInfo: {
-					artifactName : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					description: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				},
-				data: action.flow,
-				isDisplayModal: true,
-				isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
-			};
+    switch (action.type) {
+        case actionTypes.FLOW_LIST_LOADED:
+            return {
+                ...state,
+                flowList: action.results,
+                flowParticipants: action.participants,
+                serviceID: action.serviceID,
+                diagramType: action.diagramType,
+                readonly: action.readonly
+            };
+        case actionTypes.ADD_OR_UPDATE_FLOW:
+        case actionTypes.ARTIFACT_LOADED:
+            let flowList = state.flowList || [];
+            let index = flowList.findIndex(
+                flow => flow.uniqueId === action.flow.uniqueId
+            );
+            if (index === -1) {
+                index = flowList.length;
+            }
+            let flowToBeUpdated = flowList[index];
+            flowList = [
+                ...flowList.slice(0, index),
+                { ...flowToBeUpdated, ...action.flow },
+                ...flowList.slice(index + 1)
+            ];
+            return {
+                ...state,
+                flowList,
+                serviceID: action.flow.serviceID,
+                diagramType: action.flow.artifactType || state.diagramType
+            };
+        case actionTypes.DELETE_FLOW:
+            return {
+                ...state,
+                flowList: state.flowList.filter(
+                    flow => flow.uniqueId !== action.flow.uniqueId
+                )
+            };
+        case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
+            return {
+                ...state,
+                formName: FLOWS_EDITOR_FORM,
+                formReady: null,
+                genericFieldInfo: {
+                    artifactName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                },
+                data: action.flow,
+                isDisplayModal: true,
+                isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
+            };
 
-		case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
-			return {
-				...state,
-				data: undefined,
-				isDisplayModal: false,
-				isModalInEditMode: false
-			};
-		case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
-			return {
-				...state,
-				data: action.flow,
-				shouldShowWorkflowsEditor: false
-			};
-		case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
-			return {
-				...state,
-				data: undefined,
-				shouldShowWorkflowsEditor: true
-			};
-		case actionTypes.RESET:
-			return {};
-	}
+        case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
+            return {
+                ...state,
+                data: undefined,
+                isDisplayModal: false,
+                isModalInEditMode: false
+            };
+        case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
+            return {
+                ...state,
+                data: action.flow,
+                shouldShowWorkflowsEditor: false
+            };
+        case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
+            return {
+                ...state,
+                data: undefined,
+                shouldShowWorkflowsEditor: true
+            };
+        case actionTypes.RESET:
+            return {};
+    }
 
-	return state;
+    return state;
 };
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
index a2a5554203..7d302444e4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
@@ -22,57 +22,66 @@ import FlowsListEditor from './FlowsListEditor.js';
 import FlowsActions from './FlowsActions.js';
 
 class FlowsListEditorPunchOutWrapper extends React.Component {
+    componentDidMount() {
+        let element = ReactDOM.findDOMNode(this);
+        element.addEventListener('click', event => {
+            if (event.target.tagName === 'A') {
+                event.preventDefault();
+            }
+        });
+        ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+            element.addEventListener(eventType, event =>
+                event.stopPropagation()
+            )
+        );
+    }
 
-	componentDidMount() {
-		let element = ReactDOM.findDOMNode(this);
-		element.addEventListener('click', event => {
-			if (event.target.tagName === 'A') {
-				event.preventDefault();
-			}
-		});
-		['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
-			element.addEventListener(eventType, event => event.stopPropagation())
-		);
-	}
-
-	render() {
-		return <FlowsListEditor/>;
-	}
+    render() {
+        return <FlowsListEditor />;
+    }
 }
 
 export default class DiagramPunchOut {
+    render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) {
+        if (!this.isConfigSet) {
+            Configuration.setCatalogApiRoot(apiRoot);
+            Configuration.setCatalogApiHeaders(apiHeaders);
+            this.isConfigSet = true;
+        }
 
-	render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
-
-		if (!this.isConfigSet) {
-			Configuration.setCatalogApiRoot(apiRoot);
-			Configuration.setCatalogApiHeaders(apiHeaders);
-			this.isConfigSet = true;
-		}
-
-		this.onEvent = onEvent;
-		this.handleData(data);
+        this.onEvent = onEvent;
+        this.handleData(data);
 
-		if (!this.rendered) {
-			ReactDOM.render(<Application><div className='dox-ui'><FlowsListEditorPunchOutWrapper/></div></Application>, element);
-			this.rendered = true;
-		}
-	}
+        if (!this.rendered) {
+            ReactDOM.render(
+                <Application>
+                    <div className="dox-ui">
+                        <FlowsListEditorPunchOutWrapper />
+                    </div>
+                </Application>,
+                element
+            );
+            this.rendered = true;
+        }
+    }
 
-	unmount(element) {
-		let dispatch = action => store.dispatch(action);
-		ReactDOM.unmountComponentAtNode(element);
-		FlowsActions.reset(dispatch);
-	}
+    unmount(element) {
+        let dispatch = action => store.dispatch(action);
+        ReactDOM.unmountComponentAtNode(element);
+        FlowsActions.reset(dispatch);
+    }
 
-	handleData(data) {
-		let {serviceID, diagramType} = data;
-		let dispatch = action => store.dispatch(action);
+    handleData(data) {
+        let { serviceID, diagramType } = data;
+        let dispatch = action => store.dispatch(action);
 
-		if (serviceID !== this.prevServiceID || diagramType !== this.prevDiagramType) {
-			this.prevServiceID = serviceID;
-			this.prevDiagramType = diagramType;
-			FlowsActions.fetchFlowArtifacts(dispatch, {...data});
-		}
-	}
+        if (
+            serviceID !== this.prevServiceID ||
+            diagramType !== this.prevDiagramType
+        ) {
+            this.prevServiceID = serviceID;
+            this.prevDiagramType = diagramType;
+            FlowsActions.fetchFlowArtifacts(dispatch, { ...data });
+        }
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
index 54043498f0..c037f3eefd 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
@@ -15,8 +15,8 @@
  */
 
 import flowListReducer from './FlowsListReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
 
 export default {
-	flows: createPlainDataReducer(flowListReducer)
+    flows: createPlainDataReducer(flowListReducer)
 };
diff --git a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
index d0a5bf3251..8a634915ac 100644
--- a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
+++ b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
@@ -13,27 +13,31 @@
  * 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 md5 from 'md5';
 
 class ImportantLogic extends Component {
+    state = {
+        whatToDisplay: false
+    };
 
-	state = {
-		whatToDisplay: false
-	};
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            whatToDisplay:
+                md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'
+        });
+    }
 
-	componentWillReceiveProps(nextProps) {
-		this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'});
-	}
+    render() {
+        if (this.state.whatToDisplay) {
+            setTimeout(() => this.setState({ whatToDisplay: false }), 5000);
+        }
 
-	render() {
-		if (this.state.whatToDisplay) {
-			setTimeout(() => this.setState({whatToDisplay: false}), 5000);
-		}
-
-		return (
-			<div>
-				<style>{'\.easter-wrapper {\
+        return (
+            <div>
+                <style>
+                    {
+                        '.easter-wrapper {\
 					position: fixed;\
 					width: 70px;\
 					height: 70px;\
@@ -96,16 +100,20 @@ class ImportantLogic extends Component {
 					@keyframes yo-yo {\
 					from { transform: rotate(-0deg); top: 0 }\
 					to { transform: rotate(-360deg); top:120px }\
-				}'}</style>
-				<div
-					className='easter-wrapper'
-					style={{display: this.state.whatToDisplay ? 'block' : 'none'}}>
-					<span className='string'>{}</span>
-					<span className='yo-yo'>{}</span>
-				</div>
-			</div>
-		);
-	}
+				}'
+                    }
+                </style>
+                <div
+                    className="easter-wrapper"
+                    style={{
+                        display: this.state.whatToDisplay ? 'block' : 'none'
+                    }}>
+                    <span className="string">{}</span>
+                    <span className="yo-yo">{}</span>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default ImportantLogic;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
index c128083774..ca24964472 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.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 PropTypes from 'prop-types';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Sequencer from 'dox-sequence-diagram-ui';
@@ -21,31 +21,37 @@ import Sequencer from 'dox-sequence-diagram-ui';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 class SequenceDiagram extends Component {
+    static propTypes = {
+        onSave: PropTypes.func.isRequired,
+        onClose: PropTypes.func,
+        model: PropTypes.object.isRequired
+    };
 
-	static propTypes = {
-		onSave: PropTypes.func.isRequired,
-		onClose: PropTypes.func,
-		model: PropTypes.object.isRequired
-	};
-
-	onSave() {
-		this.props.onSave(this.refs.sequencer.getModel());
-	}
-
-	render() {
-		return (
-			<div className='sequence-diagram'>
-				<div className='sequence-diagram-sequencer'>
-					<Sequencer ref='sequencer' options={{useHtmlSelect: true}} model={this.props.model} />
-				</div>
-				<div className='sequence-diagram-action-buttons'>
-					<Button onClick={() => this.onSave()}>{i18n('Save')}</Button>
-					<Button onClick={this.props.onClose}>{i18n('Close')}</Button>
-				</div>
-			</div>
-		);
-	}
+    onSave() {
+        this.props.onSave(this.refs.sequencer.getModel());
+    }
 
+    render() {
+        return (
+            <div className="sequence-diagram">
+                <div className="sequence-diagram-sequencer">
+                    <Sequencer
+                        ref="sequencer"
+                        options={{ useHtmlSelect: true }}
+                        model={this.props.model}
+                    />
+                </div>
+                <div className="sequence-diagram-action-buttons">
+                    <Button onClick={() => this.onSave()}>
+                        {i18n('Save')}
+                    </Button>
+                    <Button onClick={this.props.onClose}>
+                        {i18n('Close')}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default SequenceDiagram;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
index c83fdc91f0..23723dc91d 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
@@ -16,51 +16,54 @@
 import emptyModel from './emptyModel.json';
 
 function mergeLifelines(oldLifelines, newLifelines) {
-	let oldLifelinesMap = new Map(oldLifelines.map(lifeline => [lifeline.id, lifeline]));
-	let newLifelinesMap = new Map(newLifelines.map(lifeline => [lifeline.id, lifeline]));
+    let oldLifelinesMap = new Map(
+        oldLifelines.map(lifeline => [lifeline.id, lifeline])
+    );
+    let newLifelinesMap = new Map(
+        newLifelines.map(lifeline => [lifeline.id, lifeline])
+    );
 
-	let updatedLifelines = oldLifelines.map(lifeline => {
-		let newLifeline = newLifelinesMap.get(lifeline.id);
-		return {
-			...lifeline,
-			name: newLifeline ? newLifeline.name : lifeline.name
-		};
-	});
+    let updatedLifelines = oldLifelines.map(lifeline => {
+        let newLifeline = newLifelinesMap.get(lifeline.id);
+        return {
+            ...lifeline,
+            name: newLifeline ? newLifeline.name : lifeline.name
+        };
+    });
 
-	let addedLifelines = newLifelines.filter(lifeline => !oldLifelinesMap.has(lifeline.id));
+    let addedLifelines = newLifelines.filter(
+        lifeline => !oldLifelinesMap.has(lifeline.id)
+    );
 
-	return [
-		...updatedLifelines,
-		...addedLifelines
-	];
+    return [...updatedLifelines, ...addedLifelines];
 }
 
-
 const SequenceDiagramModelHelper = Object.freeze({
+    createModel(options) {
+        return SequenceDiagramModelHelper.updateModel(emptyModel, options);
+    },
 
-	createModel(options) {
-		return SequenceDiagramModelHelper.updateModel(emptyModel, options);
-	},
-
-	updateModel(model, options) {
-		const diagram = model.diagram;
-		const metadata = diagram.metadata || model.metadata;
-		const id = options.id || metadata.id;
-		const name = options.name || metadata.name;
-		const lifelines = options.lifelines ? mergeLifelines(diagram.lifelines, options.lifelines) : diagram.lifelines;
+    updateModel(model, options) {
+        const diagram = model.diagram;
+        const metadata = diagram.metadata || model.metadata;
+        const id = options.id || metadata.id;
+        const name = options.name || metadata.name;
+        const lifelines = options.lifelines
+            ? mergeLifelines(diagram.lifelines, options.lifelines)
+            : diagram.lifelines;
 
-		return {
-			diagram: {
-				...diagram,
-				metadata: {
-					...metadata,
-					id,
-					name
-				},
-				lifelines
-			}
-		};
-	}
+        return {
+            diagram: {
+                ...diagram,
+                metadata: {
+                    ...metadata,
+                    id,
+                    name
+                },
+                lifelines
+            }
+        };
+    }
 });
 
 export default SequenceDiagramModelHelper;
diff --git a/openecomp-ui/src/sdc-app/heatValidation.app.jsx b/openecomp-ui/src/sdc-app/heatValidation.app.jsx
index 5abe3091b3..bb9a4bbe9b 100644
--- a/openecomp-ui/src/sdc-app/heatValidation.app.jsx
+++ b/openecomp-ui/src/sdc-app/heatValidation.app.jsx
@@ -23,5 +23,9 @@ import ReactDOM from 'react-dom';
 import UploadScreen from './heatvalidation/UploadScreen.jsx';
 import Application from './Application.jsx';
 
-
-ReactDOM.render(<Application openSocket={false}><UploadScreen/></Application>, document.getElementById('heat-validation-app'));
+ReactDOM.render(
+    <Application openSocket={false}>
+        <UploadScreen />
+    </Application>,
+    document.getElementById('heat-validation-app')
+);
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js b/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js
index d3e30b0df8..4532c0a7d2 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js
+++ b/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js
@@ -13,32 +13,53 @@
  * 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-import {mapStateToProps as attachmentsMapStateToProps, mapActionsToProps as attachmentsMapActionsToProps} from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js';
+import {
+    mapStateToProps as attachmentsMapStateToProps,
+    mapActionsToProps as attachmentsMapActionsToProps
+} from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js';
 // import AttachmentsView from './AttachmentsView.jsx';
 import AttachmentsView from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx';
 import UploadScreenActionHelper from './UploadScreenActionHelper.js';
 import HeatSetup from './HeatSetup';
 
-export const mapStateToProps = (state) => {
-	let original = attachmentsMapStateToProps(state);
-	return {
-		...original,
-		HeatSetupComponent: HeatSetup,
-		isReadOnlyMode: false
-	};
+export const mapStateToProps = state => {
+    let original = attachmentsMapStateToProps(state);
+    return {
+        ...original,
+        HeatSetupComponent: HeatSetup,
+        isReadOnlyMode: false
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId}) => {
-	let original = attachmentsMapActionsToProps(dispatch, {softwareProductId});
-	return {
-		...original,
-		onDownload: heatCandidate => UploadScreenActionHelper.downloadHeatFile(dispatch, heatCandidate),
-		onUpload: formData => UploadScreenActionHelper.uploadFile(dispatch, formData),
-		onSave: (heatCandidate) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate}),
-		onProcessAndValidate: (heatData, heatDataCache) => UploadScreenActionHelper.processAndValidateHeat(dispatch, heatData, heatDataCache)
-	};
+const mapActionsToProps = (dispatch, { softwareProductId }) => {
+    let original = attachmentsMapActionsToProps(dispatch, {
+        softwareProductId
+    });
+    return {
+        ...original,
+        onDownload: heatCandidate =>
+            UploadScreenActionHelper.downloadHeatFile(dispatch, heatCandidate),
+        onUpload: formData =>
+            UploadScreenActionHelper.uploadFile(dispatch, formData),
+        onSave: heatCandidate =>
+            SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+                dispatch,
+                {
+                    softwareProductId,
+                    heatCandidate
+                }
+            ),
+        onProcessAndValidate: (heatData, heatDataCache) =>
+            UploadScreenActionHelper.processAndValidateHeat(
+                dispatch,
+                heatData,
+                heatDataCache
+            )
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(AttachmentsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(AttachmentsView);
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js b/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js
index 925b0095ba..a94cfd9f81 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js
+++ b/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js
@@ -13,16 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
-import HeatSetupView  from '../onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx';
+import { connect } from 'react-redux';
+import HeatSetupView from '../onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx';
 import UploadScreenActionHelper from './UploadScreenActionHelper.js';
-import {mapStateToProps, mapActionsToProps} from '../onboarding/softwareProduct/attachments/setup/HeatSetup.js';
+import {
+    mapStateToProps,
+    mapActionsToProps
+} from '../onboarding/softwareProduct/attachments/setup/HeatSetup.js';
 
-const mapActionsToPropsExt = (dispatch) => {
-	return {
-		...mapActionsToProps(dispatch,{}),
-		onProcessAndValidate: (heatData, heatDataCache) => UploadScreenActionHelper.processAndValidateHeat(dispatch, heatData, heatDataCache)
-	};
+const mapActionsToPropsExt = dispatch => {
+    return {
+        ...mapActionsToProps(dispatch, {}),
+        onProcessAndValidate: (heatData, heatDataCache) =>
+            UploadScreenActionHelper.processAndValidateHeat(
+                dispatch,
+                heatData,
+                heatDataCache
+            )
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToPropsExt, null, {withRef: true})(HeatSetupView);
+export default connect(mapStateToProps, mapActionsToPropsExt, null, {
+    withRef: true
+})(HeatSetupView);
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
index 2d99c0f497..6d3d54b5cb 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
+++ b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
@@ -16,17 +16,14 @@
 import React from 'react';
 import SoftwareProductAttachmentsView from './Attachments.js';
 
-
-
 class UploadScreen extends React.Component {
-
-	render() {
-		return(
-			<div className='heat-validation-stand-alone'>
-				<SoftwareProductAttachmentsView />
-			</div>
-		);
-	}
+    render() {
+        return (
+            <div className="heat-validation-stand-alone">
+                <SoftwareProductAttachmentsView />
+            </div>
+        );
+    }
 }
 
-export default  UploadScreen;
+export default UploadScreen;
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js
index fa2d4695ae..f5d9abd6d2 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js
+++ b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js
@@ -18,155 +18,197 @@ import showFileSaveDialog from 'nfvo-utils/ShowFileSaveDialog.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import isEqual from 'lodash/isEqual.js';
 import cloneDeep from 'lodash/cloneDeep.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as softwareProductsActionTypes} from '../onboarding/softwareProduct/SoftwareProductConstants.js';
-import {actionTypes as HeatSetupActions} from '../onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
-
-
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as softwareProductsActionTypes } from '../onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes as HeatSetupActions } from '../onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
 
 const options = {
-	headers: {
-		USER_ID: 'validationOnlyVspUser'
-	}
+    headers: {
+        USER_ID: 'validationOnlyVspUser'
+    }
 };
 
 function fetchVspIdAndVersion() {
-
-	let vspId = sessionStorage.getItem('validationAppVspId');
-	let versionId = sessionStorage.getItem('validationAppVersionId');
-	if (vspId) {
-		return  Promise.resolve({value: vspId, versionId});
-	}else {
-		return RestAPIUtil.fetch('/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/validation-vsp', options)
-			.then(response => {
-				sessionStorage.setItem('validationAppVspId', response.itemId);
-				sessionStorage.setItem('validationAppVersionId', response.version.id);
-				return Promise.resolve({value: response.itemId, versionId: response.version.id});
-			});
-	}
-
+    let vspId = sessionStorage.getItem('validationAppVspId');
+    let versionId = sessionStorage.getItem('validationAppVersionId');
+    if (vspId) {
+        return Promise.resolve({ value: vspId, versionId });
+    } else {
+        return RestAPIUtil.fetch(
+            '/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/validation-vsp',
+            options
+        ).then(response => {
+            sessionStorage.setItem('validationAppVspId', response.itemId);
+            sessionStorage.setItem(
+                'validationAppVersionId',
+                response.version.id
+            );
+            return Promise.resolve({
+                value: response.itemId,
+                versionId: response.version.id
+            });
+        });
+    }
 }
 
-
 function uploadFile(formData) {
-	return fetchVspIdAndVersion()
-		.then(response => {
-			return RestAPIUtil.post(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate`, formData, options);
-		});
+    return fetchVspIdAndVersion().then(response => {
+        return RestAPIUtil.post(
+            `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+                response.value
+            }/versions/${response.versionId}/orchestration-template-candidate`,
+            formData,
+            options
+        );
+    });
 }
 
-function loadSoftwareProductHeatCandidate(dispatch){
-	return fetchVspIdAndVersion()
-		.then(response => {
-			return RestAPIUtil.fetch(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate/manifest`, options)
-				.then(response => dispatch({
-					type: HeatSetupActions.MANIFEST_LOADED,
-					response
-				}));
-		});
+function loadSoftwareProductHeatCandidate(dispatch) {
+    return fetchVspIdAndVersion().then(response => {
+        return RestAPIUtil.fetch(
+            `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+                response.value
+            }/versions/${
+                response.versionId
+            }/orchestration-template-candidate/manifest`,
+            options
+        ).then(response =>
+            dispatch({
+                type: HeatSetupActions.MANIFEST_LOADED,
+                response
+            })
+        );
+    });
 }
 
 function updateHeatCandidate(dispatch, heatCandidate) {
-	return fetchVspIdAndVersion()
-		.then(response => {
-			return RestAPIUtil.put(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate/manifest`,
-				heatCandidate.heatData, options)
-				.then(null, error => {
-					dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_ERROR,
-						data: {
-							title: i18n('Save Failed'), 
-							modalComponentName: modalContentMapper.SUMBIT_ERROR_RESPONSE,							
-							modalComponentProps: {
-								validationResponse: error.responseJSON
-							},					
-							cancelButtonText: i18n('Ok')
-						}
-					});
-					return Promise.reject(error);
-				});
-		});
+    return fetchVspIdAndVersion().then(response => {
+        return RestAPIUtil.put(
+            `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+                response.value
+            }/versions/${
+                response.versionId
+            }/orchestration-template-candidate/manifest`,
+            heatCandidate.heatData,
+            options
+        ).then(null, error => {
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                data: {
+                    title: i18n('Save Failed'),
+                    modalComponentName:
+                        modalContentMapper.SUMBIT_ERROR_RESPONSE,
+                    modalComponentProps: {
+                        validationResponse: error.responseJSON
+                    },
+                    cancelButtonText: i18n('Ok')
+                }
+            });
+            return Promise.reject(error);
+        });
+    });
 }
 
 function fetchSoftwareProduct() {
-	return fetchVspIdAndVersion()
-		.then(response => {
-			return RestAPIUtil.fetch(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}`, options);
-		});
+    return fetchVspIdAndVersion().then(response => {
+        return RestAPIUtil.fetch(
+            `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+                response.value
+            }/versions/${response.versionId}`,
+            options
+        );
+    });
 }
 
 function downloadHeatFile() {
-	return fetchVspIdAndVersion()
-		.then(response => {
-			RestAPIUtil.fetch(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate`, {
-				...options,
-				dataType: 'binary'
-			})
-				.done((response) => showFileSaveDialog({
-					blob: response.blob,
-					headers: response.headers,
-					defaultFilename: 'HEAT_file.zip',
-					addTimestamp: true
-				}));
-		});
+    return fetchVspIdAndVersion().then(response => {
+        RestAPIUtil.fetch(
+            `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+                response.value
+            }/versions/${response.versionId}/orchestration-template-candidate`,
+            {
+                ...options,
+                dataType: 'binary'
+            }
+        ).done(response =>
+            showFileSaveDialog({
+                blob: response.blob,
+                headers: response.headers,
+                defaultFilename: 'HEAT_file.zip',
+                addTimestamp: true
+            })
+        );
+    });
 }
 
 function processAndValidateHeatCandidate(dispatch) {
-	return fetchVspIdAndVersion()
-		.then(response => {
-			return RestAPIUtil.put(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate/process`, {}, options)
-				.then(response => {
-					if (response.status === 'Success') {
-						fetchSoftwareProduct().then(response => {
-							dispatch({
-								type: softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
-								response
-							});
-						});
-					}
-				});
-		});
+    return fetchVspIdAndVersion().then(response => {
+        return RestAPIUtil.put(
+            `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+                response.value
+            }/versions/${
+                response.versionId
+            }/orchestration-template-candidate/process`,
+            {},
+            options
+        ).then(response => {
+            if (response.status === 'Success') {
+                fetchSoftwareProduct().then(response => {
+                    dispatch({
+                        type:
+                            softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
+                        response
+                    });
+                });
+            }
+        });
+    });
 }
 
 const UploadScreenActionHelper = {
-	uploadFile(dispatch, formData) {
-
-		return Promise.resolve()
-			.then(() => uploadFile(formData))
-			.then(response => {
-				dispatch({
-					type: softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
-					response
-				});
-				dispatch({
-					type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
-					payload:{}
-				});
-				loadSoftwareProductHeatCandidate(dispatch);
-			})
-			.catch(error => {
-				dispatch({					
-					type: modalActionTypes.GLOBAL_MODAL_ERROR,
-					data: {
-						title: i18n('File Upload Failed'), 													
-						msg: error.responseJSON.message,					
-						cancelButtonText: i18n('Ok')
-					}
-				});
-			});
-	},
-
-	processAndValidateHeat(dispatch, heatData, heatDataCache){
-		return isEqual(heatData, heatDataCache) ? Promise.resolve() :
-			updateHeatCandidate(dispatch, heatData)
-				.then(() => processAndValidateHeatCandidate(dispatch))
-				.then(() => dispatch({type: HeatSetupActions.FILL_HEAT_SETUP_CACHE, payload: cloneDeep(heatData)}));
-	},
-
-	downloadHeatFile(){
-		return downloadHeatFile();
-	},
+    uploadFile(dispatch, formData) {
+        return Promise.resolve()
+            .then(() => uploadFile(formData))
+            .then(response => {
+                dispatch({
+                    type: softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
+                    response
+                });
+                dispatch({
+                    type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
+                    payload: {}
+                });
+                loadSoftwareProductHeatCandidate(dispatch);
+            })
+            .catch(error => {
+                dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                    data: {
+                        title: i18n('File Upload Failed'),
+                        msg: error.responseJSON.message,
+                        cancelButtonText: i18n('Ok')
+                    }
+                });
+            });
+    },
+
+    processAndValidateHeat(dispatch, heatData, heatDataCache) {
+        return isEqual(heatData, heatDataCache)
+            ? Promise.resolve()
+            : updateHeatCandidate(dispatch, heatData)
+                  .then(() => processAndValidateHeatCandidate(dispatch))
+                  .then(() =>
+                      dispatch({
+                          type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
+                          payload: cloneDeep(heatData)
+                      })
+                  );
+    },
+
+    downloadHeatFile() {
+        return downloadHeatFile();
+    }
 };
 
 export default UploadScreenActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
index 81a29cf046..7b8c87e62c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
+++ b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
@@ -1,221 +1,151 @@
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
 
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-
 const stories = storiesOf('GridColumns', module);
 stories.addDecorator(withKnobs);
 
 var divStyle = {
-	'border-style': 'solid',
-	'border-size': 1
+    'border-style': 'solid',
+    'border-size': 1
 };
 
-const myDiv =  (<div style={divStyle}>Text Text Text</div>);
+const myDiv = <div style={divStyle}>Text Text Text</div>;
 
 stories
-	.add('Grid Options', () => (
-		<div>
-			<GridSection title='No last column set on item'>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-
-			<GridSection hasLastColSet={true} title='With last column set on item and gridsection'>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-
-			<GridSection title='With last column set on item and NOT on gridsection'>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
+    .add('Grid Options', () => (
+        <div>
+            <GridSection title="No last column set on item">
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+            </GridSection>
 
-		</div>
-	))
-	.add('Last Column', () => (
+            <GridSection
+                hasLastColSet={true}
+                title="With last column set on item and gridsection">
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={2} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
 
-		<div>
-			<GridSection hasLastColSet={true} title='Testing different configurations with all settings'>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection hasLastColSet={true}>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection hasLastColSet={true}>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection hasLastColSet={true}>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection hasLastColSet={true}>
-				<GridItem colSpan={4} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection hasLastColSet={true}>
-				<GridItem colSpan={3}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection hasLastColSet={true}>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={3} lastColInRow={true}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-		</div>
-	))
-	.add('No Last Column', () => (
-		<div>
-			<GridSection title='Testing different configurations'>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection>
-				<GridItem colSpan={2}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection>
-				<GridItem colSpan={4}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection>
-				<GridItem colSpan={3}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-			<GridSection>
-				<GridItem colSpan={1}>
-					{myDiv}
-				</GridItem>
-				<GridItem colSpan={3}>
-					{myDiv}
-				</GridItem>
-			</GridSection>
-		</div>
-	))	.add('Test LKG form', () => (
-	<div>
-		<GridSection title='Testing VLM LKG configurations'>
-			<GridItem colSpan={2}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow={true}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={2}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow={true}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={1}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={1}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={1}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={1} lastColInRow={true}>
-				{myDiv}
-			</GridItem>
-			<GridItem colSpan={2}>
-				<div style={divStyle}>1</div>
-			</GridItem>
-		</GridSection>
-	</div>
-));
\ No newline at end of file
+            <GridSection title="With last column set on item and NOT on gridsection">
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={2} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+        </div>
+    ))
+    .add('Last Column', () => (
+        <div>
+            <GridSection
+                hasLastColSet={true}
+                title="Testing different configurations with all settings">
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={2} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+            <GridSection hasLastColSet={true}>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+            <GridSection hasLastColSet={true}>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={2} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+            <GridSection hasLastColSet={true}>
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+            <GridSection hasLastColSet={true}>
+                <GridItem colSpan={4} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+            <GridSection hasLastColSet={true}>
+                <GridItem colSpan={3}>{myDiv}</GridItem>
+                <GridItem colSpan={1} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+            <GridSection hasLastColSet={true}>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={3} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+            </GridSection>
+        </div>
+    ))
+    .add('No Last Column', () => (
+        <div>
+            <GridSection title="Testing different configurations">
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+            </GridSection>
+            <GridSection>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+            </GridSection>
+            <GridSection>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+            </GridSection>
+            <GridSection>
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+            </GridSection>
+            <GridSection>
+                <GridItem colSpan={4}>{myDiv}</GridItem>
+            </GridSection>
+            <GridSection>
+                <GridItem colSpan={3}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+            </GridSection>
+            <GridSection>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={3}>{myDiv}</GridItem>
+            </GridSection>
+        </div>
+    ))
+    .add('Test LKG form', () => (
+        <div>
+            <GridSection title="Testing VLM LKG configurations">
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={2} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+                <GridItem colSpan={2}>{myDiv}</GridItem>
+                <GridItem colSpan={2} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1}>{myDiv}</GridItem>
+                <GridItem colSpan={1} lastColInRow={true}>
+                    {myDiv}
+                </GridItem>
+                <GridItem colSpan={2}>
+                    <div style={divStyle}>1</div>
+                </GridItem>
+            </GridSection>
+        </div>
+    ));
diff --git a/openecomp-ui/src/sdc-app/onboarding/Onboarding.js b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
index faec816d42..b894e3f031 100644
--- a/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
+++ b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
@@ -15,8 +15,8 @@
  */
 
 import OnboardingView from './OnboardingView.jsx';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
-const mapStateToProps = ({currentScreen}) => ({currentScreen});
+const mapStateToProps = ({ currentScreen }) => ({ currentScreen });
 const Onboarding = connect(mapStateToProps, null)(OnboardingView);
 export default Onboarding;
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
index d75c234caf..2fccfcbd2a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
@@ -34,289 +34,591 @@ import ComputeFlavorActionHelper from './softwareProduct/components/compute/Comp
 import OnboardActionHelper from './onboard/OnboardActionHelper.js';
 import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
 import SoftwareProductComponentsMonitoringAction from './softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js';
-import {actionTypes, enums} from './OnboardingConstants.js';
-import {actionTypes as SoftwareProductActionTypes, onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes, enums } from './OnboardingConstants.js';
+import {
+    actionTypes as SoftwareProductActionTypes,
+    onboardingOriginTypes
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 import ActivityLogActionHelper from 'sdc-app/common/activity-log/ActivityLogActionHelper.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 import SoftwareProductComponentsImageActionHelper from './softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js';
 import licenseModelOverviewActionHelper from 'sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js';
-import {tabsMapping as attachmentsTabsMapping} from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js';
+import { tabsMapping as attachmentsTabsMapping } from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js';
 import SoftwareProductAttachmentsActionHelper from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js';
 
 function setCurrentScreen(dispatch, screen, props = {}) {
-	dispatch({
-		type: actionTypes.SET_CURRENT_SCREEN,
-		currentScreen: {
-			screen,
-			props,
-			forceBreadCrumbsUpdate: true
-		}
-	});
+    dispatch({
+        type: actionTypes.SET_CURRENT_SCREEN,
+        currentScreen: {
+            screen,
+            props,
+            forceBreadCrumbsUpdate: true
+        }
+    });
 }
 
 export function updateCurrentScreenProps(dispatch, props = {}) {
-	dispatch({
-		type: actionTypes.UPDATE_CURRENT_SCREEN_PROPS,
-		props
-	});
+    dispatch({
+        type: actionTypes.UPDATE_CURRENT_SCREEN_PROPS,
+        props
+    });
 }
 
 const OnboardingActionHelper = {
-
-	loadItemsLists(dispatch) {
-		LicenseModelActionHelper.fetchLicenseModels(dispatch);
-		LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
-		LicenseModelActionHelper.fetchArchivedLicenseModels(dispatch);
-		SoftwareProductActionHelper.fetchSoftwareProductList(dispatch);
-		SoftwareProductActionHelper.fetchFinalizedSoftwareProductList(dispatch);
-		SoftwareProductActionHelper.fetchArchivedSoftwareProductList(dispatch);
-	},
-
-	navigateToOnboardingCatalog(dispatch) {
-		UsersActionHelper.fetchUsersList(dispatch);
-		this.loadItemsLists(dispatch);
-		OnboardActionHelper.resetOnboardStore(dispatch);
-		setCurrentScreen(dispatch, enums.SCREEN.ONBOARDING_CATALOG);
-	},
-
-	autoSaveBeforeNavigate(dispatch, {softwareProductId, version, vspComponentId, dataToSave}) {
-		if(softwareProductId) {
-			if(vspComponentId) {
-				return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch, {
-					softwareProductId, version, vspComponentId,
-					componentData: dataToSave.componentData,
-					qdata: dataToSave.qdata
-				});
-			}
-			return SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
-				softwareProduct: dataToSave.softwareProduct,
-				version,
-				qdata: dataToSave.qdata
-			});
-		}
-		return Promise.resolve();
-	},
-
-	navigateToLicenseModelOverview(dispatch, {licenseModelId, version, status}) {
-
-		/**
-		 * TODO change to specific rest
-		 */
-
-		LicenseModelActionHelper.fetchLicenseModelById(dispatch, {licenseModelId, version}).then(() => {
-			LicenseModelActionHelper.fetchLicenseModelItems(dispatch, {licenseModelId, version}).then(() => {
-				setCurrentScreen(dispatch, enums.SCREEN.LICENSE_MODEL_OVERVIEW, {licenseModelId, version, status});
-			});
-			licenseModelOverviewActionHelper.selectVLMListView(dispatch, {buttonTab: null});
-		});
-	},
-	navigateToLicenseAgreements(dispatch, {licenseModelId, version, status}) {
-		LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version});
-		LicenseModelActionHelper.fetchLicenseModelById(dispatch, {licenseModelId, version}).then(() => {
-			setCurrentScreen(dispatch, enums.SCREEN.LICENSE_AGREEMENTS, {licenseModelId, version, status});
-		});
-	},
-
-	navigateToFeatureGroups(dispatch, {licenseModelId, version, status}) {
-		FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.FEATURE_GROUPS, {licenseModelId, version, status});
-	},
-
-	navigateToEntitlementPools(dispatch, {licenseModelId, version, status}) {
-		EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.ENTITLEMENT_POOLS, {licenseModelId, version, status});
-	},
-
-	navigateToLicenseKeyGroups(dispatch, {licenseModelId, version, status}) {
-		LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.LICENSE_KEY_GROUPS, {licenseModelId, version, status});
-	},
-
-	navigateToLicenseModelActivityLog(dispatch, {licenseModelId, version, status}){
-		ActivityLogActionHelper.fetchActivityLog(dispatch, {itemId: licenseModelId, versionId: version.id});
-		setCurrentScreen(dispatch, enums.SCREEN.ACTIVITY_LOG, {licenseModelId, version, status});
-	},
-
-	navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version, status}) {
-		SoftwareProductComponentsActionHelper.clearComponentsStore(dispatch);
-		SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version}).then(response => {
-			let {vendorId: licenseModelId, licensingVersion} = response[0];
-			SoftwareProductActionHelper.loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion});
-			SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version: version});
-			if(response[0].onboardingOrigin === onboardingOriginTypes.ZIP) {
-				SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(dispatch, {softwareProductId, version: version});
-			}
-			setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, {softwareProductId, licenseModelId, version, status});
-		});
-	},
-
-	navigateToSoftwareProductDetails(dispatch, {softwareProductId, version, status}) {
-		SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version}).then(response => {
-			let {vendorId: licenseModelId, licensingVersion} = response[0];
-			SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, {licenseModelId});
-			SoftwareProductActionHelper.loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion});
-			setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, {softwareProductId, version, status});
-		});
-	},
-
-	navigateToSoftwareProductAttachmentsSetupTab(dispatch, {softwareProductId, version, status}) {
-		SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(dispatch, {softwareProductId, version});
-		SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab: attachmentsTabsMapping.SETUP});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS, {softwareProductId, version, status});
-	},
-	navigateToSoftwareProductAttachmentsValidationTab(dispatch, {softwareProductId, version, status}) {
-		SoftwareProductActionHelper.processAndValidateHeatCandidate(dispatch, {softwareProductId, version}).then(() => {
-			SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab: attachmentsTabsMapping.VALIDATION});
-			setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS, {softwareProductId, version, status});
-		});
-	},
-
-	navigateToSoftwareProductProcesses(dispatch, {softwareProductId, version, status}) {
-		if (softwareProductId) {
-			SoftwareProductProcessesActionHelper.fetchProcessesList(dispatch, {softwareProductId, version});
-		}
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES, {softwareProductId, version, status});
-	},
-
-	navigateToSoftwareProductNetworks(dispatch, {softwareProductId, version, status}) {
-		if (softwareProductId) {
-			SoftwareProductNetworksActionHelper.fetchNetworksList(dispatch, {softwareProductId, version});
-		}
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS, {softwareProductId, version, status});
-	},
-
-	navigateToSoftwareProductDependencies(dispatch, {softwareProductId, version, status}) {
-		SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version}).then(result => {
-			if(result.listCount >= 2) {
-				SoftwareProductDependenciesActionHelper.fetchDependencies(dispatch, {softwareProductId, version});
-				setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES, {softwareProductId, version, status});
-			}
-			else {
-				this.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version, status});
-			}
-		});
-	},
-
-	navigateToSoftwareProductComponents(dispatch, {softwareProductId, version, status}) {
-		SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, {softwareProductId, version, status});
-	},
-	navigateToSoftwareProductDeployment(dispatch, {softwareProductId, version, status}) {
-		SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
-		ComputeFlavorActionHelper.fetchComputesListForVSP(dispatch, {softwareProductId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT, {softwareProductId, version, status});
-	},
-	navigateToSoftwareProductActivityLog(dispatch, {softwareProductId, version, status}){
-		ActivityLogActionHelper.fetchActivityLog(dispatch, {itemId: softwareProductId, versionId: version.id});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG, {softwareProductId, version, status});
-	},
-
-	navigateToSoftwareProductComponentProcesses(dispatch, {softwareProductId, componentId, version, status}) {
-		if (componentId && softwareProductId) {
-			SoftwareProductComponentProcessesActionHelper.fetchProcessesList(dispatch, {componentId, softwareProductId, version});
-		}
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES, {softwareProductId, componentId, version, status});
-	},
-
-	navigateToSoftwareProductComponentMonitoring(dispatch, {softwareProductId, version, componentId, status}){
-		if (componentId && softwareProductId && version) {
-			SoftwareProductComponentsMonitoringAction.fetchExistingFiles(dispatch, {componentId, softwareProductId, version});
-		}
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING, {softwareProductId, componentId, version, status});
-	},
-
-	navigateToComponentStorage(dispatch, {softwareProductId, componentId, version, status}) {
-		SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE, {softwareProductId, version, componentId, status});
-	},
-
-	navigateToComponentCompute(dispatch, {softwareProductId, componentId, version, status}) {
-		SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
-		if (componentId && softwareProductId) {
-			ComputeFlavorActionHelper.fetchComputesList(dispatch, {softwareProductId, componentId, version});
-		}
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE, {softwareProductId, version, componentId, status});
-	},
-
-	navigateToComponentNetwork(dispatch, {softwareProductId, componentId, version, status}) {
-		SoftwareProductComponentsNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK, {softwareProductId, version, componentId, status});
-	},
-
-	navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId, version, status}) {
-		if (componentId && softwareProductId) {
-			SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
-		}
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL, {softwareProductId, version, componentId, status});
-	},
-
-	navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version, status}) {
-		this.navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId, version, status});
-		dispatch({
-			type: SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
-			mapOfExpandedIds: {
-				[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true,
-				[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + componentId]: true
-			}
-		});
-	},
-
-	navigateToComponentLoadBalancing(dispatch, {softwareProductId, componentId, version, status}) {
-		SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING, {softwareProductId, version, componentId, status});
-	},
-
-	navigateToComponentImages(dispatch, {softwareProductId, componentId, version, status}) {
-		SoftwareProductComponentsImageActionHelper.fetchImagesList(dispatch, {
-			softwareProductId,
-			componentId,
-			version
-		});
-		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES, {softwareProductId, version, componentId, status});
-	},
-
-	navigateToVersionsPage(dispatch, {itemType, itemId, itemName, additionalProps, users}) {
-		PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: users});
-		VersionsPageActionHelper.selectNone(dispatch);
-		VersionsPageActionHelper.fetchVersions(dispatch, {itemType, itemId}).then(() => {
-			ItemsHelper.fetchItem(itemId).then(result => {
-				setCurrentScreen(dispatch, enums.SCREEN.VERSIONS_PAGE, {status: result.status, itemType, itemId, itemName, additionalProps});
-			});
-			
-		});
-		
-	},
-
-	checkMergeStatus(dispatch, {itemId, versionId, version}) {
-		return ItemsHelper.fetchVersion({itemId, versionId}).then(response => {
-			let state = response && response.state || {};
-			let {synchronizationState} = state;
-			// let inMerge = synchronizationState === SyncStates.MERGE;
-			MergeEditorActionHelper.fetchConflicts(dispatch, {itemId, version}).then(data => {
-				dispatch({
-					type: actionTypes.CHECK_MERGE_STATUS,
-					synchronizationState,
-					conflictInfoList: data.conflictInfoList
-				});
-			});
-		});
-	},
-
-	forceBreadCrumbsUpdate(dispatch) {
-		dispatch({
-			type: actionTypes.SET_CURRENT_SCREEN,
-			currentScreen: {
-				forceBreadCrumbsUpdate: true
-			}
-		});
-	},
-
-	updateCurrentScreenVersion(dispatch, version) {
-		dispatch({
-			type: actionTypes.SET_CURRENT_SCREEN_VERSION,
-			version
-		});
-	}
+    loadItemsLists(dispatch) {
+        LicenseModelActionHelper.fetchLicenseModels(dispatch);
+        LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
+        LicenseModelActionHelper.fetchArchivedLicenseModels(dispatch);
+        SoftwareProductActionHelper.fetchSoftwareProductList(dispatch);
+        SoftwareProductActionHelper.fetchFinalizedSoftwareProductList(dispatch);
+        SoftwareProductActionHelper.fetchArchivedSoftwareProductList(dispatch);
+    },
+
+    navigateToOnboardingCatalog(dispatch) {
+        UsersActionHelper.fetchUsersList(dispatch);
+        this.loadItemsLists(dispatch);
+        OnboardActionHelper.resetOnboardStore(dispatch);
+        setCurrentScreen(dispatch, enums.SCREEN.ONBOARDING_CATALOG);
+    },
+
+    autoSaveBeforeNavigate(
+        dispatch,
+        { softwareProductId, version, vspComponentId, dataToSave }
+    ) {
+        if (softwareProductId) {
+            if (vspComponentId) {
+                return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        version,
+                        vspComponentId,
+                        componentData: dataToSave.componentData,
+                        qdata: dataToSave.qdata
+                    }
+                );
+            }
+            return SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
+                softwareProduct: dataToSave.softwareProduct,
+                version,
+                qdata: dataToSave.qdata
+            });
+        }
+        return Promise.resolve();
+    },
+
+    navigateToLicenseModelOverview(
+        dispatch,
+        { licenseModelId, version, status }
+    ) {
+        /**
+         * TODO change to specific rest
+         */
+
+        LicenseModelActionHelper.fetchLicenseModelById(dispatch, {
+            licenseModelId,
+            version
+        }).then(() => {
+            LicenseModelActionHelper.fetchLicenseModelItems(dispatch, {
+                licenseModelId,
+                version
+            }).then(() => {
+                setCurrentScreen(
+                    dispatch,
+                    enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+                    { licenseModelId, version, status }
+                );
+            });
+            licenseModelOverviewActionHelper.selectVLMListView(dispatch, {
+                buttonTab: null
+            });
+        });
+    },
+    navigateToLicenseAgreements(dispatch, { licenseModelId, version, status }) {
+        LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+            licenseModelId,
+            version
+        });
+        LicenseModelActionHelper.fetchLicenseModelById(dispatch, {
+            licenseModelId,
+            version
+        }).then(() => {
+            setCurrentScreen(dispatch, enums.SCREEN.LICENSE_AGREEMENTS, {
+                licenseModelId,
+                version,
+                status
+            });
+        });
+    },
+
+    navigateToFeatureGroups(dispatch, { licenseModelId, version, status }) {
+        FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+            licenseModelId,
+            version
+        });
+        setCurrentScreen(dispatch, enums.SCREEN.FEATURE_GROUPS, {
+            licenseModelId,
+            version,
+            status
+        });
+    },
+
+    navigateToEntitlementPools(dispatch, { licenseModelId, version, status }) {
+        EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+            licenseModelId,
+            version
+        });
+        setCurrentScreen(dispatch, enums.SCREEN.ENTITLEMENT_POOLS, {
+            licenseModelId,
+            version,
+            status
+        });
+    },
+
+    navigateToLicenseKeyGroups(dispatch, { licenseModelId, version, status }) {
+        LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+            licenseModelId,
+            version
+        });
+        setCurrentScreen(dispatch, enums.SCREEN.LICENSE_KEY_GROUPS, {
+            licenseModelId,
+            version,
+            status
+        });
+    },
+
+    navigateToLicenseModelActivityLog(
+        dispatch,
+        { licenseModelId, version, status }
+    ) {
+        ActivityLogActionHelper.fetchActivityLog(dispatch, {
+            itemId: licenseModelId,
+            versionId: version.id
+        });
+        setCurrentScreen(dispatch, enums.SCREEN.ACTIVITY_LOG, {
+            licenseModelId,
+            version,
+            status
+        });
+    },
+
+    navigateToSoftwareProductLandingPage(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        SoftwareProductComponentsActionHelper.clearComponentsStore(dispatch);
+        SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+            softwareProductId,
+            version
+        }).then(response => {
+            let { vendorId: licenseModelId, licensingVersion } = response[0];
+            SoftwareProductActionHelper.loadSoftwareProductDetailsData(
+                dispatch,
+                { licenseModelId, licensingVersion }
+            );
+            SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+                dispatch,
+                { softwareProductId, version: version }
+            );
+            if (response[0].onboardingOrigin === onboardingOriginTypes.ZIP) {
+                SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(
+                    dispatch,
+                    { softwareProductId, version: version }
+                );
+            }
+            setCurrentScreen(
+                dispatch,
+                enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                { softwareProductId, licenseModelId, version, status }
+            );
+        });
+    },
+
+    navigateToSoftwareProductDetails(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+            softwareProductId,
+            version
+        }).then(response => {
+            let { vendorId: licenseModelId, licensingVersion } = response[0];
+            SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, {
+                licenseModelId
+            });
+            SoftwareProductActionHelper.loadSoftwareProductDetailsData(
+                dispatch,
+                { licenseModelId, licensingVersion }
+            );
+            setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, {
+                softwareProductId,
+                version,
+                status
+            });
+        });
+    },
+
+    navigateToSoftwareProductAttachmentsSetupTab(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(dispatch, {
+            softwareProductId,
+            version
+        });
+        SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {
+            activeTab: attachmentsTabsMapping.SETUP
+        });
+        setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS, {
+            softwareProductId,
+            version,
+            status
+        });
+    },
+    navigateToSoftwareProductAttachmentsValidationTab(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        SoftwareProductActionHelper.processAndValidateHeatCandidate(dispatch, {
+            softwareProductId,
+            version
+        }).then(() => {
+            SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {
+                activeTab: attachmentsTabsMapping.VALIDATION
+            });
+            setCurrentScreen(
+                dispatch,
+                enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS,
+                { softwareProductId, version, status }
+            );
+        });
+    },
+
+    navigateToSoftwareProductProcesses(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        if (softwareProductId) {
+            SoftwareProductProcessesActionHelper.fetchProcessesList(dispatch, {
+                softwareProductId,
+                version
+            });
+        }
+        setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES, {
+            softwareProductId,
+            version,
+            status
+        });
+    },
+
+    navigateToSoftwareProductNetworks(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        if (softwareProductId) {
+            SoftwareProductNetworksActionHelper.fetchNetworksList(dispatch, {
+                softwareProductId,
+                version
+            });
+        }
+        setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS, {
+            softwareProductId,
+            version,
+            status
+        });
+    },
+
+    navigateToSoftwareProductDependencies(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+            dispatch,
+            { softwareProductId, version }
+        ).then(result => {
+            if (result.listCount >= 2) {
+                SoftwareProductDependenciesActionHelper.fetchDependencies(
+                    dispatch,
+                    { softwareProductId, version }
+                );
+                setCurrentScreen(
+                    dispatch,
+                    enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES,
+                    { softwareProductId, version, status }
+                );
+            } else {
+                this.navigateToSoftwareProductLandingPage(dispatch, {
+                    softwareProductId,
+                    version,
+                    status
+                });
+            }
+        });
+    },
+
+    navigateToSoftwareProductComponents(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+            dispatch,
+            { softwareProductId, version }
+        );
+        setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, {
+            softwareProductId,
+            version,
+            status
+        });
+    },
+    navigateToSoftwareProductDeployment(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+            dispatch,
+            { softwareProductId, version }
+        );
+        ComputeFlavorActionHelper.fetchComputesListForVSP(dispatch, {
+            softwareProductId,
+            version
+        });
+        setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT, {
+            softwareProductId,
+            version,
+            status
+        });
+    },
+    navigateToSoftwareProductActivityLog(
+        dispatch,
+        { softwareProductId, version, status }
+    ) {
+        ActivityLogActionHelper.fetchActivityLog(dispatch, {
+            itemId: softwareProductId,
+            versionId: version.id
+        });
+        setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG, {
+            softwareProductId,
+            version,
+            status
+        });
+    },
+
+    navigateToSoftwareProductComponentProcesses(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        if (componentId && softwareProductId) {
+            SoftwareProductComponentProcessesActionHelper.fetchProcessesList(
+                dispatch,
+                { componentId, softwareProductId, version }
+            );
+        }
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+            { softwareProductId, componentId, version, status }
+        );
+    },
+
+    navigateToSoftwareProductComponentMonitoring(
+        dispatch,
+        { softwareProductId, version, componentId, status }
+    ) {
+        if (componentId && softwareProductId && version) {
+            SoftwareProductComponentsMonitoringAction.fetchExistingFiles(
+                dispatch,
+                { componentId, softwareProductId, version }
+            );
+        }
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
+            { softwareProductId, componentId, version, status }
+        );
+    },
+
+    navigateToComponentStorage(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+            dispatch,
+            { softwareProductId, vspComponentId: componentId, version }
+        );
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+            { softwareProductId, version, componentId, status }
+        );
+    },
+
+    navigateToComponentCompute(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+            dispatch,
+            { softwareProductId, vspComponentId: componentId, version }
+        );
+        if (componentId && softwareProductId) {
+            ComputeFlavorActionHelper.fetchComputesList(dispatch, {
+                softwareProductId,
+                componentId,
+                version
+            });
+        }
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+            { softwareProductId, version, componentId, status }
+        );
+    },
+
+    navigateToComponentNetwork(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        SoftwareProductComponentsNetworkActionHelper.fetchNICsList(dispatch, {
+            softwareProductId,
+            componentId,
+            version
+        });
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+            { softwareProductId, version, componentId, status }
+        );
+    },
+
+    navigateToSoftwareProductComponentGeneral(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        if (componentId && softwareProductId) {
+            SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+                dispatch,
+                { softwareProductId, vspComponentId: componentId, version }
+            );
+        }
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+            { softwareProductId, version, componentId, status }
+        );
+    },
+
+    navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        this.navigateToSoftwareProductComponentGeneral(dispatch, {
+            softwareProductId,
+            componentId,
+            version,
+            status
+        });
+        dispatch({
+            type: SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
+            mapOfExpandedIds: {
+                [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true,
+                [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS +
+                '|' +
+                componentId]: true
+            }
+        });
+    },
+
+    navigateToComponentLoadBalancing(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+            dispatch,
+            { softwareProductId, vspComponentId: componentId, version }
+        );
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+            { softwareProductId, version, componentId, status }
+        );
+    },
+
+    navigateToComponentImages(
+        dispatch,
+        { softwareProductId, componentId, version, status }
+    ) {
+        SoftwareProductComponentsImageActionHelper.fetchImagesList(dispatch, {
+            softwareProductId,
+            componentId,
+            version
+        });
+        setCurrentScreen(
+            dispatch,
+            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
+            { softwareProductId, version, componentId, status }
+        );
+    },
+
+    navigateToVersionsPage(
+        dispatch,
+        { itemType, itemId, itemName, additionalProps, users }
+    ) {
+        PermissionsActionHelper.fetchItemUsers(dispatch, {
+            itemId,
+            allUsers: users
+        });
+        VersionsPageActionHelper.selectNone(dispatch);
+        VersionsPageActionHelper.fetchVersions(dispatch, {
+            itemType,
+            itemId
+        }).then(() => {
+            ItemsHelper.fetchItem(itemId).then(result => {
+                setCurrentScreen(dispatch, enums.SCREEN.VERSIONS_PAGE, {
+                    status: result.status,
+                    itemType,
+                    itemId,
+                    itemName,
+                    additionalProps
+                });
+            });
+        });
+    },
+
+    checkMergeStatus(dispatch, { itemId, versionId, version }) {
+        return ItemsHelper.fetchVersion({ itemId, versionId }).then(
+            response => {
+                let state = (response && response.state) || {};
+                let { synchronizationState } = state;
+                // let inMerge = synchronizationState === SyncStates.MERGE;
+                MergeEditorActionHelper.fetchConflicts(dispatch, {
+                    itemId,
+                    version
+                }).then(data => {
+                    dispatch({
+                        type: actionTypes.CHECK_MERGE_STATUS,
+                        synchronizationState,
+                        conflictInfoList: data.conflictInfoList
+                    });
+                });
+            }
+        );
+    },
+
+    forceBreadCrumbsUpdate(dispatch) {
+        dispatch({
+            type: actionTypes.SET_CURRENT_SCREEN,
+            currentScreen: {
+                forceBreadCrumbsUpdate: true
+            }
+        });
+    },
+
+    updateCurrentScreenVersion(dispatch, version) {
+        dispatch({
+            type: actionTypes.SET_CURRENT_SCREEN_VERSION,
+            version
+        });
+    }
 };
 
 export default OnboardingActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
index 699fe9e357..36054397d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
@@ -18,83 +18,102 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 export const DATE_FORMAT = 'MM/DD/YYYY';
 
 export const actionTypes = keyMirror({
-	SET_CURRENT_SCREEN: null,
-	SET_CURRENT_LICENSE_MODEL: null,
-	SET_CURRENT_SCREEN_VERSION: null,
-	UPDATE_CURRENT_SCREEN_PROPS: null,
-	UPDATE_ITEM_STATUS: null
+    SET_CURRENT_SCREEN: null,
+    SET_CURRENT_LICENSE_MODEL: null,
+    SET_CURRENT_SCREEN_VERSION: null,
+    UPDATE_CURRENT_SCREEN_PROPS: null,
+    UPDATE_ITEM_STATUS: null
 });
 
 export const screenTypes = keyMirror({
-	LICENSE_MODEL: null,
-	SOFTWARE_PRODUCT: null,
-	SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL: null
+    LICENSE_MODEL: null,
+    SOFTWARE_PRODUCT: null,
+    SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL: null
 });
 
 const breadcrumbsEnum = {
-	LICENSE_MODEL: 'LICENSE_MODEL',
-	VERSIONS_PAGE: 'VERSIONS_PAGE',
-	LICENSE_MODEL_OVERVIEW: 'LICENSE_MODEL_OVERVIEW',
-	LICENSE_AGREEMENTS: 'LICENSE_AGREEMENTS',
-	FEATURE_GROUPS: 'FEATURE_GROUPS',
-	ENTITLEMENT_POOLS: 'ENTITLEMENT_POOLS',
-	LICENSE_KEY_GROUPS: 'LICENSE_KEY_GROUPS',
-	ACTIVITY_LOG: 'ACTIVITY_LOG',
+    LICENSE_MODEL: 'LICENSE_MODEL',
+    VERSIONS_PAGE: 'VERSIONS_PAGE',
+    LICENSE_MODEL_OVERVIEW: 'LICENSE_MODEL_OVERVIEW',
+    LICENSE_AGREEMENTS: 'LICENSE_AGREEMENTS',
+    FEATURE_GROUPS: 'FEATURE_GROUPS',
+    ENTITLEMENT_POOLS: 'ENTITLEMENT_POOLS',
+    LICENSE_KEY_GROUPS: 'LICENSE_KEY_GROUPS',
+    ACTIVITY_LOG: 'ACTIVITY_LOG',
 
-	SOFTWARE_PRODUCT: 'SOFTWARE_PRODUCT',
-	SOFTWARE_PRODUCT_VERSIONS_PAGE: 'SOFTWARE_PRODUCT_VERSIONS_PAGE',
-	SOFTWARE_PRODUCT_LANDING_PAGE: 'SOFTWARE_PRODUCT_LANDING_PAGE',
-	SOFTWARE_PRODUCT_DETAILS: 'SOFTWARE_PRODUCT_DETAILS',
-	SOFTWARE_PRODUCT_ATTACHMENTS: 'SOFTWARE_PRODUCT_ATTACHMENTS',
-	SOFTWARE_PRODUCT_PROCESSES: 'SOFTWARE_PRODUCT_PROCESSES',
-	SOFTWARE_PRODUCT_DEPLOYMENT: 'SOFTWARE_PRODUCT_DEPLOYMENT',
-	SOFTWARE_PRODUCT_NETWORKS: 'SOFTWARE_PRODUCT_NETWORKS',
-	SOFTWARE_PRODUCT_DEPENDENCIES: 'SOFTWARE_PRODUCT_DEPENDENCIES',
-	SOFTWARE_PRODUCT_ACTIVITY_LOG: 'SOFTWARE_PRODUCT_ACTIVITY_LOG',
-	SOFTWARE_PRODUCT_COMPONENTS: 'SOFTWARE_PRODUCT_COMPONENTS',
-	SOFTWARE_PRODUCT_COMPONENT_PROCESSES: 'SOFTWARE_PRODUCT_COMPONENT_PROCESSES',
-	SOFTWARE_PRODUCT_COMPONENT_NETWORK: 'SOFTWARE_PRODUCT_COMPONENT_NETWORK',
-	SOFTWARE_PRODUCT_COMPONENT_STORAGE: 'SOFTWARE_PRODUCT_COMPONENT_STORAGE',
-	SOFTWARE_PRODUCT_COMPONENT_GENERAL: 'SOFTWARE_PRODUCT_COMPONENT_GENERAL',
-	SOFTWARE_PRODUCT_COMPONENT_COMPUTE: 'SOFTWARE_PRODUCT_COMPONENT_COMPUTE',
-	SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING: 'SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING',
-	SOFTWARE_PRODUCT_COMPONENT_MONITORING: 'SOFTWARE_PRODUCT_COMPONENT_MONITORING',
-	SOFTWARE_PRODUCT_COMPONENT_IMAGES: 'SOFTWARE_PRODUCT_COMPONENT_IMAGES'
+    SOFTWARE_PRODUCT: 'SOFTWARE_PRODUCT',
+    SOFTWARE_PRODUCT_VERSIONS_PAGE: 'SOFTWARE_PRODUCT_VERSIONS_PAGE',
+    SOFTWARE_PRODUCT_LANDING_PAGE: 'SOFTWARE_PRODUCT_LANDING_PAGE',
+    SOFTWARE_PRODUCT_DETAILS: 'SOFTWARE_PRODUCT_DETAILS',
+    SOFTWARE_PRODUCT_ATTACHMENTS: 'SOFTWARE_PRODUCT_ATTACHMENTS',
+    SOFTWARE_PRODUCT_PROCESSES: 'SOFTWARE_PRODUCT_PROCESSES',
+    SOFTWARE_PRODUCT_DEPLOYMENT: 'SOFTWARE_PRODUCT_DEPLOYMENT',
+    SOFTWARE_PRODUCT_NETWORKS: 'SOFTWARE_PRODUCT_NETWORKS',
+    SOFTWARE_PRODUCT_DEPENDENCIES: 'SOFTWARE_PRODUCT_DEPENDENCIES',
+    SOFTWARE_PRODUCT_ACTIVITY_LOG: 'SOFTWARE_PRODUCT_ACTIVITY_LOG',
+    SOFTWARE_PRODUCT_COMPONENTS: 'SOFTWARE_PRODUCT_COMPONENTS',
+    SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+        'SOFTWARE_PRODUCT_COMPONENT_PROCESSES',
+    SOFTWARE_PRODUCT_COMPONENT_NETWORK: 'SOFTWARE_PRODUCT_COMPONENT_NETWORK',
+    SOFTWARE_PRODUCT_COMPONENT_STORAGE: 'SOFTWARE_PRODUCT_COMPONENT_STORAGE',
+    SOFTWARE_PRODUCT_COMPONENT_GENERAL: 'SOFTWARE_PRODUCT_COMPONENT_GENERAL',
+    SOFTWARE_PRODUCT_COMPONENT_COMPUTE: 'SOFTWARE_PRODUCT_COMPONENT_COMPUTE',
+    SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+        'SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING',
+    SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+        'SOFTWARE_PRODUCT_COMPONENT_MONITORING',
+    SOFTWARE_PRODUCT_COMPONENT_IMAGES: 'SOFTWARE_PRODUCT_COMPONENT_IMAGES'
 };
 
 export const enums = keyMirror({
+    BREADCRUMS: { ...breadcrumbsEnum },
 
-	BREADCRUMS: {...breadcrumbsEnum},
+    SCREEN: {
+        ONBOARDING_CATALOG: 'ONBOARDING_CATALOG',
+        VERSIONS_PAGE: breadcrumbsEnum.VERSIONS_PAGE,
+        LICENSE_MODEL_OVERVIEW: breadcrumbsEnum.LICENSE_MODEL_OVERVIEW,
+        LICENSE_AGREEMENTS: breadcrumbsEnum.LICENSE_AGREEMENTS,
+        FEATURE_GROUPS: breadcrumbsEnum.FEATURE_GROUPS,
+        ENTITLEMENT_POOLS: breadcrumbsEnum.ENTITLEMENT_POOLS,
+        LICENSE_KEY_GROUPS: breadcrumbsEnum.LICENSE_KEY_GROUPS,
+        ACTIVITY_LOG: breadcrumbsEnum.ACTIVITY_LOG,
 
-	SCREEN: {
-		ONBOARDING_CATALOG: 'ONBOARDING_CATALOG',
-		VERSIONS_PAGE: breadcrumbsEnum.VERSIONS_PAGE,
-		LICENSE_MODEL_OVERVIEW: breadcrumbsEnum.LICENSE_MODEL_OVERVIEW,
-		LICENSE_AGREEMENTS: breadcrumbsEnum.LICENSE_AGREEMENTS,
-		FEATURE_GROUPS: breadcrumbsEnum.FEATURE_GROUPS,
-		ENTITLEMENT_POOLS: breadcrumbsEnum.ENTITLEMENT_POOLS,
-		LICENSE_KEY_GROUPS: breadcrumbsEnum.LICENSE_KEY_GROUPS,
-		ACTIVITY_LOG: breadcrumbsEnum.ACTIVITY_LOG,
-
-		SOFTWARE_PRODUCT_VERSIONS_PAGE: breadcrumbsEnum.SOFTWARE_PRODUCT_VERSIONS_PAGE,
-		SOFTWARE_PRODUCT_LANDING_PAGE: breadcrumbsEnum.SOFTWARE_PRODUCT_LANDING_PAGE,
-		SOFTWARE_PRODUCT_DETAILS: breadcrumbsEnum.SOFTWARE_PRODUCT_DETAILS,
-		SOFTWARE_PRODUCT_ATTACHMENTS: breadcrumbsEnum.SOFTWARE_PRODUCT_ATTACHMENTS,
-		SOFTWARE_PRODUCT_ATTACHMENTS_SETUP: 'SOFTWARE_PRODUCT_ATTACHMENTS_SETUP',
-		SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION: 'SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION',
-		SOFTWARE_PRODUCT_PROCESSES: breadcrumbsEnum.SOFTWARE_PRODUCT_PROCESSES,
-		SOFTWARE_PRODUCT_DEPLOYMENT: breadcrumbsEnum.SOFTWARE_PRODUCT_DEPLOYMENT,
-		SOFTWARE_PRODUCT_NETWORKS: breadcrumbsEnum.SOFTWARE_PRODUCT_NETWORKS,
-		SOFTWARE_PRODUCT_DEPENDENCIES: breadcrumbsEnum.SOFTWARE_PRODUCT_DEPENDENCIES,
-		SOFTWARE_PRODUCT_ACTIVITY_LOG: breadcrumbsEnum.SOFTWARE_PRODUCT_ACTIVITY_LOG,
-		SOFTWARE_PRODUCT_COMPONENTS: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENTS,
-		SOFTWARE_PRODUCT_COMPONENT_PROCESSES: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
-		SOFTWARE_PRODUCT_COMPONENT_COMPUTE: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
-		SOFTWARE_PRODUCT_COMPONENT_STORAGE: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
-		SOFTWARE_PRODUCT_COMPONENT_NETWORK: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
-		SOFTWARE_PRODUCT_COMPONENT_GENERAL: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
-		SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
-		SOFTWARE_PRODUCT_COMPONENT_MONITORING: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
-		SOFTWARE_PRODUCT_COMPONENT_IMAGES: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_IMAGES
-	}
+        SOFTWARE_PRODUCT_VERSIONS_PAGE:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+        SOFTWARE_PRODUCT_LANDING_PAGE:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_LANDING_PAGE,
+        SOFTWARE_PRODUCT_DETAILS: breadcrumbsEnum.SOFTWARE_PRODUCT_DETAILS,
+        SOFTWARE_PRODUCT_ATTACHMENTS:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_ATTACHMENTS,
+        SOFTWARE_PRODUCT_ATTACHMENTS_SETUP:
+            'SOFTWARE_PRODUCT_ATTACHMENTS_SETUP',
+        SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION:
+            'SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION',
+        SOFTWARE_PRODUCT_PROCESSES: breadcrumbsEnum.SOFTWARE_PRODUCT_PROCESSES,
+        SOFTWARE_PRODUCT_DEPLOYMENT:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_DEPLOYMENT,
+        SOFTWARE_PRODUCT_NETWORKS: breadcrumbsEnum.SOFTWARE_PRODUCT_NETWORKS,
+        SOFTWARE_PRODUCT_DEPENDENCIES:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_DEPENDENCIES,
+        SOFTWARE_PRODUCT_ACTIVITY_LOG:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_ACTIVITY_LOG,
+        SOFTWARE_PRODUCT_COMPONENTS:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENTS,
+        SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+        SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+        SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+        SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+        SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+        SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+        SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
+        SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+            breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_IMAGES
+    }
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
index e04f9b7309..f462dd790b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import ReactDOM from 'react-dom';
 
 import isEqual from 'lodash/isEqual.js';
@@ -29,460 +29,812 @@ import store from 'sdc-app/AppStore.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
 
+import {
+    onboardingMethod as onboardingMethodTypes,
+    onboardingOriginTypes
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
-import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { itemTypes } from './versionsPage/VersionsPageConstants.js';
 
-import {itemTypes} from './versionsPage/VersionsPageConstants.js';
-
-import {AppContainer} from 'react-hot-loader';
+import { AppContainer } from 'react-hot-loader';
 import HeatSetupActionHelper from './softwareProduct/attachments/setup/HeatSetupActionHelper.js';
 
-import {actionTypes, enums, screenTypes} from './OnboardingConstants.js';
+import { actionTypes, enums, screenTypes } from './OnboardingConstants.js';
 import OnboardingActionHelper from './OnboardingActionHelper.js';
 import Onboarding from './Onboarding.js';
 
 export default class OnboardingPunchOut {
-
-	render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
-		if (!this.unsubscribeFromStore) {
-			this.unsubscribeFromStore = store.subscribe(() => this.handleStoreChange());
-		}
-
-		if (!this.isConfigSet) {
-			Configuration.setCatalogApiRoot(apiRoot);
-			Configuration.setCatalogApiHeaders(apiHeaders);
-			this.isConfigSet = true;
-		}
-
-		this.onEvent = (...args) => onEvent(...args);
-		this.handleData(data);
-
-		if (!this.rendered) {
-			render(
-				<AppContainer>
-					<Application>
-						<Onboarding/>
-					</Application>
-				</AppContainer>,
-				element
-			);
-			if (module.hot) {
-				module.hot.accept('sdc-app/onboarding/Onboarding.js', () => {
-					const NextOnboarding = require('sdc-app/onboarding/Onboarding.js').default;
-					render(
-						<AppContainer>
-							<Application>
-								<NextOnboarding/>
-							</Application>
-						</AppContainer>,
-						element
-					);
-				});
-			}
-			this.rendered = true;
-		}
-	}
-
-	unmount(element) {
-		ReactDOM.unmountComponentAtNode(element);
-		this.rendered = false;
-		this.unsubscribeFromStore();
-		this.unsubscribeFromStore = null;
-	}
-
-	handleData(data) {
-		let {breadcrumbs: {selectedKeys = []} = {}} = data;
-		let dispatch = action => store.dispatch(action);
-		let {currentScreen, users: {usersList}, softwareProductList, finalizedSoftwareProductList, licenseModelList, finalizedLicenseModelList,
-			softwareProduct: {softwareProductEditor: {data: vspData = {}},
-			softwareProductComponents = {}, softwareProductQuestionnaire = {}}, archivedLicenseModelList} = store.getState();
-		const wholeSoftwareProductList = [...softwareProductList, ...finalizedSoftwareProductList];
-		const wholeLicenseModelList = [...licenseModelList, ...finalizedLicenseModelList, ...archivedLicenseModelList];
-
-		let {props: {version, isReadOnlyMode}, screen} = currentScreen;
-		let {componentEditor: {data: componentData = {}, qdata: componentQData = {}}} = softwareProductComponents;
-		if (this.programmaticBreadcrumbsUpdate) {
-			this.prevSelectedKeys = selectedKeys;
-			this.programmaticBreadcrumbsUpdate = false;
-			return;
-		}
-		if (!isEqual(selectedKeys, this.prevSelectedKeys)) {
-			this.breadcrumbsPrefixSelected = isEqual(selectedKeys, this.prevSelectedKeys && this.prevSelectedKeys.slice(0, selectedKeys.length));
-
-			const [, screenType, prevVspId, , prevComponentId] = this.prevSelectedKeys || [];
-			let preNavigate = Promise.resolve();
-			if(screenType === enums.BREADCRUMS.SOFTWARE_PRODUCT && screen !== 'VERSIONS_PAGE' && !isReadOnlyMode) {
-				let dataToSave = prevVspId ? prevComponentId ? {componentData, qdata: componentQData} : {softwareProduct: vspData, qdata: softwareProductQuestionnaire.qdata} : {};
-				preNavigate = OnboardingActionHelper.autoSaveBeforeNavigate(dispatch, {
-					softwareProductId: prevVspId,
-					version,
-					vspComponentId: prevComponentId,
-					dataToSave
-				});
-			}
-
-			let {currentScreen: {props: {softwareProductId}}, softwareProduct: {softwareProductAttachments: {heatSetup, heatSetupCache}}} = store.getState();
-			let heatSetupPopupPromise = currentScreen.screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS ?
-				HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
-				Promise.resolve();
-			Promise.all([preNavigate, heatSetupPopupPromise]).then(() => {
-				this.prevSelectedKeys = selectedKeys;
-				if (selectedKeys.length === 0) {
-					ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.ONBOARDING_CATALOG});
-
-				} else if (selectedKeys.length === 1 || selectedKeys[1] === enums.BREADCRUMS.LICENSE_MODEL) {
-					let [licenseModelId, , licenseModelScreen] = selectedKeys;
-					let licenseModel = wholeLicenseModelList.find(vlm => vlm.id === licenseModelId);
-					ScreensHelper.loadScreen(dispatch, {screen: licenseModelScreen, screenType: screenTypes.LICENSE_MODEL,
-						props: {licenseModelId, version, licenseModel, usersList}});
-
-				} else if (selectedKeys.length <= 4 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT) {
-					let [licenseModelId, , softwareProductId, softwareProductScreen] = selectedKeys;
-					let softwareProduct = softwareProductId ?
-						wholeSoftwareProductList.find(({id}) => id === softwareProductId) :
-						wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId);
-					if (!softwareProductId) {
-						softwareProductId = softwareProduct.id;
-					}
-					if (softwareProductScreen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS) {
-						softwareProduct = vspData;
-						//check current vsp fields to determine which file has uploaded
-						if(vspData.onboardingOrigin === onboardingOriginTypes.ZIP || vspData.candidateOnboardingOrigin === onboardingOriginTypes.ZIP) {
-							softwareProductScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
-						}
-						else if(vspData.onboardingOrigin === onboardingOriginTypes.CSAR) {
-							softwareProductScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
-						}
-					}
-
-					ScreensHelper.loadScreen(dispatch, {screen: softwareProductScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {softwareProductId, softwareProduct, version, usersList}});
-
-				} else if (selectedKeys.length === 5 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) {
-					let [licenseModelId, , softwareProductId, , componentId] = selectedKeys;
-					let softwareProduct = softwareProductId ?
-						wholeSoftwareProductList.find(({id}) => id === softwareProductId) :
-						wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId);
-					if (!softwareProductId) {
-						softwareProductId = softwareProduct.id;
-					}
-					ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {softwareProductId, softwareProduct, componentId, version, usersList}});
-
-				} else if (selectedKeys.length === 6 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) {
-					let [licenseModelId, , softwareProductId, , componentId, componentScreen] = selectedKeys;
-					let softwareProduct = softwareProductId ?
-						wholeSoftwareProductList.find(({id}) => id === softwareProductId) :
-						wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId);
-					if (!softwareProductId) {
-						softwareProductId = softwareProduct.id;
-					}
-					ScreensHelper.loadScreen(dispatch, {screen: componentScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {softwareProductId, softwareProduct, componentId, version, usersList}});
-
-				} else {
-					console.error('Unknown breadcrumbs path: ', selectedKeys);
-				}
-			}).catch(() => {
-				store.dispatch({
-					type: actionTypes.SET_CURRENT_SCREEN,
-					currentScreen: {
-						...currentScreen,
-						forceBreadCrumbsUpdate: true
-					}
-				});
-			});
-		}
-	}
-
-	handleStoreChange() {
-		let {currentScreen, licenseModelList, finalizedLicenseModelList, softwareProductList, finalizedSoftwareProductList, versionsPage:
-			{versionsList: {itemType, itemId}},
-			softwareProduct: {softwareProductEditor: {data: currentSoftwareProduct = {onboardingMethod: ''}},
-				softwareProductComponents: {componentsList}}, archivedLicenseModelList, archivedSoftwareProductList} = store.getState();
-		const wholeSoftwareProductList = lodashUnionBy(softwareProductList, [...finalizedSoftwareProductList, ...archivedSoftwareProductList], 'id');
-		const wholeLicenseModelList = lodashUnionBy(licenseModelList, [...finalizedLicenseModelList, ...archivedLicenseModelList], 'id');
-		let breadcrumbsData = {itemType, itemId, currentScreen, wholeLicenseModelList, wholeSoftwareProductList, currentSoftwareProduct, componentsList};
-
-		if (currentScreen.forceBreadCrumbsUpdate || !isEqual(breadcrumbsData, this.prevBreadcrumbsData) || this.breadcrumbsPrefixSelected) {
-			this.prevBreadcrumbsData = breadcrumbsData;
-			this.breadcrumbsPrefixSelected = false;
-			this.programmaticBreadcrumbsUpdate = true;
-			let breadcrumbs = this.buildBreadcrumbs(breadcrumbsData);
-			this.onEvent('breadcrumbsupdated', breadcrumbs);
-			store.dispatch({
-				type: actionTypes.SET_CURRENT_SCREEN,
-				currentScreen: {
-					...currentScreen,
-					forceBreadCrumbsUpdate: false
-				}
-			});
-		}
-	}
-
-	buildBreadcrumbs({currentScreen: {screen, props}, itemType, itemId, currentSoftwareProduct,
-		wholeLicenseModelList, wholeSoftwareProductList, componentsList}) {
-		let {onboardingMethod, onboardingOrigin, candidateOnboardingOrigin} = currentSoftwareProduct;
-		let screenToBreadcrumb;
-		switch (screen) {
-			case enums.SCREEN.ONBOARDING_CATALOG:
-				return [];
-
-			case enums.SCREEN.VERSIONS_PAGE:
-				let firstMenuItems = itemType === itemTypes.LICENSE_MODEL ? [
-					{
-						selectedKey: itemId,
-						menuItems: wholeLicenseModelList.map(({id, name}) => ({
-							key: id,
-							displayText: name
-						}))
-					}] : [
-						{
-							selectedKey: props.additionalProps.licenseModelId || currentSoftwareProduct.vendorId,
-							menuItems: wholeLicenseModelList.map(({id, name}) => ({
-								key: id,
-								displayText: name
-							}))
-						},
-						{
-							selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT,
-							menuItems: [{
-								key: enums.BREADCRUMS.LICENSE_MODEL,
-								displayText: i18n('License Model')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
-								displayText: i18n('Software Products')
-							}]
-						},
-						{
-							selectedKey: itemId,
-							menuItems: wholeSoftwareProductList
-								.filter(({id, vendorId}) => vendorId === currentSoftwareProduct.vendorId || id === itemId)
-								.map(({id, name}) => ({
-									key: id,
-									displayText: name
-								}))
-						},
-					];
-				return [
-					...firstMenuItems,
-					{
-						selectedKey: enums.BREADCRUMS.VERSIONS_PAGE,
-						menuItems: [{key: enums.BREADCRUMS.VERSIONS_PAGE, displayText: i18n('Versions Page')}]
-					}
-				];
-
-			case enums.SCREEN.LICENSE_AGREEMENTS:
-			case enums.SCREEN.FEATURE_GROUPS:
-			case enums.SCREEN.ENTITLEMENT_POOLS:
-			case enums.SCREEN.LICENSE_KEY_GROUPS:
-			case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
-			case enums.SCREEN.ACTIVITY_LOG:
-				screenToBreadcrumb = {
-					[enums.SCREEN.LICENSE_AGREEMENTS]: enums.BREADCRUMS.LICENSE_AGREEMENTS,
-					[enums.SCREEN.FEATURE_GROUPS]: enums.BREADCRUMS.FEATURE_GROUPS,
-					[enums.SCREEN.ENTITLEMENT_POOLS]: enums.BREADCRUMS.ENTITLEMENT_POOLS,
-					[enums.SCREEN.LICENSE_KEY_GROUPS]: enums.BREADCRUMS.LICENSE_KEY_GROUPS,
-					[enums.SCREEN.LICENSE_MODEL_OVERVIEW]: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
-					[enums.SCREEN.ACTIVITY_LOG]: enums.BREADCRUMS.ACTIVITY_LOG
-				};
-				return [
-					{
-						selectedKey: props.licenseModelId,
-						menuItems: wholeLicenseModelList.map(({id, name}) => ({
-							key: id,
-							displayText: name
-						}))
-					},
-					{
-						selectedKey: enums.BREADCRUMS.LICENSE_MODEL,
-						menuItems: [{
-							key: enums.BREADCRUMS.LICENSE_MODEL,
-							displayText: i18n('License Model')
-						},
-						...(wholeSoftwareProductList.findIndex(({vendorId}) => vendorId === props.licenseModelId) === -1 ? [] : [{
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
-							displayText: i18n('Software Products')
-						}])]
-					}, {
-						selectedKey: screenToBreadcrumb[screen],
-						menuItems: [{
-							key: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
-							displayText: i18n('Overview')
-						},{
-							key: enums.BREADCRUMS.LICENSE_AGREEMENTS,
-							displayText: i18n('License Agreements')
-						}, {
-							key: enums.BREADCRUMS.FEATURE_GROUPS,
-							displayText: i18n('Feature Groups')
-						}, {
-							key: enums.BREADCRUMS.ENTITLEMENT_POOLS,
-							displayText: i18n('Entitlement Pools')
-						}, {
-							key: enums.BREADCRUMS.LICENSE_KEY_GROUPS,
-							displayText: i18n('License Key Groups')
-						}, {
-							key: enums.BREADCRUMS.ACTIVITY_LOG,
-							displayText: i18n('Activity Log')
-						}]
-					}
-				];
-
-			case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-			case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
-			case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-			case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-			case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-				screenToBreadcrumb = {
-					[enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE,
-					[enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
-					[enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
-					[enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
-					[enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT,
-					[enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
-					[enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
-					[enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]: enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG
-				};
-				let componentScreenToBreadcrumb = {
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
-					[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING
-				};
-				let licenseModelId = currentSoftwareProduct.vendorId;
-				let returnedBreadcrumb = [
-					{
-						selectedKey: licenseModelId,
-						menuItems: wholeLicenseModelList.map(({id, name}) => ({
-							key: id,
-							displayText: name
-						}))
-					},
-					{
-						selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT,
-						menuItems: [{
-							key: enums.BREADCRUMS.LICENSE_MODEL,
-							displayText: i18n('License Model')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
-							displayText: i18n('Software Products')
-						}]
-					},
-					{
-						selectedKey: props.softwareProductId,
-						menuItems: wholeSoftwareProductList
-							.filter(({vendorId, id}) => vendorId === licenseModelId || id === props.softwareProductId)
-							.map(({id, name}) => ({
-								key: id,
-								displayText: name
-							}))
-					},
-					...(/*screen === enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE ? [] :*/ [{
-						selectedKey: screenToBreadcrumb[screen] || enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
-						menuItems: [{
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE,
-							displayText: i18n('Overview')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
-							displayText: i18n('General')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT,
-							displayText: i18n('Deployment Flavors')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
-							displayText: i18n('Process Details')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
-							displayText: i18n('Networks')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES,
-							displayText: i18n('Components Dependencies')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
-							displayText: i18n('Attachments')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG,
-							displayText: i18n('Activity Log')
-						}, {
-							key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
-							displayText: i18n('Components')
-						}].filter(item => {
-							switch (item.key) {
-								case enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS:
-									let isHeatData = onboardingOrigin !== onboardingOriginTypes.NONE || candidateOnboardingOrigin === onboardingOriginTypes.ZIP;
-									return isHeatData;
-								case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS:
-									return (componentsList.length > 0);
-								case enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT:
-									let isManualMode = onboardingMethod === onboardingMethodTypes.MANUAL;
-									return isManualMode;
-								case enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES:
-									return (componentsList.length > 1);
-								default:
-									return true;
-							}
-						})
-					}])
-				];
-				if(props.componentId) {
-					returnedBreadcrumb = [
-						...returnedBreadcrumb, {
-							selectedKey: props.componentId,
-							menuItems: componentsList
-								.map(({id, displayName}) => ({
-									key: id,
-									displayText: displayName
-								}))
-						},
-						...[{
-							selectedKey: componentScreenToBreadcrumb[screen],
-							menuItems: [{
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
-								displayText: i18n('General')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
-								displayText: i18n('Compute')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
-								displayText: i18n('High Availability & Load Balancing')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
-								displayText: i18n('Networks')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
-								displayText: i18n('Storage')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
-								displayText: i18n('Images')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
-								displayText: i18n('Process Details')
-							}, {
-								key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
-								displayText: i18n('Monitoring')
-							}]
-						}]
-					];
-				}
-				return returnedBreadcrumb;
-		}
-	}
+    render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) {
+        if (!this.unsubscribeFromStore) {
+            this.unsubscribeFromStore = store.subscribe(() =>
+                this.handleStoreChange()
+            );
+        }
+
+        if (!this.isConfigSet) {
+            Configuration.setCatalogApiRoot(apiRoot);
+            Configuration.setCatalogApiHeaders(apiHeaders);
+            this.isConfigSet = true;
+        }
+
+        this.onEvent = (...args) => onEvent(...args);
+        this.handleData(data);
+
+        if (!this.rendered) {
+            render(
+                <AppContainer>
+                    <Application>
+                        <Onboarding />
+                    </Application>
+                </AppContainer>,
+                element
+            );
+            if (module.hot) {
+                module.hot.accept('sdc-app/onboarding/Onboarding.js', () => {
+                    const NextOnboarding = require('sdc-app/onboarding/Onboarding.js')
+                        .default;
+                    render(
+                        <AppContainer>
+                            <Application>
+                                <NextOnboarding />
+                            </Application>
+                        </AppContainer>,
+                        element
+                    );
+                });
+            }
+            this.rendered = true;
+        }
+    }
+
+    unmount(element) {
+        ReactDOM.unmountComponentAtNode(element);
+        this.rendered = false;
+        this.unsubscribeFromStore();
+        this.unsubscribeFromStore = null;
+    }
+
+    handleData(data) {
+        let { breadcrumbs: { selectedKeys = [] } = {} } = data;
+        let dispatch = action => store.dispatch(action);
+        let {
+            currentScreen,
+            users: { usersList },
+            softwareProductList,
+            finalizedSoftwareProductList,
+            licenseModelList,
+            finalizedLicenseModelList,
+            softwareProduct: {
+                softwareProductEditor: { data: vspData = {} },
+                softwareProductComponents = {},
+                softwareProductQuestionnaire = {}
+            },
+            archivedLicenseModelList
+        } = store.getState();
+        const wholeSoftwareProductList = [
+            ...softwareProductList,
+            ...finalizedSoftwareProductList
+        ];
+        const wholeLicenseModelList = [
+            ...licenseModelList,
+            ...finalizedLicenseModelList,
+            ...archivedLicenseModelList
+        ];
+
+        let { props: { version, isReadOnlyMode }, screen } = currentScreen;
+        let {
+            componentEditor: {
+                data: componentData = {},
+                qdata: componentQData = {}
+            }
+        } = softwareProductComponents;
+        if (this.programmaticBreadcrumbsUpdate) {
+            this.prevSelectedKeys = selectedKeys;
+            this.programmaticBreadcrumbsUpdate = false;
+            return;
+        }
+        if (!isEqual(selectedKeys, this.prevSelectedKeys)) {
+            this.breadcrumbsPrefixSelected = isEqual(
+                selectedKeys,
+                this.prevSelectedKeys &&
+                    this.prevSelectedKeys.slice(0, selectedKeys.length)
+            );
+
+            const [, screenType, prevVspId, , prevComponentId] =
+                this.prevSelectedKeys || [];
+            let preNavigate = Promise.resolve();
+            if (
+                screenType === enums.BREADCRUMS.SOFTWARE_PRODUCT &&
+                screen !== 'VERSIONS_PAGE' &&
+                !isReadOnlyMode
+            ) {
+                let dataToSave = prevVspId
+                    ? prevComponentId
+                      ? { componentData, qdata: componentQData }
+                      : {
+                            softwareProduct: vspData,
+                            qdata: softwareProductQuestionnaire.qdata
+                        }
+                    : {};
+                preNavigate = OnboardingActionHelper.autoSaveBeforeNavigate(
+                    dispatch,
+                    {
+                        softwareProductId: prevVspId,
+                        version,
+                        vspComponentId: prevComponentId,
+                        dataToSave
+                    }
+                );
+            }
+
+            let {
+                currentScreen: { props: { softwareProductId } },
+                softwareProduct: {
+                    softwareProductAttachments: { heatSetup, heatSetupCache }
+                }
+            } = store.getState();
+            let heatSetupPopupPromise =
+                currentScreen.screen ===
+                enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+                    ? HeatSetupActionHelper.heatSetupLeaveConfirmation(
+                          dispatch,
+                          { softwareProductId, heatSetup, heatSetupCache }
+                      )
+                    : Promise.resolve();
+            Promise.all([preNavigate, heatSetupPopupPromise])
+                .then(() => {
+                    this.prevSelectedKeys = selectedKeys;
+                    if (selectedKeys.length === 0) {
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen: enums.SCREEN.ONBOARDING_CATALOG
+                        });
+                    } else if (
+                        selectedKeys.length === 1 ||
+                        selectedKeys[1] === enums.BREADCRUMS.LICENSE_MODEL
+                    ) {
+                        let [
+                            licenseModelId,
+                            ,
+                            licenseModelScreen
+                        ] = selectedKeys;
+                        let licenseModel = wholeLicenseModelList.find(
+                            vlm => vlm.id === licenseModelId
+                        );
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen: licenseModelScreen,
+                            screenType: screenTypes.LICENSE_MODEL,
+                            props: {
+                                licenseModelId,
+                                version,
+                                licenseModel,
+                                usersList
+                            }
+                        });
+                    } else if (
+                        selectedKeys.length <= 4 &&
+                        selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT
+                    ) {
+                        let [
+                            licenseModelId,
+                            ,
+                            softwareProductId,
+                            softwareProductScreen
+                        ] = selectedKeys;
+                        let softwareProduct = softwareProductId
+                            ? wholeSoftwareProductList.find(
+                                  ({ id }) => id === softwareProductId
+                              )
+                            : wholeSoftwareProductList.find(
+                                  ({ vendorId }) => vendorId === licenseModelId
+                              );
+                        if (!softwareProductId) {
+                            softwareProductId = softwareProduct.id;
+                        }
+                        if (
+                            softwareProductScreen ===
+                            enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+                        ) {
+                            softwareProduct = vspData;
+                            //check current vsp fields to determine which file has uploaded
+                            if (
+                                vspData.onboardingOrigin ===
+                                    onboardingOriginTypes.ZIP ||
+                                vspData.candidateOnboardingOrigin ===
+                                    onboardingOriginTypes.ZIP
+                            ) {
+                                softwareProductScreen =
+                                    enums.SCREEN
+                                        .SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
+                            } else if (
+                                vspData.onboardingOrigin ===
+                                onboardingOriginTypes.CSAR
+                            ) {
+                                softwareProductScreen =
+                                    enums.SCREEN
+                                        .SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
+                            }
+                        }
+
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen: softwareProductScreen,
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                softwareProduct,
+                                version,
+                                usersList
+                            }
+                        });
+                    } else if (
+                        selectedKeys.length === 5 &&
+                        selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT &&
+                        selectedKeys[3] ===
+                            enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS
+                    ) {
+                        let [
+                            licenseModelId,
+                            ,
+                            softwareProductId,
+                            ,
+                            componentId
+                        ] = selectedKeys;
+                        let softwareProduct = softwareProductId
+                            ? wholeSoftwareProductList.find(
+                                  ({ id }) => id === softwareProductId
+                              )
+                            : wholeSoftwareProductList.find(
+                                  ({ vendorId }) => vendorId === licenseModelId
+                              );
+                        if (!softwareProductId) {
+                            softwareProductId = softwareProduct.id;
+                        }
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS,
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                softwareProduct,
+                                componentId,
+                                version,
+                                usersList
+                            }
+                        });
+                    } else if (
+                        selectedKeys.length === 6 &&
+                        selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT &&
+                        selectedKeys[3] ===
+                            enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS
+                    ) {
+                        let [
+                            licenseModelId,
+                            ,
+                            softwareProductId,
+                            ,
+                            componentId,
+                            componentScreen
+                        ] = selectedKeys;
+                        let softwareProduct = softwareProductId
+                            ? wholeSoftwareProductList.find(
+                                  ({ id }) => id === softwareProductId
+                              )
+                            : wholeSoftwareProductList.find(
+                                  ({ vendorId }) => vendorId === licenseModelId
+                              );
+                        if (!softwareProductId) {
+                            softwareProductId = softwareProduct.id;
+                        }
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen: componentScreen,
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                softwareProduct,
+                                componentId,
+                                version,
+                                usersList
+                            }
+                        });
+                    } else {
+                        console.error(
+                            'Unknown breadcrumbs path: ',
+                            selectedKeys
+                        );
+                    }
+                })
+                .catch(() => {
+                    store.dispatch({
+                        type: actionTypes.SET_CURRENT_SCREEN,
+                        currentScreen: {
+                            ...currentScreen,
+                            forceBreadCrumbsUpdate: true
+                        }
+                    });
+                });
+        }
+    }
+
+    handleStoreChange() {
+        let {
+            currentScreen,
+            licenseModelList,
+            finalizedLicenseModelList,
+            softwareProductList,
+            finalizedSoftwareProductList,
+            versionsPage: { versionsList: { itemType, itemId } },
+            softwareProduct: {
+                softwareProductEditor: {
+                    data: currentSoftwareProduct = { onboardingMethod: '' }
+                },
+                softwareProductComponents: { componentsList }
+            },
+            archivedLicenseModelList,
+            archivedSoftwareProductList
+        } = store.getState();
+        const wholeSoftwareProductList = lodashUnionBy(
+            softwareProductList,
+            [...finalizedSoftwareProductList, ...archivedSoftwareProductList],
+            'id'
+        );
+        const wholeLicenseModelList = lodashUnionBy(
+            licenseModelList,
+            [...finalizedLicenseModelList, ...archivedLicenseModelList],
+            'id'
+        );
+        let breadcrumbsData = {
+            itemType,
+            itemId,
+            currentScreen,
+            wholeLicenseModelList,
+            wholeSoftwareProductList,
+            currentSoftwareProduct,
+            componentsList
+        };
+
+        if (
+            currentScreen.forceBreadCrumbsUpdate ||
+            !isEqual(breadcrumbsData, this.prevBreadcrumbsData) ||
+            this.breadcrumbsPrefixSelected
+        ) {
+            this.prevBreadcrumbsData = breadcrumbsData;
+            this.breadcrumbsPrefixSelected = false;
+            this.programmaticBreadcrumbsUpdate = true;
+            let breadcrumbs = this.buildBreadcrumbs(breadcrumbsData);
+            this.onEvent('breadcrumbsupdated', breadcrumbs);
+            store.dispatch({
+                type: actionTypes.SET_CURRENT_SCREEN,
+                currentScreen: {
+                    ...currentScreen,
+                    forceBreadCrumbsUpdate: false
+                }
+            });
+        }
+    }
+
+    buildBreadcrumbs({
+        currentScreen: { screen, props },
+        itemType,
+        itemId,
+        currentSoftwareProduct,
+        wholeLicenseModelList,
+        wholeSoftwareProductList,
+        componentsList
+    }) {
+        let {
+            onboardingMethod,
+            onboardingOrigin,
+            candidateOnboardingOrigin
+        } = currentSoftwareProduct;
+        let screenToBreadcrumb;
+        switch (screen) {
+            case enums.SCREEN.ONBOARDING_CATALOG:
+                return [];
+
+            case enums.SCREEN.VERSIONS_PAGE:
+                let firstMenuItems =
+                    itemType === itemTypes.LICENSE_MODEL
+                        ? [
+                              {
+                                  selectedKey: itemId,
+                                  menuItems: wholeLicenseModelList.map(
+                                      ({ id, name }) => ({
+                                          key: id,
+                                          displayText: name
+                                      })
+                                  )
+                              }
+                          ]
+                        : [
+                              {
+                                  selectedKey:
+                                      props.additionalProps.licenseModelId ||
+                                      currentSoftwareProduct.vendorId,
+                                  menuItems: wholeLicenseModelList.map(
+                                      ({ id, name }) => ({
+                                          key: id,
+                                          displayText: name
+                                      })
+                                  )
+                              },
+                              {
+                                  selectedKey:
+                                      enums.BREADCRUMS.SOFTWARE_PRODUCT,
+                                  menuItems: [
+                                      {
+                                          key: enums.BREADCRUMS.LICENSE_MODEL,
+                                          displayText: i18n('License Model')
+                                      },
+                                      {
+                                          key:
+                                              enums.BREADCRUMS.SOFTWARE_PRODUCT,
+                                          displayText: i18n('Software Products')
+                                      }
+                                  ]
+                              },
+                              {
+                                  selectedKey: itemId,
+                                  menuItems: wholeSoftwareProductList
+                                      .filter(
+                                          ({ id, vendorId }) =>
+                                              vendorId ===
+                                                  currentSoftwareProduct.vendorId ||
+                                              id === itemId
+                                      )
+                                      .map(({ id, name }) => ({
+                                          key: id,
+                                          displayText: name
+                                      }))
+                              }
+                          ];
+                return [
+                    ...firstMenuItems,
+                    {
+                        selectedKey: enums.BREADCRUMS.VERSIONS_PAGE,
+                        menuItems: [
+                            {
+                                key: enums.BREADCRUMS.VERSIONS_PAGE,
+                                displayText: i18n('Versions Page')
+                            }
+                        ]
+                    }
+                ];
+
+            case enums.SCREEN.LICENSE_AGREEMENTS:
+            case enums.SCREEN.FEATURE_GROUPS:
+            case enums.SCREEN.ENTITLEMENT_POOLS:
+            case enums.SCREEN.LICENSE_KEY_GROUPS:
+            case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+            case enums.SCREEN.ACTIVITY_LOG:
+                screenToBreadcrumb = {
+                    [enums.SCREEN.LICENSE_AGREEMENTS]:
+                        enums.BREADCRUMS.LICENSE_AGREEMENTS,
+                    [enums.SCREEN.FEATURE_GROUPS]:
+                        enums.BREADCRUMS.FEATURE_GROUPS,
+                    [enums.SCREEN.ENTITLEMENT_POOLS]:
+                        enums.BREADCRUMS.ENTITLEMENT_POOLS,
+                    [enums.SCREEN.LICENSE_KEY_GROUPS]:
+                        enums.BREADCRUMS.LICENSE_KEY_GROUPS,
+                    [enums.SCREEN.LICENSE_MODEL_OVERVIEW]:
+                        enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
+                    [enums.SCREEN.ACTIVITY_LOG]: enums.BREADCRUMS.ACTIVITY_LOG
+                };
+                return [
+                    {
+                        selectedKey: props.licenseModelId,
+                        menuItems: wholeLicenseModelList.map(
+                            ({ id, name }) => ({
+                                key: id,
+                                displayText: name
+                            })
+                        )
+                    },
+                    {
+                        selectedKey: enums.BREADCRUMS.LICENSE_MODEL,
+                        menuItems: [
+                            {
+                                key: enums.BREADCRUMS.LICENSE_MODEL,
+                                displayText: i18n('License Model')
+                            },
+                            ...(wholeSoftwareProductList.findIndex(
+                                ({ vendorId }) =>
+                                    vendorId === props.licenseModelId
+                            ) === -1
+                                ? []
+                                : [
+                                      {
+                                          key:
+                                              enums.BREADCRUMS.SOFTWARE_PRODUCT,
+                                          displayText: i18n('Software Products')
+                                      }
+                                  ])
+                        ]
+                    },
+                    {
+                        selectedKey: screenToBreadcrumb[screen],
+                        menuItems: [
+                            {
+                                key: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
+                                displayText: i18n('Overview')
+                            },
+                            {
+                                key: enums.BREADCRUMS.LICENSE_AGREEMENTS,
+                                displayText: i18n('License Agreements')
+                            },
+                            {
+                                key: enums.BREADCRUMS.FEATURE_GROUPS,
+                                displayText: i18n('Feature Groups')
+                            },
+                            {
+                                key: enums.BREADCRUMS.ENTITLEMENT_POOLS,
+                                displayText: i18n('Entitlement Pools')
+                            },
+                            {
+                                key: enums.BREADCRUMS.LICENSE_KEY_GROUPS,
+                                displayText: i18n('License Key Groups')
+                            },
+                            {
+                                key: enums.BREADCRUMS.ACTIVITY_LOG,
+                                displayText: i18n('Activity Log')
+                            }
+                        ]
+                    }
+                ];
+
+            case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+            case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+            case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+            case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+            case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+                screenToBreadcrumb = {
+                    [enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG
+                };
+                let componentScreenToBreadcrumb = {
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]:
+                        enums.BREADCRUMS
+                            .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
+                    [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]:
+                        enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING
+                };
+                let licenseModelId = currentSoftwareProduct.vendorId;
+                let returnedBreadcrumb = [
+                    {
+                        selectedKey: licenseModelId,
+                        menuItems: wholeLicenseModelList.map(
+                            ({ id, name }) => ({
+                                key: id,
+                                displayText: name
+                            })
+                        )
+                    },
+                    {
+                        selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT,
+                        menuItems: [
+                            {
+                                key: enums.BREADCRUMS.LICENSE_MODEL,
+                                displayText: i18n('License Model')
+                            },
+                            {
+                                key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
+                                displayText: i18n('Software Products')
+                            }
+                        ]
+                    },
+                    {
+                        selectedKey: props.softwareProductId,
+                        menuItems: wholeSoftwareProductList
+                            .filter(
+                                ({ vendorId, id }) =>
+                                    vendorId === licenseModelId ||
+                                    id === props.softwareProductId
+                            )
+                            .map(({ id, name }) => ({
+                                key: id,
+                                displayText: name
+                            }))
+                    },
+                    .../*screen === enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE ? [] :*/ [
+                        {
+                            selectedKey:
+                                screenToBreadcrumb[screen] ||
+                                enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
+                            menuItems: [
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_LANDING_PAGE,
+                                    displayText: i18n('Overview')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_DETAILS,
+                                    displayText: i18n('General')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_DEPLOYMENT,
+                                    displayText: i18n('Deployment Flavors')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_PROCESSES,
+                                    displayText: i18n('Process Details')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_NETWORKS,
+                                    displayText: i18n('Networks')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_DEPENDENCIES,
+                                    displayText: i18n('Components Dependencies')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_ATTACHMENTS,
+                                    displayText: i18n('Attachments')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_ACTIVITY_LOG,
+                                    displayText: i18n('Activity Log')
+                                },
+                                {
+                                    key:
+                                        enums.BREADCRUMS
+                                            .SOFTWARE_PRODUCT_COMPONENTS,
+                                    displayText: i18n('Components')
+                                }
+                            ].filter(item => {
+                                switch (item.key) {
+                                    case enums.BREADCRUMS
+                                        .SOFTWARE_PRODUCT_ATTACHMENTS:
+                                        let isHeatData =
+                                            onboardingOrigin !==
+                                                onboardingOriginTypes.NONE ||
+                                            candidateOnboardingOrigin ===
+                                                onboardingOriginTypes.ZIP;
+                                        return isHeatData;
+                                    case enums.BREADCRUMS
+                                        .SOFTWARE_PRODUCT_COMPONENTS:
+                                        return componentsList.length > 0;
+                                    case enums.BREADCRUMS
+                                        .SOFTWARE_PRODUCT_DEPLOYMENT:
+                                        let isManualMode =
+                                            onboardingMethod ===
+                                            onboardingMethodTypes.MANUAL;
+                                        return isManualMode;
+                                    case enums.BREADCRUMS
+                                        .SOFTWARE_PRODUCT_DEPENDENCIES:
+                                        return componentsList.length > 1;
+                                    default:
+                                        return true;
+                                }
+                            })
+                        }
+                    ]
+                ];
+                if (props.componentId) {
+                    returnedBreadcrumb = [
+                        ...returnedBreadcrumb,
+                        {
+                            selectedKey: props.componentId,
+                            menuItems: componentsList.map(
+                                ({ id, displayName }) => ({
+                                    key: id,
+                                    displayText: displayName
+                                })
+                            )
+                        },
+                        ...[
+                            {
+                                selectedKey:
+                                    componentScreenToBreadcrumb[screen],
+                                menuItems: [
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+                                        displayText: i18n('General')
+                                    },
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+                                        displayText: i18n('Compute')
+                                    },
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+                                        displayText: i18n(
+                                            'High Availability & Load Balancing'
+                                        )
+                                    },
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+                                        displayText: i18n('Networks')
+                                    },
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+                                        displayText: i18n('Storage')
+                                    },
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_IMAGES,
+                                        displayText: i18n('Images')
+                                    },
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+                                        displayText: i18n('Process Details')
+                                    },
+                                    {
+                                        key:
+                                            enums.BREADCRUMS
+                                                .SOFTWARE_PRODUCT_COMPONENT_MONITORING,
+                                        displayText: i18n('Monitoring')
+                                    }
+                                ]
+                            }
+                        ]
+                    ];
+                }
+                return returnedBreadcrumb;
+        }
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
index 16c0e61491..9abae2d1c1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
@@ -13,130 +13,159 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, enums} from './OnboardingConstants.js';
-import {actionTypes as permissionActionTypes} from './permissions/PermissionsConstants.js';
-import {actionTypes as licenseModelCreateActionTypes} from './licenseModel/creation/LicenseModelCreationConstants.js';
-import {actionTypes as softwareProductCreateActionTypes} from './softwareProduct/creation/SoftwareProductCreationConstants.js';
-import {actionTypes as versionCreateActionTypes} from './versionsPage/creation/VersionsPageCreationConstants.js';
-import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
-
-import {catalogItemStatuses} from './onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { actionTypes, enums } from './OnboardingConstants.js';
+import { actionTypes as permissionActionTypes } from './permissions/PermissionsConstants.js';
+import { actionTypes as licenseModelCreateActionTypes } from './licenseModel/creation/LicenseModelCreationConstants.js';
+import { actionTypes as softwareProductCreateActionTypes } from './softwareProduct/creation/SoftwareProductCreationConstants.js';
+import { actionTypes as versionCreateActionTypes } from './versionsPage/creation/VersionsPageCreationConstants.js';
+import { SyncStates } from 'sdc-app/common/merge/MergeEditorConstants.js';
+
+import { catalogItemStatuses } from './onboard/onboardingCatalog/OnboardingCatalogConstants.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
-const checkReadOnly = ({isCollaborator = true, inMerge = false, isCertified = false, isArchived  = false}) => !isCollaborator || inMerge || isCertified || isArchived;
-
-const currentScreen = (state = {
-	forceBreadCrumbsUpdate: false,
-	screen: enums.SCREEN.ONBOARDING_CATALOG,
-	itemPermission: {},
-	props: {}
-}, action) => {
-
-	switch (action.type) {
-
-		case actionTypes.SET_CURRENT_SCREEN: {
-			let itemPermission = {...state.itemPermission};
-			let {currentScreen} = action;
-			itemPermission.isArchived = currentScreen.props.status === catalogItemStatuses.ARCHIVED;
-
-			if (currentScreen.props.version) {
-				let {status} = currentScreen.props.version;
-				itemPermission.isCertified = itemPermission.isCertified && status === catalogItemStatuses.CERTIFIED;
-			}
-
-			let isReadOnlyMode = checkReadOnly(itemPermission);
-			let props = {...currentScreen.props, isReadOnlyMode};
-
-			return {
-				...state,
-				...currentScreen,
-				itemPermission,
-				props
-			};
-		}
-
-		case actionTypes.UPDATE_CURRENT_SCREEN_PROPS:
-			return {
-				...state,
-				props: {
-					...state.props,
-					...action.props,
-					isReadOnlyMode: checkReadOnly(state.itemPermission)
-				}
-			};
-
-		case actionTypes.SET_CURRENT_SCREEN_VERSION:
-			return {
-				...state,
-				props: {
-					...state.props,
-					version: action.version,
-					isReadOnlyMode: checkReadOnly({...state.itemPermission,itemStatus: state.props.status})
-				}
-			};
-
-		case licenseModelCreateActionTypes.LICENSE_MODEL_CREATED:
-		case softwareProductCreateActionTypes.SOFTWARE_PRODUCT_CREATED:
-		case versionCreateActionTypes.VERSION_CREATED:
-			return {
-				...state,
-				itemPermission: {
-					isCollaborator: true,
-					inMerge: false,
-					isCertified: false
-				},
-				props: {
-					...state.props,
-					isReadOnlyMode: false
-				}
-			};
-
-		case permissionActionTypes.ITEM_USERS_LOADED: {
-			let userId = Configuration.get('UserID');
-			let isCollaborator = false;
-
-			if (userId === action.owner.userId) {
-				isCollaborator = true;
-			} else {
-				isCollaborator = action.contributors.reduce(
-					(foundUser, contributor) => foundUser || contributor.userId === userId, false
-				);
-			}
-
-			let itemPermission = {...state.itemPermission, isCollaborator};
-			let isReadOnlyMode = checkReadOnly(itemPermission);
-			let props = {...state.props, isReadOnlyMode};
-
-			return {
-				...state,
-				itemPermission,
-				props
-			};
-		}
-
-		case actionTypes.UPDATE_ITEM_STATUS: {
-			const {itemState: {synchronizationState, dirty}, itemStatus, updatedVersion, archivedStatus} = action;
-			const inMerge = synchronizationState === SyncStates.MERGE;
-			const isOutOfSync = synchronizationState === SyncStates.OUT_OF_SYNC;
-			const isUpToDate = synchronizationState === SyncStates.UP_TO_DATE;
-			const isCertified = itemStatus === catalogItemStatuses.CERTIFIED;
-			const isArchived = archivedStatus === catalogItemStatuses.ARCHIVED;
-			const itemPermission = {...state.itemPermission, inMerge, isDirty: dirty, isOutOfSync, isUpToDate, isCertified, isArchived};
-			const isReadOnlyMode = checkReadOnly(itemPermission);
-			const props = {...state.props, isReadOnlyMode, version: {...state.props.version, ...updatedVersion}};
-
-			return {
-				...state,
-				itemPermission,
-				props
-			};
-		}
-
-		default:
-			return state;
-
-	}
-
+const checkReadOnly = ({
+    isCollaborator = true,
+    inMerge = false,
+    isCertified = false,
+    isArchived = false
+}) => !isCollaborator || inMerge || isCertified || isArchived;
+
+const currentScreen = (
+    state = {
+        forceBreadCrumbsUpdate: false,
+        screen: enums.SCREEN.ONBOARDING_CATALOG,
+        itemPermission: {},
+        props: {}
+    },
+    action
+) => {
+    switch (action.type) {
+        case actionTypes.SET_CURRENT_SCREEN: {
+            let itemPermission = { ...state.itemPermission };
+            let { currentScreen } = action;
+            itemPermission.isArchived =
+                currentScreen.props.status === catalogItemStatuses.ARCHIVED;
+
+            if (currentScreen.props.version) {
+                let { status } = currentScreen.props.version;
+                itemPermission.isCertified =
+                    itemPermission.isCertified &&
+                    status === catalogItemStatuses.CERTIFIED;
+            }
+
+            let isReadOnlyMode = checkReadOnly(itemPermission);
+            let props = { ...currentScreen.props, isReadOnlyMode };
+
+            return {
+                ...state,
+                ...currentScreen,
+                itemPermission,
+                props
+            };
+        }
+
+        case actionTypes.UPDATE_CURRENT_SCREEN_PROPS:
+            return {
+                ...state,
+                props: {
+                    ...state.props,
+                    ...action.props,
+                    isReadOnlyMode: checkReadOnly(state.itemPermission)
+                }
+            };
+
+        case actionTypes.SET_CURRENT_SCREEN_VERSION:
+            return {
+                ...state,
+                props: {
+                    ...state.props,
+                    version: action.version,
+                    isReadOnlyMode: checkReadOnly({
+                        ...state.itemPermission,
+                        itemStatus: state.props.status
+                    })
+                }
+            };
+
+        case licenseModelCreateActionTypes.LICENSE_MODEL_CREATED:
+        case softwareProductCreateActionTypes.SOFTWARE_PRODUCT_CREATED:
+        case versionCreateActionTypes.VERSION_CREATED:
+            return {
+                ...state,
+                itemPermission: {
+                    isCollaborator: true,
+                    inMerge: false,
+                    isCertified: false
+                },
+                props: {
+                    ...state.props,
+                    isReadOnlyMode: false
+                }
+            };
+
+        case permissionActionTypes.ITEM_USERS_LOADED: {
+            let userId = Configuration.get('UserID');
+            let isCollaborator = false;
+
+            if (userId === action.owner.userId) {
+                isCollaborator = true;
+            } else {
+                isCollaborator = action.contributors.reduce(
+                    (foundUser, contributor) =>
+                        foundUser || contributor.userId === userId,
+                    false
+                );
+            }
+
+            let itemPermission = { ...state.itemPermission, isCollaborator };
+            let isReadOnlyMode = checkReadOnly(itemPermission);
+            let props = { ...state.props, isReadOnlyMode };
+
+            return {
+                ...state,
+                itemPermission,
+                props
+            };
+        }
+
+        case actionTypes.UPDATE_ITEM_STATUS: {
+            const {
+                itemState: { synchronizationState, dirty },
+                itemStatus,
+                updatedVersion,
+                archivedStatus
+            } = action;
+            const inMerge = synchronizationState === SyncStates.MERGE;
+            const isOutOfSync = synchronizationState === SyncStates.OUT_OF_SYNC;
+            const isUpToDate = synchronizationState === SyncStates.UP_TO_DATE;
+            const isCertified = itemStatus === catalogItemStatuses.CERTIFIED;
+            const isArchived = archivedStatus === catalogItemStatuses.ARCHIVED;
+            const itemPermission = {
+                ...state.itemPermission,
+                inMerge,
+                isDirty: dirty,
+                isOutOfSync,
+                isUpToDate,
+                isCertified,
+                isArchived
+            };
+            const isReadOnlyMode = checkReadOnly(itemPermission);
+            const props = {
+                ...state.props,
+                isReadOnlyMode,
+                version: { ...state.props.version, ...updatedVersion }
+            };
+
+            return {
+                ...state,
+                itemPermission,
+                props
+            };
+        }
+
+        default:
+            return state;
+    }
 };
 
 export default currentScreen;
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js
index 5b678b1d43..3b526a67f6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js
@@ -30,19 +30,19 @@ import revisionsReducer from './revisions/RevisionsReducer.js';
 import featuresReducer from 'sdc-app/features/FeaturesReducer.js';
 
 export default {
-	currentScreen: currentScreenReducer,
-	licenseModel: licenseModelReducer,
-	licenseModelList: licenseModelListReducer,
-	archivedLicenseModelList: archivedLicenseModelListReducer,
-	archivedSoftwareProductList: archivedSoftwareProductListReducer,
-	finalizedLicenseModelList: finalizedLicenseModelListReducer,
-	finalizedSoftwareProductList: finalizedSoftwareProductReducer,
-	mergeEditor: mergeEditorReducer,
-	onboard: onboardReducer,
-	softwareProduct: softwareProductReducer,
-	softwareProductList: softwareProductListReducer,
-	users: usersReducer,
-	versionsPage: versionsPageReducer,
-	revisions: revisionsReducer,
-	features: featuresReducer
+    currentScreen: currentScreenReducer,
+    licenseModel: licenseModelReducer,
+    licenseModelList: licenseModelListReducer,
+    archivedLicenseModelList: archivedLicenseModelListReducer,
+    archivedSoftwareProductList: archivedSoftwareProductListReducer,
+    finalizedLicenseModelList: finalizedLicenseModelListReducer,
+    finalizedSoftwareProductList: finalizedSoftwareProductReducer,
+    mergeEditor: mergeEditorReducer,
+    onboard: onboardReducer,
+    softwareProduct: softwareProductReducer,
+    softwareProductList: softwareProductListReducer,
+    users: usersReducer,
+    versionsPage: versionsPageReducer,
+    revisions: revisionsReducer,
+    features: featuresReducer
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
index 7877085316..69e514bc6e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
@@ -25,8 +25,8 @@ import FeatureGroupListEditor from './licenseModel/featureGroups/FeatureGroupLis
 import LicenseKeyGroupsListEditor from './licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js';
 import EntitlementPoolsListEditor from './licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
 import SoftwareProduct from './softwareProduct/SoftwareProduct.js';
-import SoftwareProductLandingPage  from './softwareProduct/landingPage/SoftwareProductLandingPage.js';
-import SoftwareProductDetails  from './softwareProduct/details/SoftwareProductDetails.js';
+import SoftwareProductLandingPage from './softwareProduct/landingPage/SoftwareProductLandingPage.js';
+import SoftwareProductDetails from './softwareProduct/details/SoftwareProductDetails.js';
 import SoftwareProductAttachments from './softwareProduct/attachments/SoftwareProductAttachments.js';
 import SoftwareProductProcesses from './softwareProduct/processes/SoftwareProductProcesses.js';
 import SoftwareProductDeployment from './softwareProduct/deployment/SoftwareProductDeployment.js';
@@ -48,136 +48,243 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import ReactDOM from 'react-dom';
-import {enums} from './OnboardingConstants.js';
+import { enums } from './OnboardingConstants.js';
 
 export default class OnboardingView extends React.Component {
-	static propTypes = {
-		currentScreen: PropTypes.shape({
-			screen: PropTypes.oneOf(objectValues(enums.SCREEN)).isRequired,
-			props: PropTypes.object.isRequired,
-			itemPermission: PropTypes.object
-		}).isRequired
-	};
+    static propTypes = {
+        currentScreen: PropTypes.shape({
+            screen: PropTypes.oneOf(objectValues(enums.SCREEN)).isRequired,
+            props: PropTypes.object.isRequired,
+            itemPermission: PropTypes.object
+        }).isRequired
+    };
 
-	componentDidMount() {
-		let element = ReactDOM.findDOMNode(this);
-		element.addEventListener('click', event => {
-			if (event.target.tagName === 'A') {
-				event.preventDefault();
-			}
-		});
-		['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
-			element.addEventListener(eventType, event => event.stopPropagation())
-		);
-	}
+    componentDidMount() {
+        let element = ReactDOM.findDOMNode(this);
+        element.addEventListener('click', event => {
+            if (event.target.tagName === 'A') {
+                event.preventDefault();
+            }
+        });
+        ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+            element.addEventListener(eventType, event =>
+                event.stopPropagation()
+            )
+        );
+    }
 
-	render() {
-		let {currentScreen} = this.props;
-		let {screen, props} = currentScreen;
+    render() {
+        let { currentScreen } = this.props;
+        let { screen, props } = currentScreen;
 
-		return (
-			<div className='dox-ui dox-ui-punch-out dox-ui-punch-out-full-page'>
-				{(() => {
-					switch (screen) {
-						case enums.SCREEN.ONBOARDING_CATALOG:
-							return <Onboard {...props}/>;
-						case enums.SCREEN.VERSIONS_PAGE:
-							return <VersionsPage {...props} />;
+        return (
+            <div className="dox-ui dox-ui-punch-out dox-ui-punch-out-full-page">
+                {(() => {
+                    switch (screen) {
+                        case enums.SCREEN.ONBOARDING_CATALOG:
+                            return <Onboard {...props} />;
+                        case enums.SCREEN.VERSIONS_PAGE:
+                            return <VersionsPage {...props} />;
 
-						case enums.SCREEN.LICENSE_AGREEMENTS:
-						case enums.SCREEN.FEATURE_GROUPS:
-						case enums.SCREEN.ENTITLEMENT_POOLS:
-						case enums.SCREEN.LICENSE_KEY_GROUPS:
-						case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
-						case enums.SCREEN.ACTIVITY_LOG:
-							return (
-								<LicenseModel currentScreen={currentScreen}>
-									{
-										(()=>{
-											switch(screen) {
-												case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
-													return <LicenseModelOverview {...props}/>;
-												case enums.SCREEN.LICENSE_AGREEMENTS:
-													return <LicenseAgreementListEditor {...props}/>;
-												case enums.SCREEN.FEATURE_GROUPS:
-													return <FeatureGroupListEditor {...props}/>;
-												case enums.SCREEN.ENTITLEMENT_POOLS:
-													return <EntitlementPoolsListEditor {...props}/>;
-												case enums.SCREEN.LICENSE_KEY_GROUPS:
-													return <LicenseKeyGroupsListEditor {...props}/>;
-												case enums.SCREEN.ACTIVITY_LOG:
-													return <ActivityLog {...props}/>;
-											}
-										})()
-									}
-								</LicenseModel>
-							);
+                        case enums.SCREEN.LICENSE_AGREEMENTS:
+                        case enums.SCREEN.FEATURE_GROUPS:
+                        case enums.SCREEN.ENTITLEMENT_POOLS:
+                        case enums.SCREEN.LICENSE_KEY_GROUPS:
+                        case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+                        case enums.SCREEN.ACTIVITY_LOG:
+                            return (
+                                <LicenseModel currentScreen={currentScreen}>
+                                    {(() => {
+                                        switch (screen) {
+                                            case enums.SCREEN
+                                                .LICENSE_MODEL_OVERVIEW:
+                                                return (
+                                                    <LicenseModelOverview
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .LICENSE_AGREEMENTS:
+                                                return (
+                                                    <LicenseAgreementListEditor
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN.FEATURE_GROUPS:
+                                                return (
+                                                    <FeatureGroupListEditor
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN.ENTITLEMENT_POOLS:
+                                                return (
+                                                    <EntitlementPoolsListEditor
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .LICENSE_KEY_GROUPS:
+                                                return (
+                                                    <LicenseKeyGroupsListEditor
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN.ACTIVITY_LOG:
+                                                return (
+                                                    <ActivityLog {...props} />
+                                                );
+                                        }
+                                    })()}
+                                </LicenseModel>
+                            );
 
-						case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-						case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-						case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-						case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-							return (
-								<SoftwareProduct currentScreen={currentScreen}>
-									{
-										(()=>{
-											switch(screen) {
-												case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-													return <SoftwareProductLandingPage {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-													return <SoftwareProductDetails {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
-													return <SoftwareProductAttachments className='no-padding-content-area' {...props} />;
-												case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-													return <SoftwareProductProcesses {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-													return <SoftwareProductDeployment {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-													return <SoftwareProductNetworks {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-													return <SoftwareProductDependencies {...props} />;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-													return <SoftwareProductComponentsList  {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-													return <SoftwareProductComponentProcessesList  {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-													return <SoftwareProductComponentStorage {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-													return <SoftwareProductComponentsNetworkList {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-													return <SoftwareProductComponentsGeneral{...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-													return <SoftwareProductComponentsCompute {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-													return <SoftwareProductComponentLoadBalancing{...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-													return <SoftwareProductComponentsImageList{...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-													return <SoftwareProductComponentsMonitoring {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-													return <ActivityLog {...props}/>;
-											}
-										})()
-									}
-								</SoftwareProduct>
-							);
-					}
-				})()}
-			</div>
-		);
-	}
+                        case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+                        case enums.SCREEN
+                            .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+                        case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+                            return (
+                                <SoftwareProduct currentScreen={currentScreen}>
+                                    {(() => {
+                                        switch (screen) {
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_LANDING_PAGE:
+                                                return (
+                                                    <SoftwareProductLandingPage
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_DETAILS:
+                                                return (
+                                                    <SoftwareProductDetails
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_ATTACHMENTS:
+                                                return (
+                                                    <SoftwareProductAttachments
+                                                        className="no-padding-content-area"
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_PROCESSES:
+                                                return (
+                                                    <SoftwareProductProcesses
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_DEPLOYMENT:
+                                                return (
+                                                    <SoftwareProductDeployment
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_NETWORKS:
+                                                return (
+                                                    <SoftwareProductNetworks
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_DEPENDENCIES:
+                                                return (
+                                                    <SoftwareProductDependencies
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENTS:
+                                                return (
+                                                    <SoftwareProductComponentsList
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+                                                return (
+                                                    <SoftwareProductComponentProcessesList
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+                                                return (
+                                                    <SoftwareProductComponentStorage
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+                                                return (
+                                                    <SoftwareProductComponentsNetworkList
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+                                                return (
+                                                    <SoftwareProductComponentsGeneral
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+                                                return (
+                                                    <SoftwareProductComponentsCompute
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+                                                return (
+                                                    <SoftwareProductComponentLoadBalancing
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+                                                return (
+                                                    <SoftwareProductComponentsImageList
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+                                                return (
+                                                    <SoftwareProductComponentsMonitoring
+                                                        {...props}
+                                                    />
+                                                );
+                                            case enums.SCREEN
+                                                .SOFTWARE_PRODUCT_ACTIVITY_LOG:
+                                                return (
+                                                    <ActivityLog {...props} />
+                                                );
+                                        }
+                                    })()}
+                                </SoftwareProduct>
+                            );
+                    }
+                })()}
+            </div>
+        );
+    }
 }
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js
index 8e4750e666..d5563f41ba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js
@@ -13,13 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED:
-			return [...action.response.results];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED:
+            return [...action.response.results];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js
index cc9d9c536d..b5c2bff4ba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED:
-			return [...action.response.results];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED:
+            return [...action.response.results];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js
index c390ecc9b0..cea369d2ec 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js
@@ -4,173 +4,220 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 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 TabulatedEditor from 'src/nfvo-components/editor/TabulatedEditor.jsx';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 import PermissionsActionHelper from './../permissions/PermissionsActionHelper.js';
 import RevisionsActionHelper from './../revisions/RevisionsActionHelper.js';
 
 import LicenseModelActionHelper from './LicenseModelActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
 
 const buildNavigationBarProps = (licenseModel, screen) => {
-	const {id, vendorName, version} = licenseModel;
-	const meta = {version};
-
-	const groups = [{
-		id,
-		name: vendorName,
-		items: [
-			{
-				id: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
-				name: i18n('Overview'),
-				meta
-			},
-			{
-				id: enums.SCREEN.LICENSE_AGREEMENTS,
-				name: i18n('License Agreements'),
-				meta
-			},
-			{
-				id: enums.SCREEN.FEATURE_GROUPS,
-				name: i18n('Feature Groups'),
-				meta
-			},
-			{
-				id: enums.SCREEN.ENTITLEMENT_POOLS,
-				name: i18n('Entitlement Pools'),
-				meta
-			},
-			{
-				id: enums.SCREEN.LICENSE_KEY_GROUPS,
-				name: i18n('License Key Groups'),
-				meta
-			},
-			{
-				id: enums.SCREEN.ACTIVITY_LOG,
-				name: i18n('Activity Log'),
-				meta
-			}
-		]
-	}];
-
-	return {
-		activeItemId: screen, groups
-	};
+    const { id, vendorName, version } = licenseModel;
+    const meta = { version };
+
+    const groups = [
+        {
+            id,
+            name: vendorName,
+            items: [
+                {
+                    id: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+                    name: i18n('Overview'),
+                    meta
+                },
+                {
+                    id: enums.SCREEN.LICENSE_AGREEMENTS,
+                    name: i18n('License Agreements'),
+                    meta
+                },
+                {
+                    id: enums.SCREEN.FEATURE_GROUPS,
+                    name: i18n('Feature Groups'),
+                    meta
+                },
+                {
+                    id: enums.SCREEN.ENTITLEMENT_POOLS,
+                    name: i18n('Entitlement Pools'),
+                    meta
+                },
+                {
+                    id: enums.SCREEN.LICENSE_KEY_GROUPS,
+                    name: i18n('License Key Groups'),
+                    meta
+                },
+                {
+                    id: enums.SCREEN.ACTIVITY_LOG,
+                    name: i18n('Activity Log'),
+                    meta
+                }
+            ]
+        }
+    ];
+
+    return {
+        activeItemId: screen,
+        groups
+    };
 };
 
-
 const buildVersionControllerProps = ({
-	licenseModelEditor = {data: {}},
-	versions,
-	currentVersion,
-	userInfo,
-	usersList,
-	permissions,
-	isArchived,
-	itemPermission,
-	isReadOnlyMode
+    licenseModelEditor = { data: {} },
+    versions,
+    currentVersion,
+    userInfo,
+    usersList,
+    permissions,
+    isArchived,
+    itemPermission,
+    isReadOnlyMode
 }) => {
-	const {isValidityData = true} = licenseModelEditor;
-	return {
-		version: currentVersion,
-		viewableVersions: versions,
-		isFormDataValid: isValidityData,
-		permissions,
-		userInfo,
-		usersList,
-		isArchived,
-		itemName: licenseModelEditor.data.vendorName,
-		itemPermission,
-		isReadOnlyMode
-	};
+    const { isValidityData = true } = licenseModelEditor;
+    return {
+        version: currentVersion,
+        viewableVersions: versions,
+        isFormDataValid: isValidityData,
+        permissions,
+        userInfo,
+        usersList,
+        isArchived,
+        itemName: licenseModelEditor.data.vendorName,
+        itemPermission,
+        isReadOnlyMode
+    };
 };
 
-
-const mapStateToProps = ({
-	users: {userInfo, usersList},
-	licenseModel: {licenseModelEditor},
-	versionsPage: {permissions, versionsList: {versions, itemName}}
-}, {
-	currentScreen: {screen, itemPermission, props: {isReadOnlyMode, version: currentVersion}}
-}) => {
-	return {
-		versionControllerProps: buildVersionControllerProps({
-			licenseModelEditor,
-			versions,
-			currentVersion,
-			userInfo,
-			permissions,
-			usersList,
-			isArchived: itemPermission.isArchived,
-			itemPermission,
-			isReadOnlyMode
-		}),
-		navigationBarProps: buildNavigationBarProps(licenseModelEditor.data, screen)
-	};
+const mapStateToProps = (
+    {
+        users: { userInfo, usersList },
+        licenseModel: { licenseModelEditor },
+        versionsPage: { permissions, versionsList: { versions } }
+    },
+    {
+        currentScreen: {
+            screen,
+            itemPermission,
+            props: { isReadOnlyMode, version: currentVersion }
+        }
+    }
+) => {
+    return {
+        versionControllerProps: buildVersionControllerProps({
+            licenseModelEditor,
+            versions,
+            currentVersion,
+            userInfo,
+            permissions,
+            usersList,
+            isArchived: itemPermission.isArchived,
+            itemPermission,
+            isReadOnlyMode
+        }),
+        navigationBarProps: buildNavigationBarProps(
+            licenseModelEditor.data,
+            screen
+        )
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {licenseModelId, version}}}) => {
-
-	return {
-		onVersionControllerAction: (action, version, comment) =>
-			LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action, version, comment}).then(updatedVersion => {
-				ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version: updatedVersion}});
-			}),
-
-		onOpenCommentCommitModal: ({onCommit, title}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.COMMIT_COMMENT,
-				modalComponentProps: {
-					onCommit,
-					type: CommitModalType.COMMIT
-				},
-				title
-			}
-		}),
-
-		onVersionSwitching: version => {
-			ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version}});
-		},
-
-		onManagePermissions() {
-			PermissionsActionHelper.openPermissonsManager(dispatch, {itemId: licenseModelId, askForRights: false});
-		},
-
-		onMoreVersionsClick: ({itemName, users}) => {
-			ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
-				props: {licenseModelId, licenseModel: {name: itemName}, usersList: users}});
-		},
-
-		onOpenPermissions: ({users}) => {
-			return PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: licenseModelId, allUsers: users});
-		},
-
-		onOpenRevisionsModal: () => {
-			return RevisionsActionHelper.openRevisionsView(dispatch, {itemId: licenseModelId, version: version, itemType: screenTypes.LICENSE_MODEL});
-		},
-
-		onNavigate: ({id}) => {
-			ScreensHelper.loadScreen(dispatch, {screen: id, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version}});
-		}
-	};
+const mapActionsToProps = (
+    dispatch,
+    { currentScreen: { screen, props: { licenseModelId, version } } }
+) => {
+    return {
+        onVersionControllerAction: (action, version, comment) =>
+            LicenseModelActionHelper.performVCAction(dispatch, {
+                licenseModelId,
+                action,
+                version,
+                comment
+            }).then(updatedVersion => {
+                ScreensHelper.loadScreen(dispatch, {
+                    screen,
+                    screenType: screenTypes.LICENSE_MODEL,
+                    props: { licenseModelId, version: updatedVersion }
+                });
+            }),
+
+        onOpenCommentCommitModal: ({ onCommit, title }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    modalComponentName: modalContentMapper.COMMIT_COMMENT,
+                    modalComponentProps: {
+                        onCommit,
+                        type: CommitModalType.COMMIT
+                    },
+                    title
+                }
+            }),
+
+        onVersionSwitching: version => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen,
+                screenType: screenTypes.LICENSE_MODEL,
+                props: { licenseModelId, version }
+            });
+        },
+
+        onManagePermissions() {
+            PermissionsActionHelper.openPermissonsManager(dispatch, {
+                itemId: licenseModelId,
+                askForRights: false
+            });
+        },
+
+        onMoreVersionsClick: ({ itemName, users }) => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.VERSIONS_PAGE,
+                screenType: screenTypes.LICENSE_MODEL,
+                props: {
+                    licenseModelId,
+                    licenseModel: { name: itemName },
+                    usersList: users
+                }
+            });
+        },
+
+        onOpenPermissions: ({ users }) => {
+            return PermissionsActionHelper.fetchItemUsers(dispatch, {
+                itemId: licenseModelId,
+                allUsers: users
+            });
+        },
+
+        onOpenRevisionsModal: () => {
+            return RevisionsActionHelper.openRevisionsView(dispatch, {
+                itemId: licenseModelId,
+                version: version,
+                itemType: screenTypes.LICENSE_MODEL
+            });
+        },
+
+        onNavigate: ({ id }) => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: id,
+                screenType: screenTypes.LICENSE_MODEL,
+                props: { licenseModelId, version }
+            });
+        }
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(TabulatedEditor);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
index d1d3a77d92..cfff9f1fcd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
@@ -15,195 +15,279 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './LicenseModelConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {actionsEnum as vcActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionsEnum as vcActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import LicenseAgreementActionHelper from './licenseAgreement/LicenseAgreementActionHelper.js';
 import FeatureGroupsActionHelper from './featureGroups/FeatureGroupsActionHelper.js';
 import EntitlementPoolsActionHelper from './entitlementPools/EntitlementPoolsActionHelper.js';
 import LicenseKeyGroupsActionHelper from './licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
-import {default as ItemsHelper} from 'sdc-app/common/helpers/ItemsHelper.js';
+import { default as ItemsHelper } from 'sdc-app/common/helpers/ItemsHelper.js';
 import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
 import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
 
 function baseUrl() {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-license-models/`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-license-models/`;
 }
 
 function fetchLicenseModels() {
-	return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`
+    );
 }
 
 function fetchFinalizedLicenseModels() {
-	return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`
+    );
 }
 function fetchArchivedLicenseModels() {
-	return RestAPIUtil.fetch(`${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`
+    );
 }
 function fetchLicenseModelById(licenseModelId, version) {
-	const {id: versionId} = version;
-	return RestAPIUtil.fetch(`${baseUrl()}${licenseModelId}/versions/${versionId}`);
+    const { id: versionId } = version;
+    return RestAPIUtil.fetch(
+        `${baseUrl()}${licenseModelId}/versions/${versionId}`
+    );
 }
 
 function putLicenseModel(licenseModel) {
-	let {id, vendorName, description, iconRef, version: {id: versionId}} = licenseModel;
-	return RestAPIUtil.put(`${baseUrl()}${id}/versions/${versionId}`, {
-		vendorName,
-		description,
-		iconRef
-	});
+    let {
+        id,
+        vendorName,
+        description,
+        iconRef,
+        version: { id: versionId }
+    } = licenseModel;
+    return RestAPIUtil.put(`${baseUrl()}${id}/versions/${versionId}`, {
+        vendorName,
+        description,
+        iconRef
+    });
 }
 
-function putLicenseModelAction({itemId, action, version}) {
-	const {id: versionId} = version;
-	return RestAPIUtil.put(`${baseUrl()}${itemId}/versions/${versionId}/actions`, {action: action});
+function putLicenseModelAction({ itemId, action, version }) {
+    const { id: versionId } = version;
+    return RestAPIUtil.put(
+        `${baseUrl()}${itemId}/versions/${versionId}/actions`,
+        { action: action }
+    );
 }
 
 const LicenseModelActionHelper = {
+    fetchLicenseModels(dispatch) {
+        return fetchLicenseModels().then(response => {
+            dispatch({
+                type: actionTypes.LICENSE_MODELS_LIST_LOADED,
+                response
+            });
+        });
+    },
 
-	fetchLicenseModels(dispatch) {
-		return fetchLicenseModels().then(response => {
-			dispatch({
-				type: actionTypes.LICENSE_MODELS_LIST_LOADED,
-				response
-			});
-		});
-	},
+    fetchFinalizedLicenseModels(dispatch) {
+        return fetchFinalizedLicenseModels().then(response =>
+            dispatch({
+                type: actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED,
+                response
+            })
+        );
+    },
 
-	fetchFinalizedLicenseModels(dispatch) {
-		return fetchFinalizedLicenseModels().then(response => dispatch({
-			type: actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED,
-			response
-		}));
+    fetchArchivedLicenseModels(dispatch) {
+        return fetchArchivedLicenseModels().then(response =>
+            dispatch({
+                type: actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED,
+                response
+            })
+        );
+    },
 
-	},
+    fetchLicenseModelById(dispatch, { licenseModelId, version }) {
+        return fetchLicenseModelById(licenseModelId, version).then(response => {
+            dispatch({
+                type: actionTypes.LICENSE_MODEL_LOADED,
+                response: { ...response, version }
+            });
+        });
+    },
 
-	fetchArchivedLicenseModels(dispatch) {
-		return fetchArchivedLicenseModels().then(response => dispatch({
-			type: actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED,
-			response
-		}));
+    fetchLicenseModelItems(dispatch, { licenseModelId, version }) {
+        return Promise.all([
+            LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+                licenseModelId,
+                version
+            }),
+            FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+                licenseModelId,
+                version
+            }),
+            EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+                licenseModelId,
+                version
+            }),
+            LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+                licenseModelId,
+                version
+            })
+        ]);
+    },
 
-	},
+    manageSubmitAction(dispatch, { licenseModelId, version, isDirty }) {
+        if (isDirty) {
+            const onCommit = comment => {
+                return this.performVCAction(dispatch, {
+                    licenseModelId,
+                    action: vcActionsEnum.COMMIT,
+                    version,
+                    comment
+                }).then(() => {
+                    return this.performSubmitAction(dispatch, {
+                        licenseModelId,
+                        version
+                    });
+                });
+            };
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    modalComponentName: modalContentMapper.COMMIT_COMMENT,
+                    modalComponentProps: {
+                        onCommit,
+                        type: CommitModalType.COMMIT_SUBMIT
+                    },
+                    title: i18n('Commit & Submit')
+                }
+            });
+            return Promise.reject();
+        }
+        return this.performSubmitAction(dispatch, { licenseModelId, version });
+    },
 
-	fetchLicenseModelById(dispatch, {licenseModelId, version}) {
+    performSubmitAction(dispatch, { licenseModelId, version }) {
+        return putLicenseModelAction({
+            itemId: licenseModelId,
+            action: vcActionsEnum.SUBMIT,
+            version
+        }).then(() => {
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            }).then(updatedVersion => {
+                dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
+                    data: {
+                        title: i18n('Submit Succeeded'),
+                        msg: i18n('This license model successfully submitted'),
+                        cancelButtonText: i18n('OK'),
+                        timeout: 2000
+                    }
+                });
+                versionPageActionHelper.fetchVersions(dispatch, {
+                    itemType: itemTypes.LICENSE_MODEL,
+                    itemId: licenseModelId
+                });
+                return Promise.resolve(updatedVersion);
+            });
+        });
+    },
 
-		return fetchLicenseModelById(licenseModelId, version).then(response => {
-			dispatch({
-				type: actionTypes.LICENSE_MODEL_LOADED,
-				response: {...response, version}
-			});
-		});
-	},
-
-	fetchLicenseModelItems(dispatch, {licenseModelId, version}) {
-		return Promise.all([
-			LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version}),
-			FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version}),
-			EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}),
-			LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version})
-		]);
-	},
-
-	manageSubmitAction(dispatch, {licenseModelId, version, isDirty}) {
-		if(isDirty) {
-			const onCommit = comment => {
-				return this.performVCAction(dispatch, {licenseModelId, action: vcActionsEnum.COMMIT, version, comment}).then(() => {
-					return this.performSubmitAction(dispatch, {licenseModelId, version});
-				});
-			};
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_SHOW,
-				data: {
-					modalComponentName: modalContentMapper.COMMIT_COMMENT,
-					modalComponentProps: {
-						onCommit,
-						type: CommitModalType.COMMIT_SUBMIT
-					},
-					title: i18n('Commit & Submit')
-				}
-			});
-			return Promise.reject();
-		}
-		return this.performSubmitAction(dispatch, {licenseModelId, version});
-	},
-
-	performSubmitAction(dispatch, {licenseModelId, version}) {
-		return putLicenseModelAction({itemId: licenseModelId, action: vcActionsEnum.SUBMIT, version}).then(() => {
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}).then(updatedVersion => {
-				dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
-					data: {
-						title: i18n('Submit Succeeded'),
-						msg: i18n('This license model successfully submitted'),
-						cancelButtonText: i18n('OK'),
-						timeout: 2000
-					}
-				});
-				versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
-				return Promise.resolve(updatedVersion);
-			});
-		});
-	},
-
-	performVCAction(dispatch, {licenseModelId, action, version, comment}) {
-		return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: licenseModelId, version}).then(({inMerge, isDirty, updatedVersion}) => {
-			if ( (updatedVersion.status === catalogItemStatuses.CERTIFIED || updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED) && 
-				(action === VersionControllerActionsEnum.COMMIT || action === VersionControllerActionsEnum.SYNC)) {
-				versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
-				const msg = updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED ? i18n('Item was Archived') : i18n('Item version already Certified');
-				dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_WARNING,
-					data: {
-						title: i18n('Commit error'),
-						msg,
-						cancelButtonText: i18n('Cancel')
-					}
-				});
-				return Promise.resolve(updatedVersion);
-			}
-			if (!inMerge) {
-				if(action === vcActionsEnum.SUBMIT) {
-					return this.manageSubmitAction(dispatch, {licenseModelId, version, isDirty});
-				}
-				else {
-					return ItemsHelper.performVCAction({itemId: licenseModelId, action, version, comment}).then(() => {
-						versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
-						if (action === vcActionsEnum.SYNC) {
-							return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: licenseModelId, version}).then(({updatedVersion}) => {
-								return Promise.resolve(updatedVersion);
-							});
-						} else {
-							return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-						}
-					});
-				}
-			}
-		});
-	},
-
-	saveLicenseModel(dispatch, {licenseModel}) {
-		return putLicenseModel(licenseModel).then(() => {
-			dispatch({
-				type: actionTypes.LICENSE_MODEL_LOADED,
-				response: licenseModel
-			});
-			const {id, version: {id: versionId}} = licenseModel;
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: id, versionId}).then(updatedVersion => {
-				if (updatedVersion.status !== licenseModel.version.status) {
-					versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModel.id});
-				}
-			});
-		});
-	}
+    performVCAction(dispatch, { licenseModelId, action, version, comment }) {
+        return MergeEditorActionHelper.analyzeSyncResult(dispatch, {
+            itemId: licenseModelId,
+            version
+        }).then(({ inMerge, isDirty, updatedVersion }) => {
+            if (
+                (updatedVersion.status === catalogItemStatuses.CERTIFIED ||
+                    updatedVersion.archivedStatus ===
+                        catalogItemStatuses.ARCHIVED) &&
+                (action === VersionControllerActionsEnum.COMMIT ||
+                    action === VersionControllerActionsEnum.SYNC)
+            ) {
+                versionPageActionHelper.fetchVersions(dispatch, {
+                    itemType: itemTypes.LICENSE_MODEL,
+                    itemId: licenseModelId
+                });
+                const msg =
+                    updatedVersion.archivedStatus ===
+                    catalogItemStatuses.ARCHIVED
+                        ? i18n('Item was Archived')
+                        : i18n('Item version already Certified');
+                dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                    data: {
+                        title: i18n('Commit error'),
+                        msg,
+                        cancelButtonText: i18n('Cancel')
+                    }
+                });
+                return Promise.resolve(updatedVersion);
+            }
+            if (!inMerge) {
+                if (action === vcActionsEnum.SUBMIT) {
+                    return this.manageSubmitAction(dispatch, {
+                        licenseModelId,
+                        version,
+                        isDirty
+                    });
+                } else {
+                    return ItemsHelper.performVCAction({
+                        itemId: licenseModelId,
+                        action,
+                        version,
+                        comment
+                    }).then(() => {
+                        versionPageActionHelper.fetchVersions(dispatch, {
+                            itemType: itemTypes.LICENSE_MODEL,
+                            itemId: licenseModelId
+                        });
+                        if (action === vcActionsEnum.SYNC) {
+                            return MergeEditorActionHelper.analyzeSyncResult(
+                                dispatch,
+                                { itemId: licenseModelId, version }
+                            ).then(({ updatedVersion }) => {
+                                return Promise.resolve(updatedVersion);
+                            });
+                        } else {
+                            return ItemsHelper.checkItemStatus(dispatch, {
+                                itemId: licenseModelId,
+                                versionId: version.id
+                            });
+                        }
+                    });
+                }
+            }
+        });
+    },
 
+    saveLicenseModel(dispatch, { licenseModel }) {
+        return putLicenseModel(licenseModel).then(() => {
+            dispatch({
+                type: actionTypes.LICENSE_MODEL_LOADED,
+                response: licenseModel
+            });
+            const { id, version: { id: versionId } } = licenseModel;
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: id,
+                versionId
+            }).then(updatedVersion => {
+                if (updatedVersion.status !== licenseModel.version.status) {
+                    versionPageActionHelper.fetchVersions(dispatch, {
+                        itemType: itemTypes.LICENSE_MODEL,
+                        itemId: licenseModel.id
+                    });
+                }
+            });
+        });
+    }
 };
 
 export default LicenseModelActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js
index 08009ee305..d97f682535 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js
@@ -17,23 +17,22 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 export const actionTypes = keyMirror({
-	LICENSE_MODEL_LOADED: null,
-	LICENSE_MODELS_LIST_LOADED: null,
-	FINALIZED_LICENSE_MODELS_LIST_LOADED: null,
-	ARCHIVED_LICENSE_MODELS_LIST_LOADED: null,
-	EDIT_LICENSE_MODEL: null
+    LICENSE_MODEL_LOADED: null,
+    LICENSE_MODELS_LIST_LOADED: null,
+    FINALIZED_LICENSE_MODELS_LIST_LOADED: null,
+    ARCHIVED_LICENSE_MODELS_LIST_LOADED: null,
+    EDIT_LICENSE_MODEL: null
 });
 
-
 export const thresholdUnitType = {
-	ABSOLUTE: 'Absolute',
-	PERCENTAGE: 'Percentage'
+    ABSOLUTE: 'Absolute',
+    PERCENTAGE: 'Percentage'
 };
 
 export const optionsInputValues = {
-	THRESHOLD_UNITS: [
-		{enum: '', title: i18n('please select…')},
-		{enum: thresholdUnitType.ABSOLUTE, title: 'Absolute'},
-		{enum: thresholdUnitType.PERCENTAGE, title: '%'}
-	]
-};
\ No newline at end of file
+    THRESHOLD_UNITS: [
+        { enum: '', title: i18n('please select…') },
+        { enum: thresholdUnitType.ABSOLUTE, title: 'Absolute' },
+        { enum: thresholdUnitType.PERCENTAGE, title: '%' }
+    ]
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js
index add5ac6a98..2d27679283 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js
@@ -13,16 +13,16 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.LICENSE_MODEL_LOADED:			
-			return {
-				...state,
-				data: action.response
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.LICENSE_MODEL_LOADED:
+            return {
+                ...state,
+                data: action.response
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js
index 36a190a39c..00d669c7d1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.LICENSE_MODELS_LIST_LOADED:
-			return [...action.response.results];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.LICENSE_MODELS_LIST_LOADED:
+            return [...action.response.results];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js
index f635532348..f102d286f0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js
@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {combineReducers} from 'redux';
+import { combineReducers } from 'redux';
 
 import activityLogReducer from 'sdc-app/common/activity-log/ActivityLogReducer.js';
 
@@ -32,56 +32,75 @@ import entitlementPoolsEditorReducer from './entitlementPools/EntitlementPoolsEd
 import licenseKeyGroupsEditorReducer from './licenseKeyGroups/LicenseKeyGroupsEditorReducer.js';
 import licenseKeyGroupsListReducer from './licenseKeyGroups/LicenseKeyGroupsListReducer.js';
 
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
 
-import {actionTypes as licenseModelOverviewConstants, VLM_DESCRIPTION_FORM} from './overview/LicenseModelOverviewConstants.js';
-import limitEditorReducer from './limits/LimitEditorReducer.js'; 
+import {
+    actionTypes as licenseModelOverviewConstants,
+    VLM_DESCRIPTION_FORM
+} from './overview/LicenseModelOverviewConstants.js';
+import limitEditorReducer from './limits/LimitEditorReducer.js';
 
 export default combineReducers({
-	licenseModelCreation: createPlainDataReducer(licenseModelCreationReducer),
-	licenseModelEditor: licenseModelEditorReducer,
+    licenseModelCreation: createPlainDataReducer(licenseModelCreationReducer),
+    licenseModelEditor: licenseModelEditorReducer,
 
-	licenseAgreement: combineReducers({
-		licenseAgreementEditor: createPlainDataReducer(licenseAgreementEditorReducer),
-		licenseAgreementList: licenseAgreementListReducer
-	}),
-	featureGroup: combineReducers({
-		featureGroupEditor: createPlainDataReducer(featureGroupsEditorReducer),
-		featureGroupsList: featureGroupsListReducer
-	}),
-	entitlementPool: combineReducers({
-		entitlementPoolEditor: createPlainDataReducer(entitlementPoolsEditorReducer),
-		entitlementPoolsList: entitlementPoolsListReducer
-	}),
-	licenseKeyGroup: combineReducers({
-		licenseKeyGroupsEditor: createPlainDataReducer(licenseKeyGroupsEditorReducer),
-		licenseKeyGroupsList: licenseKeyGroupsListReducer
-	}),
-	licenseModelOverview: combineReducers({
-		selectedTab: (state = null, action) => action.type === licenseModelOverviewConstants.LICENSE_MODEL_OVERVIEW_TAB_SELECTED ? action.buttonTab : state,
-		descriptionEditor: createPlainDataReducer(function(state = false, action) {
-			if (action.type === licenseModelOverviewConstants.LM_DATA_CHANGED) {
-				return {
-					...state,
-					data : {
-						description : action.description
-					},
-					formReady: null,
-					formName: VLM_DESCRIPTION_FORM,
-					genericFieldInfo: {
-						'description': {
-							isValid: true,
-							errorText: '',
-							validations: [{type: 'required', data: true}, {type: 'maxLength', data: 1000}]
-						}
-					}
-				};
-				//return action.description;
-			} else {
-				return state;
-			}
-		}
-	)}),
-	limitEditor: createPlainDataReducer(limitEditorReducer),
-	activityLog: activityLogReducer
+    licenseAgreement: combineReducers({
+        licenseAgreementEditor: createPlainDataReducer(
+            licenseAgreementEditorReducer
+        ),
+        licenseAgreementList: licenseAgreementListReducer
+    }),
+    featureGroup: combineReducers({
+        featureGroupEditor: createPlainDataReducer(featureGroupsEditorReducer),
+        featureGroupsList: featureGroupsListReducer
+    }),
+    entitlementPool: combineReducers({
+        entitlementPoolEditor: createPlainDataReducer(
+            entitlementPoolsEditorReducer
+        ),
+        entitlementPoolsList: entitlementPoolsListReducer
+    }),
+    licenseKeyGroup: combineReducers({
+        licenseKeyGroupsEditor: createPlainDataReducer(
+            licenseKeyGroupsEditorReducer
+        ),
+        licenseKeyGroupsList: licenseKeyGroupsListReducer
+    }),
+    licenseModelOverview: combineReducers({
+        selectedTab: (state = null, action) =>
+            action.type ===
+            licenseModelOverviewConstants.LICENSE_MODEL_OVERVIEW_TAB_SELECTED
+                ? action.buttonTab
+                : state,
+        descriptionEditor: createPlainDataReducer(function(
+            state = false,
+            action
+        ) {
+            if (action.type === licenseModelOverviewConstants.LM_DATA_CHANGED) {
+                return {
+                    ...state,
+                    data: {
+                        description: action.description
+                    },
+                    formReady: null,
+                    formName: VLM_DESCRIPTION_FORM,
+                    genericFieldInfo: {
+                        description: {
+                            isValid: true,
+                            errorText: '',
+                            validations: [
+                                { type: 'required', data: true },
+                                { type: 'maxLength', data: 1000 }
+                            ]
+                        }
+                    }
+                };
+                //return action.description;
+            } else {
+                return state;
+            }
+        })
+    }),
+    limitEditor: createPlainDataReducer(limitEditorReducer),
+    activityLog: activityLogReducer
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js
index 64bae3b6a0..340d345609 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js
@@ -14,28 +14,34 @@
  * permissions and limitations under the License.
  */
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {thresholdUnitType} from './LicenseModelConstants.js';
+import { thresholdUnitType } from './LicenseModelConstants.js';
 import Validator from 'nfvo-utils/Validator.js';
 
 export function validateStartDate(value, state) {
-	if (state.data.expiryDate) {
-		if (!value) {
-			return {isValid: false, errorText: i18n('Start date has to be specified if expiry date is specified')};
-		}
-	}
-	return {isValid: true, errorText: ''};
+    if (state.data.expiryDate) {
+        if (!value) {
+            return {
+                isValid: false,
+                errorText: i18n(
+                    'Start date has to be specified if expiry date is specified'
+                )
+            };
+        }
+    }
+    return { isValid: true, errorText: '' };
 }
 
 export function thresholdValueValidation(value, state) {
-	let  unit = state.data.thresholdUnits;
-	if (unit === thresholdUnitType.PERCENTAGE) {
-		return Validator.validate('thresholdValue', value, [
-			{type: 'numeric', data: true},
-			{type: 'maximum', data: 100},
-			{type: 'minimum', data: 0}]);
-	} else {
-		return Validator.validate('thresholdValue', value, [
-			{type: 'numeric', data: true},
-		]);
-	}
+    let unit = state.data.thresholdUnits;
+    if (unit === thresholdUnitType.PERCENTAGE) {
+        return Validator.validate('thresholdValue', value, [
+            { type: 'numeric', data: true },
+            { type: 'maximum', data: 100 },
+            { type: 'minimum', data: 0 }
+        ]);
+    } else {
+        return Validator.validate('thresholdValue', value, [
+            { type: 'numeric', data: true }
+        ]);
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js
index bcd6e7fe5b..4bbab865fa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js
@@ -13,48 +13,84 @@
  * 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 LicenseModelCreationActionHelper from './LicenseModelCreationActionHelper.js';
 import LicenseModelCreationView from './LicenseModelCreationView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
 import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes as versionItemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { itemTypes as versionItemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
 
-export const mapStateToProps = ({users: {usersList}, licenseModelList, finalizedLicenseModelList, archivedLicenseModelList, licenseModel: {licenseModelCreation}}) => {
-	let {genericFieldInfo} = licenseModelCreation;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-	let VLMNames = {};
+export const mapStateToProps = ({
+    users: { usersList },
+    licenseModelList,
+    finalizedLicenseModelList,
+    archivedLicenseModelList,
+    licenseModel: { licenseModelCreation }
+}) => {
+    let { genericFieldInfo } = licenseModelCreation;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    let VLMNames = {};
 
-	const allVlmList = [...licenseModelList, ...finalizedLicenseModelList,...archivedLicenseModelList];
-	allVlmList.map((item) => {
-		VLMNames[item.name.toLowerCase()] = item.id;
-	});
+    const allVlmList = [
+        ...licenseModelList,
+        ...finalizedLicenseModelList,
+        ...archivedLicenseModelList
+    ];
+    allVlmList.map(item => {
+        VLMNames[item.name.toLowerCase()] = item.id;
+    });
 
-	return {...licenseModelCreation, isFormValid: isFormValid, VLMNames, usersList};
+    return {
+        ...licenseModelCreation,
+        isFormValid: isFormValid,
+        VLMNames,
+        usersList
+    };
 };
 
-export const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onCancel: () => LicenseModelCreationActionHelper.close(dispatch),
-		onSubmit: (licenseModel, usersList) => {
-			LicenseModelCreationActionHelper.close(dispatch);
-			LicenseModelCreationActionHelper.createLicenseModel(dispatch, {licenseModel}).then(response => {
-				let {itemId, version} = response;
-				LicenseModelActionHelper.fetchLicenseModels(dispatch).then(() =>
-					PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: usersList}).then(() =>
-						VersionsPageActionHelper.fetchVersions(dispatch, {itemType: versionItemTypes.LICENSE_MODEL, itemId}).then(() =>
-							ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL,
-								props: {licenseModelId: itemId, version}})
-				)));
-			});
-		},
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
+export const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onCancel: () => LicenseModelCreationActionHelper.close(dispatch),
+        onSubmit: (licenseModel, usersList) => {
+            LicenseModelCreationActionHelper.close(dispatch);
+            LicenseModelCreationActionHelper.createLicenseModel(dispatch, {
+                licenseModel
+            }).then(response => {
+                let { itemId, version } = response;
+                LicenseModelActionHelper.fetchLicenseModels(dispatch).then(() =>
+                    PermissionsActionHelper.fetchItemUsers(dispatch, {
+                        itemId,
+                        allUsers: usersList
+                    }).then(() =>
+                        VersionsPageActionHelper.fetchVersions(dispatch, {
+                            itemType: versionItemTypes.LICENSE_MODEL,
+                            itemId
+                        }).then(() =>
+                            ScreensHelper.loadScreen(dispatch, {
+                                screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+                                screenType: screenTypes.LICENSE_MODEL,
+                                props: { licenseModelId: itemId, version }
+                            })
+                        )
+                    )
+                );
+            });
+        },
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseModelCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseModelCreationView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js
index 87df1386b6..e2b8d55ffe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js
@@ -15,59 +15,56 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './LicenseModelCreationConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './LicenseModelCreationConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 function baseUrl() {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-license-models/`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-license-models/`;
 }
 
 function createLicenseModel(licenseModel) {
-	return RestAPIUtil.post(baseUrl(), {
-		vendorName: licenseModel.vendorName,
-		description: licenseModel.description,
-		iconRef: 'icon'
-	});
+    return RestAPIUtil.post(baseUrl(), {
+        vendorName: licenseModel.vendorName,
+        description: licenseModel.description,
+        iconRef: 'icon'
+    });
 }
 
-
 export default {
+    open(dispatch) {
+        dispatch({
+            type: actionTypes.OPEN
+        });
 
-	open(dispatch) {
-		dispatch({
-			type: actionTypes.OPEN
-		});
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.LICENSE_MODEL_CREATION,
-				title: i18n('New License Model')
-			}
-		});
-	},
-
-	close(dispatch){
-		dispatch({
-			type: actionTypes.CLOSE
-		});
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.LICENSE_MODEL_CREATION,
+                title: i18n('New License Model')
+            }
+        });
+    },
 
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-	},
+    close(dispatch) {
+        dispatch({
+            type: actionTypes.CLOSE
+        });
 
-	createLicenseModel(dispatch, {licenseModel}){
-		return createLicenseModel(licenseModel).then(result => {
-			dispatch({
-				type: actionTypes.LICENSE_MODEL_CREATED,
-				result
-			});
-			return result;
-		});
-	}
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+    },
 
+    createLicenseModel(dispatch, { licenseModel }) {
+        return createLicenseModel(licenseModel).then(result => {
+            dispatch({
+                type: actionTypes.LICENSE_MODEL_CREATED,
+                result
+            });
+            return result;
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js
index e9b1c46bef..1cd61a9e4b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js
@@ -16,9 +16,9 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	OPEN: null,
-	CLOSE: null,
-	LICENSE_MODEL_CREATED: null
+    OPEN: null,
+    CLOSE: null,
+    LICENSE_MODEL_CREATED: null
 });
 
 export const LICENSE_MODEL_CREATION_FORM_NAME = 'LMCREATIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js
index 879d356de2..7137230cc7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js
@@ -13,32 +13,41 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, LICENSE_MODEL_CREATION_FORM_NAME} from './LicenseModelCreationConstants.js';
+import {
+    actionTypes,
+    LICENSE_MODEL_CREATION_FORM_NAME
+} from './LicenseModelCreationConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: LICENSE_MODEL_CREATION_FORM_NAME,
-				data: {},
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 1000}]
-					},
-					'vendorName' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}]
-					}
-				}
-			};
-		case actionTypes.CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: LICENSE_MODEL_CREATION_FORM_NAME,
+                data: {},
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 1000 }
+                        ]
+                    },
+                    vendorName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 25 }
+                        ]
+                    }
+                }
+            };
+        case actionTypes.CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
index 948bdc158d..59c4152213 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
@@ -19,84 +19,112 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
-import {LICENSE_MODEL_CREATION_FORM_NAME} from './LicenseModelCreationConstants.js';
+import { LICENSE_MODEL_CREATION_FORM_NAME } from './LicenseModelCreationConstants.js';
 
 const LicenseModelPropType = PropTypes.shape({
-	id: PropTypes.string,
-	vendorName: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    vendorName: PropTypes.string,
+    description: PropTypes.string
 });
 
 class LicenseModelCreationView extends React.Component {
+    static propTypes = {
+        data: LicenseModelPropType,
+        VLMNames: PropTypes.object,
+        usersList: PropTypes.array,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onValidateForm: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		data: LicenseModelPropType,
-		VLMNames: PropTypes.object,
-		usersList: PropTypes.array,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onValidateForm: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    render() {
+        let { data = {}, onDataChanged, genericFieldInfo } = this.props;
+        let { vendorName, description } = data;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        submitButtonText={i18n('Create')}
+                        onReset={() => this.props.onCancel()}
+                        labledButtons={true}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() => this.validate()}>
+                        <Input
+                            value={vendorName}
+                            label={i18n('Vendor Name')}
+                            data-test-id="vendor-name"
+                            onChange={vendorName =>
+                                onDataChanged(
+                                    { vendorName },
+                                    LICENSE_MODEL_CREATION_FORM_NAME,
+                                    {
+                                        vendorName: name =>
+                                            this.validateName(name)
+                                    }
+                                )
+                            }
+                            isValid={genericFieldInfo.vendorName.isValid}
+                            errorText={genericFieldInfo.vendorName.errorText}
+                            type="text"
+                            isRequired={true}
+                            className="field-section"
+                        />
+                        <Input
+                            isRequired={true}
+                            value={description}
+                            label={i18n('Description')}
+                            data-test-id="vendor-description"
+                            overlayPos="bottom"
+                            onChange={description =>
+                                onDataChanged(
+                                    { description },
+                                    LICENSE_MODEL_CREATION_FORM_NAME
+                                )
+                            }
+                            isValid={genericFieldInfo.description.isValid}
+                            errorText={genericFieldInfo.description.errorText}
+                            type="textarea"
+                            className="field-section"
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	render() {
-		let {data = {}, onDataChanged, genericFieldInfo} = this.props;
-		let {vendorName, description} = data;
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref='validationForm'
-					hasButtons={true}
-					onSubmit={ () => this.submit() }
-					submitButtonText={i18n('Create')}
-					onReset={ () => this.props.onCancel() }
-					labledButtons={true}
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.validate() }>
-					<Input
-						value={vendorName}
-						label={i18n('Vendor Name')}
-						data-test-id='vendor-name'
-						onChange={vendorName => onDataChanged({vendorName}, LICENSE_MODEL_CREATION_FORM_NAME, {vendorName: name => this.validateName(name)})}
-						isValid={genericFieldInfo.vendorName.isValid}
-						errorText={genericFieldInfo.vendorName.errorText}
-						type='text'
-						isRequired={true}
-						className='field-section'/>
-					<Input
-						isRequired={true}
-						value={description}
-						label={i18n('Description')}
-						data-test-id='vendor-description'
-						overlayPos='bottom'
-						onChange={description => onDataChanged({description}, LICENSE_MODEL_CREATION_FORM_NAME)}
-						isValid={genericFieldInfo.description.isValid}
-						errorText={genericFieldInfo.description.errorText}
-						type='textarea'
-						className='field-section'/>
-				</Form>}
-			</div>
-		);
-	}
+    submit() {
+        const { data: licenseModel, usersList } = this.props;
+        this.props.onSubmit(licenseModel, usersList);
+    }
 
+    validateName(value) {
+        const { data: { id }, VLMNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: VLMNames
+        });
 
-	submit() {
-		const {data:licenseModel, usersList} = this.props;
-		this.props.onSubmit(licenseModel, usersList);
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "License model by the name '" +
+                          value +
+                          "' already exists. License model name must be unique"
+                  )
+              };
+    }
 
-	validateName(value) {
-		const {data: {id}, VLMNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VLMNames});
-
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('License model by the name \'' + value + '\' already exists. License model name must be unique')};
-	}
-
-	validate() {
-		this.props.onValidateForm(LICENSE_MODEL_CREATION_FORM_NAME);
-	}
+    validate() {
+        this.props.onValidateForm(LICENSE_MODEL_CREATION_FORM_NAME);
+    }
 }
 
 export default LicenseModelCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
index 84bdac804c..181fc11c9d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
@@ -15,197 +15,281 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js';
-import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
-import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js';
+import { actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js';
+import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
+import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 
 function baseUrl(licenseModelId, version) {
-	const restPrefix = Configuration.get('restPrefix');
-	const {id: versionId} = version;
-	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`;
+    const restPrefix = Configuration.get('restPrefix');
+    const { id: versionId } = version;
+    return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`;
 }
 
 function fetchEntitlementPoolsList(licenseModelId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
 }
 
 function postEntitlementPool(licenseModelId, entitlementPool, version) {
-	return RestAPIUtil.post(baseUrl(licenseModelId, version), {
-		name: entitlementPool.name,
-		description: entitlementPool.description,
-		thresholdValue: entitlementPool.thresholdValue,
-		thresholdUnits: getValue(entitlementPool.thresholdUnits),
-		increments: entitlementPool.increments,
-		operationalScope: getValue(entitlementPool.operationalScope),
-		time: entitlementPool.time,
-		startDate: entitlementPool.startDate,
-		expiryDate: entitlementPool.expiryDate
-	});
+    return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+        name: entitlementPool.name,
+        description: entitlementPool.description,
+        thresholdValue: entitlementPool.thresholdValue,
+        thresholdUnits: getValue(entitlementPool.thresholdUnits),
+        increments: entitlementPool.increments,
+        operationalScope: getValue(entitlementPool.operationalScope),
+        time: entitlementPool.time,
+        startDate: entitlementPool.startDate,
+        expiryDate: entitlementPool.expiryDate
+    });
 }
 
-
-function putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version) {
-
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, {
-		name: entitlementPool.name,
-		description: entitlementPool.description,
-		thresholdValue: entitlementPool.thresholdValue,
-		thresholdUnits: getValue(entitlementPool.thresholdUnits),
-		increments: entitlementPool.increments,
-		operationalScope: getValue(entitlementPool.operationalScope),
-		time: entitlementPool.time,
-		startDate: entitlementPool.startDate,
-		expiryDate: entitlementPool.expiryDate
-	});
+function putEntitlementPool(
+    licenseModelId,
+    previousEntitlementPool,
+    entitlementPool,
+    version
+) {
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${entitlementPool.id}`,
+        {
+            name: entitlementPool.name,
+            description: entitlementPool.description,
+            thresholdValue: entitlementPool.thresholdValue,
+            thresholdUnits: getValue(entitlementPool.thresholdUnits),
+            increments: entitlementPool.increments,
+            operationalScope: getValue(entitlementPool.operationalScope),
+            time: entitlementPool.time,
+            startDate: entitlementPool.startDate,
+            expiryDate: entitlementPool.expiryDate
+        }
+    );
 }
 
 function deleteEntitlementPool(licenseModelId, entitlementPoolId, version) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(licenseModelId, version)}/${entitlementPoolId}`
+    );
 }
 
 function fetchLimitsList(licenseModelId, entitlementPoolId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`
+    );
 }
 
 function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limitId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(
+            licenseModelId,
+            version
+        )}/${entitlementPoolId}/limits/${limitId}`
+    );
 }
 
 function postLimit(licenseModelId, entitlementPoolId, version, limit) {
-	return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`, {
-		name: limit.name,
-		type: limit.type,
-		description: limit.description,
-		metric: getStrValue(limit.metric),
-		value: limit.value,
-		unit: getStrValue(limit.unit),
-		aggregationFunction: getValue(limit.aggregationFunction),
-		time: getValue(limit.time)
-	});
+    return RestAPIUtil.post(
+        `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`,
+        {
+            name: limit.name,
+            type: limit.type,
+            description: limit.description,
+            metric: getStrValue(limit.metric),
+            value: limit.value,
+            unit: getStrValue(limit.unit),
+            aggregationFunction: getValue(limit.aggregationFunction),
+            time: getValue(limit.time)
+        }
+    );
 }
 
 function putLimit(licenseModelId, entitlementPoolId, version, limit) {
-
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limit.id}`, {
-		name: limit.name,
-		type: limit.type,
-		description: limit.description,
-		metric: getStrValue(limit.metric),
-		value: limit.value,
-		unit: getStrValue(limit.unit),
-		aggregationFunction: getValue(limit.aggregationFunction),
-		time: getValue(limit.time)
-	});
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${
+            limit.id
+        }`,
+        {
+            name: limit.name,
+            type: limit.type,
+            description: limit.description,
+            metric: getStrValue(limit.metric),
+            value: limit.value,
+            unit: getStrValue(limit.unit),
+            aggregationFunction: getValue(limit.aggregationFunction),
+            time: getValue(limit.time)
+        }
+    );
 }
 
 export default {
+    fetchEntitlementPoolsList(dispatch, { licenseModelId, version }) {
+        return fetchEntitlementPoolsList(licenseModelId, version).then(
+            response =>
+                dispatch({
+                    type:
+                        entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    openEntitlementPoolsEditor(
+        dispatch,
+        { entitlementPool, licenseModelId, version } = {}
+    ) {
+        if (licenseModelId && version) {
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                entitlementPool
+            });
+        }
+        dispatch({
+            type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN,
+            entitlementPool
+        });
+    },
+
+    deleteEntitlementPool(
+        dispatch,
+        { licenseModelId, entitlementPoolId, version }
+    ) {
+        return deleteEntitlementPool(
+            licenseModelId,
+            entitlementPoolId,
+            version
+        ).then(() => {
+            dispatch({
+                type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL,
+                entitlementPoolId
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    },
+
+    entitlementPoolsEditorDataChanged(dispatch, { deltaData }) {
+        dispatch({
+            type:
+                entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED,
+            deltaData
+        });
+    },
+
+    closeEntitlementPoolsEditor(dispatch) {
+        dispatch({
+            type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE
+        });
+    },
+
+    saveEntitlementPool(
+        dispatch,
+        { licenseModelId, previousEntitlementPool, entitlementPool, version }
+    ) {
+        if (previousEntitlementPool) {
+            return putEntitlementPool(
+                licenseModelId,
+                previousEntitlementPool,
+                entitlementPool,
+                version
+            ).then(() => {
+                dispatch({
+                    type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL,
+                    entitlementPool
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        } else {
+            return postEntitlementPool(
+                licenseModelId,
+                entitlementPool,
+                version
+            ).then(response => {
+                dispatch({
+                    type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL,
+                    entitlementPool: {
+                        ...entitlementPool,
+                        referencingFeatureGroups: [],
+                        id: response.value
+                    }
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        }
+    },
+
+    hideDeleteConfirm(dispatch) {
+        dispatch({
+            type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
+            entitlementPoolToDelete: false
+        });
+    },
+    openDeleteEntitlementPoolConfirm(dispatch, { entitlementPool }) {
+        dispatch({
+            type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
+            entitlementPoolToDelete: entitlementPool
+        });
+    },
+
+    fetchLimits(dispatch, { licenseModelId, version, entitlementPool }) {
+        return fetchLimitsList(
+            licenseModelId,
+            entitlementPool.id,
+            version
+        ).then(response => {
+            dispatch({
+                type:
+                    entitlementPoolsActionTypes.entitlementPoolsEditor
+                        .LIMITS_LIST_LOADED,
+                response
+            });
+        });
+    },
+
+    submitLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) {
+        const propmise = limit.id
+            ? putLimit(licenseModelId, entitlementPool.id, version, limit)
+            : postLimit(licenseModelId, entitlementPool.id, version, limit);
+        return propmise.then(() => {
+            dispatch({
+                type: limitEditorActions.CLOSE
+            });
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                entitlementPool
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    },
 
-	fetchEntitlementPoolsList(dispatch, {licenseModelId, version}) {
-		return fetchEntitlementPoolsList(licenseModelId, version).then(response => dispatch({
-			type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED,
-			response
-		}));
-	},
-
-	openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version} = {}) {
-		if (licenseModelId && version) {
-			this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
-		}
-		dispatch({
-			type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN,
-			entitlementPool
-		});
-	},
-
-	deleteEntitlementPool(dispatch, {licenseModelId, entitlementPoolId, version}) {
-		return deleteEntitlementPool(licenseModelId, entitlementPoolId, version).then(() => {
-			dispatch({
-				type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL,
-				entitlementPoolId
-			});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
-
-	entitlementPoolsEditorDataChanged(dispatch, {deltaData}) {
-		dispatch({
-			type: entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED,
-			deltaData
-		});
-	},
-
-	closeEntitlementPoolsEditor(dispatch) {
-		dispatch({
-			type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE
-		});
-	},
-
-	saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, version}) {
-		if (previousEntitlementPool) {
-			return putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version).then(() => {
-				dispatch({
-					type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL,
-					entitlementPool
-				});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-		else {
-			return postEntitlementPool(licenseModelId, entitlementPool, version).then(response => {
-				dispatch({
-					type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL,
-					entitlementPool: {
-						...entitlementPool,
-						referencingFeatureGroups: [],
-						id: response.value
-					}
-				});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
-			entitlementPoolToDelete: false
-		});
-	},
-	openDeleteEntitlementPoolConfirm(dispatch, {entitlementPool}) {
-		dispatch({
-			type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
-			entitlementPoolToDelete: entitlementPool
-		});
-	},
-
-
-
-	fetchLimits(dispatch, {licenseModelId, version, entitlementPool}) {
-		return fetchLimitsList(licenseModelId, entitlementPool.id, version). then (response => {
-			dispatch({
-				type: entitlementPoolsActionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED,
-				response
-			});
-		});
-	},
-
-	submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {
-		const propmise  =  limit.id ? putLimit(licenseModelId,entitlementPool.id, version, limit)
-			: postLimit(licenseModelId,entitlementPool.id, version, limit);
-		return propmise.then(() => {
-			dispatch({
-				type: limitEditorActions.CLOSE
-			});
-			this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
-
-	deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {
-		return  deleteLimit(licenseModelId,entitlementPool.id, version, limit.id).then(() => {
-			this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	}
+    deleteLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) {
+        return deleteLimit(
+            licenseModelId,
+            entitlementPool.id,
+            version,
+            limit.id
+        ).then(() => {
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                entitlementPool
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
index de2a87ceaf..e69ff688ab 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
@@ -15,104 +15,112 @@
  */
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
+    ENTITLEMENT_POOLS_LIST_LOADED: null,
+    ADD_ENTITLEMENT_POOL: null,
+    EDIT_ENTITLEMENT_POOL: null,
+    DELETE_ENTITLEMENT_POOL: null,
 
-	ENTITLEMENT_POOLS_LIST_LOADED: null,
-	ADD_ENTITLEMENT_POOL: null,
-	EDIT_ENTITLEMENT_POOL: null,
-	DELETE_ENTITLEMENT_POOL: null,
-
-	entitlementPoolsEditor: {
-		OPEN: null,
-		CLOSE: null,
-		DATA_CHANGED: null,
-		LIMITS_LIST_LOADED: null
-	}
-
+    entitlementPoolsEditor: {
+        OPEN: null,
+        CLOSE: null,
+        DATA_CHANGED: null,
+        LIMITS_LIST_LOADED: null
+    }
 });
 
 export const enums = keyMirror({
-	SELECTED_FEATURE_GROUP_TAB: {
-		GENERAL: 1,
-		ENTITLEMENT_POOLS: 2,
-		LICENCE_KEY_GROUPS: 3
-	},
-	SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: {
-		ASSOCIATED_ENTITLEMENT_POOLS: 1,
-		AVAILABLE_ENTITLEMENT_POOLS: 2
-	}
+    SELECTED_FEATURE_GROUP_TAB: {
+        GENERAL: 1,
+        ENTITLEMENT_POOLS: 2,
+        LICENCE_KEY_GROUPS: 3
+    },
+    SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: {
+        ASSOCIATED_ENTITLEMENT_POOLS: 1,
+        AVAILABLE_ENTITLEMENT_POOLS: 2
+    }
 });
 
 export const defaultState = {
-	ENTITLEMENT_POOLS_EDITOR_DATA: {
-		entitlementMetric: {choice: '', other: ''},
-		aggregationFunction: {choice: '', other: ''},
-		operationalScope: {choices: [], other: ''},
-		time: {choice: '', other: ''}
-	}
+    ENTITLEMENT_POOLS_EDITOR_DATA: {
+        entitlementMetric: { choice: '', other: '' },
+        aggregationFunction: { choice: '', other: '' },
+        operationalScope: { choices: [], other: '' },
+        time: { choice: '', other: '' }
+    }
 };
 
 export const thresholdUnitType = {
-	ABSOLUTE: 'Absolute',
-	PERCENTAGE: 'Percentage'
+    ABSOLUTE: 'Absolute',
+    PERCENTAGE: 'Percentage'
 };
 
 export const optionsInputValues = {
-	OPERATIONAL_SCOPE: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Network_Wide', title: 'Network Wide'},
-		{enum: 'Availability_Zone', title: 'Availability Zone'},
-		{enum: 'Data_Center', title: 'Data Center'},
-		{enum: 'Tenant', title: 'Tenant'},
-		{enum: 'VM', title: 'VM'},
-		{enum: 'CPU', title: 'CPU'},
-		{enum: 'Core', title: 'Core'}
-	],
-	TIME: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Hour', title: 'Hour'},
-		{enum: 'Day', title: 'Day'},
-		{enum: 'Month', title: 'Month'}
-	],
-	AGGREGATE_FUNCTION: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Peak', title: 'Peak'},
-		{enum: 'Average', title: 'Average'}
-	],
-	ENTITLEMENT_METRIC: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Software_Instances_Count', title: 'Software Instances'},
-		{enum: 'Core', title: 'Core'},
-		{enum: 'CPU', title: 'CPU'},
-		{enum: 'Trunks', title: 'Trunks'},
-		{enum: 'User', title: 'User'},
-		{enum: 'Subscribers', title: 'Subscribers'},
-		{enum: 'Tenants', title: 'Tenants'},
-		{enum: 'Tokens', title: 'Tokens'},
-		{enum: 'Seats', title: 'Seats'},
-		{enum: 'Units_TB', title: 'Units-TB'},
-		{enum: 'Units_GB', title: 'Units-GB'},
-		{enum: 'Units_MB', title: 'Units-MB'}
-	]
+    OPERATIONAL_SCOPE: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Network_Wide', title: 'Network Wide' },
+        { enum: 'Availability_Zone', title: 'Availability Zone' },
+        { enum: 'Data_Center', title: 'Data Center' },
+        { enum: 'Tenant', title: 'Tenant' },
+        { enum: 'VM', title: 'VM' },
+        { enum: 'CPU', title: 'CPU' },
+        { enum: 'Core', title: 'Core' }
+    ],
+    TIME: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Hour', title: 'Hour' },
+        { enum: 'Day', title: 'Day' },
+        { enum: 'Month', title: 'Month' }
+    ],
+    AGGREGATE_FUNCTION: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Peak', title: 'Peak' },
+        { enum: 'Average', title: 'Average' }
+    ],
+    ENTITLEMENT_METRIC: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Software_Instances_Count', title: 'Software Instances' },
+        { enum: 'Core', title: 'Core' },
+        { enum: 'CPU', title: 'CPU' },
+        { enum: 'Trunks', title: 'Trunks' },
+        { enum: 'User', title: 'User' },
+        { enum: 'Subscribers', title: 'Subscribers' },
+        { enum: 'Tenants', title: 'Tenants' },
+        { enum: 'Tokens', title: 'Tokens' },
+        { enum: 'Seats', title: 'Seats' },
+        { enum: 'Units_TB', title: 'Units-TB' },
+        { enum: 'Units_GB', title: 'Units-GB' },
+        { enum: 'Units_MB', title: 'Units-MB' }
+    ]
 };
 
-export const extractValue = (item) => {
-	if (item === undefined) {return '';} //TODO fix it later
-	return  item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
+export const extractValue = item => {
+    if (item === undefined) {
+        return '';
+    } //TODO fix it later
+    return item
+        ? item.choice === optionInputOther.OTHER
+          ? item.other
+          : InputOptions.getTitleByName(optionsInputValues, item.choice)
+        : '';
 };
 
-export const extractUnits = (units) => {
-	if (units === undefined) {return '';} //TODO fix it later
-	return units === 'Absolute' ? '' : '%';
+export const extractUnits = units => {
+    if (units === undefined) {
+        return '';
+    } //TODO fix it later
+    return units === 'Absolute' ? '' : '%';
 };
 
 export const tabIds = {
-	GENERAL: 'GENERAL',
-	SP_LIMITS: 'SP_LIMITS',
-	VENDOR_LIMITS: 'VENDOR_LIMITS',
-	ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
+    GENERAL: 'GENERAL',
+    SP_LIMITS: 'SP_LIMITS',
+    VENDOR_LIMITS: 'VENDOR_LIMITS',
+    ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
 };
 
-export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL';
\ No newline at end of file
+export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js
index 23c260f793..5fcdad992a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js
@@ -13,54 +13,80 @@
  * 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 EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js';
 import EntitlementPoolsEditorView from './EntitlementPoolsEditorView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js';
 
-const mapStateToProps = ({licenseModel: {entitlementPool}}) => {
+const mapStateToProps = ({ licenseModel: { entitlementPool } }) => {
+    let {
+        data,
+        genericFieldInfo,
+        formReady,
+        limitsList
+    } = entitlementPool.entitlementPoolEditor;
 
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let {data, genericFieldInfo, formReady, limitsList} = entitlementPool.entitlementPoolEditor;
+    let previousData,
+        EPNames = {};
+    const entitlementPoolId = data ? data.id : null;
+    if (entitlementPoolId) {
+        previousData = entitlementPool.entitlementPoolsList.find(
+            entitlementPool => entitlementPool.id === entitlementPoolId
+        );
+    }
 
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    const list = entitlementPool.entitlementPoolsList;
+    for (let i = 0; i < list.length; i++) {
+        EPNames[list[i].name.toLowerCase()] = list[i].id;
+    }
 
-	let previousData, EPNames = {};
-	const entitlementPoolId = data ? data.id : null;
-	if(entitlementPoolId) {
-		previousData = entitlementPool.entitlementPoolsList.find(entitlementPool => entitlementPool.id === entitlementPoolId);
-	}
-
-	const list = entitlementPool.entitlementPoolsList;
-	for (let i = 0; i < list.length; i++) {
-		EPNames[list[i].name.toLowerCase()] = list[i].id;
-	}
-
-	return {
-		data,
-		genericFieldInfo,
-		previousData,
-		isFormValid,
-		formReady,
-		EPNames,
-		limitsList
-	};
+    return {
+        data,
+        genericFieldInfo,
+        previousData,
+        isFormValid,
+        formReady,
+        EPNames,
+        limitsList
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onCancel: () => EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch),
-		onSubmit: ({previousEntitlementPool, entitlementPool, keepOpen}) => {
-			if (!keepOpen) {EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch);}
-			EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, version});
-		},
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName),
-		onCloseLimitEditor: () => LimitEditorActionHelper.closeLimitsEditor(dispatch),
-		onOpenLimitEditor: (limit) => LimitEditorActionHelper.openLimitsEditor(dispatch, {limit})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onCancel: () =>
+            EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch),
+        onSubmit: ({ previousEntitlementPool, entitlementPool, keepOpen }) => {
+            if (!keepOpen) {
+                EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(
+                    dispatch
+                );
+            }
+            EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, {
+                licenseModelId,
+                previousEntitlementPool,
+                entitlementPool,
+                version
+            });
+        },
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName),
+        onCloseLimitEditor: () =>
+            LimitEditorActionHelper.closeLimitsEditor(dispatch),
+        onOpenLimitEditor: limit =>
+            LimitEditorActionHelper.openLimitsEditor(dispatch, { limit })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    EntitlementPoolsEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
index be100f6802..4556b87129 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
@@ -13,87 +13,101 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, defaultState, SP_ENTITLEMENT_POOL_FORM} from './EntitlementPoolsConstants.js';
+import {
+    actionTypes,
+    defaultState,
+    SP_ENTITLEMENT_POOL_FORM
+} from './EntitlementPoolsConstants.js';
 import moment from 'moment';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.entitlementPoolsEditor.OPEN:
-			let entitlementPoolData = {...action.entitlementPool};
-			let {startDate, expiryDate} = entitlementPoolData;
-			if (startDate) {
-				entitlementPoolData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT);
-			}
-			if (expiryDate) {
-				entitlementPoolData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT);
-			}
-			return {
-				...state,
-				formReady: null,
-				formName: SP_ENTITLEMENT_POOL_FORM,
-				genericFieldInfo: {
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'increments' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 120}]
-					},
-					'operationalScope' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'thresholdUnits' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'thresholdValue' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},					
-					'startDate': {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'expiryDate': {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				},
-				data: action.entitlementPool ? entitlementPoolData : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA
-			};
-		case actionTypes.entitlementPoolsEditor.DATA_CHANGED:
-			return {
-				...state,
-				data: {
-					...state.data,
-					...action.deltaData
-				}
-			};
-		case actionTypes.entitlementPoolsEditor.CLOSE:
-			return {};
-
-		case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED:
-			return {
-				...state,
-				limitsList: action.response.results
-			};	
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.entitlementPoolsEditor.OPEN:
+            let entitlementPoolData = { ...action.entitlementPool };
+            let { startDate, expiryDate } = entitlementPoolData;
+            if (startDate) {
+                entitlementPoolData.startDate = moment(
+                    startDate,
+                    DATE_FORMAT
+                ).format(DATE_FORMAT);
+            }
+            if (expiryDate) {
+                entitlementPoolData.expiryDate = moment(
+                    expiryDate,
+                    DATE_FORMAT
+                ).format(DATE_FORMAT);
+            }
+            return {
+                ...state,
+                formReady: null,
+                formName: SP_ENTITLEMENT_POOL_FORM,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    increments: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 120 }]
+                    },
+                    operationalScope: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    thresholdUnits: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    thresholdValue: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    startDate: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    expiryDate: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                },
+                data: action.entitlementPool
+                    ? entitlementPoolData
+                    : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA
+            };
+        case actionTypes.entitlementPoolsEditor.DATA_CHANGED:
+            return {
+                ...state,
+                data: {
+                    ...state.data,
+                    ...action.deltaData
+                }
+            };
+        case actionTypes.entitlementPoolsEditor.CLOSE:
+            return {};
 
+        case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED:
+            return {
+                ...state,
+                limitsList: action.response.results
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
index efae7f3ad2..46eda622b5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
@@ -25,307 +25,479 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import Button from 'sdc-ui/lib/react/Button.js';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {optionsInputValues as  EntitlementPoolsOptionsInputValues, SP_ENTITLEMENT_POOL_FORM, tabIds}  from  './EntitlementPoolsConstants.js';
-import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js';
-import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+    optionsInputValues as EntitlementPoolsOptionsInputValues,
+    SP_ENTITLEMENT_POOL_FORM,
+    tabIds
+} from './EntitlementPoolsConstants.js';
+import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
+import {
+    validateStartDate,
+    thresholdValueValidation
+} from '../LicenseModelValidations.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 import Tabs from 'sdc-ui/lib/react/Tabs.js';
 import Tab from 'sdc-ui/lib/react/Tab.js';
 import EntitlementPoolsLimits from './EntitlementPoolsLimits.js';
-import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';
+import {
+    limitType,
+    NEW_LIMIT_TEMP_ID
+} from '../limits/LimitEditorConstants.js';
 
 const EntitlementPoolPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	operationalScope: PropTypes.shape({
-		choices: PropTypes.array,
-		other: PropTypes.string
-	}),
-	thresholdUnits: PropTypes.string,
-	thresholdValue: PropTypes.string,
-	increments: PropTypes.string,
-	startDate: PropTypes.string,
-	expiryDate: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    operationalScope: PropTypes.shape({
+        choices: PropTypes.array,
+        other: PropTypes.string
+    }),
+    thresholdUnits: PropTypes.string,
+    thresholdValue: PropTypes.string,
+    increments: PropTypes.string,
+    startDate: PropTypes.string,
+    expiryDate: PropTypes.string
 });
 
-const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, validateName,
-	 thresholdValueValidation, validateStartDate}) => {
+const EntitlementPoolsFormContent = ({
+    data,
+    genericFieldInfo,
+    onDataChanged,
+    validateName,
+    thresholdValueValidation,
+    validateStartDate
+}) => {
+    let {
+        name,
+        description,
+        operationalScope,
+        thresholdUnits,
+        thresholdValue,
+        increments,
+        startDate,
+        expiryDate
+    } = data;
+    return (
+        <GridSection hasLastColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={name =>
+                        onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, {
+                            name: validateName
+                        })
+                    }
+                    isValid={genericFieldInfo.name.isValid}
+                    isRequired={true}
+                    errorText={genericFieldInfo.name.errorText}
+                    label={i18n('Name')}
+                    value={name}
+                    data-test-id="create-ep-name"
+                    type="text"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <InputOptions
+                    onInputChange={() => {}}
+                    isMultiSelect={true}
+                    onEnumChange={operationalScope =>
+                        onDataChanged(
+                            {
+                                operationalScope: {
+                                    choices: operationalScope,
+                                    other: ''
+                                }
+                            },
+                            SP_ENTITLEMENT_POOL_FORM
+                        )
+                    }
+                    onOtherChange={operationalScope =>
+                        onDataChanged(
+                            {
+                                operationalScope: {
+                                    choices: [optionInputOther.OTHER],
+                                    other: operationalScope
+                                }
+                            },
+                            SP_ENTITLEMENT_POOL_FORM
+                        )
+                    }
+                    label={i18n('Operational Scope')}
+                    data-test-id="create-ep-operational-scope"
+                    type="select"
+                    multiSelectedEnum={
+                        operationalScope && operationalScope.choices
+                    }
+                    otherValue={operationalScope && operationalScope.other}
+                    values={
+                        EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE
+                    }
+                    isValid={genericFieldInfo.operationalScope.isValid}
+                    errorText={genericFieldInfo.operationalScope.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2} stretch>
+                <Input
+                    onChange={description =>
+                        onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM)
+                    }
+                    isValid={genericFieldInfo.description.isValid}
+                    errorText={genericFieldInfo.description.errorText}
+                    label={i18n('Description')}
+                    value={description}
+                    data-test-id="create-ep-description"
+                    type="textarea"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <div className="threshold-section">
+                    <Input
+                        onChange={e => {
+                            // setting the unit to the correct value
+                            const selectedIndex = e.target.selectedIndex;
+                            const val = e.target.options[selectedIndex].value;
+                            onDataChanged(
+                                { thresholdUnits: val },
+                                SP_ENTITLEMENT_POOL_FORM
+                            );
+                            // TODO make sure that the value is valid too
+                            if (thresholdValue && thresholdValue !== '') {
+                                onDataChanged(
+                                    { thresholdValue: thresholdValue },
+                                    SP_ENTITLEMENT_POOL_FORM,
+                                    { thresholdValue: thresholdValueValidation }
+                                );
+                            }
+                        }}
+                        value={thresholdUnits}
+                        label={i18n('Threshold Units')}
+                        data-test-id="create-ep-threshold-units"
+                        isValid={genericFieldInfo.thresholdUnits.isValid}
+                        errorText={genericFieldInfo.thresholdUnits.errorText}
+                        groupClassName="bootstrap-input-options"
+                        className="input-options-select"
+                        type="select">
+                        {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
+                            mtype => (
+                                <option key={mtype.enum} value={mtype.enum}>{`${
+                                    mtype.title
+                                }`}</option>
+                            )
+                        )}
+                    </Input>
 
-	let {name, description, operationalScope, thresholdUnits, thresholdValue,
-		increments, startDate, expiryDate} = data;
-	return (
-		<GridSection hasLastColSet>
-			<GridItem colSpan={2}>
-				<Input
-					onChange={name => onDataChanged({name}, SP_ENTITLEMENT_POOL_FORM, {name: validateName})}
-					isValid={genericFieldInfo.name.isValid}
-					isRequired={true}
-					errorText={genericFieldInfo.name.errorText}
-					label={i18n('Name')}
-					value={name}
-					data-test-id='create-ep-name'
-					type='text'/>
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-				<InputOptions
-					onInputChange={()=>{}}
-					isMultiSelect={true}
-					onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
-						SP_ENTITLEMENT_POOL_FORM)}
-					onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
-						other: operationalScope}}, SP_ENTITLEMENT_POOL_FORM)}
-					label={i18n('Operational Scope')}
-					data-test-id='create-ep-operational-scope'
-					type='select'
-					multiSelectedEnum={operationalScope && operationalScope.choices}
-					otherValue={operationalScope && operationalScope.other}
-					values={EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE}
-					isValid={genericFieldInfo.operationalScope.isValid}
-					errorText={genericFieldInfo.operationalScope.errorText} />
-			</GridItem>
-			<GridItem colSpan={2} stretch>
-				<Input
-					onChange={description => onDataChanged({description}, SP_ENTITLEMENT_POOL_FORM)}
-					isValid={genericFieldInfo.description.isValid}
-					errorText={genericFieldInfo.description.errorText}
-					label={i18n('Description')}
-					value={description}
-					data-test-id='create-ep-description'
-					type='textarea'/>
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-				<div className='threshold-section'>
-					<Input
-						onChange={e => {
-							// setting the unit to the correct value
-							const selectedIndex = e.target.selectedIndex;
-							const val = e.target.options[selectedIndex].value;
-							onDataChanged({thresholdUnits: val}, SP_ENTITLEMENT_POOL_FORM);
-							// TODO make sure that the value is valid too
-							if(thresholdValue && thresholdValue !== '') {
-								onDataChanged({thresholdValue: thresholdValue}, SP_ENTITLEMENT_POOL_FORM,{thresholdValue : thresholdValueValidation});
-							}}
-
-						}
-						value={thresholdUnits}
-						label={i18n('Threshold Units')}
-						data-test-id='create-ep-threshold-units'
-						isValid={genericFieldInfo.thresholdUnits.isValid}
-						errorText={genericFieldInfo.thresholdUnits.errorText}
-						groupClassName='bootstrap-input-options'
-						className='input-options-select'
-						type='select' >
-						{LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype =>
-							<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-					</Input>
-
-					<Input
-						className='entitlement-pools-form-row-threshold-value'
-						onChange={thresholdValue => onDataChanged({thresholdValue}, SP_ENTITLEMENT_POOL_FORM,
-							{thresholdValue : thresholdValueValidation})}
-						label={i18n('Threshold Value')}
-						isValid={genericFieldInfo.thresholdValue.isValid}
-						errorText={genericFieldInfo.thresholdValue.errorText}
-						data-test-id='create-ep-threshold-value'
-						value={thresholdValue}
-						type='text'/>
-				</div>
-				<Input
-					onChange={increments => onDataChanged({increments}, SP_ENTITLEMENT_POOL_FORM)}
-					label={i18n('Increments')}
-					value={increments}
-					data-test-id='create-ep-increments'
-					type='text'/>
-				<div className='date-section'>
-					<Input
-						type='date'
-						label={i18n('Start Date')}
-						value={startDate}
-						dateFormat={DATE_FORMAT}
-						startDate={startDate}
-						endDate={expiryDate}
-						onChange={startDate => onDataChanged(
-							{startDate: startDate ? startDate.format(DATE_FORMAT) : ''},
-							SP_ENTITLEMENT_POOL_FORM,
-							{startDate: validateStartDate}
-						)}
-						isValid={genericFieldInfo.startDate.isValid}
-						errorText={genericFieldInfo.startDate.errorText}
-						selectsStart/>
-					<Input
-						type='date'
-						label={i18n('Expiry Date')}
-						value={expiryDate}
-						dateFormat={DATE_FORMAT}
-						startDate={startDate}
-						endDate={expiryDate}
-						onChange={expiryDate => {
-							onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, SP_ENTITLEMENT_POOL_FORM);
-							onDataChanged({startDate}, SP_ENTITLEMENT_POOL_FORM, {startDate: validateStartDate});
-						}}
-						isValid={genericFieldInfo.expiryDate.isValid}
-						errorText={genericFieldInfo.expiryDate.errorText}
-						selectsEnd/>
-				</div>
-			</GridItem>
-		</GridSection>
-	);
+                    <Input
+                        className="entitlement-pools-form-row-threshold-value"
+                        onChange={thresholdValue =>
+                            onDataChanged(
+                                { thresholdValue },
+                                SP_ENTITLEMENT_POOL_FORM,
+                                {
+                                    thresholdValue: thresholdValueValidation
+                                }
+                            )
+                        }
+                        label={i18n('Threshold Value')}
+                        isValid={genericFieldInfo.thresholdValue.isValid}
+                        errorText={genericFieldInfo.thresholdValue.errorText}
+                        data-test-id="create-ep-threshold-value"
+                        value={thresholdValue}
+                        type="text"
+                    />
+                </div>
+                <Input
+                    onChange={increments =>
+                        onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM)
+                    }
+                    label={i18n('Increments')}
+                    value={increments}
+                    data-test-id="create-ep-increments"
+                    type="text"
+                />
+                <div className="date-section">
+                    <Input
+                        type="date"
+                        label={i18n('Start Date')}
+                        value={startDate}
+                        dateFormat={DATE_FORMAT}
+                        startDate={startDate}
+                        endDate={expiryDate}
+                        onChange={startDate =>
+                            onDataChanged(
+                                {
+                                    startDate: startDate
+                                        ? startDate.format(DATE_FORMAT)
+                                        : ''
+                                },
+                                SP_ENTITLEMENT_POOL_FORM,
+                                { startDate: validateStartDate }
+                            )
+                        }
+                        isValid={genericFieldInfo.startDate.isValid}
+                        errorText={genericFieldInfo.startDate.errorText}
+                        selectsStart
+                    />
+                    <Input
+                        type="date"
+                        label={i18n('Expiry Date')}
+                        value={expiryDate}
+                        dateFormat={DATE_FORMAT}
+                        startDate={startDate}
+                        endDate={expiryDate}
+                        onChange={expiryDate => {
+                            onDataChanged(
+                                {
+                                    expiryDate: expiryDate
+                                        ? expiryDate.format(DATE_FORMAT)
+                                        : ''
+                                },
+                                SP_ENTITLEMENT_POOL_FORM
+                            );
+                            onDataChanged(
+                                { startDate },
+                                SP_ENTITLEMENT_POOL_FORM,
+                                {
+                                    startDate: validateStartDate
+                                }
+                            );
+                        }}
+                        isValid={genericFieldInfo.expiryDate.isValid}
+                        errorText={genericFieldInfo.expiryDate.errorText}
+                        selectsEnd
+                    />
+                </div>
+            </GridItem>
+        </GridSection>
+    );
 };
 
 class EntitlementPoolsEditorView extends React.Component {
+    static propTypes = {
+        data: EntitlementPoolPropType,
+        previousData: EntitlementPoolPropType,
+        EPNames: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		data: EntitlementPoolPropType,
-		previousData: EntitlementPoolPropType,
-		EPNames: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
-
-	static defaultProps = {
-		data: {}
-	};
-
-	componentDidUpdate(prevProps) {
-		if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit
-			this.submit();
-		}
-	}
+    static defaultProps = {
+        data: {}
+    };
 
-	state = {
-		selectedTab: tabIds.GENERAL,
-		selectedLimit: ''
-	};
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.formReady &&
+            this.props.formReady !== prevProps.formReady
+        ) {
+            // if form validation succeeded -> continue with submit
+            this.submit();
+        }
+    }
 
-	render() {
-		let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCloseLimitEditor, limitsList = []} = this.props;
-		const {selectedTab} = this.state;
-		const isTabsDisabled = !data.id || !this.props.isFormValid;
+    state = {
+        selectedTab: tabIds.GENERAL,
+        selectedLimit: ''
+    };
 
-		return (
-			<div>
-			<Tabs
-				type='menu'
-				activeTab={selectedTab}
-				onTabClick={(tabIndex)=>{
-					if (tabIndex === tabIds.ADD_LIMIT_BUTTON)  {
-						this.onAddLimit();
-					} else {
-						this.setState({selectedTab: tabIndex});
-						this.setState({selectedLimit: ''});
-						onCloseLimitEditor();
-					}
-				}}
-				invalidTabs={[]}>
-				<Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
-					{
-						genericFieldInfo && <Form
-							ref='validationForm'
-							hasButtons={false}
-							labledButtons={false}
-							isReadOnlyMode={isReadOnlyMode}
-							isValid={this.props.isFormValid}
-							formReady={this.props.formReady}
-							onValidateForm={() => this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM) }
-							className='license-model-form entitlement-pools-form'>
-							<EntitlementPoolsFormContent
-								data={data}
-								genericFieldInfo={genericFieldInfo}
-								onDataChanged={onDataChanged}
-								validateName={(value) => this.validateName(value)}
-								validateStartDate={(value, state) => validateStartDate(value, state)}
-								thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/>
-						</Form>
-					}
-				</Tab>
-				<Tab disabled={isTabsDisabled} tabId={tabIds.SP_LIMITS} data-test-id='sp-limits-tab' title={i18n('SP Limits')}>
-					{selectedTab === tabIds.SP_LIMITS &&
-						<EntitlementPoolsLimits
-							isReadOnlyMode={isReadOnlyMode}
-							limitType={limitType.SERVICE_PROVIDER}
-							limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)}
-							selectedLimit={this.state.selectedLimit}
-							onCloseLimitEditor={() => this.onCloseLimitEditor()}
-							onSelectLimit={limit => this.onSelectLimit(limit)}/>}
-				</Tab>
-				<Tab disabled={isTabsDisabled} tabId={tabIds.VENDOR_LIMITS} data-test-id='vendor-limits-tab' title={i18n('Vendor Limits')}>
-					{selectedTab === tabIds.VENDOR_LIMITS &&
-						<EntitlementPoolsLimits
-							isReadOnlyMode={isReadOnlyMode}
-							limitType={limitType.VENDOR}
-							limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
-							selectedLimit={this.state.selectedLimit}
-							onCloseLimitEditor={() => this.onCloseLimitEditor()}
-							onSelectLimit={limit => this.onSelectLimit(limit)}/>}
-				</Tab>
-				{
-					selectedTab !== tabIds.GENERAL ?
-						<Button
-							disabled={this.state.selectedLimit || isReadOnlyMode}
-							className='add-limit-button'
-							tabId={tabIds.ADD_LIMIT_BUTTON}
-							btnType='link'
-							iconName='plus'>
-							{i18n('Add Limit')}
-						</Button>
-					:
-						<div key='empty_ep_tab_key'></div> // Render empty div to not break tabs
-				}
-			</Tabs>
-			<GridSection className='license-model-modal-buttons entitlement-pools-editor-buttons'>
-				{!this.state.selectedLimit &&
-					<Button btnType='default' disabled={!this.props.isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>
-						{i18n('Save')}
-					</Button>
-				}
-			<Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'>
-				{i18n('Cancel')}
-			</Button>
-			</GridSection>
-			</div>
-		);
-	}
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            isReadOnlyMode,
+            genericFieldInfo,
+            onCloseLimitEditor,
+            limitsList = []
+        } = this.props;
+        const { selectedTab } = this.state;
+        const isTabsDisabled = !data.id || !this.props.isFormValid;
 
-	submit() {
-		const {data: entitlementPool, previousData: previousEntitlementPool, formReady} = this.props;
-		if (!formReady) {
-			this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM);
-		} else {
-			this.props.onSubmit({entitlementPool, previousEntitlementPool});
-		}
-	}
+        return (
+            <div>
+                <Tabs
+                    type="menu"
+                    activeTab={selectedTab}
+                    onTabClick={tabIndex => {
+                        if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
+                            this.onAddLimit();
+                        } else {
+                            this.setState({ selectedTab: tabIndex });
+                            this.setState({ selectedLimit: '' });
+                            onCloseLimitEditor();
+                        }
+                    }}
+                    invalidTabs={[]}>
+                    <Tab
+                        tabId={tabIds.GENERAL}
+                        data-test-id="general-tab"
+                        title={i18n('General')}>
+                        {genericFieldInfo && (
+                            <Form
+                                ref="validationForm"
+                                hasButtons={false}
+                                labledButtons={false}
+                                isReadOnlyMode={isReadOnlyMode}
+                                isValid={this.props.isFormValid}
+                                formReady={this.props.formReady}
+                                onValidateForm={() =>
+                                    this.props.onValidateForm(
+                                        SP_ENTITLEMENT_POOL_FORM
+                                    )
+                                }
+                                className="license-model-form entitlement-pools-form">
+                                <EntitlementPoolsFormContent
+                                    data={data}
+                                    genericFieldInfo={genericFieldInfo}
+                                    onDataChanged={onDataChanged}
+                                    validateName={value =>
+                                        this.validateName(value)
+                                    }
+                                    validateStartDate={(value, state) =>
+                                        validateStartDate(value, state)
+                                    }
+                                    thresholdValueValidation={(value, state) =>
+                                        thresholdValueValidation(value, state)
+                                    }
+                                />
+                            </Form>
+                        )}
+                    </Tab>
+                    <Tab
+                        disabled={isTabsDisabled}
+                        tabId={tabIds.SP_LIMITS}
+                        data-test-id="sp-limits-tab"
+                        title={i18n('SP Limits')}>
+                        {selectedTab === tabIds.SP_LIMITS && (
+                            <EntitlementPoolsLimits
+                                isReadOnlyMode={isReadOnlyMode}
+                                limitType={limitType.SERVICE_PROVIDER}
+                                limitsList={limitsList.filter(
+                                    item =>
+                                        item.type === limitType.SERVICE_PROVIDER
+                                )}
+                                selectedLimit={this.state.selectedLimit}
+                                onCloseLimitEditor={() =>
+                                    this.onCloseLimitEditor()
+                                }
+                                onSelectLimit={limit =>
+                                    this.onSelectLimit(limit)
+                                }
+                            />
+                        )}
+                    </Tab>
+                    <Tab
+                        disabled={isTabsDisabled}
+                        tabId={tabIds.VENDOR_LIMITS}
+                        data-test-id="vendor-limits-tab"
+                        title={i18n('Vendor Limits')}>
+                        {selectedTab === tabIds.VENDOR_LIMITS && (
+                            <EntitlementPoolsLimits
+                                isReadOnlyMode={isReadOnlyMode}
+                                limitType={limitType.VENDOR}
+                                limitsList={limitsList.filter(
+                                    item => item.type === limitType.VENDOR
+                                )}
+                                selectedLimit={this.state.selectedLimit}
+                                onCloseLimitEditor={() =>
+                                    this.onCloseLimitEditor()
+                                }
+                                onSelectLimit={limit =>
+                                    this.onSelectLimit(limit)
+                                }
+                            />
+                        )}
+                    </Tab>
+                    {selectedTab !== tabIds.GENERAL ? (
+                        <Button
+                            disabled={
+                                this.state.selectedLimit || isReadOnlyMode
+                            }
+                            className="add-limit-button"
+                            tabId={tabIds.ADD_LIMIT_BUTTON}
+                            btnType="link"
+                            iconName="plus">
+                            {i18n('Add Limit')}
+                        </Button>
+                    ) : (
+                        <div key="empty_ep_tab_key" />
+                    ) // Render empty div to not break tabs
+                    }
+                </Tabs>
+                <GridSection className="license-model-modal-buttons entitlement-pools-editor-buttons">
+                    {!this.state.selectedLimit && (
+                        <Button
+                            btnType="default"
+                            disabled={!this.props.isFormValid || isReadOnlyMode}
+                            onClick={() => this.submit()}
+                            type="reset">
+                            {i18n('Save')}
+                        </Button>
+                    )}
+                    <Button
+                        btnType={
+                            this.state.selectedLimit ? 'default' : 'outline'
+                        }
+                        onClick={() => this.props.onCancel()}
+                        type="reset">
+                        {i18n('Cancel')}
+                    </Button>
+                </GridSection>
+            </div>
+        );
+    }
 
-	validateName(value) {
-		const {data: {id}, EPNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: EPNames});
+    submit() {
+        const {
+            data: entitlementPool,
+            previousData: previousEntitlementPool,
+            formReady
+        } = this.props;
+        if (!formReady) {
+            this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM);
+        } else {
+            this.props.onSubmit({ entitlementPool, previousEntitlementPool });
+        }
+    }
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-		{isValid: false, errorText: i18n('Entitlement pool by the name \'' + value + '\' already exists. Entitlement pool name must be unique')};
-	}
+    validateName(value) {
+        const { data: { id }, EPNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: EPNames
+        });
 
-	onSelectLimit(limit) {
-		if (limit.id === this.state.selectedLimit) {
-			this.setState({selectedLimit: ''});
-			return;
-		}
-		this.setState({selectedLimit: limit.id});
-		this.props.onOpenLimitEditor(limit);
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Entitlement pool by the name '" +
+                          value +
+                          "' already exists. Entitlement pool name must be unique"
+                  )
+              };
+    }
 
-	onCloseLimitEditor() {
-		this.setState({selectedLimit: ''});
-		this.props.onCloseLimitEditor();
-	}
+    onSelectLimit(limit) {
+        if (limit.id === this.state.selectedLimit) {
+            this.setState({ selectedLimit: '' });
+            return;
+        }
+        this.setState({ selectedLimit: limit.id });
+        this.props.onOpenLimitEditor(limit);
+    }
 
-	onAddLimit() {
-		this.setState({selectedLimit: NEW_LIMIT_TEMP_ID});
-		this.props.onOpenLimitEditor();
-	}
+    onCloseLimitEditor() {
+        this.setState({ selectedLimit: '' });
+        this.props.onCloseLimitEditor();
+    }
 
+    onAddLimit() {
+        this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
+        this.props.onOpenLimitEditor();
+    }
 }
 
 export default EntitlementPoolsEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js
index 8300594098..fd5fe6dd21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js
@@ -13,44 +13,74 @@
  * 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx';
-import {actionTypes as globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js';
 
-const mapStateToProps = ({licenseModel: {entitlementPool: {entitlementPoolEditor: {data}}, limitEditor}, currentScreen}) => {
-	let  {props: {licenseModelId, version}} = currentScreen;
-	return {
-		parent: data,
-		limitEditor,
-		licenseModelId,
-		version
-	};
+const mapStateToProps = ({
+    licenseModel: {
+        entitlementPool: { entitlementPoolEditor: { data } },
+        limitEditor
+    },
+    currentScreen
+}) => {
+    let { props: { licenseModelId, version } } = currentScreen;
+    return {
+        parent: data,
+        limitEditor,
+        licenseModelId,
+        version
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onSubmit: (limit, entitlementPool, licenseModelId, version) => EntitlementPoolsActionHelper.submitLimit(dispatch,
-			{
-				limit,
-				entitlementPool,
-				licenseModelId,
-				version}),
-		onDelete: ({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}) => dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete {name}?', {name: limit.name}),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=> EntitlementPoolsActionHelper.deleteLimit(dispatch, {limit, entitlementPool: parent, licenseModelId, version}).then(() =>
-					selectedLimit === limit.id && onCloseLimitEditor()
-				)
-			}
-		})
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onSubmit: (limit, entitlementPool, licenseModelId, version) =>
+            EntitlementPoolsActionHelper.submitLimit(dispatch, {
+                limit,
+                entitlementPool,
+                licenseModelId,
+                version
+            }),
+        onDelete: ({
+            limit,
+            parent,
+            licenseModelId,
+            version,
+            onCloseLimitEditor,
+            selectedLimit
+        }) =>
+            dispatch({
+                type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete {name}?', {
+                        name: limit.name
+                    }),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        EntitlementPoolsActionHelper.deleteLimit(dispatch, {
+                            limit,
+                            entitlementPool: parent,
+                            licenseModelId,
+                            version
+                        }).then(
+                            () =>
+                                selectedLimit === limit.id &&
+                                onCloseLimitEditor()
+                        )
+                }
+            })
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(Limits);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
index f1dc1f8542..819fb7d824 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
@@ -13,45 +13,60 @@
  * 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 EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js';
-import EntitlementPoolsListEditorView, {generateConfirmationMsg} from './EntitlementPoolsListEditorView.jsx';
-import {actionTypes as globalMoadlActions}  from 'nfvo-components/modal/GlobalModalConstants.js';
+import EntitlementPoolsListEditorView, {
+    generateConfirmationMsg
+} from './EntitlementPoolsListEditorView.jsx';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-const mapStateToProps = ({licenseModel: {entitlementPool, licenseModelEditor}}) => {
-
-	const {entitlementPoolsList} = entitlementPool;
-	const {data} = entitlementPool.entitlementPoolEditor;
-	const {vendorName} = licenseModelEditor.data;
-
-	return {
-		vendorName,
-		entitlementPoolsList,
-		isDisplayModal: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id),
-	};
+const mapStateToProps = ({
+    licenseModel: { entitlementPool, licenseModelEditor }
+}) => {
+    const { entitlementPoolsList } = entitlementPool;
+    const { data } = entitlementPool.entitlementPoolEditor;
+    const { vendorName } = licenseModelEditor.data;
 
+    return {
+        vendorName,
+        entitlementPoolsList,
+        isDisplayModal: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
-	return {
-		onAddEntitlementPoolClick: () => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch),
-		onEditEntitlementPoolClick: entitlementPool => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version}),
-		onDeleteEntitlementPool: entitlementPool => dispatch({
-			type: globalMoadlActions.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: generateConfirmationMsg(entitlementPool),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: () => EntitlementPoolsActionHelper.deleteEntitlementPool(dispatch, {
-					licenseModelId,
-					entitlementPoolId: entitlementPool.id,
-					version
-				})
-			}
-		})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onAddEntitlementPoolClick: () =>
+            EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch),
+        onEditEntitlementPoolClick: entitlementPool =>
+            EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {
+                entitlementPool,
+                licenseModelId,
+                version
+            }),
+        onDeleteEntitlementPool: entitlementPool =>
+            dispatch({
+                type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: generateConfirmationMsg(entitlementPool),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        EntitlementPoolsActionHelper.deleteEntitlementPool(
+                            dispatch,
+                            {
+                                licenseModelId,
+                                entitlementPoolId: entitlementPool.id,
+                                version
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    EntitlementPoolsListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
index cc0cda1992..7a07f94bd5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
@@ -22,120 +22,162 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
 import EntitlementPoolsEditor from './EntitlementPoolsEditor.js';
-import {extractUnits} from './EntitlementPoolsConstants';
+import { extractUnits } from './EntitlementPoolsConstants';
 
 class EntitlementPoolsListEditorView extends React.Component {
-	static propTypes = {
-		vendorName: PropTypes.string,
-		licenseModelId: PropTypes.string.isRequired,
-		entitlementPoolsList: PropTypes.array,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		isDisplayModal: PropTypes.bool,
-		isModalInEditMode: PropTypes.bool,
-		onAddEntitlementPoolClick: PropTypes.func,
-		onEditEntitlementPoolClick: PropTypes.func,
-		onDeleteEntitlementPool: PropTypes.func,
-	};
+    static propTypes = {
+        vendorName: PropTypes.string,
+        licenseModelId: PropTypes.string.isRequired,
+        entitlementPoolsList: PropTypes.array,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        isDisplayModal: PropTypes.bool,
+        isModalInEditMode: PropTypes.bool,
+        onAddEntitlementPoolClick: PropTypes.func,
+        onEditEntitlementPoolClick: PropTypes.func,
+        onDeleteEntitlementPool: PropTypes.func
+    };
 
-	static defaultProps = {
-		entitlementPoolsList: []
-	};
+    static defaultProps = {
+        entitlementPoolsList: []
+    };
 
-	state = {
-		localFilter: ''
-	};
+    state = {
+        localFilter: ''
+    };
 
-	render() {
-		let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
-		let {onAddEntitlementPoolClick} = this.props;
-		const {localFilter} = this.state;
+    render() {
+        let {
+            licenseModelId,
+            isReadOnlyMode,
+            isDisplayModal,
+            isModalInEditMode,
+            version
+        } = this.props;
+        let { onAddEntitlementPoolClick } = this.props;
+        const { localFilter } = this.state;
 
-		return (
-			<div className='license-model-list-editor entitlement-pools-list-editor'>
-				<ListEditorView
-					title={i18n('Entitlement Pools')}
-					plusButtonTitle={i18n('Add Entitlement Pool')}
-					onAdd={onAddEntitlementPoolClick}
-					filterValue={localFilter}
-					onFilter={value => this.setState({localFilter: value})}
-					isReadOnlyMode={isReadOnlyMode}>
-					{this.filterList().map(entitlementPool => this.renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode))}
-				</ListEditorView>
-				<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal entitlement-pools-modal'>
-					<Modal.Header>
-						<Modal.Title>{`${isModalInEditMode ? i18n('Edit Entitlement Pool') : i18n('Create New Entitlement Pool')}`}</Modal.Title>
-					</Modal.Header>
-					<Modal.Body>
-						{
-							isDisplayModal && (
-								<EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>
-							)
-						}
-					</Modal.Body>
-				</Modal>
-			</div>
-		);
-	}
+        return (
+            <div className="license-model-list-editor entitlement-pools-list-editor">
+                <ListEditorView
+                    title={i18n('Entitlement Pools')}
+                    plusButtonTitle={i18n('Add Entitlement Pool')}
+                    onAdd={onAddEntitlementPoolClick}
+                    filterValue={localFilter}
+                    onFilter={value => this.setState({ localFilter: value })}
+                    isReadOnlyMode={isReadOnlyMode}>
+                    {this.filterList().map(entitlementPool =>
+                        this.renderEntitlementPoolListItem(
+                            entitlementPool,
+                            isReadOnlyMode
+                        )
+                    )}
+                </ListEditorView>
+                <Modal
+                    show={isDisplayModal}
+                    bsSize="large"
+                    animation={true}
+                    className="onborading-modal license-model-modal entitlement-pools-modal">
+                    <Modal.Header>
+                        <Modal.Title>{`${
+                            isModalInEditMode
+                                ? i18n('Edit Entitlement Pool')
+                                : i18n('Create New Entitlement Pool')
+                        }`}</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        {isDisplayModal && (
+                            <EntitlementPoolsEditor
+                                version={version}
+                                licenseModelId={licenseModelId}
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Modal.Body>
+                </Modal>
+            </div>
+        );
+    }
 
-	filterList() {
-		let {entitlementPoolsList} = this.props;
-		let {localFilter} = this.state;
-		if(localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return entitlementPoolsList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return entitlementPoolsList;
-		}
-	}
+    filterList() {
+        let { entitlementPoolsList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return entitlementPoolsList.filter(
+                ({ name = '', description = '' }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return entitlementPoolsList;
+        }
+    }
 
-	renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) {
-		let {id, name, description, thresholdValue, thresholdUnits} = entitlementPool;
-		let {onEditEntitlementPoolClick, onDeleteEntitlementPool} = this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				onSelect={() => onEditEntitlementPoolClick(entitlementPool)}
-				onDelete={() => onDeleteEntitlementPool(entitlementPool)}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}>
-				<div className='list-editor-item-view-field'>
+    renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) {
+        let {
+            id,
+            name,
+            description,
+            thresholdValue,
+            thresholdUnits
+        } = entitlementPool;
+        let {
+            onEditEntitlementPoolClick,
+            onDeleteEntitlementPool
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                onSelect={() => onEditEntitlementPoolClick(entitlementPool)}
+                onDelete={() => onDeleteEntitlementPool(entitlementPool)}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div>
+                        <div className="textEllipses text name">{name}</div>
+                    </div>
+                </div>
 
-					<div className='title'>{i18n('Name')}</div>
-					<div ><div className='textEllipses text name'>{name}</div></div>
-				</div>
-
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Entitlement')}</div>
-					<div className='entitlement-pools-count'>{thresholdValue && `${thresholdValue} ${extractUnits(thresholdUnits)}`}</div>
-				</div>
-
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
-					<div className='text description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Entitlement')}</div>
+                    <div className="entitlement-pools-count">
+                        {thresholdValue &&
+                            `${thresholdValue} ${extractUnits(thresholdUnits)}`}
+                    </div>
+                </div>
 
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Description')}</div>
+                    <div className="text description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
 }
 
 export default EntitlementPoolsListEditorView;
 
 export function generateConfirmationMsg(entitlementPoolToDelete) {
-	let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : '';
-	let msg = i18n('Are you sure you want to delete "{poolName}"?', {poolName: poolName});
-	let subMsg = entitlementPoolToDelete
-	&& entitlementPoolToDelete.referencingFeatureGroups
-	&& entitlementPoolToDelete.referencingFeatureGroups.length > 0 ?
-		i18n('This entitlement pool is associated with one or more feature groups') :
-		'';
-	return (
-		<div>
-			<p>{msg}</p>
-			<p>{subMsg}</p>
-		</div>
-	);
+    let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : '';
+    let msg = i18n('Are you sure you want to delete "{poolName}"?', {
+        poolName: poolName
+    });
+    let subMsg =
+        entitlementPoolToDelete &&
+        entitlementPoolToDelete.referencingFeatureGroups &&
+        entitlementPoolToDelete.referencingFeatureGroups.length > 0
+            ? i18n(
+                  'This entitlement pool is associated with one or more feature groups'
+              )
+            : '';
+    return (
+        <div>
+            <p>{msg}</p>
+            <p>{subMsg}</p>
+        </div>
+    );
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
index fefd823207..3c8621d9d8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
@@ -13,19 +13,29 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './EntitlementPoolsConstants';
+import { actionTypes } from './EntitlementPoolsConstants';
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.ADD_ENTITLEMENT_POOL:
-			return [...state, action.entitlementPool];
-		case actionTypes.EDIT_ENTITLEMENT_POOL:
-			const indexForEdit = state.findIndex(entitlementPool => entitlementPool.id === action.entitlementPool.id);
-			return [...state.slice(0, indexForEdit), action.entitlementPool, ...state.slice(indexForEdit + 1)];
-		case actionTypes.DELETE_ENTITLEMENT_POOL:
-			return state.filter(entitlementPool => entitlementPool.id !== action.entitlementPoolId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.ADD_ENTITLEMENT_POOL:
+            return [...state, action.entitlementPool];
+        case actionTypes.EDIT_ENTITLEMENT_POOL:
+            const indexForEdit = state.findIndex(
+                entitlementPool =>
+                    entitlementPool.id === action.entitlementPool.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.entitlementPool,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.DELETE_ENTITLEMENT_POOL:
+            return state.filter(
+                entitlementPool =>
+                    entitlementPool.id !== action.entitlementPoolId
+            );
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js
index 6edb1e1f0c..997a6e09ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js
@@ -13,66 +13,92 @@
  * 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 FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js';
 import FeatureGroupEditorView from './FeatureGroupEditorView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-export const mapStateToProps = ({licenseModel: {featureGroup, entitlementPool, licenseKeyGroup}}) => {
-	let {entitlementPoolsList = []} = entitlementPool;
-	let {licenseKeyGroupsList = []} = licenseKeyGroup;
-	const {featureGroupEditor} = featureGroup;
-	let {data, selectedTab, genericFieldInfo, formReady} = featureGroupEditor;
-	const featureGroupId = data ? data.id : null;
-	const list = featureGroup.featureGroupsList;
+export const mapStateToProps = ({
+    licenseModel: { featureGroup, entitlementPool, licenseKeyGroup }
+}) => {
+    let { entitlementPoolsList = [] } = entitlementPool;
+    let { licenseKeyGroupsList = [] } = licenseKeyGroup;
+    const { featureGroupEditor } = featureGroup;
+    let { data, selectedTab, genericFieldInfo, formReady } = featureGroupEditor;
+    const featureGroupId = data ? data.id : null;
+    const list = featureGroup.featureGroupsList;
 
-	let previousData, FGNames = {}, isFormValid = true, invalidTabs = [];
+    let previousData,
+        FGNames = {},
+        isFormValid = true,
+        invalidTabs = [];
 
-	if (featureGroupId) {
-		previousData = list.find(featureGroup => featureGroup.id === featureGroupId);
-	}
+    if (featureGroupId) {
+        previousData = list.find(
+            featureGroup => featureGroup.id === featureGroupId
+        );
+    }
 
-	for (let i = 0; i < list.length; i++) {
-		FGNames[list[i].name.toLowerCase()] = list[i].id;
-	}
+    for (let i = 0; i < list.length; i++) {
+        FGNames[list[i].name.toLowerCase()] = list[i].id;
+    }
 
-	for (let field in genericFieldInfo) {
-		if (!genericFieldInfo[field].isValid) {
-			isFormValid = false;
-			let tabId = genericFieldInfo[field].tabId;
-			if (invalidTabs.indexOf(tabId) === -1) {
-				invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
-			}
-		}
-	}
+    for (let field in genericFieldInfo) {
+        if (!genericFieldInfo[field].isValid) {
+            isFormValid = false;
+            let tabId = genericFieldInfo[field].tabId;
+            if (invalidTabs.indexOf(tabId) === -1) {
+                invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
+            }
+        }
+    }
 
-	return {
-		data,
-		previousData,
-		selectedTab,
-		entitlementPoolsList,
-		licenseKeyGroupsList,
-		isFormValid,
-		formReady,
-		genericFieldInfo,
-		invalidTabs,
-		FGNames
-	};
+    return {
+        data,
+        previousData,
+        selectedTab,
+        entitlementPoolsList,
+        licenseKeyGroupsList,
+        isFormValid,
+        formReady,
+        genericFieldInfo,
+        invalidTabs,
+        FGNames
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onTabSelect: tab => FeatureGroupsActionHelper.selectEntitlementPoolsEditorTab(dispatch, {tab}),
-		onSubmit: (previousFeatureGroup, featureGroup) => {
-			FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch);
-			FeatureGroupsActionHelper.saveFeatureGroup(dispatch, {licenseModelId, previousFeatureGroup, featureGroup, version});
-		},
-		onCancel: () => FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch),
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onTabSelect: tab =>
+            FeatureGroupsActionHelper.selectEntitlementPoolsEditorTab(
+                dispatch,
+                {
+                    tab
+                }
+            ),
+        onSubmit: (previousFeatureGroup, featureGroup) => {
+            FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch);
+            FeatureGroupsActionHelper.saveFeatureGroup(dispatch, {
+                licenseModelId,
+                previousFeatureGroup,
+                featureGroup,
+                version
+            });
+        },
+        onCancel: () =>
+            FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch),
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(FeatureGroupEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    FeatureGroupEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
index 6d0acaa65d..fc8269332a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
@@ -19,211 +19,320 @@ import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
 import Tab from 'sdc-ui/lib/react/Tab.js';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
+import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
 
-import {state as FeatureGroupStateConstants, FG_EDITOR_FORM} from './FeatureGroupsConstants.js';
+import {
+    state as FeatureGroupStateConstants,
+    FG_EDITOR_FORM
+} from './FeatureGroupsConstants.js';
 
 const FeatureGroupsPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	partNumber: PropTypes.string,
-	manufacturerReferenceNumber: PropTypes.string,
-	entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
-	licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    partNumber: PropTypes.string,
+    manufacturerReferenceNumber: PropTypes.string,
+    entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
+    licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
 });
 
-const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => {
-	let {name, description, partNumber, manufacturerReferenceNumber} = data;
-	return (
-			<GridSection hasLastColSet>
-				<GridItem colSpan={2}>
-					<Input
-						groupClassName='field-section'
-						onChange={name => onDataChanged({name}, FG_EDITOR_FORM, {name: validateName})}
-						label={i18n('Name')}
-						data-test-id='create-fg-name'
-						value={name}
-						name='feature-group-name'
-						type='text'
-						isRequired={true}
-						isValid={genericFieldInfo.name.isValid}
-						errorText={genericFieldInfo.name.errorText} />
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						groupClassName='field-section'
-						className='description-field'
-						onChange={description => onDataChanged({description}, FG_EDITOR_FORM)}
-						data-test-id='create-fg-description'
-						label={i18n('Description')}
-						value={description}
-						name='feature-group-description'
-						type='textarea'
-						isValid={genericFieldInfo.description.isValid}
-						errorText={genericFieldInfo.description.errorText} />
-				</GridItem>
-				<GridItem colSpan={2}>
-					<Input
-						groupClassName='field-section'
-						onChange={partNumber => onDataChanged({partNumber}, FG_EDITOR_FORM)}
-						label={i18n('Part Number')}
-						data-test-id='create-fg-part-number'
-						value={partNumber}
-						isRequired={true}
-						type='text'
-						isValid={genericFieldInfo.partNumber.isValid}
-						errorText={genericFieldInfo.partNumber.errorText} />
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						groupClassName='field-section'
-						onChange={manufacturerReferenceNumber => onDataChanged({manufacturerReferenceNumber}, FG_EDITOR_FORM)}
-						label={i18n('Manufacturer Reference Number')}
-						data-test-id='create-fg-reference-number'
-						value={manufacturerReferenceNumber}
-						isRequired={true}
-						type='text'
-						isValid={genericFieldInfo.manufacturerReferenceNumber.isValid}
-						errorText={genericFieldInfo.manufacturerReferenceNumber.errorText} />
-				</GridItem>
-			</GridSection>
-		);
+const GeneralTab = ({
+    data = {},
+    onDataChanged,
+    genericFieldInfo,
+    validateName
+}) => {
+    let { name, description, partNumber, manufacturerReferenceNumber } = data;
+    return (
+        <GridSection hasLastColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    groupClassName="field-section"
+                    onChange={name =>
+                        onDataChanged({ name }, FG_EDITOR_FORM, {
+                            name: validateName
+                        })
+                    }
+                    label={i18n('Name')}
+                    data-test-id="create-fg-name"
+                    value={name}
+                    name="feature-group-name"
+                    type="text"
+                    isRequired={true}
+                    isValid={genericFieldInfo.name.isValid}
+                    errorText={genericFieldInfo.name.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    groupClassName="field-section"
+                    className="description-field"
+                    onChange={description =>
+                        onDataChanged({ description }, FG_EDITOR_FORM)
+                    }
+                    data-test-id="create-fg-description"
+                    label={i18n('Description')}
+                    value={description}
+                    name="feature-group-description"
+                    type="textarea"
+                    isValid={genericFieldInfo.description.isValid}
+                    errorText={genericFieldInfo.description.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2}>
+                <Input
+                    groupClassName="field-section"
+                    onChange={partNumber =>
+                        onDataChanged({ partNumber }, FG_EDITOR_FORM)
+                    }
+                    label={i18n('Part Number')}
+                    data-test-id="create-fg-part-number"
+                    value={partNumber}
+                    isRequired={true}
+                    type="text"
+                    isValid={genericFieldInfo.partNumber.isValid}
+                    errorText={genericFieldInfo.partNumber.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    groupClassName="field-section"
+                    onChange={manufacturerReferenceNumber =>
+                        onDataChanged(
+                            { manufacturerReferenceNumber },
+                            FG_EDITOR_FORM
+                        )
+                    }
+                    label={i18n('Manufacturer Reference Number')}
+                    data-test-id="create-fg-reference-number"
+                    value={manufacturerReferenceNumber}
+                    isRequired={true}
+                    type="text"
+                    isValid={
+                        genericFieldInfo.manufacturerReferenceNumber.isValid
+                    }
+                    errorText={
+                        genericFieldInfo.manufacturerReferenceNumber.errorText
+                    }
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
-const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => {
-	const dualBoxFilterTitle = {
-		left: i18n('Available Entitlement Pools'),
-		right: i18n('Selected Entitlement Pools')
-	};
-	if (entitlementPoolsList.length > 0) {
-		return (
-			<DualListboxView
-				isReadOnlyMode={isReadOnlyMode}
-				filterTitle={dualBoxFilterTitle}
-				selectedValuesList={data.entitlementPoolsIds}
-				availableList={entitlementPoolsList}
-				onChange={ selectedValuesList => onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
-		);
-	} else {
-		return (
-			<p>{i18n('There are no available entitlement pools')}</p>
-		);
-	}
+const EntitlementPoolsTab = ({
+    entitlementPoolsList,
+    data,
+    onDataChanged,
+    isReadOnlyMode
+}) => {
+    const dualBoxFilterTitle = {
+        left: i18n('Available Entitlement Pools'),
+        right: i18n('Selected Entitlement Pools')
+    };
+    if (entitlementPoolsList.length > 0) {
+        return (
+            <DualListboxView
+                isReadOnlyMode={isReadOnlyMode}
+                filterTitle={dualBoxFilterTitle}
+                selectedValuesList={data.entitlementPoolsIds}
+                availableList={entitlementPoolsList}
+                onChange={selectedValuesList =>
+                    onDataChanged(
+                        { entitlementPoolsIds: selectedValuesList },
+                        FG_EDITOR_FORM
+                    )
+                }
+            />
+        );
+    } else {
+        return <p>{i18n('There are no available entitlement pools')}</p>;
+    }
 };
 
-const LKGTab = ({licenseKeyGroupsList, data, onDataChanged, isReadOnlyMode}) => {
-	const dualBoxFilterTitle = {
-		left: i18n('Available License Key Groups'),
-		right: i18n('Selected License Key Groups')
-	};
-	if (licenseKeyGroupsList.length > 0) {
-		return (
-			<DualListboxView
-				isReadOnlyMode={isReadOnlyMode}
-				filterTitle={dualBoxFilterTitle}
-				selectedValuesList={data.licenseKeyGroupsIds}
-				availableList={licenseKeyGroupsList}
-				onChange={ selectedValuesList => onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
-		);
-	} else {
-		return (
-			<p>{i18n('There are no available license key groups')}</p>
-		);
-	}
+const LKGTab = ({
+    licenseKeyGroupsList,
+    data,
+    onDataChanged,
+    isReadOnlyMode
+}) => {
+    const dualBoxFilterTitle = {
+        left: i18n('Available License Key Groups'),
+        right: i18n('Selected License Key Groups')
+    };
+    if (licenseKeyGroupsList.length > 0) {
+        return (
+            <DualListboxView
+                isReadOnlyMode={isReadOnlyMode}
+                filterTitle={dualBoxFilterTitle}
+                selectedValuesList={data.licenseKeyGroupsIds}
+                availableList={licenseKeyGroupsList}
+                onChange={selectedValuesList =>
+                    onDataChanged(
+                        { licenseKeyGroupsIds: selectedValuesList },
+                        FG_EDITOR_FORM
+                    )
+                }
+            />
+        );
+    } else {
+        return <p>{i18n('There are no available license key groups')}</p>;
+    }
 };
 
 class FeatureGroupEditorView extends React.Component {
+    static propTypes = {
+        data: FeatureGroupsPropType,
+        previousData: FeatureGroupsPropType,
+        isReadOnlyMode: PropTypes.bool,
+        FGNames: PropTypes.object,
 
+        onSubmit: PropTypes.func,
+        onCancel: PropTypes.func,
 
-	static propTypes = {
-		data: FeatureGroupsPropType,
-		previousData: FeatureGroupsPropType,
-		isReadOnlyMode: PropTypes.bool,
-		FGNames: PropTypes.object,
-
-		onSubmit: PropTypes.func,
-		onCancel: PropTypes.func,
-
-		selectedTab: PropTypes.number,
-		onTabSelect: PropTypes.func,
-
-		entitlementPoolsList: DualListboxView.propTypes.availableList,
-		licenseKeyGroupsList: DualListboxView.propTypes.availableList
-	};
-
-
-	static defaultProps = {
-		data: {},
-		selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
-	};
-
-	state = {
-		localEntitlementPoolsListFilter: '',
-		localLicenseKeyGroupsListFilter: ''
-	};
-
-
-	render() {
-		let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props;
-		return (
-			<div>
-			{ genericFieldInfo && <Form
-				ref='validationForm'
-				hasButtons={true}
-				onSubmit={ () => this.submit() }
-				isValid={this.props.isFormValid}
-				formReady={this.props.formReady}
-				onValidateForm={() => this.props.onValidateForm(FG_EDITOR_FORM) }
-				onReset={ () => this.props.onCancel() }
-				labledButtons={true}
-				isReadOnlyMode={isReadOnlyMode}
-				name='feature-group-validation-form'
-				className='license-model-form feature-group-form'>
-				<Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={invalidTabs} id='vlmFGValTabs' >
-					<Tab tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')}  >
-						<fieldset disabled={isReadOnlyMode}>
-							<GeneralTab data={data} onDataChanged={onDataChanged} genericFieldInfo={genericFieldInfo}  validateName={(value)=> this.validateName(value)}/>
-						</fieldset>
-					</Tab>
-					<Tab
-						tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
-						title={i18n('Entitlement Pools')} >
-						<fieldset disabled={isReadOnlyMode}>
-							<EntitlementPoolsTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} entitlementPoolsList={entitlementPoolsList} />
-						</fieldset>
-					</Tab>
-					<Tab
-						tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENSE_KEY_GROUPS}
-						title={i18n('License Key Groups')} >
-						<fieldset disabled={isReadOnlyMode}>
-							<LKGTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} licenseKeyGroupsList={licenseKeyGroupsList} />
-						</fieldset>
-					</Tab>
-				</Tabs>
-
-				</Form> }
-			</div>
-		);
-	}
-
-	submit() {
-		const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
-		this.props.onSubmit(previousFeatureGroup, featureGroup);
-	}
-
-	validateName(value) {
-		const {data: {id}, FGNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: FGNames});
-
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('Feature group by the name \'' + value + '\' already exists. Feature group name must be unique')};
-	}
-}
+        selectedTab: PropTypes.number,
+        onTabSelect: PropTypes.func,
+
+        entitlementPoolsList: DualListboxView.propTypes.availableList,
+        licenseKeyGroupsList: DualListboxView.propTypes.availableList
+    };
+
+    static defaultProps = {
+        data: {},
+        selectedTab:
+            FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
+    };
+
+    state = {
+        localEntitlementPoolsListFilter: '',
+        localLicenseKeyGroupsListFilter: ''
+    };
 
+    render() {
+        let {
+            selectedTab,
+            onTabSelect,
+            isReadOnlyMode,
+            invalidTabs,
+            data,
+            onDataChanged,
+            genericFieldInfo,
+            entitlementPoolsList,
+            licenseKeyGroupsList
+        } = this.props;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() =>
+                            this.props.onValidateForm(FG_EDITOR_FORM)
+                        }
+                        onReset={() => this.props.onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        name="feature-group-validation-form"
+                        className="license-model-form feature-group-form">
+                        <Tabs
+                            activeTab={onTabSelect ? selectedTab : undefined}
+                            onTabClick={onTabSelect}
+                            invalidTabs={invalidTabs}
+                            id="vlmFGValTabs">
+                            <Tab
+                                tabId={
+                                    FeatureGroupStateConstants
+                                        .SELECTED_FEATURE_GROUP_TAB.GENERAL
+                                }
+                                title={i18n('General')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    <GeneralTab
+                                        data={data}
+                                        onDataChanged={onDataChanged}
+                                        genericFieldInfo={genericFieldInfo}
+                                        validateName={value =>
+                                            this.validateName(value)
+                                        }
+                                    />
+                                </fieldset>
+                            </Tab>
+                            <Tab
+                                tabId={
+                                    FeatureGroupStateConstants
+                                        .SELECTED_FEATURE_GROUP_TAB
+                                        .ENTITLEMENT_POOLS
+                                }
+                                title={i18n('Entitlement Pools')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    <EntitlementPoolsTab
+                                        isReadOnlyMode={isReadOnlyMode}
+                                        data={data}
+                                        onDataChanged={onDataChanged}
+                                        entitlementPoolsList={
+                                            entitlementPoolsList
+                                        }
+                                    />
+                                </fieldset>
+                            </Tab>
+                            <Tab
+                                tabId={
+                                    FeatureGroupStateConstants
+                                        .SELECTED_FEATURE_GROUP_TAB
+                                        .LICENSE_KEY_GROUPS
+                                }
+                                title={i18n('License Key Groups')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    <LKGTab
+                                        isReadOnlyMode={isReadOnlyMode}
+                                        data={data}
+                                        onDataChanged={onDataChanged}
+                                        licenseKeyGroupsList={
+                                            licenseKeyGroupsList
+                                        }
+                                    />
+                                </fieldset>
+                            </Tab>
+                        </Tabs>
+                    </Form>
+                )}
+            </div>
+        );
+    }
+
+    submit() {
+        const {
+            data: featureGroup,
+            previousData: previousFeatureGroup
+        } = this.props;
+        this.props.onSubmit(previousFeatureGroup, featureGroup);
+    }
+
+    validateName(value) {
+        const { data: { id }, FGNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: FGNames
+        });
+
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Feature group by the name '" +
+                          value +
+                          "' already exists. Feature group name must be unique"
+                  )
+              };
+    }
+}
 
 export default FeatureGroupEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
index 26925487db..55e2710231 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
@@ -13,48 +13,62 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
-import FeatureGroupsActionHelper  from './FeatureGroupsActionHelper.js';
-import FeatureGroupListEditorView, {generateConfirmationMsg} from './FeatureGroupListEditorView.jsx';
+import { connect } from 'react-redux';
+import FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js';
+import FeatureGroupListEditorView, {
+    generateConfirmationMsg
+} from './FeatureGroupListEditorView.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as globalMoadlActions}  from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-export const mapStateToProps = ({licenseModel: {featureGroup, licenseModelEditor}}) => {
-
-	const {featureGroupEditor: {data}, featureGroupsList} = featureGroup;
-	const {vendorName, version} = licenseModelEditor.data;
-
-	return {
-		vendorName,
-		version,
-		featureGroupsModal: {
-			show: Boolean(data),
-			editMode: Boolean(data && data.id)
-		},
-		featureGroupsList
-	};
+export const mapStateToProps = ({
+    licenseModel: { featureGroup, licenseModelEditor }
+}) => {
+    const { featureGroupEditor: { data }, featureGroupsList } = featureGroup;
+    const { vendorName, version } = licenseModelEditor.data;
 
+    return {
+        vendorName,
+        version,
+        featureGroupsModal: {
+            show: Boolean(data),
+            editMode: Boolean(data && data.id)
+        },
+        featureGroupsList
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {licenseModelId}) => {
-	return {
-		onDeleteFeatureGroupClick: (featureGroup, version) => dispatch({
-			type: globalMoadlActions.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: generateConfirmationMsg(featureGroup),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=>FeatureGroupsActionHelper.deleteFeatureGroup(dispatch, {featureGroupId: featureGroup.id, licenseModelId, version})
-			}
-		}),
-		onAddFeatureGroupClick: (actualVersion) => FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version: actualVersion}),
-		onEditFeatureGroupClick: (featureGroup, actualVersion) => FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
-			featureGroup,
-			licenseModelId,
-			version: actualVersion
-		})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId }) => {
+    return {
+        onDeleteFeatureGroupClick: (featureGroup, version) =>
+            dispatch({
+                type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: generateConfirmationMsg(featureGroup),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        FeatureGroupsActionHelper.deleteFeatureGroup(dispatch, {
+                            featureGroupId: featureGroup.id,
+                            licenseModelId,
+                            version
+                        })
+                }
+            }),
+        onAddFeatureGroupClick: actualVersion =>
+            FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
+                licenseModelId,
+                version: actualVersion
+            }),
+        onEditFeatureGroupClick: (featureGroup, actualVersion) =>
+            FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
+                featureGroup,
+                licenseModelId,
+                version: actualVersion
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(FeatureGroupListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    FeatureGroupListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
index f59e000c21..91f77b3111 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
@@ -24,147 +24,184 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
 import FeatureGroupEditor from './FeatureGroupEditor.js';
 
 class FeatureGroupListEditorView extends React.Component {
-	static propTypes = {
-		vendorName: PropTypes.string,
-		licenseModelId: PropTypes.string.isRequired,
-		featureGroupsModal: PropTypes.shape({
-			show: PropTypes.bool,
-			editMode: PropTypes.bool
-		}),
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		onAddFeatureGroupClick: PropTypes.func,
-		onEditFeatureGroupClick: PropTypes.func,
-		onDeleteFeatureGroupClick: PropTypes.func,
-		onCancelFeatureGroupsEditor: PropTypes.func,
-		featureGroupsList: PropTypes.array
-	};
-
-	static defaultProps = {
-		featureGroupsList: [],
-		featureGroupsModal: {
-			show: false,
-			editMode: false
-		}
-	};
-
-	state = {
-		localFilter: ''
-	};
-
-	render() {
-		let {licenseModelId, featureGroupsModal, isReadOnlyMode, onAddFeatureGroupClick, version} = this.props;
-		const {localFilter} = this.state;
-		return (
-			<div className='license-model-list-editor feature-groups-list-editor'>
-				<ListEditorView
-					title={i18n('Feature Groups')}
-					plusButtonTitle={i18n('Add Feature Group')}
-					filterValue={localFilter}
-					onFilter={value => this.setState({localFilter: value})}
-					onAdd={() => onAddFeatureGroupClick(version)}
-					isReadOnlyMode={isReadOnlyMode}>
-					{this.filterList().map(listItem => this.renderFeatureGroupListItem(listItem, isReadOnlyMode, version))}
-				</ListEditorView>
-				{featureGroupsModal.show && <Modal show={featureGroupsModal.show} bsSize='large' animation={true}
-					       className='onborading-modal license-model-modal feature-group-modal'>
-						<Modal.Header>
-							<Modal.Title>{`${featureGroupsModal.editMode ? i18n('Edit Feature Group') : i18n('Create New Feature Group')}`}</Modal.Title>
-						</Modal.Header>
-						<Modal.Body>
-							<FeatureGroupEditor
-								version={version}
-								licenseModelId={licenseModelId}
-								isReadOnlyMode={isReadOnlyMode}/>
-						</Modal.Body>
-					</Modal>
-				}
-
-			</div>
-		);
-	}
-
-
-	renderFeatureGroupListItem(listItem, isReadOnlyMode, version) {
-		let {name, description, manufacturerReferenceNumber, entitlementPoolsIds = [], licenseKeyGroupsIds = []} = listItem;
-		return (
-			<ListEditorItemView
-				key={listItem.id}
-				onDelete={() => this.deleteFeatureGroupItem(listItem, version)}
-				onSelect={() => this.editFeatureGroupItem(listItem, version)}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='text name'>{name}</div>
-				</div>
-
-				<div className='list-editor-item-view-field smaller-field'>
-					<div className='feature-groups-count-field'>
-						<div className='title'>{i18n('EP')}</div>
-						<div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div>
-					</div>
-				</div>
-				<div className='list-editor-item-view-field smaller-field'>
-					<div className='feature-groups-count-field'>
-						<div className='title'>{i18n('LKG')}</div>
-						<div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div>
-					</div>
-				</div>
-
-				<div className='list-editor-item-view-field'>
-					<div className='feature-groups-count-field'>
-						<div className='title title-no-wrap'>{i18n('Manufacturer Reference Number')}</div>
-						<div className='feature-groups-mrn-ep'>{manufacturerReferenceNumber}</div>
-					</div>
-				</div>
-
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
-					<div className='text description'>{description}</div>
-				</div>
-
-
-
-			</ListEditorItemView>
-		);
-	}
-
-	filterList() {
-		let {featureGroupsList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return featureGroupsList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return featureGroupsList;
-		}
-	}
-
-	editFeatureGroupItem(featureGroup, version) {
-		this.props.onEditFeatureGroupClick(featureGroup, version);
-	}
-
-	deleteFeatureGroupItem(featureGroup, version) {
-		this.props.onDeleteFeatureGroupClick(featureGroup, version);
-	}
+    static propTypes = {
+        vendorName: PropTypes.string,
+        licenseModelId: PropTypes.string.isRequired,
+        featureGroupsModal: PropTypes.shape({
+            show: PropTypes.bool,
+            editMode: PropTypes.bool
+        }),
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        onAddFeatureGroupClick: PropTypes.func,
+        onEditFeatureGroupClick: PropTypes.func,
+        onDeleteFeatureGroupClick: PropTypes.func,
+        onCancelFeatureGroupsEditor: PropTypes.func,
+        featureGroupsList: PropTypes.array
+    };
+
+    static defaultProps = {
+        featureGroupsList: [],
+        featureGroupsModal: {
+            show: false,
+            editMode: false
+        }
+    };
+
+    state = {
+        localFilter: ''
+    };
+
+    render() {
+        let {
+            licenseModelId,
+            featureGroupsModal,
+            isReadOnlyMode,
+            onAddFeatureGroupClick,
+            version
+        } = this.props;
+        const { localFilter } = this.state;
+        return (
+            <div className="license-model-list-editor feature-groups-list-editor">
+                <ListEditorView
+                    title={i18n('Feature Groups')}
+                    plusButtonTitle={i18n('Add Feature Group')}
+                    filterValue={localFilter}
+                    onFilter={value => this.setState({ localFilter: value })}
+                    onAdd={() => onAddFeatureGroupClick(version)}
+                    isReadOnlyMode={isReadOnlyMode}>
+                    {this.filterList().map(listItem =>
+                        this.renderFeatureGroupListItem(
+                            listItem,
+                            isReadOnlyMode,
+                            version
+                        )
+                    )}
+                </ListEditorView>
+                {featureGroupsModal.show && (
+                    <Modal
+                        show={featureGroupsModal.show}
+                        bsSize="large"
+                        animation={true}
+                        className="onborading-modal license-model-modal feature-group-modal">
+                        <Modal.Header>
+                            <Modal.Title>{`${
+                                featureGroupsModal.editMode
+                                    ? i18n('Edit Feature Group')
+                                    : i18n('Create New Feature Group')
+                            }`}</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            <FeatureGroupEditor
+                                version={version}
+                                licenseModelId={licenseModelId}
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        </Modal.Body>
+                    </Modal>
+                )}
+            </div>
+        );
+    }
+
+    renderFeatureGroupListItem(listItem, isReadOnlyMode, version) {
+        let {
+            name,
+            description,
+            manufacturerReferenceNumber,
+            entitlementPoolsIds = [],
+            licenseKeyGroupsIds = []
+        } = listItem;
+        return (
+            <ListEditorItemView
+                key={listItem.id}
+                onDelete={() => this.deleteFeatureGroupItem(listItem, version)}
+                onSelect={() => this.editFeatureGroupItem(listItem, version)}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="text name">{name}</div>
+                </div>
+
+                <div className="list-editor-item-view-field smaller-field">
+                    <div className="feature-groups-count-field">
+                        <div className="title">{i18n('EP')}</div>
+                        <div className="feature-groups-count-ep">
+                            {entitlementPoolsIds.length || 0}
+                        </div>
+                    </div>
+                </div>
+                <div className="list-editor-item-view-field smaller-field">
+                    <div className="feature-groups-count-field">
+                        <div className="title">{i18n('LKG')}</div>
+                        <div className="feature-groups-count-lk">
+                            {licenseKeyGroupsIds.length || 0}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="list-editor-item-view-field">
+                    <div className="feature-groups-count-field">
+                        <div className="title title-no-wrap">
+                            {i18n('Manufacturer Reference Number')}
+                        </div>
+                        <div className="feature-groups-mrn-ep">
+                            {manufacturerReferenceNumber}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Description')}</div>
+                    <div className="text description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
+
+    filterList() {
+        let { featureGroupsList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return featureGroupsList.filter(
+                ({ name = '', description = '' }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return featureGroupsList;
+        }
+    }
+
+    editFeatureGroupItem(featureGroup, version) {
+        this.props.onEditFeatureGroupClick(featureGroup, version);
+    }
+
+    deleteFeatureGroupItem(featureGroup, version) {
+        this.props.onDeleteFeatureGroupClick(featureGroup, version);
+    }
 }
 
 export default FeatureGroupListEditorView;
 
 export function generateConfirmationMsg(featureGroupToDelete) {
-	let name = featureGroupToDelete ? featureGroupToDelete.name : '';
-	let msg = i18n('Are you sure you want to delete "{name}"?', {name: name});
-	let subMsg = featureGroupToDelete.referencingLicenseAgreements
-	&& featureGroupToDelete.referencingLicenseAgreements.length > 0 ?
-		i18n('This feature group is associated with one ore more license agreements') :
-		'';
-	return (
-		<div>
-			<p>{msg}</p>
-			<p>{subMsg}</p>
-		</div>
-	);
+    let name = featureGroupToDelete ? featureGroupToDelete.name : '';
+    let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
+    let subMsg =
+        featureGroupToDelete.referencingLicenseAgreements &&
+        featureGroupToDelete.referencingLicenseAgreements.length > 0
+            ? i18n(
+                  'This feature group is associated with one ore more license agreements'
+              )
+            : '';
+    return (
+        <div>
+            <p>{msg}</p>
+            <p>{subMsg}</p>
+        </div>
+    );
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
index 9e7fe8e0dd..22e21a613a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
@@ -15,132 +15,202 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as featureGroupsActionConstants} from './FeatureGroupsConstants.js';
+import { actionTypes as featureGroupsActionConstants } from './FeatureGroupsConstants.js';
 import EntitlementPoolsActionHelper from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js';
 import LicenseKeyGroupsActionHelper from 'sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 
 function baseUrl(licenseModelId, version) {
-	const restPrefix = Configuration.get('restPrefix');
-	const {id: versionId} = version;
-	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/feature-groups`;
+    const restPrefix = Configuration.get('restPrefix');
+    const { id: versionId } = version;
+    return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/feature-groups`;
 }
 
 function fetchFeatureGroup(licenseModelId, featureGroupId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${featureGroupId}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(licenseModelId, version)}/${featureGroupId}`
+    );
 }
 
 function fetchFeatureGroupsList(licenseModelId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
 }
 
 function deleteFeatureGroup(licenseModelId, featureGroupId, version) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${featureGroupId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(licenseModelId, version)}/${featureGroupId}`
+    );
 }
 
 function addFeatureGroup(licenseModelId, featureGroup, version) {
-	return RestAPIUtil.post(baseUrl(licenseModelId, version), {
-		name: featureGroup.name,
-		description: featureGroup.description,
-		partNumber: featureGroup.partNumber,
-		manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber,
-		addedLicenseKeyGroupsIds: featureGroup.licenseKeyGroupsIds,
-		addedEntitlementPoolsIds: featureGroup.entitlementPoolsIds
-	});
+    return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+        name: featureGroup.name,
+        description: featureGroup.description,
+        partNumber: featureGroup.partNumber,
+        manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber,
+        addedLicenseKeyGroupsIds: featureGroup.licenseKeyGroupsIds,
+        addedEntitlementPoolsIds: featureGroup.entitlementPoolsIds
+    });
 }
 
-function updateFeatureGroup(licenseModelId, previousFeatureGroup, featureGroup, version) {
-
-	const {licenseKeyGroupsIds = []} = featureGroup;
-	const {licenseKeyGroupsIds: prevLicenseKeyGroupsIds = []} = previousFeatureGroup;
-	const {entitlementPoolsIds = []} = featureGroup;
-	const {entitlementPoolsIds: prevEntitlementPoolsIds = []} = previousFeatureGroup;
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${featureGroup.id}`, {
-		name: featureGroup.name,
-		description: featureGroup.description,
-		partNumber: featureGroup.partNumber,
-		manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber,
-		addedLicenseKeyGroupsIds: licenseKeyGroupsIds.filter(licenseKeyGroupId => prevLicenseKeyGroupsIds.indexOf(licenseKeyGroupId) === -1),
-		removedLicenseKeyGroupsIds: prevLicenseKeyGroupsIds.filter(prevLicenseKeyGroupId => licenseKeyGroupsIds.indexOf(prevLicenseKeyGroupId) === -1),
-		addedEntitlementPoolsIds: entitlementPoolsIds.filter(entitlementPoolId => prevEntitlementPoolsIds.indexOf(entitlementPoolId) === -1),
-		removedEntitlementPoolsIds: prevEntitlementPoolsIds.filter(prevEntitlementPoolId => entitlementPoolsIds.indexOf(prevEntitlementPoolId) === -1)
-
-	});
+function updateFeatureGroup(
+    licenseModelId,
+    previousFeatureGroup,
+    featureGroup,
+    version
+) {
+    const { licenseKeyGroupsIds = [] } = featureGroup;
+    const {
+        licenseKeyGroupsIds: prevLicenseKeyGroupsIds = []
+    } = previousFeatureGroup;
+    const { entitlementPoolsIds = [] } = featureGroup;
+    const {
+        entitlementPoolsIds: prevEntitlementPoolsIds = []
+    } = previousFeatureGroup;
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${featureGroup.id}`,
+        {
+            name: featureGroup.name,
+            description: featureGroup.description,
+            partNumber: featureGroup.partNumber,
+            manufacturerReferenceNumber:
+                featureGroup.manufacturerReferenceNumber,
+            addedLicenseKeyGroupsIds: licenseKeyGroupsIds.filter(
+                licenseKeyGroupId =>
+                    prevLicenseKeyGroupsIds.indexOf(licenseKeyGroupId) === -1
+            ),
+            removedLicenseKeyGroupsIds: prevLicenseKeyGroupsIds.filter(
+                prevLicenseKeyGroupId =>
+                    licenseKeyGroupsIds.indexOf(prevLicenseKeyGroupId) === -1
+            ),
+            addedEntitlementPoolsIds: entitlementPoolsIds.filter(
+                entitlementPoolId =>
+                    prevEntitlementPoolsIds.indexOf(entitlementPoolId) === -1
+            ),
+            removedEntitlementPoolsIds: prevEntitlementPoolsIds.filter(
+                prevEntitlementPoolId =>
+                    entitlementPoolsIds.indexOf(prevEntitlementPoolId) === -1
+            )
+        }
+    );
 }
 
 export default {
-	fetchFeatureGroup(dispatch, {licenseModelId, featureGroupId, version}) {
-		return fetchFeatureGroup(licenseModelId, featureGroupId, version);
-	},
+    fetchFeatureGroup(dispatch, { licenseModelId, featureGroupId, version }) {
+        return fetchFeatureGroup(licenseModelId, featureGroupId, version);
+    },
 
-	fetchFeatureGroupsList(dispatch, {licenseModelId, version}) {
-		return fetchFeatureGroupsList(licenseModelId, version).then(response => dispatch({
-			type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
-			response
-		}));
-	},
+    fetchFeatureGroupsList(dispatch, { licenseModelId, version }) {
+        return fetchFeatureGroupsList(licenseModelId, version).then(response =>
+            dispatch({
+                type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
+                response
+            })
+        );
+    },
 
-	deleteFeatureGroup(dispatch, {licenseModelId, featureGroupId, version}) {
-		return deleteFeatureGroup(licenseModelId, featureGroupId, version).then(() => {
-			dispatch({
-				type: featureGroupsActionConstants.DELETE_FEATURE_GROUPS,
-				featureGroupId
-			});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
+    deleteFeatureGroup(dispatch, { licenseModelId, featureGroupId, version }) {
+        return deleteFeatureGroup(licenseModelId, featureGroupId, version).then(
+            () => {
+                dispatch({
+                    type: featureGroupsActionConstants.DELETE_FEATURE_GROUPS,
+                    featureGroupId
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            }
+        );
+    },
 
-	saveFeatureGroup(dispatch, {licenseModelId, previousFeatureGroup, featureGroup, version}) {
-		if (previousFeatureGroup) {
-			return updateFeatureGroup(licenseModelId, previousFeatureGroup, featureGroup, version).then(() =>{
-				dispatch({
-					type: featureGroupsActionConstants.EDIT_FEATURE_GROUPS,
-					featureGroup
-				});
-				EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version});
-				LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-		else {
-			return addFeatureGroup(licenseModelId, featureGroup, version).then(response => {
-				dispatch({
-					type: featureGroupsActionConstants.ADD_FEATURE_GROUPS,
-					featureGroup: {
-						...featureGroup,
-						id: response.value,
-						referencingLicenseAgreements: []
-					}
-				});
-				EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version});
-				LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-	},
+    saveFeatureGroup(
+        dispatch,
+        { licenseModelId, previousFeatureGroup, featureGroup, version }
+    ) {
+        if (previousFeatureGroup) {
+            return updateFeatureGroup(
+                licenseModelId,
+                previousFeatureGroup,
+                featureGroup,
+                version
+            ).then(() => {
+                dispatch({
+                    type: featureGroupsActionConstants.EDIT_FEATURE_GROUPS,
+                    featureGroup
+                });
+                EntitlementPoolsActionHelper.fetchEntitlementPoolsList(
+                    dispatch,
+                    { licenseModelId, version }
+                );
+                LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(
+                    dispatch,
+                    { licenseModelId, version }
+                );
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        } else {
+            return addFeatureGroup(licenseModelId, featureGroup, version).then(
+                response => {
+                    dispatch({
+                        type: featureGroupsActionConstants.ADD_FEATURE_GROUPS,
+                        featureGroup: {
+                            ...featureGroup,
+                            id: response.value,
+                            referencingLicenseAgreements: []
+                        }
+                    });
+                    EntitlementPoolsActionHelper.fetchEntitlementPoolsList(
+                        dispatch,
+                        { licenseModelId, version }
+                    );
+                    LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(
+                        dispatch,
+                        { licenseModelId, version }
+                    );
+                    return ItemsHelper.checkItemStatus(dispatch, {
+                        itemId: licenseModelId,
+                        versionId: version.id
+                    });
+                }
+            );
+        }
+    },
 
-	selectEntitlementPoolsEditorTab(dispatch, {tab}) {
-		dispatch({
-			type: featureGroupsActionConstants.featureGroupsEditor.SELECT_TAB,
-			tab
-		});
-	},
+    selectEntitlementPoolsEditorTab(dispatch, { tab }) {
+        dispatch({
+            type: featureGroupsActionConstants.featureGroupsEditor.SELECT_TAB,
+            tab
+        });
+    },
 
-	openFeatureGroupsEditor(dispatch, {featureGroup, licenseModelId, version}) {
-		return Promise.all([
-			EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}),
-			LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version})
-		]).then(() => {
-			dispatch({
-				type: featureGroupsActionConstants.featureGroupsEditor.OPEN,
-				featureGroup
-			});
-		});
-	},
+    openFeatureGroupsEditor(
+        dispatch,
+        { featureGroup, licenseModelId, version }
+    ) {
+        return Promise.all([
+            EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+                licenseModelId,
+                version
+            }),
+            LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+                licenseModelId,
+                version
+            })
+        ]).then(() => {
+            dispatch({
+                type: featureGroupsActionConstants.featureGroupsEditor.OPEN,
+                featureGroup
+            });
+        });
+    },
 
-	closeFeatureGroupsEditor(dispatch) {
-		dispatch({
-			type: featureGroupsActionConstants.featureGroupsEditor.CLOSE
-		});
-	}
+    closeFeatureGroupsEditor(dispatch) {
+        dispatch({
+            type: featureGroupsActionConstants.featureGroupsEditor.CLOSE
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js
index 4c5a94f239..feeb5b6c39 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js
@@ -16,27 +16,27 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	FEATURE_GROUPS_LIST_LOADED: null,
-	ADD_FEATURE_GROUPS: null,
-	EDIT_FEATURE_GROUPS: null,
-	DELETE_FEATURE_GROUPS: null,
+    FEATURE_GROUPS_LIST_LOADED: null,
+    ADD_FEATURE_GROUPS: null,
+    EDIT_FEATURE_GROUPS: null,
+    DELETE_FEATURE_GROUPS: null,
 
-	ENTITLEMENT_POOLS_LIST_LOADED: null,
+    ENTITLEMENT_POOLS_LIST_LOADED: null,
 
-	featureGroupsEditor: {
-		OPEN: null,
-		CLOSE: null,
-		DATA_CHANGED: null,
-		SELECT_TAB: null
-	}
+    featureGroupsEditor: {
+        OPEN: null,
+        CLOSE: null,
+        DATA_CHANGED: null,
+        SELECT_TAB: null
+    }
 });
 
 export const FG_EDITOR_FORM = 'FG_EDITOR_FORM';
 
 export const state = keyMirror({
-	SELECTED_FEATURE_GROUP_TAB: {
-		GENERAL: 1,
-		ENTITLEMENT_POOLS: 2,
-		LICENSE_KEY_GROUPS: 3
-	}
+    SELECTED_FEATURE_GROUP_TAB: {
+        GENERAL: 1,
+        ENTITLEMENT_POOLS: 2,
+        LICENSE_KEY_GROUPS: 3
+    }
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
index 5688fc0f16..aa1081ed20 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
@@ -14,65 +14,82 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, FG_EDITOR_FORM, state as FeatureGroupStateConstants} from './FeatureGroupsConstants.js';
-
-
+import {
+    actionTypes,
+    FG_EDITOR_FORM,
+    state as FeatureGroupStateConstants
+} from './FeatureGroupsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.featureGroupsEditor.OPEN:
-			return {
-				...state,
-				data: action.featureGroup || {},
-				formReady: null,
-				formName: FG_EDITOR_FORM,
-				genericFieldInfo: {
-					'description': {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}],
-						tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
-					},
-					'partNumber': {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}],
-						tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
-					},
-					'manufacturerReferenceNumber': {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 100}],
-						tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
-					},
-					'name': {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}],
-						tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
-					}
-				}
-			};
-		case actionTypes.featureGroupsEditor.CLOSE:
-			return {};
-		case actionTypes.featureGroupsEditor.SELECT_TAB:
-			return {
-				...state,
-				selectedTab: action.tab
-			};
-
-		case actionTypes.featureGroupsEditor.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB:
-			return {
-				...state,
-				selectedEntitlementPoolsButtonTab: action.buttonTab
-			};
-		case actionTypes.featureGroupsEditor.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB:
-			return {
-				...state,
-				selectedLicenseKeyGroupsButtonTab: action.buttonTab
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.featureGroupsEditor.OPEN:
+            return {
+                ...state,
+                data: action.featureGroup || {},
+                formReady: null,
+                formName: FG_EDITOR_FORM,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }],
+                        tabId:
+                            FeatureGroupStateConstants
+                                .SELECTED_FEATURE_GROUP_TAB.GENERAL
+                    },
+                    partNumber: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }],
+                        tabId:
+                            FeatureGroupStateConstants
+                                .SELECTED_FEATURE_GROUP_TAB.GENERAL
+                    },
+                    manufacturerReferenceNumber: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 100 }
+                        ],
+                        tabId:
+                            FeatureGroupStateConstants
+                                .SELECTED_FEATURE_GROUP_TAB.GENERAL
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ],
+                        tabId:
+                            FeatureGroupStateConstants
+                                .SELECTED_FEATURE_GROUP_TAB.GENERAL
+                    }
+                }
+            };
+        case actionTypes.featureGroupsEditor.CLOSE:
+            return {};
+        case actionTypes.featureGroupsEditor.SELECT_TAB:
+            return {
+                ...state,
+                selectedTab: action.tab
+            };
 
+        case actionTypes.featureGroupsEditor
+            .SELECTED_ENTITLEMENT_POOLS_BUTTONTAB:
+            return {
+                ...state,
+                selectedEntitlementPoolsButtonTab: action.buttonTab
+            };
+        case actionTypes.featureGroupsEditor
+            .SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB:
+            return {
+                ...state,
+                selectedLicenseKeyGroupsButtonTab: action.buttonTab
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js
index 3b5f1c55e4..072bba403d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js
@@ -13,19 +13,27 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './FeatureGroupsConstants.js';
+import { actionTypes } from './FeatureGroupsConstants.js';
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FEATURE_GROUPS_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.ADD_FEATURE_GROUPS:
-			return [...state, action.featureGroup];
-		case actionTypes.EDIT_FEATURE_GROUPS:
-			const indexForEdit = state.findIndex(featureGroup => featureGroup.id === action.featureGroup.id);
-			return [...state.slice(0, indexForEdit), action.featureGroup, ...state.slice(indexForEdit + 1)];
-		case actionTypes.DELETE_FEATURE_GROUPS:
-			return state.filter(featureGroup => featureGroup.id !== action.featureGroupId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FEATURE_GROUPS_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.ADD_FEATURE_GROUPS:
+            return [...state, action.featureGroup];
+        case actionTypes.EDIT_FEATURE_GROUPS:
+            const indexForEdit = state.findIndex(
+                featureGroup => featureGroup.id === action.featureGroup.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.featureGroup,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.DELETE_FEATURE_GROUPS:
+            return state.filter(
+                featureGroup => featureGroup.id !== action.featureGroupId
+            );
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
index b1b4ee8fdd..e07777f69e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
@@ -15,109 +15,181 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants.js';
+import { actionTypes as licenseAgreementActionTypes } from './LicenseAgreementConstants.js';
 import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 
 function baseUrl(licenseModelId, version) {
-	const restPrefix = Configuration.get('restPrefix');
-	const {id: versionId} = version;
-	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-agreements`;
+    const restPrefix = Configuration.get('restPrefix');
+    const { id: versionId } = version;
+    return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-agreements`;
 }
 
 function fetchLicenseAgreementList(licenseModelId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
 }
 
 function fetchLicenseAgreement(licenseModelId, licenseAgreementId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${licenseAgreementId}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(licenseModelId, version)}/${licenseAgreementId}`
+    );
 }
 
 function postLicenseAgreement(licenseModelId, licenseAgreement, version) {
-	return RestAPIUtil.post(baseUrl(licenseModelId, version), {
-		name: licenseAgreement.name,
-		description: licenseAgreement.description,
-		licenseTerm: licenseAgreement.licenseTerm,
-		requirementsAndConstrains: licenseAgreement.requirementsAndConstrains,
-		addedFeatureGroupsIds: licenseAgreement.featureGroupsIds
-	});
+    return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+        name: licenseAgreement.name,
+        description: licenseAgreement.description,
+        licenseTerm: licenseAgreement.licenseTerm,
+        requirementsAndConstrains: licenseAgreement.requirementsAndConstrains,
+        addedFeatureGroupsIds: licenseAgreement.featureGroupsIds
+    });
 }
 
-function putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version) {
-	const {featureGroupsIds = []} = licenseAgreement;
-	const {featureGroupsIds: prevFeatureGroupsIds = []} = previousLicenseAgreement;
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseAgreement.id}`, {
-		name: licenseAgreement.name,
-		description: licenseAgreement.description,
-		licenseTerm: licenseAgreement.licenseTerm,
-		requirementsAndConstrains: licenseAgreement.requirementsAndConstrains,
-		addedFeatureGroupsIds: featureGroupsIds.filter(featureGroupId => prevFeatureGroupsIds.indexOf(featureGroupId) === -1),
-		removedFeatureGroupsIds: prevFeatureGroupsIds.filter(prevFeatureGroupsId => featureGroupsIds.indexOf(prevFeatureGroupsId) === -1)
-	});
+function putLicenseAgreement(
+    licenseModelId,
+    previousLicenseAgreement,
+    licenseAgreement,
+    version
+) {
+    const { featureGroupsIds = [] } = licenseAgreement;
+    const {
+        featureGroupsIds: prevFeatureGroupsIds = []
+    } = previousLicenseAgreement;
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${licenseAgreement.id}`,
+        {
+            name: licenseAgreement.name,
+            description: licenseAgreement.description,
+            licenseTerm: licenseAgreement.licenseTerm,
+            requirementsAndConstrains:
+                licenseAgreement.requirementsAndConstrains,
+            addedFeatureGroupsIds: featureGroupsIds.filter(
+                featureGroupId =>
+                    prevFeatureGroupsIds.indexOf(featureGroupId) === -1
+            ),
+            removedFeatureGroupsIds: prevFeatureGroupsIds.filter(
+                prevFeatureGroupsId =>
+                    featureGroupsIds.indexOf(prevFeatureGroupsId) === -1
+            )
+        }
+    );
 }
 
 function deleteLicenseAgreement(licenseModelId, licenseAgreementId, version) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseAgreementId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(licenseModelId, version)}/${licenseAgreementId}`
+    );
 }
 
 export default {
+    fetchLicenseAgreementList(dispatch, { licenseModelId, version }) {
+        return fetchLicenseAgreementList(licenseModelId, version).then(
+            response =>
+                dispatch({
+                    type:
+                        licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
+                    response
+                })
+        );
+    },
 
-	fetchLicenseAgreementList(dispatch, {licenseModelId, version}) {
-		return fetchLicenseAgreementList(licenseModelId, version).then(response => dispatch({
-			type: licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
-			response
-		}));
-	},
+    fetchLicenseAgreement(
+        dispatch,
+        { licenseModelId, licenseAgreementId, version }
+    ) {
+        return fetchLicenseAgreement(
+            licenseModelId,
+            licenseAgreementId,
+            version
+        );
+    },
 
-	fetchLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId, version}) {
-		return fetchLicenseAgreement(licenseModelId, licenseAgreementId, version);
-	},
+    openLicenseAgreementEditor(
+        dispatch,
+        { licenseModelId, licenseAgreement, version }
+    ) {
+        FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+            licenseModelId,
+            version
+        });
+        dispatch({
+            type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN,
+            licenseAgreement
+        });
+    },
 
-	openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}) {
-		FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version});
-		dispatch({
-			type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN,
-			licenseAgreement
-		});
-	},
+    closeLicenseAgreementEditor(dispatch) {
+        dispatch({
+            type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE
+        });
+    },
 
-	closeLicenseAgreementEditor(dispatch) {
-		dispatch({
-			type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE
-		});
-	},
+    saveLicenseAgreement(
+        dispatch,
+        { licenseModelId, previousLicenseAgreement, licenseAgreement, version }
+    ) {
+        if (previousLicenseAgreement) {
+            return putLicenseAgreement(
+                licenseModelId,
+                previousLicenseAgreement,
+                licenseAgreement,
+                version
+            ).then(() => {
+                this.fetchLicenseAgreementList(dispatch, {
+                    licenseModelId,
+                    version
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        } else {
+            return postLicenseAgreement(
+                licenseModelId,
+                licenseAgreement,
+                version
+            ).then(() => {
+                this.fetchLicenseAgreementList(dispatch, {
+                    licenseModelId,
+                    version
+                });
+                FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+                    licenseModelId,
+                    version
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        }
+    },
 
+    deleteLicenseAgreement(
+        dispatch,
+        { licenseModelId, licenseAgreementId, version }
+    ) {
+        return deleteLicenseAgreement(
+            licenseModelId,
+            licenseAgreementId,
+            version
+        ).then(() => {
+            dispatch({
+                type: licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT,
+                licenseAgreementId
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    },
 
-	saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version}) {
-		if (previousLicenseAgreement) {
-			return putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version).then(() => {
-				this.fetchLicenseAgreementList(dispatch, {licenseModelId, version});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-		else {
-			return postLicenseAgreement(licenseModelId, licenseAgreement, version).then(() => {
-				this.fetchLicenseAgreementList(dispatch, {licenseModelId, version});
-				FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-	},
-
-	deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId, version}) {
-		return deleteLicenseAgreement(licenseModelId, licenseAgreementId, version).then(() => {
-			dispatch({
-				type: licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT,
-				licenseAgreementId
-			});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
-
-	selectLicenseAgreementEditorTab(dispatch, {tab}) {
-		dispatch({
-			type: licenseAgreementActionTypes.licenseAgreementEditor.SELECT_TAB,
-			tab
-		});
-	}
+    selectLicenseAgreementEditorTab(dispatch, { tab }) {
+        dispatch({
+            type: licenseAgreementActionTypes.licenseAgreementEditor.SELECT_TAB,
+            tab
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
index 181171d4cd..65a45348ca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
@@ -15,49 +15,54 @@
  */
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
-	LICENSE_AGREEMENT_LIST_LOADED: null,
-	DELETE_LICENSE_AGREEMENT: null,
-
-	licenseAgreementEditor: {
-		OPEN: null,
-		CLOSE: null,
-		DATA_CHANGED: null,
-		SELECT_TAB: null
-	}
+    LICENSE_AGREEMENT_LIST_LOADED: null,
+    DELETE_LICENSE_AGREEMENT: null,
 
+    licenseAgreementEditor: {
+        OPEN: null,
+        CLOSE: null,
+        DATA_CHANGED: null,
+        SELECT_TAB: null
+    }
 });
 
 export const LA_EDITOR_FORM = 'LA_EDITOR_FORM';
 
 export const enums = keyMirror({
-	SELECTED_LICENSE_AGREEMENT_TAB: {
-		GENERAL: 1,
-		FEATURE_GROUPS: 2
-	}
+    SELECTED_LICENSE_AGREEMENT_TAB: {
+        GENERAL: 1,
+        FEATURE_GROUPS: 2
+    }
 });
 
 export const defaultState = {
-	LICENSE_AGREEMENT_EDITOR_DATA: {
-		licenseTerm: {choice: '', other: ''}
-	}
+    LICENSE_AGREEMENT_EDITOR_DATA: {
+        licenseTerm: { choice: '', other: '' }
+    }
 };
 
 export const optionsInputValues = {
-	LICENSE_MODEL_TYPE: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Fixed_Term', title: 'Fixed Term'},
-		{enum: 'Perpetual', title: 'Perpetual'},
-		{enum: 'Unlimited', title: 'Unlimited'}
-	]
+    LICENSE_MODEL_TYPE: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Fixed_Term', title: 'Fixed Term' },
+        { enum: 'Perpetual', title: 'Perpetual' },
+        { enum: 'Unlimited', title: 'Unlimited' }
+    ]
 };
 
-export const extractValue = (item) => {
-	if (item === undefined) {
-		return '';
-	} //TODO fix it later
+export const extractValue = item => {
+    if (item === undefined) {
+        return '';
+    } //TODO fix it later
 
-	return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
+    return item
+        ? item.choice === optionInputOther.OTHER
+          ? item.other
+          : InputOptions.getTitleByName(optionsInputValues, item.choice)
+        : '';
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
index 7d70da6ea5..735531a175 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
@@ -13,66 +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 LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js';
 import LicenseAgreementEditorView from './LicenseAgreementEditorView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-export const mapStateToProps = ({licenseModel: {licenseAgreement, featureGroup}}) => {
+export const mapStateToProps = ({
+    licenseModel: { licenseAgreement, featureGroup }
+}) => {
+    let {
+        data,
+        selectedTab,
+        genericFieldInfo,
+        formReady
+    } = licenseAgreement.licenseAgreementEditor;
+    const list = licenseAgreement.licenseAgreementList;
+    const LANames = {};
 
+    let previousData;
+    const licenseAgreementId = data ? data.id : null;
+    if (licenseAgreementId) {
+        previousData = licenseAgreement.licenseAgreementList.find(
+            licenseAgreement => licenseAgreement.id === licenseAgreementId
+        );
+    }
 
-	let {data, selectedTab, genericFieldInfo, formReady} = licenseAgreement.licenseAgreementEditor;
-	const list = licenseAgreement.licenseAgreementList;
-	const LANames = {};
+    for (let i = 0; i < list.length; i++) {
+        LANames[list[i].name.toLowerCase()] = list[i].id;
+    }
 
-	let previousData;
-	const licenseAgreementId = data ? data.id : null;
-	if(licenseAgreementId) {
-		previousData = licenseAgreement.licenseAgreementList.find(licenseAgreement => licenseAgreement.id === licenseAgreementId);
-	}
+    const { featureGroupsList = [] } = featureGroup;
 
-	for (let i = 0; i < list.length; i++) {
-		LANames[list[i].name.toLowerCase()] = list[i].id;
-	}
+    let isFormValid = true;
+    let invalidTabs = [];
+    for (let field in genericFieldInfo) {
+        if (!genericFieldInfo[field].isValid) {
+            isFormValid = false;
+            let tabId = genericFieldInfo[field].tabId;
+            if (invalidTabs.indexOf(tabId) === -1) {
+                invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
+            }
+        }
+    }
 
-	const {featureGroupsList = []} = featureGroup;
-
-	let isFormValid = true;
-	let invalidTabs = [];
-	for (let field in genericFieldInfo) {
-		if (!genericFieldInfo[field].isValid) {
-			isFormValid = false;
-			let tabId = genericFieldInfo[field].tabId;
-			if (invalidTabs.indexOf(tabId) === -1) {
-				invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
-			}
-		}
-	}
-
-	return {
-		data,
-		previousData,
-		selectedTab,
-		featureGroupsList,
-		LANames,
-		genericFieldInfo,
-		isFormValid,
-		formReady,
-		invalidTabs
-	};
+    return {
+        data,
+        previousData,
+        selectedTab,
+        featureGroupsList,
+        LANames,
+        genericFieldInfo,
+        isFormValid,
+        formReady,
+        invalidTabs
+    };
 };
 
-export const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onTabSelect: tab => LicenseAgreementActionHelper.selectLicenseAgreementEditorTab(dispatch, {tab}),
-		onCancel: () => LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch),
-		onSubmit: ({previousLicenseAgreement, licenseAgreement}) => {
-			LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch);
-			LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version});
-		},
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
+export const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onTabSelect: tab =>
+            LicenseAgreementActionHelper.selectLicenseAgreementEditorTab(
+                dispatch,
+                {
+                    tab
+                }
+            ),
+        onCancel: () =>
+            LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch),
+        onSubmit: ({ previousLicenseAgreement, licenseAgreement }) => {
+            LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch);
+            LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, {
+                licenseModelId,
+                previousLicenseAgreement,
+                licenseAgreement,
+                version
+            });
+        },
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseAgreementEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseAgreementEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
index 9cff2792ff..0d3fb2a3b6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
@@ -13,53 +13,76 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, defaultState, LA_EDITOR_FORM, enums as LicenseAgreementEnums} from './LicenseAgreementConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+    actionTypes,
+    defaultState,
+    LA_EDITOR_FORM,
+    enums as LicenseAgreementEnums
+} from './LicenseAgreementConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.licenseAgreementEditor.OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: LA_EDITOR_FORM,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}],
-						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
-					},
-					'requirementsAndConstrains' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}],
-						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
-					},
-					'licenseTerm' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}],
-						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}],
-						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
-					}
-				},
-				data: action.licenseAgreement ? { ...action.licenseAgreement } : defaultState.LICENSE_AGREEMENT_EDITOR_DATA
-			};
-		case actionTypes.licenseAgreementEditor.CLOSE:
-			return {};
-		case actionTypes.licenseAgreementEditor.SELECT_TAB:
-			return {
-				...state,
-				selectedTab: action.tab
-			};
-		default:
-			return state;
-	}
-
+    switch (action.type) {
+        case actionTypes.licenseAgreementEditor.OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: LA_EDITOR_FORM,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }],
+                        tabId:
+                            LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+                                .GENERAL
+                    },
+                    requirementsAndConstrains: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }],
+                        tabId:
+                            LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+                                .GENERAL
+                    },
+                    licenseTerm: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            {
+                                type: 'requiredChoiceWithOther',
+                                data: optionInputOther.OTHER
+                            }
+                        ],
+                        tabId:
+                            LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+                                .GENERAL
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 25 }
+                        ],
+                        tabId:
+                            LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+                                .GENERAL
+                    }
+                },
+                data: action.licenseAgreement
+                    ? { ...action.licenseAgreement }
+                    : defaultState.LICENSE_AGREEMENT_EDITOR_DATA
+            };
+        case actionTypes.licenseAgreementEditor.CLOSE:
+            return {};
+        case actionTypes.licenseAgreementEditor.SELECT_TAB:
+            return {
+                ...state,
+                selectedTab: action.tab
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
index a3e73f4f14..cc16dd996d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
@@ -17,7 +17,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
+import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
 import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
 import Tab from 'sdc-ui/lib/react/Tab.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -25,176 +25,278 @@ import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
-import {enums as LicenseAgreementEnums, optionsInputValues as LicenseAgreementOptionsInputValues, LA_EDITOR_FORM} from './LicenseAgreementConstants.js';
+import {
+    enums as LicenseAgreementEnums,
+    optionsInputValues as LicenseAgreementOptionsInputValues,
+    LA_EDITOR_FORM
+} from './LicenseAgreementConstants.js';
 
 const dualBoxFilterTitle = {
-	left: i18n('Available Feature Groups'),
-	right: i18n('Selected Feature Groups')
+    left: i18n('Available Feature Groups'),
+    right: i18n('Selected Feature Groups')
 };
 
 const LicenseAgreementPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	requirementsAndConstrains: PropTypes.string,
-	licenseTerm: PropTypes.object,
-	featureGroupsIds: PropTypes.arrayOf(PropTypes.string),
-	version: PropTypes.object
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    requirementsAndConstrains: PropTypes.string,
+    licenseTerm: PropTypes.object,
+    featureGroupsIds: PropTypes.arrayOf(PropTypes.string),
+    version: PropTypes.object
 });
 
-
-const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName}) => {
-	let {name, description, requirementsAndConstrains, licenseTerm} = data;
-	return (
-		<GridSection hasLastColSet>
-			<GridItem colSpan={2}>
-				<Input
-					isValid={genericFieldInfo.name.isValid}
-					errorText={genericFieldInfo.name.errorText}
-					onChange={name => onDataChanged({name}, LA_EDITOR_FORM, { name: validateName })}
-					label={i18n('Name')}
-					value={name}
-					data-test-id='create-la-name'
-					name='license-agreement-name'
-					isRequired={true}
-					type='text'/>
-				<Input
-					isValid={genericFieldInfo.requirementsAndConstrains.isValid}
-					errorText={genericFieldInfo.requirementsAndConstrains.errorText}
-					onChange={requirementsAndConstrains => onDataChanged({requirementsAndConstrains}, LA_EDITOR_FORM)}
-					label={i18n('Requirements and Constraints')}
-					value={requirementsAndConstrains}
-					data-test-id='create-la-requirements-constants'
-					name='license-agreement-requirements-and-constraints'
-					type='textarea'/>
-				<InputOptions
-					onInputChange={()=>{}}
-					isMultiSelect={false}
-					onEnumChange={licenseTerm => onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}},
-						LA_EDITOR_FORM)}
-					onOtherChange={licenseTerm => onDataChanged({licenseTerm:{choice: optionInputOther.OTHER,
-						other: licenseTerm}}, LA_EDITOR_FORM)}
-					label={i18n('License Term')}
-					data-test-id='create-la-license-term'
-					isRequired={true}
-					type='select'
-					selectedEnum={licenseTerm && licenseTerm.choice}
-					otherValue={licenseTerm && licenseTerm.other}
-					values={LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE}
-					isValid={genericFieldInfo.licenseTerm.isValid}
-					errorText={genericFieldInfo.licenseTerm.errorText} />
-			</GridItem>
-			<GridItem colSpan={2} stretch lastColInRow>
-				<Input
-					isValid={genericFieldInfo.description.isValid}
-					errorText={genericFieldInfo.description.errorText}
-					onChange={description => onDataChanged({description}, LA_EDITOR_FORM)}
-					label={i18n('Description')}
-					value={description}
-					overlayPos='bottom'
-					data-test-id='create-la-description'
-					name='license-agreement-description'
-					type='textarea'/>
-			</GridItem>
-		</GridSection>
-	);
+const GeneralTabContent = ({
+    data,
+    genericFieldInfo,
+    onDataChanged,
+    validateName
+}) => {
+    let { name, description, requirementsAndConstrains, licenseTerm } = data;
+    return (
+        <GridSection hasLastColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    isValid={genericFieldInfo.name.isValid}
+                    errorText={genericFieldInfo.name.errorText}
+                    onChange={name =>
+                        onDataChanged({ name }, LA_EDITOR_FORM, {
+                            name: validateName
+                        })
+                    }
+                    label={i18n('Name')}
+                    value={name}
+                    data-test-id="create-la-name"
+                    name="license-agreement-name"
+                    isRequired={true}
+                    type="text"
+                />
+                <Input
+                    isValid={genericFieldInfo.requirementsAndConstrains.isValid}
+                    errorText={
+                        genericFieldInfo.requirementsAndConstrains.errorText
+                    }
+                    onChange={requirementsAndConstrains =>
+                        onDataChanged(
+                            { requirementsAndConstrains },
+                            LA_EDITOR_FORM
+                        )
+                    }
+                    label={i18n('Requirements and Constraints')}
+                    value={requirementsAndConstrains}
+                    data-test-id="create-la-requirements-constants"
+                    name="license-agreement-requirements-and-constraints"
+                    type="textarea"
+                />
+                <InputOptions
+                    onInputChange={() => {}}
+                    isMultiSelect={false}
+                    onEnumChange={licenseTerm =>
+                        onDataChanged(
+                            { licenseTerm: { choice: licenseTerm, other: '' } },
+                            LA_EDITOR_FORM
+                        )
+                    }
+                    onOtherChange={licenseTerm =>
+                        onDataChanged(
+                            {
+                                licenseTerm: {
+                                    choice: optionInputOther.OTHER,
+                                    other: licenseTerm
+                                }
+                            },
+                            LA_EDITOR_FORM
+                        )
+                    }
+                    label={i18n('License Term')}
+                    data-test-id="create-la-license-term"
+                    isRequired={true}
+                    type="select"
+                    selectedEnum={licenseTerm && licenseTerm.choice}
+                    otherValue={licenseTerm && licenseTerm.other}
+                    values={
+                        LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE
+                    }
+                    isValid={genericFieldInfo.licenseTerm.isValid}
+                    errorText={genericFieldInfo.licenseTerm.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2} stretch lastColInRow>
+                <Input
+                    isValid={genericFieldInfo.description.isValid}
+                    errorText={genericFieldInfo.description.errorText}
+                    onChange={description =>
+                        onDataChanged({ description }, LA_EDITOR_FORM)
+                    }
+                    label={i18n('Description')}
+                    value={description}
+                    overlayPos="bottom"
+                    data-test-id="create-la-description"
+                    name="license-agreement-description"
+                    type="textarea"
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 class LicenseAgreementEditorView extends React.Component {
+    static propTypes = {
+        data: LicenseAgreementPropType,
+        previousData: LicenseAgreementPropType,
+        LANames: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired,
 
-	static propTypes = {
-		data: LicenseAgreementPropType,
-		previousData: LicenseAgreementPropType,
-		LANames: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired,
-
-		selectedTab: PropTypes.number,
-		onTabSelect: PropTypes.func,
+        selectedTab: PropTypes.number,
+        onTabSelect: PropTypes.func,
 
-		selectedFeatureGroupsButtonTab: PropTypes.number,
-		onFeatureGroupsButtonTabSelect: PropTypes.func,
-		featureGroupsList: DualListboxView.propTypes.availableList
-	};
+        selectedFeatureGroupsButtonTab: PropTypes.number,
+        onFeatureGroupsButtonTabSelect: PropTypes.func,
+        featureGroupsList: DualListboxView.propTypes.availableList
+    };
 
-	static defaultProps = {
-		selectedTab: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL,
-		data: {}
-	};
+    static defaultProps = {
+        selectedTab:
+            LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL,
+        data: {}
+    };
 
-	state = {
-		localFeatureGroupsListFilter: ''
-	};
+    state = {
+        localFeatureGroupsListFilter: ''
+    };
 
-	render() {
-		let {selectedTab, onTabSelect, isReadOnlyMode, featureGroupsList, data, onDataChanged, genericFieldInfo} = this.props;
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref='validationForm'
-					hasButtons={true}
-					onSubmit={ () => this.submit() }
-					onReset={ () => this.props.onCancel() }
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.props.onValidateForm(LA_EDITOR_FORM) }
-					className='license-model-form license-agreement-form'>
-					<Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={this.props.invalidTabs} >
-						<Tab
-							tabId={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL}
-							data-test-id='general-tab'
-							title={i18n('General')}>
-								<fieldset disabled={isReadOnlyMode}>
-									<GeneralTabContent data={data} genericFieldInfo={genericFieldInfo} onDataChanged={onDataChanged} validateLTChoice={(value)=>this.validateLTChoice(value)}
-										   validateName={(value)=>this.validateName(value)}/>
-								</fieldset>
-						</Tab>
-						<Tab
-							tabId={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.FEATURE_GROUPS}
-							data-test-id='feature-group-tab'
-							title={i18n('Feature Groups')}>
-								<fieldset disabled={isReadOnlyMode}>
-							{featureGroupsList.length > 0 ?
-									<DualListboxView
-										isReadOnlyMode={isReadOnlyMode}
-										filterTitle={dualBoxFilterTitle}
-										selectedValuesList={data.featureGroupsIds}
-										availableList={featureGroupsList}
-										onChange={ selectedValuesList => onDataChanged( { featureGroupsIds: selectedValuesList }, LA_EDITOR_FORM )}/> :
-									<p>{i18n('There are no available feature groups')}</p>}
-								</fieldset>
-						</Tab>
-					</Tabs>
-				</Form>}
-			</div>
-		);
-	}
+    render() {
+        let {
+            selectedTab,
+            onTabSelect,
+            isReadOnlyMode,
+            featureGroupsList,
+            data,
+            onDataChanged,
+            genericFieldInfo
+        } = this.props;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => this.props.onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() =>
+                            this.props.onValidateForm(LA_EDITOR_FORM)
+                        }
+                        className="license-model-form license-agreement-form">
+                        <Tabs
+                            activeTab={onTabSelect ? selectedTab : undefined}
+                            onTabClick={onTabSelect}
+                            invalidTabs={this.props.invalidTabs}>
+                            <Tab
+                                tabId={
+                                    LicenseAgreementEnums
+                                        .SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
+                                }
+                                data-test-id="general-tab"
+                                title={i18n('General')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    <GeneralTabContent
+                                        data={data}
+                                        genericFieldInfo={genericFieldInfo}
+                                        onDataChanged={onDataChanged}
+                                        validateLTChoice={value =>
+                                            this.validateLTChoice(value)
+                                        }
+                                        validateName={value =>
+                                            this.validateName(value)
+                                        }
+                                    />
+                                </fieldset>
+                            </Tab>
+                            <Tab
+                                tabId={
+                                    LicenseAgreementEnums
+                                        .SELECTED_LICENSE_AGREEMENT_TAB
+                                        .FEATURE_GROUPS
+                                }
+                                data-test-id="feature-group-tab"
+                                title={i18n('Feature Groups')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    {featureGroupsList.length > 0 ? (
+                                        <DualListboxView
+                                            isReadOnlyMode={isReadOnlyMode}
+                                            filterTitle={dualBoxFilterTitle}
+                                            selectedValuesList={
+                                                data.featureGroupsIds
+                                            }
+                                            availableList={featureGroupsList}
+                                            onChange={selectedValuesList =>
+                                                onDataChanged(
+                                                    {
+                                                        featureGroupsIds: selectedValuesList
+                                                    },
+                                                    LA_EDITOR_FORM
+                                                )
+                                            }
+                                        />
+                                    ) : (
+                                        <p>
+                                            {i18n(
+                                                'There are no available feature groups'
+                                            )}
+                                        </p>
+                                    )}
+                                </fieldset>
+                            </Tab>
+                        </Tabs>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	submit() {
-		const {data: licenseAgreement, previousData: previousLicenseAgreement} = this.props;
-		this.props.onSubmit({licenseAgreement, previousLicenseAgreement});
-	}
+    submit() {
+        const {
+            data: licenseAgreement,
+            previousData: previousLicenseAgreement
+        } = this.props;
+        this.props.onSubmit({ licenseAgreement, previousLicenseAgreement });
+    }
 
-	validateLTChoice(value) {
-		if (!value.choice) {
-			return {isValid: false, errorText: i18n('Field is required')};
-		}
-		return {isValid: true, errorText: ''};
-	}
+    validateLTChoice(value) {
+        if (!value.choice) {
+            return { isValid: false, errorText: i18n('Field is required') };
+        }
+        return { isValid: true, errorText: '' };
+    }
 
-	validateName(value) {
-		const {data: {id}, LANames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LANames});
+    validateName(value) {
+        const { data: { id }, LANames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: LANames
+        });
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('License Agreement by the name \'' + value + '\' already exists. License agreement name must be unique')};
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "License Agreement by the name '" +
+                          value +
+                          "' already exists. License agreement name must be unique"
+                  )
+              };
+    }
 }
 
 export default LicenseAgreementEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
index 72474ecdd3..cba39731b5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
@@ -13,42 +13,64 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js';
 import LicenseAgreementListEditorView from './LicenseAgreementListEditorView.jsx';
-import {actionTypes as globalMoadlActions}  from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-const mapStateToProps = ({licenseModel: {licenseAgreement, licenseModelEditor}}) => {
-
-	let {licenseAgreementList} = licenseAgreement;
-	let {data} = licenseAgreement.licenseAgreementEditor;
-	let {vendorName, version} = licenseModelEditor.data;
-
-	return {
-		vendorName,
-		version,
-		licenseAgreementList,
-		isDisplayModal: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id)
-	};
+const mapStateToProps = ({
+    licenseModel: { licenseAgreement, licenseModelEditor }
+}) => {
+    let { licenseAgreementList } = licenseAgreement;
+    let { data } = licenseAgreement.licenseAgreementEditor;
+    let { vendorName, version } = licenseModelEditor.data;
 
+    return {
+        vendorName,
+        version,
+        licenseAgreementList,
+        isDisplayModal: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId}) => {
-	return {
-		onAddLicenseAgreementClick: (version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version}),
-		onEditLicenseAgreementClick: (licenseAgreement, version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}),
-		onDeleteLicenseAgreement: (licenseAgreement, version) => dispatch({
-			type: globalMoadlActions.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{name}"?', {name: licenseAgreement.name}),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=>LicenseAgreementActionHelper.deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId: licenseAgreement.id, version})
-			}
-		})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId }) => {
+    return {
+        onAddLicenseAgreementClick: version =>
+            LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {
+                licenseModelId,
+                version
+            }),
+        onEditLicenseAgreementClick: (licenseAgreement, version) =>
+            LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {
+                licenseModelId,
+                licenseAgreement,
+                version
+            }),
+        onDeleteLicenseAgreement: (licenseAgreement, version) =>
+            dispatch({
+                type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{name}"?', {
+                        name: licenseAgreement.name
+                    }),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        LicenseAgreementActionHelper.deleteLicenseAgreement(
+                            dispatch,
+                            {
+                                licenseModelId,
+                                licenseAgreementId: licenseAgreement.id,
+                                version
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseAgreementListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseAgreementListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
index ad3cdb0b58..acec1e0ddb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
@@ -21,107 +21,151 @@ import Modal from 'nfvo-components/modal/Modal.jsx';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import LicenseAgreementEditor from './LicenseAgreementEditor.js';
-import {extractValue} from './LicenseAgreementConstants';
+import { extractValue } from './LicenseAgreementConstants';
 
 class LicenseAgreementListEditorView extends React.Component {
-	static propTypes = {
-		vendorName: PropTypes.string,
-		licenseModelId: PropTypes.string.isRequired,
-		licenseAgreementList: PropTypes.array,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		isDisplayModal: PropTypes.bool,
-		isModalInEditMode: PropTypes.bool,
-		onAddLicenseAgreementClick: PropTypes.func,
-		onEditLicenseAgreementClick: PropTypes.func,
-		onDeleteLicenseAgreement: PropTypes.func,
-	};
+    static propTypes = {
+        vendorName: PropTypes.string,
+        licenseModelId: PropTypes.string.isRequired,
+        licenseAgreementList: PropTypes.array,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        isDisplayModal: PropTypes.bool,
+        isModalInEditMode: PropTypes.bool,
+        onAddLicenseAgreementClick: PropTypes.func,
+        onEditLicenseAgreementClick: PropTypes.func,
+        onDeleteLicenseAgreement: PropTypes.func
+    };
 
-	static defaultProps = {
-		licenseAgreementList: []
-	};
+    static defaultProps = {
+        licenseAgreementList: []
+    };
 
-	state = {
-		localFilter: ''
-	};
+    state = {
+        localFilter: ''
+    };
 
-	render() {
-		const {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
-		const {onAddLicenseAgreementClick} = this.props;
-		const {localFilter} = this.state;
+    render() {
+        const {
+            licenseModelId,
+            isReadOnlyMode,
+            isDisplayModal,
+            isModalInEditMode,
+            version
+        } = this.props;
+        const { onAddLicenseAgreementClick } = this.props;
+        const { localFilter } = this.state;
 
-		return (
-			<div className='license-model-list-editor license-agreement-list-editor'>
-				<ListEditorView
-					title={i18n('License Agreements')}
-					plusButtonTitle={i18n('Add License Agreement')}
-					onAdd={() => onAddLicenseAgreementClick(version)}
-					filterValue={localFilter}
-					onFilter={value => this.setState({localFilter: value})}
-					isReadOnlyMode={isReadOnlyMode}>
-					{this.filterList().map(licenseAgreement => this.renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version))}
-				</ListEditorView>
-				<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-agreement-modal'>
-					<Modal.Header>
-						<Modal.Title>{`${isModalInEditMode ? i18n('Edit License Agreement') : i18n('Create New License Agreement')}`}</Modal.Title>
-					</Modal.Header>
-					<Modal.Body>
-						{
-							isDisplayModal && (
-								<LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode} />
-							)
-						}
-					</Modal.Body>
-				</Modal>
-			</div>
-		);
-	}
+        return (
+            <div className="license-model-list-editor license-agreement-list-editor">
+                <ListEditorView
+                    title={i18n('License Agreements')}
+                    plusButtonTitle={i18n('Add License Agreement')}
+                    onAdd={() => onAddLicenseAgreementClick(version)}
+                    filterValue={localFilter}
+                    onFilter={value => this.setState({ localFilter: value })}
+                    isReadOnlyMode={isReadOnlyMode}>
+                    {this.filterList().map(licenseAgreement =>
+                        this.renderLicenseAgreementListItem(
+                            licenseAgreement,
+                            isReadOnlyMode,
+                            version
+                        )
+                    )}
+                </ListEditorView>
+                <Modal
+                    show={isDisplayModal}
+                    bsSize="large"
+                    animation={true}
+                    className="onborading-modal license-model-modal license-agreement-modal">
+                    <Modal.Header>
+                        <Modal.Title>{`${
+                            isModalInEditMode
+                                ? i18n('Edit License Agreement')
+                                : i18n('Create New License Agreement')
+                        }`}</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        {isDisplayModal && (
+                            <LicenseAgreementEditor
+                                version={version}
+                                licenseModelId={licenseModelId}
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Modal.Body>
+                </Modal>
+            </div>
+        );
+    }
 
-	filterList() {
-		let {licenseAgreementList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return licenseAgreementList.filter(({name = '', description = '', licenseTerm = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter) || escape(extractValue(licenseTerm)).match(filter);
-			});
-		}
-		else {
-			return licenseAgreementList;
-		}
-	}
+    filterList() {
+        let { licenseAgreementList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return licenseAgreementList.filter(
+                ({ name = '', description = '', licenseTerm = '' }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter) ||
+                        escape(extractValue(licenseTerm)).match(filter)
+                    );
+                }
+            );
+        } else {
+            return licenseAgreementList;
+        }
+    }
 
-	renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) {
-		let {id, name, description, licenseTerm, featureGroupsIds = []} = licenseAgreement;
-		let {onEditLicenseAgreementClick, onDeleteLicenseAgreement} = this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				onSelect={() => onEditLicenseAgreementClick(licenseAgreement, version)}
-				onDelete={() => onDeleteLicenseAgreement(licenseAgreement, version)}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='text name'>{name}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='list-editor-item-view-field-tight'>
-						<div className='title'>{i18n('Type')}</div>
-						<div className='text type'>{extractValue(licenseTerm)}</div>
-					</div>
-					<div className='list-editor-item-view-field-tight'>
-						<div className='title'>{i18n('Feature')}</div>
-						<div className='title'>{i18n('Groups')}</div>
-						<div className='feature-groups-count'>{featureGroupsIds.length}</div>
-					</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
-					<div className='text description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
+    renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) {
+        let {
+            id,
+            name,
+            description,
+            licenseTerm,
+            featureGroupsIds = []
+        } = licenseAgreement;
+        let {
+            onEditLicenseAgreementClick,
+            onDeleteLicenseAgreement
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                onSelect={() =>
+                    onEditLicenseAgreementClick(licenseAgreement, version)
+                }
+                onDelete={() =>
+                    onDeleteLicenseAgreement(licenseAgreement, version)
+                }
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="text name">{name}</div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="list-editor-item-view-field-tight">
+                        <div className="title">{i18n('Type')}</div>
+                        <div className="text type">
+                            {extractValue(licenseTerm)}
+                        </div>
+                    </div>
+                    <div className="list-editor-item-view-field-tight">
+                        <div className="title">{i18n('Feature')}</div>
+                        <div className="title">{i18n('Groups')}</div>
+                        <div className="feature-groups-count">
+                            {featureGroupsIds.length}
+                        </div>
+                    </div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Description')}</div>
+                    <div className="text description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
 }
 
 export default LicenseAgreementListEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
index 7d1a5ef8ee..213a63d565 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
@@ -13,15 +13,18 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants';
+import { actionTypes as licenseAgreementActionTypes } from './LicenseAgreementConstants';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED:
-			return [...action.response.results];
-		case licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT:
-			return state.filter(licenseAgreement => licenseAgreement.id !== action.licenseAgreementId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED:
+            return [...action.response.results];
+        case licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT:
+            return state.filter(
+                licenseAgreement =>
+                    licenseAgreement.id !== action.licenseAgreementId
+            );
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
index 674c329515..ebbe84abd3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
@@ -15,191 +15,268 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as licenseKeyGroupsConstants} from './LicenseKeyGroupsConstants.js';
-import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
-import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js';
+import { actionTypes as licenseKeyGroupsConstants } from './LicenseKeyGroupsConstants.js';
+import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
+import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 
 function baseUrl(licenseModelId, version) {
-	const restPrefix = Configuration.get('restPrefix');
-	const {id: versionId} = version;
-	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`;
+    const restPrefix = Configuration.get('restPrefix');
+    const { id: versionId } = version;
+    return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`;
 }
 
 function fetchLicenseKeyGroupsList(licenseModelId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
 }
 
 function deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}`
+    );
 }
 
 function postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
-	return RestAPIUtil.post(baseUrl(licenseModelId, version), {
-		name: licenseKeyGroup.name,
-		description: licenseKeyGroup.description,
-		operationalScope: getValue(licenseKeyGroup.operationalScope),
-		type: licenseKeyGroup.type,
-		increments: licenseKeyGroup.increments,
-		thresholdValue: licenseKeyGroup.thresholdValue,
-		thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
-		startDate: licenseKeyGroup.startDate,
-		expiryDate: licenseKeyGroup.expiryDate
-	});
+    return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+        name: licenseKeyGroup.name,
+        description: licenseKeyGroup.description,
+        operationalScope: getValue(licenseKeyGroup.operationalScope),
+        type: licenseKeyGroup.type,
+        increments: licenseKeyGroup.increments,
+        thresholdValue: licenseKeyGroup.thresholdValue,
+        thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
+        startDate: licenseKeyGroup.startDate,
+        expiryDate: licenseKeyGroup.expiryDate
+    });
 }
 
 function putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`, {
-		name: licenseKeyGroup.name,
-		description: licenseKeyGroup.description,
-		operationalScope: getValue(licenseKeyGroup.operationalScope),
-		type: licenseKeyGroup.type,
-		increments: licenseKeyGroup.increments,
-		thresholdValue: licenseKeyGroup.thresholdValue,
-		thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
-		startDate: licenseKeyGroup.startDate,
-		expiryDate: licenseKeyGroup.expiryDate
-	});
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`,
+        {
+            name: licenseKeyGroup.name,
+            description: licenseKeyGroup.description,
+            operationalScope: getValue(licenseKeyGroup.operationalScope),
+            type: licenseKeyGroup.type,
+            increments: licenseKeyGroup.increments,
+            thresholdValue: licenseKeyGroup.thresholdValue,
+            thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
+            startDate: licenseKeyGroup.startDate,
+            expiryDate: licenseKeyGroup.expiryDate
+        }
+    );
 }
 
 function fetchLimitsList(licenseModelId, licenseKeyGroupId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`
+    );
 }
 
 function deleteLimit(licenseModelId, licenseKeyGroupId, version, limitId) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limitId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(
+            licenseModelId,
+            version
+        )}/${licenseKeyGroupId}/limits/${limitId}`
+    );
 }
 
 function postLimit(licenseModelId, licenseKeyGroupId, version, limit) {
-	return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`, {
-		name: limit.name,
-		type: limit.type,
-		description: limit.description,
-		metric: getStrValue(limit.metric),
-		value: limit.value,
-		unit: getStrValue(limit.unit),
-		aggregationFunction: getValue(limit.aggregationFunction),
-		time: getValue(limit.time)
-	});
+    return RestAPIUtil.post(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`,
+        {
+            name: limit.name,
+            type: limit.type,
+            description: limit.description,
+            metric: getStrValue(limit.metric),
+            value: limit.value,
+            unit: getStrValue(limit.unit),
+            aggregationFunction: getValue(limit.aggregationFunction),
+            time: getValue(limit.time)
+        }
+    );
 }
 
 function putLimit(licenseModelId, licenseKeyGroupId, version, limit) {
-
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limit.id}`, {
-		name: limit.name,
-		type: limit.type,
-		description: limit.description,
-		metric: getStrValue(limit.metric),
-		value: limit.value,
-		unit: getStrValue(limit.unit),
-		aggregationFunction: getValue(limit.aggregationFunction),
-		time: getValue(limit.time)
-	});
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${
+            limit.id
+        }`,
+        {
+            name: limit.name,
+            type: limit.type,
+            description: limit.description,
+            metric: getStrValue(limit.metric),
+            value: limit.value,
+            unit: getStrValue(limit.unit),
+            aggregationFunction: getValue(limit.aggregationFunction),
+            time: getValue(limit.time)
+        }
+    );
 }
 
 export default {
-	fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}) {
-		return fetchLicenseKeyGroupsList(licenseModelId, version).then(response => dispatch({
-			type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED,
-			response
-		}));
-	},
-
-	openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version} = {}) {
-		if (licenseModelId && version) {
-			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-		}
-		dispatch({
-			type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN,
-			licenseKeyGroup
-		});
-	},
-
-	closeLicenseKeyGroupEditor(dispatch){
-		dispatch({
-			type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE
-		});
-	},
-
-	saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version}) {
-		if (previousLicenseKeyGroup) {
-			return putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(() => {
-				dispatch({
-					type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP,
-					licenseKeyGroup
-				});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-		else {
-			return postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(response => {
-				dispatch({
-					type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP,
-					licenseKeyGroup: {
-						...licenseKeyGroup,
-						referencingFeatureGroups: [],
-						id: response.value
-					}
-				});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-
-
-	},
-
-	deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId, version}){
-		return deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version).then(()=> {
-			dispatch({
-				type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP,
-				licenseKeyGroupId
-			});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
-			licenseKeyGroupToDelete: false
-		});
-	},
-
-	openDeleteLicenseAgreementConfirm(dispatch, {licenseKeyGroup}) {
-		dispatch({
-			type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
-			licenseKeyGroupToDelete: licenseKeyGroup
-		});
-	},
-
-
-	fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}) {
-		return fetchLimitsList(licenseModelId, licenseKeyGroup.id, version).then(response => {
-			dispatch({
-				type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.LIMITS_LIST_LOADED,
-				response
-			});
-		});
-	},
-
-	submitLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
-		const promise = limit.id ? putLimit(licenseModelId,licenseKeyGroup.id, version, limit) :
-			 postLimit(licenseModelId,licenseKeyGroup.id, version, limit);
-		return promise.then(() => {
-			dispatch({
-				type: limitEditorActions.CLOSE
-			});
-			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
-
-	deleteLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
-		return deleteLimit(licenseModelId,licenseKeyGroup.id, version, limit.id).then(() => {
-			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	}
+    fetchLicenseKeyGroupsList(dispatch, { licenseModelId, version }) {
+        return fetchLicenseKeyGroupsList(licenseModelId, version).then(
+            response =>
+                dispatch({
+                    type:
+                        licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    openLicenseKeyGroupsEditor(
+        dispatch,
+        { licenseKeyGroup, licenseModelId, version } = {}
+    ) {
+        if (licenseModelId && version) {
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                licenseKeyGroup
+            });
+        }
+        dispatch({
+            type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN,
+            licenseKeyGroup
+        });
+    },
+
+    closeLicenseKeyGroupEditor(dispatch) {
+        dispatch({
+            type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE
+        });
+    },
+
+    saveLicenseKeyGroup(
+        dispatch,
+        { licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version }
+    ) {
+        if (previousLicenseKeyGroup) {
+            return putLicenseKeyGroup(
+                licenseModelId,
+                licenseKeyGroup,
+                version
+            ).then(() => {
+                dispatch({
+                    type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP,
+                    licenseKeyGroup
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        } else {
+            return postLicenseKeyGroup(
+                licenseModelId,
+                licenseKeyGroup,
+                version
+            ).then(response => {
+                dispatch({
+                    type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP,
+                    licenseKeyGroup: {
+                        ...licenseKeyGroup,
+                        referencingFeatureGroups: [],
+                        id: response.value
+                    }
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        }
+    },
+
+    deleteLicenseKeyGroup(
+        dispatch,
+        { licenseModelId, licenseKeyGroupId, version }
+    ) {
+        return deleteLicenseKeyGroup(
+            licenseModelId,
+            licenseKeyGroupId,
+            version
+        ).then(() => {
+            dispatch({
+                type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP,
+                licenseKeyGroupId
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    },
+
+    hideDeleteConfirm(dispatch) {
+        dispatch({
+            type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
+            licenseKeyGroupToDelete: false
+        });
+    },
+
+    openDeleteLicenseAgreementConfirm(dispatch, { licenseKeyGroup }) {
+        dispatch({
+            type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
+            licenseKeyGroupToDelete: licenseKeyGroup
+        });
+    },
+
+    fetchLimits(dispatch, { licenseModelId, version, licenseKeyGroup }) {
+        return fetchLimitsList(
+            licenseModelId,
+            licenseKeyGroup.id,
+            version
+        ).then(response => {
+            dispatch({
+                type:
+                    licenseKeyGroupsConstants.licenseKeyGroupsEditor
+                        .LIMITS_LIST_LOADED,
+                response
+            });
+        });
+    },
 
+    submitLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) {
+        const promise = limit.id
+            ? putLimit(licenseModelId, licenseKeyGroup.id, version, limit)
+            : postLimit(licenseModelId, licenseKeyGroup.id, version, limit);
+        return promise.then(() => {
+            dispatch({
+                type: limitEditorActions.CLOSE
+            });
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                licenseKeyGroup
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    },
 
+    deleteLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) {
+        return deleteLimit(
+            licenseModelId,
+            licenseKeyGroup.id,
+            version,
+            limit.id
+        ).then(() => {
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                licenseKeyGroup
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
index c376cb3fbc..aad0a0b1fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
@@ -15,73 +15,88 @@
  */
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
-
-	LICENSE_KEY_GROUPS_LIST_LOADED: null,
-	DELETE_LICENSE_KEY_GROUP: null,
-	EDIT_LICENSE_KEY_GROUP: null,
-	ADD_LICENSE_KEY_GROUP: null,
-	LICENSE_KEY_GROUPS_DELETE_CONFIRM: null,
-	licenseKeyGroupsEditor: {
-		OPEN: null,
-		CLOSE: null,
-		DATA_CHANGED: null,
-		LIMITS_LIST_LOADED: null
-	}
+    LICENSE_KEY_GROUPS_LIST_LOADED: null,
+    DELETE_LICENSE_KEY_GROUP: null,
+    EDIT_LICENSE_KEY_GROUP: null,
+    ADD_LICENSE_KEY_GROUP: null,
+    LICENSE_KEY_GROUPS_DELETE_CONFIRM: null,
+    licenseKeyGroupsEditor: {
+        OPEN: null,
+        CLOSE: null,
+        DATA_CHANGED: null,
+        LIMITS_LIST_LOADED: null
+    }
 });
 
 export const defaultState = {
-	licenseKeyGroupsEditor: {
-		type: '',
-		operationalScope: {choices: [], other: ''}
-	}
+    licenseKeyGroupsEditor: {
+        type: '',
+        operationalScope: { choices: [], other: '' }
+    }
 };
 
 export const LKG_FORM_NAME = 'LKGFORM';
 
 export const optionsInputValues = {
-	OPERATIONAL_SCOPE: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Network_Wide', title: 'Network Wide'},
-		{enum: 'Availability_Zone', title: 'Availability Zone'},
-		{enum: 'Data_Center', title: 'Data Center'},
-		{enum: 'Tenant', title: 'Tenant'},
-		{enum: 'VM', title: 'VM'},
-		{enum: 'CPU', title: 'CPU'},
-		{enum: 'Core', title: 'Core'}
-	],
-	TYPE: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Universal', title: 'Universal'},
-		{enum: 'Unique', title: 'Unique'},
-		{enum: 'One_Time', title: 'One Time'}
-	]
+    OPERATIONAL_SCOPE: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Network_Wide', title: 'Network Wide' },
+        { enum: 'Availability_Zone', title: 'Availability Zone' },
+        { enum: 'Data_Center', title: 'Data Center' },
+        { enum: 'Tenant', title: 'Tenant' },
+        { enum: 'VM', title: 'VM' },
+        { enum: 'CPU', title: 'CPU' },
+        { enum: 'Core', title: 'Core' }
+    ],
+    TYPE: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Universal', title: 'Universal' },
+        { enum: 'Unique', title: 'Unique' },
+        { enum: 'One_Time', title: 'One Time' }
+    ]
 };
 
-export const extractValue = (item) => {
-	if (item === undefined) {return '';} //TODO fix it later
+export const extractValue = item => {
+    if (item === undefined) {
+        return '';
+    } //TODO fix it later
 
-	return  item ? item === optionInputOther.OTHER ? item : InputOptions.getTitleByName(optionsInputValues, item) : '';
+    return item
+        ? item === optionInputOther.OTHER
+          ? item
+          : InputOptions.getTitleByName(optionsInputValues, item)
+        : '';
 };
 
-export const getOperationalScopes = (operationalScope) => {
-	if(operationalScope.choices.toString() === i18n(optionInputOther.OTHER) && operationalScope.other !== '') {
-		return operationalScope.other;
-	}
-	else {
-		let allOpScopes = '';
-		for (let opScope of operationalScope.choices) {
-			allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`;
-		}
-		return allOpScopes;
-	}
+export const getOperationalScopes = operationalScope => {
+    if (
+        operationalScope.choices.toString() === i18n(optionInputOther.OTHER) &&
+        operationalScope.other !== ''
+    ) {
+        return operationalScope.other;
+    } else {
+        let allOpScopes = '';
+        for (let opScope of operationalScope.choices) {
+            allOpScopes +=
+                allOpScopes === ''
+                    ? InputOptions.getTitleByName(optionsInputValues, opScope)
+                    : `, ${InputOptions.getTitleByName(
+                          optionsInputValues,
+                          opScope
+                      )}`;
+        }
+        return allOpScopes;
+    }
 };
 
 export const tabIds = {
-	GENERAL: 'GENERAL',
-	SP_LIMITS: 'SP_LIMITS',
-	VENDOR_LIMITS: 'VENDOR_LIMITS',
-	ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
+    GENERAL: 'GENERAL',
+    SP_LIMITS: 'SP_LIMITS',
+    VENDOR_LIMITS: 'VENDOR_LIMITS',
+    ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
index 028fa9d3e4..fa62bba669 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
@@ -13,53 +13,79 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
 import LicenseKeyGroupsEditorView from './LicenseKeyGroupsEditorView.jsx';
 import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-const mapStateToProps = ({licenseModel: {licenseKeyGroup}}) => {
+const mapStateToProps = ({ licenseModel: { licenseKeyGroup } }) => {
+    let {
+        data,
+        genericFieldInfo,
+        formReady,
+        limitsList
+    } = licenseKeyGroup.licenseKeyGroupsEditor;
 
+    let previousData,
+        LKGNames = {};
+    const licenseKeyGroupId = data ? data.id : null;
+    if (licenseKeyGroupId) {
+        previousData = licenseKeyGroup.licenseKeyGroupsList.find(
+            licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId
+        );
+    }
 
-	let {data, genericFieldInfo, formReady, limitsList} = licenseKeyGroup.licenseKeyGroupsEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let previousData, LKGNames = {};
-	const licenseKeyGroupId = data ? data.id : null;
-	if(licenseKeyGroupId) {
-		previousData = licenseKeyGroup.licenseKeyGroupsList.find(licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId);
-	}
+    const list = licenseKeyGroup.licenseKeyGroupsList;
+    for (let i = 0; i < list.length; i++) {
+        LKGNames[list[i].name.toLowerCase()] = list[i].id;
+    }
 
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
-	const list = licenseKeyGroup.licenseKeyGroupsList;
-	for (let i = 0; i < list.length; i++) {
-		LKGNames[list[i].name.toLowerCase()] = list[i].id;
-	}
-
-	return {
-		data,
-		previousData,
-		genericFieldInfo,
-		isFormValid,
-		formReady,
-		LKGNames,
-		limitsList
-	};
+    return {
+        data,
+        previousData,
+        genericFieldInfo,
+        isFormValid,
+        formReady,
+        LKGNames,
+        limitsList
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onCancel: () => LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch),
-		onSubmit: ({previousLicenseKeyGroup, licenseKeyGroup, keepOpen}) => {
-			if (!keepOpen) {LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch);}
-			LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version});
-		},
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName),
-		onCloseLimitEditor: () => LimitEditorActionHelper.closeLimitsEditor(dispatch),
-		onOpenLimitEditor: (limit) => LimitEditorActionHelper.openLimitsEditor(dispatch, {limit})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onCancel: () =>
+            LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch),
+        onSubmit: ({ previousLicenseKeyGroup, licenseKeyGroup, keepOpen }) => {
+            if (!keepOpen) {
+                LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(
+                    dispatch
+                );
+            }
+            LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, {
+                licenseModelId,
+                previousLicenseKeyGroup,
+                licenseKeyGroup,
+                version
+            });
+        },
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName),
+        onCloseLimitEditor: () =>
+            LimitEditorActionHelper.closeLimitsEditor(dispatch),
+        onOpenLimitEditor: limit =>
+            LimitEditorActionHelper.openLimitsEditor(dispatch, { limit })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseKeyGroupsEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
index b1a22f3d9a..e948e9cef8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
@@ -13,82 +13,97 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, defaultState, LKG_FORM_NAME} from './LicenseKeyGroupsConstants.js';
+import {
+    actionTypes,
+    defaultState,
+    LKG_FORM_NAME
+} from './LicenseKeyGroupsConstants.js';
 import moment from 'moment';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.licenseKeyGroupsEditor.OPEN:
-			let licenseKeyGroupData = {...action.licenseKeyGroup};
-			let {startDate, expiryDate} = licenseKeyGroupData;
-			if (startDate) {
-				licenseKeyGroupData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT);
-			}
-			if (expiryDate) {
-				licenseKeyGroupData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT);
-			}
-			return {
-				...state,
-				data: action.licenseKeyGroup ? licenseKeyGroupData : defaultState.licenseKeyGroupsEditor,
-				formReady: null,
-				formName: LKG_FORM_NAME,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'type' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					'operationalScope' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'thresholdUnits' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'thresholdValue' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'increments' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 120}]
-					},
-					'startDate': {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'expiryDate': {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				}
-			};
-		case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED:
-			return {
-				...state,
-				limitsList: action.response.results
-			};	
-		case actionTypes.licenseKeyGroupsEditor.CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.licenseKeyGroupsEditor.OPEN:
+            let licenseKeyGroupData = { ...action.licenseKeyGroup };
+            let { startDate, expiryDate } = licenseKeyGroupData;
+            if (startDate) {
+                licenseKeyGroupData.startDate = moment(
+                    startDate,
+                    DATE_FORMAT
+                ).format(DATE_FORMAT);
+            }
+            if (expiryDate) {
+                licenseKeyGroupData.expiryDate = moment(
+                    expiryDate,
+                    DATE_FORMAT
+                ).format(DATE_FORMAT);
+            }
+            return {
+                ...state,
+                data: action.licenseKeyGroup
+                    ? licenseKeyGroupData
+                    : defaultState.licenseKeyGroupsEditor,
+                formReady: null,
+                formName: LKG_FORM_NAME,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    type: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    operationalScope: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    thresholdUnits: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    thresholdValue: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    increments: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 120 }]
+                    },
+                    startDate: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    expiryDate: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                }
+            };
+        case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED:
+            return {
+                ...state,
+                limitsList: action.response.results
+            };
+        case actionTypes.licenseKeyGroupsEditor.CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
index 7cbab61a8a..a820f28dfd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
@@ -26,328 +26,498 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {optionsInputValues as licenseKeyGroupOptionsInputValues, LKG_FORM_NAME, tabIds} from './LicenseKeyGroupsConstants.js';
-import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js';
-import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+    optionsInputValues as licenseKeyGroupOptionsInputValues,
+    LKG_FORM_NAME,
+    tabIds
+} from './LicenseKeyGroupsConstants.js';
+import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
+import {
+    validateStartDate,
+    thresholdValueValidation
+} from '../LicenseModelValidations.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 import LicenseKeyGroupsLimits from './LicenseKeyGroupsLimits.js';
-import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';
+import {
+    limitType,
+    NEW_LIMIT_TEMP_ID
+} from '../limits/LimitEditorConstants.js';
 
- const LicenseKeyGroupPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	increments: PropTypes.string,
-	operationalScope: PropTypes.shape({
-		choices: PropTypes.array,
-		other: PropTypes.string
-	}),
-	type: PropTypes.string,
-	 thresholdUnits: PropTypes.string,
-	 thresholdValue: PropTypes.number,
-	 startDate: PropTypes.string,
-	 expiryDate: PropTypes.string
+const LicenseKeyGroupPropType = PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    increments: PropTypes.string,
+    operationalScope: PropTypes.shape({
+        choices: PropTypes.array,
+        other: PropTypes.string
+    }),
+    type: PropTypes.string,
+    thresholdUnits: PropTypes.string,
+    thresholdValue: PropTypes.number,
+    startDate: PropTypes.string,
+    expiryDate: PropTypes.string
 });
 
-const LicenseKeyGroupFormContent = ({data, onDataChanged, genericFieldInfo, validateName, validateStartDate, thresholdValueValidation}) => {
-	let {name, description, increments, operationalScope, type, thresholdUnits, thresholdValue, startDate, expiryDate} = data;
-	return (
-		<GridSection hasLostColSet>
-			<GridItem colSpan={2}>
-				<Input
-					onChange={name => onDataChanged({name}, LKG_FORM_NAME, {name: validateName})}
-					label={i18n('Name')}
-					data-test-id='create-lkg-name'
-					value={name}
-					isValid={genericFieldInfo.name.isValid}
-					errorText={genericFieldInfo.name.errorText}
-					isRequired={true}
-					type='text'/>
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-				<InputOptions
-					onInputChange={()=>{}}
-					isMultiSelect={true}
-					onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
-						LKG_FORM_NAME)}
-					onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
-						other: operationalScope}}, LKG_FORM_NAME)}
-					label={i18n('Operational Scope')}
-					data-test-id='create-lkg-operational-scope'
-					type='select'
-					multiSelectedEnum={operationalScope && operationalScope.choices}
-					otherValue={operationalScope && operationalScope.other}
-					values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
-					isValid={genericFieldInfo.operationalScope.isValid}
-					errorText={genericFieldInfo.operationalScope.errorText} />
-			</GridItem>
-			<GridItem colSpan={2}>
-				<Input
-					onChange={description => onDataChanged({description}, LKG_FORM_NAME)}
-					label={i18n('Description')}
-					data-test-id='create-lkg-description'
-					value={description}
-					isValid={genericFieldInfo.description.isValid}
-					errorText={genericFieldInfo.description.errorText}
-					type='textarea'
-					overlayPos='bottom' />
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-				<Input
-					isRequired={true}
-					onChange={e => { const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onDataChanged({type: val}, LKG_FORM_NAME);}}
-					value={type}
-					label={i18n('Type')}
-					data-test-id='create-lkg-type'
-					isValid={genericFieldInfo.type.isValid}
-					errorText={genericFieldInfo.type.errorText}
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					overlayPos='bottom'
-					type='select' >
-					{
-						licenseKeyGroupOptionsInputValues.TYPE.map(type =>
-						(<option key={type.enum} value={type.enum}>{type.title}</option>))
-					}
-				</Input>
-			</GridItem>
-			<GridItem>
-				<Input
-					onChange={e => {
-						// setting the unit to the correct value
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onDataChanged({thresholdUnits: val}, LKG_FORM_NAME);
-						// TODO make sure that the value is valid too
-						onDataChanged({thresholdValue: thresholdValue}, LKG_FORM_NAME,{thresholdValue : thresholdValueValidation});}
-
-					}
-					value={thresholdUnits}
-					label={i18n('Threshold Units')}
-					data-test-id='create-ep-threshold-units'
-					isValid={genericFieldInfo.thresholdUnits.isValid}
-					errorText={genericFieldInfo.thresholdUnits.errorText}
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					type='select' >
-					{LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype =>
-						<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-				</Input>
-			</GridItem>
-			<GridItem>
-				<Input
-					className='entitlement-pools-form-row-threshold-value'
-					onChange={thresholdValue => onDataChanged({thresholdValue}, LKG_FORM_NAME,
-						{thresholdValue : thresholdValueValidation})}
-					label={i18n('Threshold Value')}
-					isValid={genericFieldInfo.thresholdValue.isValid}
-					errorText={genericFieldInfo.thresholdValue.errorText}
-					data-test-id='create-ep-threshold-value'
-					value={thresholdValue}
-					type='text'/>
-			</GridItem>
-				<GridItem>
-				<Input
-					type='date'
-					label={i18n('Start Date')}
-					value={startDate}
-					dateFormat={DATE_FORMAT}
-					startDate={startDate}
-					endDate={expiryDate}
-					onChange={startDate => onDataChanged(
-						{startDate: startDate ? startDate.format(DATE_FORMAT) : ''},
-						LKG_FORM_NAME,
-						{startDate: validateStartDate}
-					)}
-					isValid={genericFieldInfo.startDate.isValid}
-					errorText={genericFieldInfo.startDate.errorText}
-					selectsStart/>
-			</GridItem>
-			<GridItem lastColInRow>
-				<Input
-					type='date'
-					label={i18n('Expiry Date')}
-					value={expiryDate}
-					dateFormat={DATE_FORMAT}
-					startDate={startDate}
-					endDate={expiryDate}
-					onChange={expiryDate => {
-						onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, LKG_FORM_NAME);
-						onDataChanged({startDate}, LKG_FORM_NAME, {startDate: validateStartDate});
-					}}
-					isValid={genericFieldInfo.expiryDate.isValid}
-					errorText={genericFieldInfo.expiryDate.errorText}
-					selectsEnd/>
-			</GridItem>
-			<GridItem colSpan={2}>
-				<Input
-					onChange={increments => onDataChanged({increments}, LKG_FORM_NAME)}
-					label={i18n('Increments')}
-					value={increments}
-					data-test-id='create-ep-increments'
-					type='text'/>
-			</GridItem>
-		</GridSection>
-	);
+const LicenseKeyGroupFormContent = ({
+    data,
+    onDataChanged,
+    genericFieldInfo,
+    validateName,
+    validateStartDate,
+    thresholdValueValidation
+}) => {
+    let {
+        name,
+        description,
+        increments,
+        operationalScope,
+        type,
+        thresholdUnits,
+        thresholdValue,
+        startDate,
+        expiryDate
+    } = data;
+    return (
+        <GridSection hasLostColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={name =>
+                        onDataChanged({ name }, LKG_FORM_NAME, {
+                            name: validateName
+                        })
+                    }
+                    label={i18n('Name')}
+                    data-test-id="create-lkg-name"
+                    value={name}
+                    isValid={genericFieldInfo.name.isValid}
+                    errorText={genericFieldInfo.name.errorText}
+                    isRequired={true}
+                    type="text"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <InputOptions
+                    onInputChange={() => {}}
+                    isMultiSelect={true}
+                    onEnumChange={operationalScope =>
+                        onDataChanged(
+                            {
+                                operationalScope: {
+                                    choices: operationalScope,
+                                    other: ''
+                                }
+                            },
+                            LKG_FORM_NAME
+                        )
+                    }
+                    onOtherChange={operationalScope =>
+                        onDataChanged(
+                            {
+                                operationalScope: {
+                                    choices: [optionInputOther.OTHER],
+                                    other: operationalScope
+                                }
+                            },
+                            LKG_FORM_NAME
+                        )
+                    }
+                    label={i18n('Operational Scope')}
+                    data-test-id="create-lkg-operational-scope"
+                    type="select"
+                    multiSelectedEnum={
+                        operationalScope && operationalScope.choices
+                    }
+                    otherValue={operationalScope && operationalScope.other}
+                    values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
+                    isValid={genericFieldInfo.operationalScope.isValid}
+                    errorText={genericFieldInfo.operationalScope.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={description =>
+                        onDataChanged({ description }, LKG_FORM_NAME)
+                    }
+                    label={i18n('Description')}
+                    data-test-id="create-lkg-description"
+                    value={description}
+                    isValid={genericFieldInfo.description.isValid}
+                    errorText={genericFieldInfo.description.errorText}
+                    type="textarea"
+                    overlayPos="bottom"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    isRequired={true}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onDataChanged({ type: val }, LKG_FORM_NAME);
+                    }}
+                    value={type}
+                    label={i18n('Type')}
+                    data-test-id="create-lkg-type"
+                    isValid={genericFieldInfo.type.isValid}
+                    errorText={genericFieldInfo.type.errorText}
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    overlayPos="bottom"
+                    type="select">
+                    {licenseKeyGroupOptionsInputValues.TYPE.map(type => (
+                        <option key={type.enum} value={type.enum}>
+                            {type.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+            <GridItem>
+                <Input
+                    onChange={e => {
+                        // setting the unit to the correct value
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onDataChanged({ thresholdUnits: val }, LKG_FORM_NAME);
+                        // TODO make sure that the value is valid too
+                        onDataChanged(
+                            { thresholdValue: thresholdValue },
+                            LKG_FORM_NAME,
+                            {
+                                thresholdValue: thresholdValueValidation
+                            }
+                        );
+                    }}
+                    value={thresholdUnits}
+                    label={i18n('Threshold Units')}
+                    data-test-id="create-ep-threshold-units"
+                    isValid={genericFieldInfo.thresholdUnits.isValid}
+                    errorText={genericFieldInfo.thresholdUnits.errorText}
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    type="select">
+                    {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
+                        mtype => (
+                            <option key={mtype.enum} value={mtype.enum}>{`${
+                                mtype.title
+                            }`}</option>
+                        )
+                    )}
+                </Input>
+            </GridItem>
+            <GridItem>
+                <Input
+                    className="entitlement-pools-form-row-threshold-value"
+                    onChange={thresholdValue =>
+                        onDataChanged({ thresholdValue }, LKG_FORM_NAME, {
+                            thresholdValue: thresholdValueValidation
+                        })
+                    }
+                    label={i18n('Threshold Value')}
+                    isValid={genericFieldInfo.thresholdValue.isValid}
+                    errorText={genericFieldInfo.thresholdValue.errorText}
+                    data-test-id="create-ep-threshold-value"
+                    value={thresholdValue}
+                    type="text"
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    type="date"
+                    label={i18n('Start Date')}
+                    value={startDate}
+                    dateFormat={DATE_FORMAT}
+                    startDate={startDate}
+                    endDate={expiryDate}
+                    onChange={startDate =>
+                        onDataChanged(
+                            {
+                                startDate: startDate
+                                    ? startDate.format(DATE_FORMAT)
+                                    : ''
+                            },
+                            LKG_FORM_NAME,
+                            { startDate: validateStartDate }
+                        )
+                    }
+                    isValid={genericFieldInfo.startDate.isValid}
+                    errorText={genericFieldInfo.startDate.errorText}
+                    selectsStart
+                />
+            </GridItem>
+            <GridItem lastColInRow>
+                <Input
+                    type="date"
+                    label={i18n('Expiry Date')}
+                    value={expiryDate}
+                    dateFormat={DATE_FORMAT}
+                    startDate={startDate}
+                    endDate={expiryDate}
+                    onChange={expiryDate => {
+                        onDataChanged(
+                            {
+                                expiryDate: expiryDate
+                                    ? expiryDate.format(DATE_FORMAT)
+                                    : ''
+                            },
+                            LKG_FORM_NAME
+                        );
+                        onDataChanged({ startDate }, LKG_FORM_NAME, {
+                            startDate: validateStartDate
+                        });
+                    }}
+                    isValid={genericFieldInfo.expiryDate.isValid}
+                    errorText={genericFieldInfo.expiryDate.errorText}
+                    selectsEnd
+                />
+            </GridItem>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={increments =>
+                        onDataChanged({ increments }, LKG_FORM_NAME)
+                    }
+                    label={i18n('Increments')}
+                    value={increments}
+                    data-test-id="create-ep-increments"
+                    type="text"
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 class LicenseKeyGroupsEditorView extends React.Component {
-	static propTypes = {
-		data: LicenseKeyGroupPropType,
-		previousData: LicenseKeyGroupPropType,
-		LKGNames: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
-
-	static defaultProps = {
-		data: {}
-	};
-
-	componentDidUpdate(prevProps) {
-		if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit
-			this.submit();
-		}
-	}
+    static propTypes = {
+        data: LicenseKeyGroupPropType,
+        previousData: LicenseKeyGroupPropType,
+        LKGNames: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	state = {
-		localFeatureGroupsListFilter: '',
-		selectedTab: tabIds.GENERAL,
-		selectedLimit: ''
-	};
+    static defaultProps = {
+        data: {}
+    };
 
-	render() {
-		let {data = {}, onDataChanged, isReadOnlyMode, onCloseLimitEditor, genericFieldInfo, limitsList = []} = this.props;
-		let {selectedTab} = this.state;
-		const isTabsDisabled = !data.id || !this.props.isFormValid;
-		return (
-			<div className='license-keygroup-editor'>
-				<Tabs
-					type='menu'
-					activeTab={selectedTab}
-					onTabClick={(tabIndex)=>{
-						if (tabIndex === tabIds.ADD_LIMIT_BUTTON)  {
-							this.onAddLimit();
-						} else {
-							this.setState({selectedTab: tabIndex});
-							onCloseLimitEditor();
-							this.setState({selectedLimit: ''});
-						}
-					}}
-					invalidTabs={[]}>
-					<Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
-						{ genericFieldInfo &&
-							<Form
-								ref='validationForm'
-								hasButtons={false}
-								isValid={this.props.isFormValid}
-								formReady={this.props.formReady}
-								onValidateForm={() => this.props.onValidateForm(LKG_FORM_NAME) }
-								labledButtons={true}
-								isReadOnlyMode={isReadOnlyMode}
-								className='license-model-form license-key-groups-form'>
-									<LicenseKeyGroupFormContent
-										data={data}
-										onDataChanged={onDataChanged}
-										genericFieldInfo={genericFieldInfo}
-										validateName={(value)=> this.validateName(value)}
-										validateStartDate={(value, state)=> validateStartDate(value, state)}
-										thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/>
-							</Form>}
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.formReady &&
+            this.props.formReady !== prevProps.formReady
+        ) {
+            // if form validation succeeded -> continue with submit
+            this.submit();
+        }
+    }
 
-					</Tab>
-					<Tab tabId={tabIds.SP_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('SP Limits')}>
-						{selectedTab === tabIds.SP_LIMITS &&
-							<LicenseKeyGroupsLimits
-								limitType={limitType.SERVICE_PROVIDER}
-								limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)}
-								selectedLimit={this.state.selectedLimit}
-								onCloseLimitEditor={() => this.onCloseLimitEditor()}
-								onSelectLimit={limit => this.onSelectLimit(limit)}
-								isReadOnlyMode={isReadOnlyMode} />}
-					</Tab>
-					<Tab tabId={tabIds.VENDOR_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('Vendor Limits')}>
-						{selectedTab === tabIds.VENDOR_LIMITS &&
-							<LicenseKeyGroupsLimits
-								limitType={limitType.VENDOR}
-								limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
-								selectedLimit={this.state.selectedLimit}
-								onCloseLimitEditor={() => this.onCloseLimitEditor()}
-								onSelectLimit={limit => this.onSelectLimit(limit)}
-								isReadOnlyMode={isReadOnlyMode} />}
-					</Tab>
-					{selectedTab !== tabIds.GENERAL ?
-							<Button
-								className='add-limit-button'
-								tabId={tabIds.ADD_LIMIT_BUTTON}
-								btnType='link'
-								iconName='plus'
-								disabled={this.state.selectedLimit || isReadOnlyMode}>
-								{i18n('Add Limit')}
-							</Button>
-						:
-							<div key='empty_lm_tab_key'></div> // Render empty div to not break tabs
-					}
-				</Tabs>
+    state = {
+        localFeatureGroupsListFilter: '',
+        selectedTab: tabIds.GENERAL,
+        selectedLimit: ''
+    };
 
-				<GridSection className='license-model-modal-buttons license-key-group-editor-buttons'>
-					{!this.state.selectedLimit &&
-						<Button btnType='default' disabled={!this.props.isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>
-							{i18n('Save')}
-						</Button>
-					}
-					<Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'>
-						{i18n('Cancel')}
-					</Button>
-				</GridSection>
-			</div>
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            isReadOnlyMode,
+            onCloseLimitEditor,
+            genericFieldInfo,
+            limitsList = []
+        } = this.props;
+        let { selectedTab } = this.state;
+        const isTabsDisabled = !data.id || !this.props.isFormValid;
+        return (
+            <div className="license-keygroup-editor">
+                <Tabs
+                    type="menu"
+                    activeTab={selectedTab}
+                    onTabClick={tabIndex => {
+                        if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
+                            this.onAddLimit();
+                        } else {
+                            this.setState({ selectedTab: tabIndex });
+                            onCloseLimitEditor();
+                            this.setState({ selectedLimit: '' });
+                        }
+                    }}
+                    invalidTabs={[]}>
+                    <Tab
+                        tabId={tabIds.GENERAL}
+                        data-test-id="general-tab"
+                        title={i18n('General')}>
+                        {genericFieldInfo && (
+                            <Form
+                                ref="validationForm"
+                                hasButtons={false}
+                                isValid={this.props.isFormValid}
+                                formReady={this.props.formReady}
+                                onValidateForm={() =>
+                                    this.props.onValidateForm(LKG_FORM_NAME)
+                                }
+                                labledButtons={true}
+                                isReadOnlyMode={isReadOnlyMode}
+                                className="license-model-form license-key-groups-form">
+                                <LicenseKeyGroupFormContent
+                                    data={data}
+                                    onDataChanged={onDataChanged}
+                                    genericFieldInfo={genericFieldInfo}
+                                    validateName={value =>
+                                        this.validateName(value)
+                                    }
+                                    validateStartDate={(value, state) =>
+                                        validateStartDate(value, state)
+                                    }
+                                    thresholdValueValidation={(value, state) =>
+                                        thresholdValueValidation(value, state)
+                                    }
+                                />
+                            </Form>
+                        )}
+                    </Tab>
+                    <Tab
+                        tabId={tabIds.SP_LIMITS}
+                        disabled={isTabsDisabled}
+                        data-test-id="general-tab"
+                        title={i18n('SP Limits')}>
+                        {selectedTab === tabIds.SP_LIMITS && (
+                            <LicenseKeyGroupsLimits
+                                limitType={limitType.SERVICE_PROVIDER}
+                                limitsList={limitsList.filter(
+                                    item =>
+                                        item.type === limitType.SERVICE_PROVIDER
+                                )}
+                                selectedLimit={this.state.selectedLimit}
+                                onCloseLimitEditor={() =>
+                                    this.onCloseLimitEditor()
+                                }
+                                onSelectLimit={limit =>
+                                    this.onSelectLimit(limit)
+                                }
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Tab>
+                    <Tab
+                        tabId={tabIds.VENDOR_LIMITS}
+                        disabled={isTabsDisabled}
+                        data-test-id="general-tab"
+                        title={i18n('Vendor Limits')}>
+                        {selectedTab === tabIds.VENDOR_LIMITS && (
+                            <LicenseKeyGroupsLimits
+                                limitType={limitType.VENDOR}
+                                limitsList={limitsList.filter(
+                                    item => item.type === limitType.VENDOR
+                                )}
+                                selectedLimit={this.state.selectedLimit}
+                                onCloseLimitEditor={() =>
+                                    this.onCloseLimitEditor()
+                                }
+                                onSelectLimit={limit =>
+                                    this.onSelectLimit(limit)
+                                }
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Tab>
+                    {selectedTab !== tabIds.GENERAL ? (
+                        <Button
+                            className="add-limit-button"
+                            tabId={tabIds.ADD_LIMIT_BUTTON}
+                            btnType="link"
+                            iconName="plus"
+                            disabled={
+                                this.state.selectedLimit || isReadOnlyMode
+                            }>
+                            {i18n('Add Limit')}
+                        </Button>
+                    ) : (
+                        <div key="empty_lm_tab_key" />
+                    ) // Render empty div to not break tabs
+                    }
+                </Tabs>
 
-		);
-	}
+                <GridSection className="license-model-modal-buttons license-key-group-editor-buttons">
+                    {!this.state.selectedLimit && (
+                        <Button
+                            btnType="default"
+                            disabled={!this.props.isFormValid || isReadOnlyMode}
+                            onClick={() => this.submit()}
+                            type="reset">
+                            {i18n('Save')}
+                        </Button>
+                    )}
+                    <Button
+                        btnType={
+                            this.state.selectedLimit ? 'default' : 'outline'
+                        }
+                        onClick={() => this.props.onCancel()}
+                        type="reset">
+                        {i18n('Cancel')}
+                    </Button>
+                </GridSection>
+            </div>
+        );
+    }
 
-	submit() {
-		const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup, formReady, onValidateForm, onSubmit} = this.props;
-		if (!formReady) {
-			onValidateForm(LKG_FORM_NAME);
-		} else {
-			onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
-		}
-	}
+    submit() {
+        const {
+            data: licenseKeyGroup,
+            previousData: previousLicenseKeyGroup,
+            formReady,
+            onValidateForm,
+            onSubmit
+        } = this.props;
+        if (!formReady) {
+            onValidateForm(LKG_FORM_NAME);
+        } else {
+            onSubmit({ licenseKeyGroup, previousLicenseKeyGroup });
+        }
+    }
 
-	validateName(value) {
-		const {data: {id}, LKGNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LKGNames});
+    validateName(value) {
+        const { data: { id }, LKGNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: LKGNames
+        });
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('License key group by the name \'' + value + '\' already exists. License key group name must be unique')};
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "License key group by the name '" +
+                          value +
+                          "' already exists. License key group name must be unique"
+                  )
+              };
+    }
 
-	onSelectLimit(limit) {
-		if (limit.id === this.state.selectedLimit) {
-			this.setState({selectedLimit: ''});
-			return;
-		}
-		this.setState({selectedLimit: limit.id});
-		this.props.onOpenLimitEditor(limit);
-	}
+    onSelectLimit(limit) {
+        if (limit.id === this.state.selectedLimit) {
+            this.setState({ selectedLimit: '' });
+            return;
+        }
+        this.setState({ selectedLimit: limit.id });
+        this.props.onOpenLimitEditor(limit);
+    }
 
-	onCloseLimitEditor() {
-		this.setState({selectedLimit: ''});
-		this.props.onCloseLimitEditor();
-	}
+    onCloseLimitEditor() {
+        this.setState({ selectedLimit: '' });
+        this.props.onCloseLimitEditor();
+    }
 
-	onAddLimit() {
-		this.setState({selectedLimit: NEW_LIMIT_TEMP_ID});
-		this.props.onOpenLimitEditor();
-	}
+    onAddLimit() {
+        this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
+        this.props.onOpenLimitEditor();
+    }
 }
 
 export default LicenseKeyGroupsEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
index bd8f21a7c5..ad14c6c249 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
@@ -13,45 +13,75 @@
  * 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 globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx';
 
 import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
 
-const mapStateToProps = ({licenseModel: {licenseKeyGroup: {licenseKeyGroupsEditor: {data}}, limitEditor}, currentScreen}) => {
-	let  {props: {licenseModelId, version}} = currentScreen;
-	return {
-		parent: data,
-		limitEditor,
-		licenseModelId,
-		version
-	};
+const mapStateToProps = ({
+    licenseModel: {
+        licenseKeyGroup: { licenseKeyGroupsEditor: { data } },
+        limitEditor
+    },
+    currentScreen
+}) => {
+    let { props: { licenseModelId, version } } = currentScreen;
+    return {
+        parent: data,
+        limitEditor,
+        licenseModelId,
+        version
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onSubmit: (limit, licenseKeyGroup, licenseModelId, version) => LicenseKeyGroupsActionHelper.submitLimit(dispatch,
-			{
-				limit,
-				licenseKeyGroup,
-				licenseModelId,
-				version}),
-		onDelete: ({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}) => dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete {name}?', {name: limit.name}),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=> LicenseKeyGroupsActionHelper.deleteLimit(dispatch, {limit, licenseKeyGroup: parent, licenseModelId, version}).then(() =>
-					selectedLimit === limit.id && onCloseLimitEditor()
-				)
-			}
-		})
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onSubmit: (limit, licenseKeyGroup, licenseModelId, version) =>
+            LicenseKeyGroupsActionHelper.submitLimit(dispatch, {
+                limit,
+                licenseKeyGroup,
+                licenseModelId,
+                version
+            }),
+        onDelete: ({
+            limit,
+            parent,
+            licenseModelId,
+            version,
+            onCloseLimitEditor,
+            selectedLimit
+        }) =>
+            dispatch({
+                type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete {name}?', {
+                        name: limit.name
+                    }),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        LicenseKeyGroupsActionHelper.deleteLimit(dispatch, {
+                            limit,
+                            licenseKeyGroup: parent,
+                            licenseModelId,
+                            version
+                        }).then(
+                            () =>
+                                selectedLimit === limit.id &&
+                                onCloseLimitEditor()
+                        )
+                }
+            })
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(Limits);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
index 00c2092b83..6151c5997d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
@@ -13,41 +13,62 @@
  * 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 globalMoadlActions}  from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
-import LicenseKeyGroupsListEditorView, {generateConfirmationMsg} from './LicenseKeyGroupsListEditorView.jsx';
+import LicenseKeyGroupsListEditorView, {
+    generateConfirmationMsg
+} from './LicenseKeyGroupsListEditorView.jsx';
 
-const mapStateToProps = ({licenseModel: {licenseKeyGroup, licenseModelEditor}}) => {
-	let {licenseKeyGroupsList} = licenseKeyGroup;
-	let {data} = licenseKeyGroup.licenseKeyGroupsEditor;
-	let {vendorName} = licenseModelEditor.data;
+const mapStateToProps = ({
+    licenseModel: { licenseKeyGroup, licenseModelEditor }
+}) => {
+    let { licenseKeyGroupsList } = licenseKeyGroup;
+    let { data } = licenseKeyGroup.licenseKeyGroupsEditor;
+    let { vendorName } = licenseModelEditor.data;
 
-	return {
-		vendorName,
-		licenseKeyGroupsList,
-		isDisplayModal: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id)
-	};
+    return {
+        vendorName,
+        licenseKeyGroupsList,
+        isDisplayModal: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {	
-	return {
-		onAddLicenseKeyGroupClick: () => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch),
-		onEditLicenseKeyGroupClick: licenseKeyGroup => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version}),
-		onDeleteLicenseKeyGroupClick: licenseKeyGroup => dispatch({
-			type: globalMoadlActions.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: generateConfirmationMsg(licenseKeyGroup),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: () => LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId:licenseKeyGroup.id, version})
-			}
-		})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onAddLicenseKeyGroupClick: () =>
+            LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch),
+        onEditLicenseKeyGroupClick: licenseKeyGroup =>
+            LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {
+                licenseKeyGroup,
+                licenseModelId,
+                version
+            }),
+        onDeleteLicenseKeyGroupClick: licenseKeyGroup =>
+            dispatch({
+                type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: generateConfirmationMsg(licenseKeyGroup),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup(
+                            dispatch,
+                            {
+                                licenseModelId,
+                                licenseKeyGroupId: licenseKeyGroup.id,
+                                version
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseKeyGroupsListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
index 5a98b7f575..4c8c8cee6f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
@@ -21,143 +21,205 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
 import LicenseKeyGroupsEditor from './LicenseKeyGroupsEditor.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-import {optionsInputValues} from './LicenseKeyGroupsConstants';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { optionsInputValues } from './LicenseKeyGroupsConstants';
 
 class LicenseKeyGroupsListEditorView extends React.Component {
-	static propTypes = {
-		vendorName: PropTypes.string,
-		licenseModelId: PropTypes.string.isRequired,
-		licenseKeyGroupsList: PropTypes.array,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		isDisplayModal: PropTypes.bool,
-		isModalInEditMode: PropTypes.bool,
-		onAddLicenseKeyGroupClick: PropTypes.func,
-		onEditLicenseKeyGroupClick: PropTypes.func,
-		onDeleteLicenseKeyGroupClick: PropTypes.func
-	};
-
-	static defaultProps = {
-		licenseKeyGroupsList: []
-	};
-
-	state = {
-		localFilter: ''
-	};
-
-	render() {
-		let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
-		let {onAddLicenseKeyGroupClick} = this.props;
-		const {localFilter} = this.state;
-
-		return (
-			<div className='license-model-list-editor license-key-groups-list-editor'>
-				<ListEditorView
-					title={i18n('License Key Groups')}
-					plusButtonTitle={i18n('Add License Key Group')}
-					onAdd={onAddLicenseKeyGroupClick}
-					filterValue={localFilter}
-					onFilter={value => this.setState({localFilter: value})}
-					isReadOnlyMode={isReadOnlyMode}>
-					{this.filterList().map(licenseKeyGroup => (this.renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode)))}
-				</ListEditorView>
-				<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-key-groups-modal'>
-					<Modal.Header>
-						<Modal.Title>{`${isModalInEditMode ? i18n('Edit License Key Group') : i18n('Create New License Key Group')}`}</Modal.Title>
-					</Modal.Header>
-					<Modal.Body>
-						{
-							isDisplayModal && (
-								<LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>
-							)
-						}
-					</Modal.Body>
-				</Modal>
-			</div>
-		);
-	}
-
-	filterList() {
-		let {licenseKeyGroupsList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return licenseKeyGroupsList.filter(({name = '', description = '', operationalScope = '', type = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter) || escape(this.extractValue(operationalScope)).match(filter) || escape(type).match(filter);
-			});
-		}
-		else {
-			return licenseKeyGroupsList;
-		}
-	}
-
-	renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
-		let {id, name, description, operationalScope, type} = licenseKeyGroup;
-		let {onEditLicenseKeyGroupClick, onDeleteLicenseKeyGroupClick} = this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
-				onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='text name'>{name}</div>
-				</div>
-
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Operational Scope')}</div>
-					<div className='text operational-scope'>{operationalScope && this.getOperationalScopes(operationalScope)}</div>
-
-					<div className='title'>{i18n('Type')}</div>
-					<div className='text type'>{InputOptions.getTitleByName(optionsInputValues, type)}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
-					<div className='text description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
-
-	getOperationalScopes(operationalScope) {
-
-		if (operationalScope.choices && operationalScope.choices.toString() === i18n(optionInputOther.OTHER)) {
-			return operationalScope.other;
-		} else if (operationalScope.choices) {
-			let allOpScopes = '';
-			for (let opScope of operationalScope.choices) {
-				allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`;
-			}
-			return allOpScopes;
-		} else {
-			return '';
-		}
-	}
-
-	extractValue(item) {
-		if (item === undefined) {
-			return '';
-		} //TODO fix it sooner rather than later
-
-		return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
-	}
+    static propTypes = {
+        vendorName: PropTypes.string,
+        licenseModelId: PropTypes.string.isRequired,
+        licenseKeyGroupsList: PropTypes.array,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        isDisplayModal: PropTypes.bool,
+        isModalInEditMode: PropTypes.bool,
+        onAddLicenseKeyGroupClick: PropTypes.func,
+        onEditLicenseKeyGroupClick: PropTypes.func,
+        onDeleteLicenseKeyGroupClick: PropTypes.func
+    };
+
+    static defaultProps = {
+        licenseKeyGroupsList: []
+    };
+
+    state = {
+        localFilter: ''
+    };
+
+    render() {
+        let {
+            licenseModelId,
+            isReadOnlyMode,
+            isDisplayModal,
+            isModalInEditMode,
+            version
+        } = this.props;
+        let { onAddLicenseKeyGroupClick } = this.props;
+        const { localFilter } = this.state;
+
+        return (
+            <div className="license-model-list-editor license-key-groups-list-editor">
+                <ListEditorView
+                    title={i18n('License Key Groups')}
+                    plusButtonTitle={i18n('Add License Key Group')}
+                    onAdd={onAddLicenseKeyGroupClick}
+                    filterValue={localFilter}
+                    onFilter={value => this.setState({ localFilter: value })}
+                    isReadOnlyMode={isReadOnlyMode}>
+                    {this.filterList().map(licenseKeyGroup =>
+                        this.renderLicenseKeyGroupListItem(
+                            licenseKeyGroup,
+                            isReadOnlyMode
+                        )
+                    )}
+                </ListEditorView>
+                <Modal
+                    show={isDisplayModal}
+                    bsSize="large"
+                    animation={true}
+                    className="onborading-modal license-model-modal license-key-groups-modal">
+                    <Modal.Header>
+                        <Modal.Title>{`${
+                            isModalInEditMode
+                                ? i18n('Edit License Key Group')
+                                : i18n('Create New License Key Group')
+                        }`}</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        {isDisplayModal && (
+                            <LicenseKeyGroupsEditor
+                                version={version}
+                                licenseModelId={licenseModelId}
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Modal.Body>
+                </Modal>
+            </div>
+        );
+    }
+
+    filterList() {
+        let { licenseKeyGroupsList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return licenseKeyGroupsList.filter(
+                ({
+                    name = '',
+                    description = '',
+                    operationalScope = '',
+                    type = ''
+                }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter) ||
+                        escape(this.extractValue(operationalScope)).match(
+                            filter
+                        ) ||
+                        escape(type).match(filter)
+                    );
+                }
+            );
+        } else {
+            return licenseKeyGroupsList;
+        }
+    }
+
+    renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
+        let { id, name, description, operationalScope, type } = licenseKeyGroup;
+        let {
+            onEditLicenseKeyGroupClick,
+            onDeleteLicenseKeyGroupClick
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
+                onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="text name">{name}</div>
+                </div>
+
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Operational Scope')}</div>
+                    <div className="text operational-scope">
+                        {operationalScope &&
+                            this.getOperationalScopes(operationalScope)}
+                    </div>
+
+                    <div className="title">{i18n('Type')}</div>
+                    <div className="text type">
+                        {InputOptions.getTitleByName(optionsInputValues, type)}
+                    </div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Description')}</div>
+                    <div className="text description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
+
+    getOperationalScopes(operationalScope) {
+        if (
+            operationalScope.choices &&
+            operationalScope.choices.toString() === i18n(optionInputOther.OTHER)
+        ) {
+            return operationalScope.other;
+        } else if (operationalScope.choices) {
+            let allOpScopes = '';
+            for (let opScope of operationalScope.choices) {
+                allOpScopes +=
+                    allOpScopes === ''
+                        ? InputOptions.getTitleByName(
+                              optionsInputValues,
+                              opScope
+                          )
+                        : `, ${InputOptions.getTitleByName(
+                              optionsInputValues,
+                              opScope
+                          )}`;
+            }
+            return allOpScopes;
+        } else {
+            return '';
+        }
+    }
+
+    extractValue(item) {
+        if (item === undefined) {
+            return '';
+        } //TODO fix it sooner rather than later
+
+        return item
+            ? item.choice === optionInputOther.OTHER
+              ? item.other
+              : InputOptions.getTitleByName(optionsInputValues, item.choice)
+            : '';
+    }
 }
 
 export default LicenseKeyGroupsListEditorView;
 
 export function generateConfirmationMsg(licenseKeyGroupToDelete) {
-	let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
-	let msg = i18n('Are you sure you want to delete "{name}"?', {name: name});
-	let subMsg = licenseKeyGroupToDelete.referencingFeatureGroups
-	&& licenseKeyGroupToDelete.referencingFeatureGroups.length > 0 ?
-		i18n('This license key group is associated with one or more feature groups') :
-		'';
-	return (
-		<div>
-			<p>{msg}</p>
-			<p>{subMsg}</p>
-		</div>
-	);
+    let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
+    let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
+    let subMsg =
+        licenseKeyGroupToDelete.referencingFeatureGroups &&
+        licenseKeyGroupToDelete.referencingFeatureGroups.length > 0
+            ? i18n(
+                  'This license key group is associated with one or more feature groups'
+              )
+            : '';
+    return (
+        <div>
+            <p>{msg}</p>
+            <p>{subMsg}</p>
+        </div>
+    );
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
index 1f0a64e295..1cd1da0d82 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
@@ -13,20 +13,29 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './LicenseKeyGroupsConstants.js';
+import { actionTypes } from './LicenseKeyGroupsConstants.js';
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.DELETE_LICENSE_KEY_GROUP:
-			return state.filter(licenseKeyGroup => licenseKeyGroup.id !== action.licenseKeyGroupId);
-		case actionTypes.ADD_LICENSE_KEY_GROUP:
-			return [...state, action.licenseKeyGroup];
-		case actionTypes.EDIT_LICENSE_KEY_GROUP:
-			const indexForEdit = state.findIndex(licenseKeyGroup => licenseKeyGroup.id === action.licenseKeyGroup.id);
-			return [...state.slice(0, indexForEdit), action.licenseKeyGroup, ...state.slice(indexForEdit + 1)];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.DELETE_LICENSE_KEY_GROUP:
+            return state.filter(
+                licenseKeyGroup =>
+                    licenseKeyGroup.id !== action.licenseKeyGroupId
+            );
+        case actionTypes.ADD_LICENSE_KEY_GROUP:
+            return [...state, action.licenseKeyGroup];
+        case actionTypes.EDIT_LICENSE_KEY_GROUP:
+            const indexForEdit = state.findIndex(
+                licenseKeyGroup =>
+                    licenseKeyGroup.id === action.licenseKeyGroup.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.licenseKeyGroup,
+                ...state.slice(indexForEdit + 1)
+            ];
+        default:
+            return state;
+    }
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
index d483383472..76ea36db98 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
@@ -1,25 +1,30 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import LimitEditor from './LimitEditor.jsx';
 
-const mapStateToProps = ({licenseModel: {limitEditor}}) => {
+const mapStateToProps = ({ licenseModel: { limitEditor } }) => {
+    let { data, genericFieldInfo, formReady } = limitEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let {data, genericFieldInfo, formReady} = limitEditor;	
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
-	return {
-		data,		
-		genericFieldInfo,
-		isFormValid,
-		formReady
-	};
+    return {
+        data,
+        genericFieldInfo,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LimitEditor);
\ No newline at end of file
+export default connect(mapStateToProps, mapActionsToProps)(LimitEditor);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
index 54f057eaa4..0d1d4eaf10 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
@@ -5,206 +5,349 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js';
+import { LIMITS_FORM_NAME, selectValues } from './LimitEditorConstants.js';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Validator from 'nfvo-utils/Validator.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 
 const LimitPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	metric: PropTypes.shape({
-		choice: PropTypes.string,
-		other: PropTypes.string
-	}),
-	value: PropTypes.string,
-	aggregationFunction: PropTypes.string,
-	time: PropTypes.string,
-	unit: PropTypes.shape({
-		choice: PropTypes.string,
-		other: PropTypes.string
-	})
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    metric: PropTypes.shape({
+        choice: PropTypes.string,
+        other: PropTypes.string
+    }),
+    value: PropTypes.string,
+    aggregationFunction: PropTypes.string,
+    time: PropTypes.string,
+    unit: PropTypes.shape({
+        choice: PropTypes.string,
+        other: PropTypes.string
+    })
 });
 
 class LimitEditor extends React.Component {
-	static propTypes = {
-		data: LimitPropType,
-		limitsNames: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		isFormValid: PropTypes.bool,
-		formReady: PropTypes.bool,
-		genericFieldInfo: PropTypes.object.isRequired,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onValidateForm: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    static propTypes = {
+        data: LimitPropType,
+        limitsNames: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        isFormValid: PropTypes.bool,
+        formReady: PropTypes.bool,
+        genericFieldInfo: PropTypes.object.isRequired,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onValidateForm: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	componentDidUpdate(prevProps) {
-		if (this.props.formReady && this.props.formReady !== prevProps.formReady) {
-			this.submit();
-		}
-	}
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.formReady &&
+            this.props.formReady !== prevProps.formReady
+        ) {
+            this.submit();
+        }
+    }
 
-	render() {
-		let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCancel, isFormValid, formReady, onValidateForm} = this.props;
-		let {name, description, metric, value, aggregationFunction, time, unit} = data;
-		return (
-			<div className='limit-editor'>
-			{!data.id &&
-			<div className='limit-editor-title'>
-				{data.name ? data.name : i18n('NEW LIMIT')}
-			</div>}
-			{
-				genericFieldInfo &&
-				<Form
-					ref='validationForm'
-					hasButtons={false}
-					isValid={isFormValid}
-					formReady={formReady}
-					onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) }
-					labledButtons={false}
-					isReadOnlyMode={isReadOnlyMode}
-					className='limit-editor-form'>
-					<GridSection className='limit-editor-form-grid-section' hasLastColSet>
-						<GridItem colSpan={2}>
-							<Input
-								onChange={name => onDataChanged({name}, LIMITS_FORM_NAME, {name: () => this.validateName(name)})}
-								label={i18n('Name')}
-								data-test-id='limit-editor-name'
-								value={name}
-								isValid={genericFieldInfo.name.isValid}
-								errorText={genericFieldInfo.name.errorText}
-								isRequired={true}
-								type='text'/>
-						</GridItem>
-						<GridItem colSpan={2} lastColInRow>
-							<Input
-								onChange={description => onDataChanged({description}, LIMITS_FORM_NAME)}
-								label={i18n('Description')}
-								data-test-id='limit-editor-description'
-								value={description}
-								isValid={genericFieldInfo.description.isValid}
-								errorText={genericFieldInfo.description.errorText}
-								isRequired={false}
-								type='text'/>
-						</GridItem>
-						<GridItem colSpan={2}>
-							<InputOptions
-								onInputChange={()=>{}}
-								isMultiSelect={false}
-								isRequired={true}
-								onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}},
-									LIMITS_FORM_NAME)}
-								onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER,
-									other: metric}}, LIMITS_FORM_NAME)}
-								label={i18n('Metric')}
-								data-test-id='limit-editor-metric'
-								type='select'
-								required={true}
-								selectedEnum={metric && metric.choice}
-								otherValue={metric && metric.other}
-								values={selectValues.METRIC}
-								isValid={genericFieldInfo.metric.isValid}
-								errorText={genericFieldInfo.metric.errorText} />
-						</GridItem>
-						<GridItem>
-							<Input
-								onChange={value => onDataChanged({value}, LIMITS_FORM_NAME)}
-								label={i18n('Metric value')}
-								data-test-id='limit-editor-metric-value'
-								value={value}
-								isValid={genericFieldInfo.value.isValid}
-								errorText={genericFieldInfo.value.errorText}
-								isRequired={true}
-								type='text'/>
-						</GridItem>
-						<GridItem lastColInRow>
-							<InputOptions
-								onInputChange={()=>{}}
-								isMultiSelect={false}
-								isRequired={false}
-								onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}},
-									LIMITS_FORM_NAME)}
-								onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER,
-									other: unit}}, LIMITS_FORM_NAME)}
-								label={i18n('Units')}
-								data-test-id='limit-editor-units'
-								type='select'
-								required={false}
-								selectedEnum={unit && unit.choice}
-								otherValue={unit && unit.other}
-								values={selectValues.UNIT}
-								isValid={genericFieldInfo.unit.isValid}
-								errorText={genericFieldInfo.unit.errorText} />
-						</GridItem>
-						<GridItem colSpan={2}>
-							<Input
-								onChange={e => {
-									const selectedIndex = e.target.selectedIndex;
-									const val = e.target.options[selectedIndex].value;
-									onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);}
-								}
-								value={aggregationFunction}
-								label={i18n('Aggregation Function')}
-								data-test-id='limit-editor-aggregation-function'
-								isValid={genericFieldInfo.aggregationFunction.isValid}
-								errorText={genericFieldInfo.aggregationFunction.errorText}
-								groupClassName='bootstrap-input-options'
-								className='input-options-select'
-								type='select' >
-								{selectValues.AGGREGATION_FUNCTION.map(mtype =>
-									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>
-						</GridItem>
-						<GridItem>
-							<Input
-								onChange={e => {
-									const selectedIndex = e.target.selectedIndex;
-									const val = e.target.options[selectedIndex].value;
-									onDataChanged({time: val}, LIMITS_FORM_NAME);}
-								}
-								value={time}
-								label={i18n('Time')}
-								data-test-id='limit-editor-time'
-								isValid={genericFieldInfo.time.isValid}
-								errorText={genericFieldInfo.time.errorText}
-								groupClassName='bootstrap-input-options'
-								className='input-options-select'
-								type='select' >
-								{selectValues.TIME.map(mtype =>
-									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>
-						</GridItem>
-					</GridSection>
-					<GridSection className='limit-editor-buttons'>
-						<Button btnType='outline' disabled={!isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>
-						<Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button>
-					</GridSection>
-				</Form>
-			}
-			</div>
-		);
-	}
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            isReadOnlyMode,
+            genericFieldInfo,
+            onCancel,
+            isFormValid,
+            formReady,
+            onValidateForm
+        } = this.props;
+        let {
+            name,
+            description,
+            metric,
+            value,
+            aggregationFunction,
+            time,
+            unit
+        } = data;
+        return (
+            <div className="limit-editor">
+                {!data.id && (
+                    <div className="limit-editor-title">
+                        {data.name ? data.name : i18n('NEW LIMIT')}
+                    </div>
+                )}
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={false}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        onValidateForm={() => onValidateForm(LIMITS_FORM_NAME)}
+                        labledButtons={false}
+                        isReadOnlyMode={isReadOnlyMode}
+                        className="limit-editor-form">
+                        <GridSection
+                            className="limit-editor-form-grid-section"
+                            hasLastColSet>
+                            <GridItem colSpan={2}>
+                                <Input
+                                    onChange={name =>
+                                        onDataChanged(
+                                            { name },
+                                            LIMITS_FORM_NAME,
+                                            {
+                                                name: () =>
+                                                    this.validateName(name)
+                                            }
+                                        )
+                                    }
+                                    label={i18n('Name')}
+                                    data-test-id="limit-editor-name"
+                                    value={name}
+                                    isValid={genericFieldInfo.name.isValid}
+                                    errorText={genericFieldInfo.name.errorText}
+                                    isRequired={true}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={2} lastColInRow>
+                                <Input
+                                    onChange={description =>
+                                        onDataChanged(
+                                            { description },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Description')}
+                                    data-test-id="limit-editor-description"
+                                    value={description}
+                                    isValid={
+                                        genericFieldInfo.description.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.description.errorText
+                                    }
+                                    isRequired={false}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={2}>
+                                <InputOptions
+                                    onInputChange={() => {}}
+                                    isMultiSelect={false}
+                                    isRequired={true}
+                                    onEnumChange={metric =>
+                                        onDataChanged(
+                                            {
+                                                metric: {
+                                                    choice: metric,
+                                                    other: ''
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    onOtherChange={metric =>
+                                        onDataChanged(
+                                            {
+                                                metric: {
+                                                    choice:
+                                                        optionInputOther.OTHER,
+                                                    other: metric
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Metric')}
+                                    data-test-id="limit-editor-metric"
+                                    type="select"
+                                    required={true}
+                                    selectedEnum={metric && metric.choice}
+                                    otherValue={metric && metric.other}
+                                    values={selectValues.METRIC}
+                                    isValid={genericFieldInfo.metric.isValid}
+                                    errorText={
+                                        genericFieldInfo.metric.errorText
+                                    }
+                                />
+                            </GridItem>
+                            <GridItem>
+                                <Input
+                                    onChange={value =>
+                                        onDataChanged(
+                                            { value },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Metric value')}
+                                    data-test-id="limit-editor-metric-value"
+                                    value={value}
+                                    isValid={genericFieldInfo.value.isValid}
+                                    errorText={genericFieldInfo.value.errorText}
+                                    isRequired={true}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem lastColInRow>
+                                <InputOptions
+                                    onInputChange={() => {}}
+                                    isMultiSelect={false}
+                                    isRequired={false}
+                                    onEnumChange={unit =>
+                                        onDataChanged(
+                                            {
+                                                unit: {
+                                                    choice: unit,
+                                                    other: ''
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    onOtherChange={unit =>
+                                        onDataChanged(
+                                            {
+                                                unit: {
+                                                    choice:
+                                                        optionInputOther.OTHER,
+                                                    other: unit
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Units')}
+                                    data-test-id="limit-editor-units"
+                                    type="select"
+                                    required={false}
+                                    selectedEnum={unit && unit.choice}
+                                    otherValue={unit && unit.other}
+                                    values={selectValues.UNIT}
+                                    isValid={genericFieldInfo.unit.isValid}
+                                    errorText={genericFieldInfo.unit.errorText}
+                                />
+                            </GridItem>
+                            <GridItem colSpan={2}>
+                                <Input
+                                    onChange={e => {
+                                        const selectedIndex =
+                                            e.target.selectedIndex;
+                                        const val =
+                                            e.target.options[selectedIndex]
+                                                .value;
+                                        onDataChanged(
+                                            { aggregationFunction: val },
+                                            LIMITS_FORM_NAME
+                                        );
+                                    }}
+                                    value={aggregationFunction}
+                                    label={i18n('Aggregation Function')}
+                                    data-test-id="limit-editor-aggregation-function"
+                                    isValid={
+                                        genericFieldInfo.aggregationFunction
+                                            .isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.aggregationFunction
+                                            .errorText
+                                    }
+                                    groupClassName="bootstrap-input-options"
+                                    className="input-options-select"
+                                    type="select">
+                                    {selectValues.AGGREGATION_FUNCTION.map(
+                                        mtype => (
+                                            <option
+                                                key={mtype.enum}
+                                                value={mtype.enum}>{`${
+                                                mtype.title
+                                            }`}</option>
+                                        )
+                                    )}
+                                </Input>
+                            </GridItem>
+                            <GridItem>
+                                <Input
+                                    onChange={e => {
+                                        const selectedIndex =
+                                            e.target.selectedIndex;
+                                        const val =
+                                            e.target.options[selectedIndex]
+                                                .value;
+                                        onDataChanged(
+                                            { time: val },
+                                            LIMITS_FORM_NAME
+                                        );
+                                    }}
+                                    value={time}
+                                    label={i18n('Time')}
+                                    data-test-id="limit-editor-time"
+                                    isValid={genericFieldInfo.time.isValid}
+                                    errorText={genericFieldInfo.time.errorText}
+                                    groupClassName="bootstrap-input-options"
+                                    className="input-options-select"
+                                    type="select">
+                                    {selectValues.TIME.map(mtype => (
+                                        <option
+                                            key={mtype.enum}
+                                            value={mtype.enum}>{`${
+                                            mtype.title
+                                        }`}</option>
+                                    ))}
+                                </Input>
+                            </GridItem>
+                        </GridSection>
+                        <GridSection className="limit-editor-buttons">
+                            <Button
+                                btnType="outline"
+                                disabled={!isFormValid || isReadOnlyMode}
+                                onClick={() => this.submit()}
+                                type="reset">
+                                {i18n('Save')}
+                            </Button>
+                            <Button
+                                btnType="outline"
+                                color="gray"
+                                onClick={onCancel}
+                                type="reset">
+                                {i18n('Cancel')}
+                            </Button>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	validateName(value) {
-		const {data: {id}, limitsNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: limitsNames});
+    validateName(value) {
+        const { data: { id }, limitsNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: limitsNames
+        });
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-		{isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')};
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Limit by the name '" +
+                          value +
+                          "' already exists. Limit name must be unique"
+                  )
+              };
+    }
 
-
-	submit() {
-		if (!this.props.formReady) {
-			this.props.onValidateForm(LIMITS_FORM_NAME);
-		} else {
-			this.props.onSubmit();
-		}
-	}
+    submit() {
+        if (!this.props.formReady) {
+            this.props.onValidateForm(LIMITS_FORM_NAME);
+        } else {
+            this.props.onSubmit();
+        }
+    }
 }
 
 export default LimitEditor;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
index 8ac845a1a7..a275808d01 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
@@ -14,41 +14,47 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, selectValues} from './LimitEditorConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-
+import { actionTypes, selectValues } from './LimitEditorConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 const LimitEditorActionHelper = {
-	openLimitsEditor(dispatch, {limit}) {
-		let modifiedLimit = {...limit};
-		if (limit && limit.metric) {
-			modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC);
-		}
-		if (limit && limit.unit) {
-			modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT);
-		}
-		dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit});
-	},
+    openLimitsEditor(dispatch, { limit }) {
+        let modifiedLimit = { ...limit };
+        if (limit && limit.metric) {
+            modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(
+                modifiedLimit.metric,
+                selectValues.METRIC
+            );
+        }
+        if (limit && limit.unit) {
+            modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(
+                modifiedLimit.unit,
+                selectValues.UNIT
+            );
+        }
+        dispatch({ type: actionTypes.OPEN, limitItem: modifiedLimit });
+    },
 
-	closeLimitsEditor(dispatch) {
-		dispatch({type: actionTypes.CLOSE});
-	},
+    closeLimitsEditor(dispatch) {
+        dispatch({ type: actionTypes.CLOSE });
+    },
 
-	createChoiceObject(value, optionsList) {
-		let option = optionsList.find(function(item) { return item.enum === value; });
-		if (!option) {
-			return {
-				choice: optionInputOther.OTHER,
-				other: value
-			};
-		}
-		else {
-			return {
-				choice: value,
-				other: ''
-			};
-		}
-	}
+    createChoiceObject(value, optionsList) {
+        let option = optionsList.find(function(item) {
+            return item.enum === value;
+        });
+        if (!option) {
+            return {
+                choice: optionInputOther.OTHER,
+                other: value
+            };
+        } else {
+            return {
+                choice: value,
+                other: ''
+            };
+        }
+    }
 };
 
 export default LimitEditorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
index 9829e696c3..a916b9594c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
@@ -3,62 +3,61 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 // import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
-	OPEN: null,
-	CLOSE: null,
-	DATA_CHANGED: null,
+    OPEN: null,
+    CLOSE: null,
+    DATA_CHANGED: null
 });
 
 export const LIMITS_FORM_NAME = 'LIMITSFORM';
 
 export const selectValues = {
-	METRIC: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'BWTH', title: 'BWTH'},
-		{enum: 'Country', title: 'Country'},
-		{enum: 'Session', title: 'Session'},
-		{enum: 'LoB', title: 'LoB'},
-		{enum: 'Site', title: 'Site'},
-		{enum: 'Usage', title: 'Usage'}
-	],
-	UNIT: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'trunk', title: 'Trunks'},
-		{enum: 'user', title: 'Users'},
-		{enum: 'subscriber', title: 'Subscribers'},
-		{enum: 'session', title: 'Sessions'},
-		{enum: 'tenant', title: 'Tenants'},
-		{enum: 'token', title: 'Tokens'},
-		{enum: 'seats', title: 'Seats'},
-		{enum: 'TB', title: 'TB'},
-		{enum: 'GB', title: 'GB'},
-		{enum: 'MB', title: 'MB'}
-	],
-	AGGREGATION_FUNCTION: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Peak', title: 'Peak'},
-		{enum: 'Average', title: 'Average'}
-	],
-	TIME: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Day', title: 'Day'},
-		{enum: 'Month', title: 'Month'},
-		{enum: 'Hour', title: 'Hour'},
-		{enum: 'Minute', title: 'Minute'},
-		{enum: 'Second', title: 'Second'},
-		{enum: 'Milli-Second', title: 'Milli-Second'}
-	]
-
+    METRIC: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'BWTH', title: 'BWTH' },
+        { enum: 'Country', title: 'Country' },
+        { enum: 'Session', title: 'Session' },
+        { enum: 'LoB', title: 'LoB' },
+        { enum: 'Site', title: 'Site' },
+        { enum: 'Usage', title: 'Usage' }
+    ],
+    UNIT: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'trunk', title: 'Trunks' },
+        { enum: 'user', title: 'Users' },
+        { enum: 'subscriber', title: 'Subscribers' },
+        { enum: 'session', title: 'Sessions' },
+        { enum: 'tenant', title: 'Tenants' },
+        { enum: 'token', title: 'Tokens' },
+        { enum: 'seats', title: 'Seats' },
+        { enum: 'TB', title: 'TB' },
+        { enum: 'GB', title: 'GB' },
+        { enum: 'MB', title: 'MB' }
+    ],
+    AGGREGATION_FUNCTION: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Peak', title: 'Peak' },
+        { enum: 'Average', title: 'Average' }
+    ],
+    TIME: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Day', title: 'Day' },
+        { enum: 'Month', title: 'Month' },
+        { enum: 'Hour', title: 'Hour' },
+        { enum: 'Minute', title: 'Minute' },
+        { enum: 'Second', title: 'Second' },
+        { enum: 'Milli-Second', title: 'Milli-Second' }
+    ]
 };
 
 export const limitType = {
-	SERVICE_PROVIDER: 'ServiceProvider',
-	VENDOR: 'Vendor'
+    SERVICE_PROVIDER: 'ServiceProvider',
+    VENDOR: 'Vendor'
 };
 
 export const defaultState = {
-	LIMITS_EDITOR_DATA: {
-		metric: {choice: '', other: ''},
-	}
+    LIMITS_EDITOR_DATA: {
+        metric: { choice: '', other: '' }
+    }
 };
 
 export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
index 99d94a09cc..a0c3b0b1b1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
@@ -14,58 +14,73 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, LIMITS_FORM_NAME, defaultState} from './LimitEditorConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+    actionTypes,
+    LIMITS_FORM_NAME,
+    defaultState
+} from './LimitEditorConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.OPEN:
-			return {
-				...state,
-				data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA,
-				formReady: null,
-				formName: LIMITS_FORM_NAME,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'metric' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}]
-					},
-					'value' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					'unit' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'aggregationFunction' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'time' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				}
-			};
-		case actionTypes.CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.OPEN:
+            return {
+                ...state,
+                data: action.limitItem
+                    ? { ...action.limitItem }
+                    : defaultState.LIMITS_EDITOR_DATA,
+                formReady: null,
+                formName: LIMITS_FORM_NAME,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    metric: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            {
+                                type: 'requiredChoiceWithOther',
+                                data: optionInputOther.OTHER
+                            }
+                        ]
+                    },
+                    value: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    unit: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    aggregationFunction: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    time: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                }
+            };
+        case actionTypes.CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
index 4841d0335c..2667560935 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
@@ -18,99 +18,157 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import LimitEditor from './LimitEditor.js';
-import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js';
+import { NEW_LIMIT_TEMP_ID, selectValues } from './LimitEditorConstants.js';
 
-const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => {
-	const {name, description, value, metric, aggregationFunction = '', time = ''} = limit;
-	const timeLabel = time ? `per ${time}` : '';
-	let metricOption = selectValues.METRIC.find(item => item.enum === metric);
-	metricOption = metricOption ? metricOption.title : metric;
+const LimitItem = ({ isReadOnlyMode, limit, onDelete, onSelect }) => {
+    const {
+        name,
+        description,
+        value,
+        metric,
+        aggregationFunction = '',
+        time = ''
+    } = limit;
+    const timeLabel = time ? `per ${time}` : '';
+    let metricOption = selectValues.METRIC.find(item => item.enum === metric);
+    metricOption = metricOption ? metricOption.title : metric;
 
-	return (
-		<ListEditorItemView
-			onDelete={onDelete}
-			onSelect={onSelect}
-			isReadOnlyMode={isReadOnlyMode}>
-			<div className='list-editor-item-view-field limit-name'>
-				<div className='text name'>{name}</div>
-			</div>
+    return (
+        <ListEditorItemView
+            onDelete={onDelete}
+            onSelect={onSelect}
+            isReadOnlyMode={isReadOnlyMode}>
+            <div className="list-editor-item-view-field limit-name">
+                <div className="text name">{name}</div>
+            </div>
 
-			<div className='list-editor-item-view-field limit-description'>
-				<div className='text description'>{description}</div>
-			</div>
+            <div className="list-editor-item-view-field limit-description">
+                <div className="text description">{description}</div>
+            </div>
 
-			<div className='list-editor-item-view-field limit-metric-details'>
-				<div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
-			</div>
-		</ListEditorItemView>
-	);
+            <div className="list-editor-item-view-field limit-metric-details">
+                <div className="text description">{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
+            </div>
+        </ListEditorItemView>
+    );
 };
 
 class Limits extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
+    render() {
+        const {
+            isReadOnlyMode = false,
+            limitEditor,
+            limitsList = [],
+            onCloseLimitEditor,
+            selectedLimit
+        } = this.props;
+        let limitsNames = {};
+        for (let i = 0; i < limitsList.length; i++) {
+            limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
+        }
+        return (
+            <div className="license-model-limits-view">
+                <ListEditorView isReadOnlyMode={isReadOnlyMode}>
+                    {this.props.selectedLimit === NEW_LIMIT_TEMP_ID &&
+                        limitEditor.data && (
+                            <LimitEditor
+                                limitsNames={limitsNames}
+                                onCancel={onCloseLimitEditor}
+                                onSubmit={() => this.submit()}
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    {limitsList.length === 0 &&
+                        !limitEditor.data && (
+                            <div className="no-limits-text">
+                                {i18n('There are no limits')}
+                            </div>
+                        )}
+                    {limitsList.map(limit => (
+                        <div key={limit.id} className="limit-item-wrapper">
+                            <LimitItem
+                                onDelete={() => this.deleteLimit(limit)}
+                                onSelect={
+                                    selectedLimit
+                                        ? undefined
+                                        : () => this.props.onSelectLimit(limit)
+                                }
+                                clickable={!selectedLimit}
+                                isReadOnlyMode={isReadOnlyMode}
+                                limit={limit}
+                            />
+                            {limit.id === selectedLimit &&
+                                limitEditor.data && (
+                                    <LimitEditor
+                                        limitsNames={limitsNames}
+                                        onCancel={onCloseLimitEditor}
+                                        onSubmit={() => this.submit()}
+                                        isReadOnlyMode={isReadOnlyMode}
+                                    />
+                                )}
+                        </div>
+                    ))}
+                </ListEditorView>
+            </div>
+        );
+    }
 
-	state = {
-		localFilter: ''
-	};
+    submit() {
+        let {
+            onSubmit,
+            onCloseLimitEditor,
+            parent,
+            limitEditor,
+            licenseModelId,
+            version,
+            limitType
+        } = this.props;
+        onSubmit(
+            { type: limitType, ...limitEditor.data },
+            parent,
+            licenseModelId,
+            version
+        ).then(() => onCloseLimitEditor());
+    }
 
-	render() {
-		const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props;
-		let limitsNames = {};
-		for (let i = 0; i < limitsList.length; i++) {
-			limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
-		}
-		return (
-			<div className='license-model-limits-view'>
-				<ListEditorView isReadOnlyMode={isReadOnlyMode}>
-					{this.props.selectedLimit === NEW_LIMIT_TEMP_ID && limitEditor.data &&
-						<LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()} isReadOnlyMode={isReadOnlyMode}/>
-					}
-					{limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>}
-					{limitsList.map(limit =>
-					<div key={limit.id}  className='limit-item-wrapper'>
-						<LimitItem
-							onDelete={() => this.deleteLimit(limit)}
-							onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)}
-							clickable={!selectedLimit}
-							isReadOnlyMode={isReadOnlyMode}
-							limit={limit}/>
-						{limit.id === selectedLimit &&  limitEditor.data &&
-							<LimitEditor
-								limitsNames={limitsNames}
-								onCancel={onCloseLimitEditor}
-								onSubmit={ () => this.submit()}
-								isReadOnlyMode={isReadOnlyMode} />
-						}
-					</div> )}
-				</ListEditorView>
+    deleteLimit(limit) {
+        let {
+            onDelete,
+            parent,
+            licenseModelId,
+            version,
+            onCloseLimitEditor,
+            selectedLimit
+        } = this.props;
+        onDelete({
+            limit,
+            parent,
+            licenseModelId,
+            version,
+            onCloseLimitEditor,
+            selectedLimit
+        });
+    }
 
-			</div>
-		);
-	}
-
-	submit() {
-		let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props;
-		onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor());
-	}
-
-	deleteLimit(limit) {
-		let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props;
-		onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit});
-	}
-
-	filterList() {
-		let {limitsList = []} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return limitsList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return limitsList;
-		}
-	}
+    filterList() {
+        let { limitsList = [] } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return limitsList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return limitsList;
+        }
+    }
 }
 
 export default Limits;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
index 1b8ecb9d94..679f9975e5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
@@ -16,31 +16,29 @@
 
 // items/{itemId}/users
 
-let list = [
-	
-];
+let list = [];
 
 export default {
-	fetch() {
-		return Promise.resolve({
-			listCount: list.length,
-			results: list
-		});
-	},
+    fetch() {
+        return Promise.resolve({
+            listCount: list.length,
+            results: list
+        });
+    },
 
-	put(url, payload) {
-		// let {removedUsers, addedUsers} = payload;
-		// users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers);
-		payload.id = Math.random() * (1000 - 1) + 1;
-		list.push(payload);
-		return Promise.resolve();
-	},
+    put(url, payload) {
+        // let {removedUsers, addedUsers} = payload;
+        // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers);
+        payload.id = Math.random() * (1000 - 1) + 1;
+        list.push(payload);
+        return Promise.resolve();
+    },
 
-	destroy(url) {
-		const parts = url.split('/');
-		const id = parts[parts.length - 1];
-		let newList  = list.filter(item => item.id !== id);
-		list = newList;
-		return Promise.resolve();
-	}
-};
\ No newline at end of file
+    destroy(url) {
+        const parts = url.split('/');
+        const id = parts[parts.length - 1];
+        let newList = list.filter(item => item.id !== id);
+        list = newList;
+        return Promise.resolve();
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
index 54941aaaf0..2b10e426d1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
@@ -13,161 +13,214 @@
  * 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 LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
 import LicenseModelOverviewView from './LicenseModelOverviewView.jsx';
-import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+import {
+    overviewEditorHeaders,
+    selectedButton
+} from './LicenseModelOverviewConstants.js';
 import licenseModelOverviewActionHelper from './licenseModelOverviewActionHelper.js';
 
 export const mapStateToProps = ({
-	licenseModel: {
-		licenseModelEditor,
-		entitlementPool,
-		licenseAgreement,
-		featureGroup,
-		licenseKeyGroup,
-		licenseModelOverview
-	}
+    licenseModel: {
+        licenseModelEditor,
+        entitlementPool,
+        licenseAgreement,
+        featureGroup,
+        licenseKeyGroup,
+        licenseModelOverview
+    }
 }) => {
-
-	let modalHeader, licensingDataList;
-	let isDisplayModal = false;
-
-	const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => {
-		let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(item => {return item.id === licenseKeyGroupId;});
-		if (curLicenseKeyGroup) {
-			accum.push({
-				...curLicenseKeyGroup,
-				itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
-			});
-		}
-		return accum;
-	};
-
-	const reduceEntitlementPools = (accum, entitlementPoolId) => {
-		let curEntitlementPool = entitlementPool.entitlementPoolsList.find(item => {return item.id === entitlementPoolId;});
-		if (curEntitlementPool) {
-			accum.push ({
-				...curEntitlementPool,
-				itemType: overviewEditorHeaders.ENTITLEMENT_POOL
-			});
-		}
-		return accum;
-	};
-
-	const reduceFeatureGroups = (accum, featureGroupId) => {
-		let curFeatureGroup = featureGroup.featureGroupsList.find(item => {return item.id === featureGroupId;});
-		if (curFeatureGroup) {
-			let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = curFeatureGroup;
-			accum.push({
-				...curFeatureGroup,
-				itemType: overviewEditorHeaders.FEATURE_GROUP,
-				children: [
-					...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
-					...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
-				]
-			});
-		}
-		return accum;
-	};
-
-
-	const checkEP  = (accum, elem) => {
-		if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
-			accum.push({
-				...elem,
-				itemType: overviewEditorHeaders.ENTITLEMENT_POOL
-			});
-		}
-		return accum;
-	};
-
-	const checkLG = (accum, elem) => {
-		if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
-			accum.push({
-				...elem,
-				itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
-			});
-		}
-		return accum;
-	};
-
-	const checkFG = (accum, elem) => {
-		if (!elem.referencingLicenseAgreements || !elem.referencingLicenseAgreements.length) {
-			let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = elem;
-			accum.push({
-				...elem,
-				itemType: overviewEditorHeaders.FEATURE_GROUP,
-
-				children: [
-					...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
-					...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
-				]
-
-			});
-		}
-		return accum;
-	};
-
-
-
-	const mapLicenseAgreementData = licenseAgreement => {
-		let {featureGroupsIds = []} = licenseAgreement;
-		return {
-			...licenseAgreement,
-			itemType: overviewEditorHeaders.LICENSE_AGREEMENT,
-			children: featureGroupsIds.length ? featureGroupsIds.reduce(reduceFeatureGroups, []) : []
-		};
-	};
-
-	if (entitlementPool.entitlementPoolEditor && entitlementPool.entitlementPoolEditor.data) {
-		modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL;
-		isDisplayModal = true;
-	}else
-	if (licenseAgreement.licenseAgreementEditor && licenseAgreement.licenseAgreementEditor.data) {
-		modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT;
-		isDisplayModal = true;
-	}else
-	if (featureGroup.featureGroupEditor && featureGroup.featureGroupEditor.data) {
-		modalHeader = overviewEditorHeaders.FEATURE_GROUP;
-		isDisplayModal = true;
-	}else
-	if (licenseKeyGroup.licenseKeyGroupsEditor && licenseKeyGroup.licenseKeyGroupsEditor.data) {
-		modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP;
-		isDisplayModal = true;
-	}
-
-	let orphanDataList = [
-		...featureGroup.featureGroupsList.reduce(checkFG, []),
-		...entitlementPool.entitlementPoolsList.reduce(checkEP, []),
-		...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, [])
-	];
-
-	licensingDataList = licenseAgreement.licenseAgreementList && licenseAgreement.licenseAgreementList.length ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData) : [];
-	let selectedTab = licenseModelOverview.selectedTab;
-	// on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans
-	if (selectedTab === null) {
-		selectedTab = (licensingDataList.length) ? selectedButton.VLM_LIST_VIEW : selectedButton.NOT_IN_USE;
-	}
-
-	return {
-		isDisplayModal,
-		modalHeader,
-		licenseModelId: licenseModelEditor.data.id,
-		version: licenseModelEditor.data.version,
-		licensingDataList,
-		orphanDataList,
-		selectedTab
-	};
+    let modalHeader, licensingDataList;
+    let isDisplayModal = false;
+
+    const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => {
+        let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(
+            item => {
+                return item.id === licenseKeyGroupId;
+            }
+        );
+        if (curLicenseKeyGroup) {
+            accum.push({
+                ...curLicenseKeyGroup,
+                itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+            });
+        }
+        return accum;
+    };
+
+    const reduceEntitlementPools = (accum, entitlementPoolId) => {
+        let curEntitlementPool = entitlementPool.entitlementPoolsList.find(
+            item => {
+                return item.id === entitlementPoolId;
+            }
+        );
+        if (curEntitlementPool) {
+            accum.push({
+                ...curEntitlementPool,
+                itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+            });
+        }
+        return accum;
+    };
+
+    const reduceFeatureGroups = (accum, featureGroupId) => {
+        let curFeatureGroup = featureGroup.featureGroupsList.find(item => {
+            return item.id === featureGroupId;
+        });
+        if (curFeatureGroup) {
+            let {
+                entitlementPoolsIds = [],
+                licenseKeyGroupsIds = []
+            } = curFeatureGroup;
+            accum.push({
+                ...curFeatureGroup,
+                itemType: overviewEditorHeaders.FEATURE_GROUP,
+                children: [
+                    ...(entitlementPoolsIds.length
+                        ? entitlementPoolsIds.reduce(reduceEntitlementPools, [])
+                        : []),
+                    ...(licenseKeyGroupsIds.length
+                        ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, [])
+                        : [])
+                ]
+            });
+        }
+        return accum;
+    };
+
+    const checkEP = (accum, elem) => {
+        if (
+            !elem.referencingFeatureGroups ||
+            !elem.referencingFeatureGroups.length
+        ) {
+            accum.push({
+                ...elem,
+                itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+            });
+        }
+        return accum;
+    };
+
+    const checkLG = (accum, elem) => {
+        if (
+            !elem.referencingFeatureGroups ||
+            !elem.referencingFeatureGroups.length
+        ) {
+            accum.push({
+                ...elem,
+                itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+            });
+        }
+        return accum;
+    };
+
+    const checkFG = (accum, elem) => {
+        if (
+            !elem.referencingLicenseAgreements ||
+            !elem.referencingLicenseAgreements.length
+        ) {
+            let { entitlementPoolsIds = [], licenseKeyGroupsIds = [] } = elem;
+            accum.push({
+                ...elem,
+                itemType: overviewEditorHeaders.FEATURE_GROUP,
+
+                children: [
+                    ...(entitlementPoolsIds.length
+                        ? entitlementPoolsIds.reduce(reduceEntitlementPools, [])
+                        : []),
+                    ...(licenseKeyGroupsIds.length
+                        ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, [])
+                        : [])
+                ]
+            });
+        }
+        return accum;
+    };
+
+    const mapLicenseAgreementData = licenseAgreement => {
+        let { featureGroupsIds = [] } = licenseAgreement;
+        return {
+            ...licenseAgreement,
+            itemType: overviewEditorHeaders.LICENSE_AGREEMENT,
+            children: featureGroupsIds.length
+                ? featureGroupsIds.reduce(reduceFeatureGroups, [])
+                : []
+        };
+    };
+
+    if (
+        entitlementPool.entitlementPoolEditor &&
+        entitlementPool.entitlementPoolEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL;
+        isDisplayModal = true;
+    } else if (
+        licenseAgreement.licenseAgreementEditor &&
+        licenseAgreement.licenseAgreementEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT;
+        isDisplayModal = true;
+    } else if (
+        featureGroup.featureGroupEditor &&
+        featureGroup.featureGroupEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.FEATURE_GROUP;
+        isDisplayModal = true;
+    } else if (
+        licenseKeyGroup.licenseKeyGroupsEditor &&
+        licenseKeyGroup.licenseKeyGroupsEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP;
+        isDisplayModal = true;
+    }
+
+    let orphanDataList = [
+        ...featureGroup.featureGroupsList.reduce(checkFG, []),
+        ...entitlementPool.entitlementPoolsList.reduce(checkEP, []),
+        ...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, [])
+    ];
+
+    licensingDataList =
+        licenseAgreement.licenseAgreementList &&
+        licenseAgreement.licenseAgreementList.length
+            ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData)
+            : [];
+    let selectedTab = licenseModelOverview.selectedTab;
+    // on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans
+    if (selectedTab === null) {
+        selectedTab = licensingDataList.length
+            ? selectedButton.VLM_LIST_VIEW
+            : selectedButton.NOT_IN_USE;
+    }
+
+    return {
+        isDisplayModal,
+        modalHeader,
+        licenseModelId: licenseModelEditor.data.id,
+        version: licenseModelEditor.data.version,
+        licensingDataList,
+        orphanDataList,
+        selectedTab
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId}) => {
-	return {
-		onCallVCAction: action => {
-			LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action});
-		},
-		onTabSelect: (buttonTab) => licenseModelOverviewActionHelper.selectVLMListView(dispatch,{buttonTab})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId }) => {
+    return {
+        onCallVCAction: action => {
+            LicenseModelActionHelper.performVCAction(dispatch, {
+                licenseModelId,
+                action
+            });
+        },
+        onTabSelect: buttonTab =>
+            licenseModelOverviewActionHelper.selectVLMListView(dispatch, {
+                buttonTab
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseModelOverviewView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseModelOverviewView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
index 56b23384a7..b05da582f4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
@@ -16,27 +16,27 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const overviewItems = keyMirror({
-	LICENSE_AGREEMENTS: 'License Agreements',
-	FEATURE_GROUPS: 'Feature Groups',
-	ENTITLEMENT_POOLS: 'Entitlement Pools',
-	LICENSE_KEY_GROUPS: 'License Key Groups'
+    LICENSE_AGREEMENTS: 'License Agreements',
+    FEATURE_GROUPS: 'Feature Groups',
+    ENTITLEMENT_POOLS: 'Entitlement Pools',
+    LICENSE_KEY_GROUPS: 'License Key Groups'
 });
 
 export const overviewEditorHeaders = keyMirror({
-	LICENSE_AGREEMENT: 'License Agreement',
-	FEATURE_GROUP: 'Feature Group',
-	ENTITLEMENT_POOL: 'Entitlement Pool',
-	LICENSE_KEY_GROUP: 'License Key Group'
+    LICENSE_AGREEMENT: 'License Agreement',
+    FEATURE_GROUP: 'Feature Group',
+    ENTITLEMENT_POOL: 'Entitlement Pool',
+    LICENSE_KEY_GROUP: 'License Key Group'
 });
 
 export const actionTypes = keyMirror({
-	LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null,
-	LM_DATA_CHANGED: null
+    LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null,
+    LM_DATA_CHANGED: null
 });
 
 export const selectedButton = {
-	VLM_LIST_VIEW: 'VLM_LIST_VIEW',
-	NOT_IN_USE: 'NOT_IN_USE'
+    VLM_LIST_VIEW: 'VLM_LIST_VIEW',
+    NOT_IN_USE: 'NOT_IN_USE'
 };
 
 export const VLM_DESCRIPTION_FORM = 'VLMDEWSCRIPTIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
index 39109af9a3..6899360597 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
@@ -23,87 +23,137 @@ import EntitlementPoolsEditor from '../entitlementPools/EntitlementPoolsEditor.j
 import FeatureGroupEditor from '../featureGroups/FeatureGroupEditor.js';
 import LicenseAgreementEditor from '../licenseAgreement/LicenseAgreementEditor.js';
 import LicenseKeyGroupsEditor from '../licenseKeyGroups/LicenseKeyGroupsEditor.js';
-import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+import {
+    overviewEditorHeaders,
+    selectedButton
+} from './LicenseModelOverviewConstants.js';
 
 import SummaryView from './SummaryView.jsx';
 import VLMListView from './VLMListView.jsx';
 import ListButtons from './summary/ListButtons.jsx';
 
-
-const setModalClassName = (modalHeader) => {
-	switch (modalHeader) {
-		case overviewEditorHeaders.ENTITLEMENT_POOL:
-			return 'entitlement-pools-modal';
-		case overviewEditorHeaders.LICENSE_AGREEMENT:
-			return 'license-agreement-modal';
-		case overviewEditorHeaders.FEATURE_GROUP:
-			return 'feature-group-modal';
-		case overviewEditorHeaders.LICENSE_KEY_GROUP:
-			return 'license-key-groups-modal';
-		default:
-			return '';
-	}
+const setModalClassName = modalHeader => {
+    switch (modalHeader) {
+        case overviewEditorHeaders.ENTITLEMENT_POOL:
+            return 'entitlement-pools-modal';
+        case overviewEditorHeaders.LICENSE_AGREEMENT:
+            return 'license-agreement-modal';
+        case overviewEditorHeaders.FEATURE_GROUP:
+            return 'feature-group-modal';
+        case overviewEditorHeaders.LICENSE_KEY_GROUP:
+            return 'license-key-groups-modal';
+        default:
+            return '';
+    }
 };
 
 class LicenseModelOverviewView extends React.Component {
+    static propTypes = {
+        isDisplayModal: PropTypes.bool,
+        isReadOnlyMode: PropTypes.bool,
+        licenseModelId: PropTypes.string,
+        licensingDataList: PropTypes.array,
+        orphanDataList: PropTypes.array,
+        modalHeader: PropTypes.string,
+        selectedTab: PropTypes.string,
+        onTabSelect: PropTypes.func,
+        onCallVCAction: PropTypes.func,
+        onClose: PropTypes.func
+    };
 
-	static propTypes = {
-		isDisplayModal: PropTypes.bool,
-		isReadOnlyMode: PropTypes.bool,
-		licenseModelId: PropTypes.string,
-		licensingDataList: PropTypes.array,
-		orphanDataList: PropTypes.array,
-		modalHeader: PropTypes.string,
-		selectedTab: PropTypes.string,
-		onTabSelect: PropTypes.func,
-		onCallVCAction: PropTypes.func,
-		onClose: PropTypes.func
-	};
-
-	render() {
-		let {isDisplayModal, modalHeader, licensingDataList, selectedTab, onTabSelect, orphanDataList, isReadOnlyMode} = this.props;
-		let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE;
-		let dataList = selectedInUse ? licensingDataList : orphanDataList;
-		return(
-			<div className='license-model-overview'>
-				<SummaryView  isReadOnlyMode={isReadOnlyMode}/>
-				<div className={classNames('overview-list-section ', !selectedInUse ? 'overview-list-orphans' : '' )}>
-					<div className='vlm-list-tab-panel'>
-						<ListButtons onTabSelect={onTabSelect}
-							 selectedTab={selectedTab}
-							 hasOrphans={orphanDataList.length > 0}
-							 hasLicensing={licensingDataList.length > 0}/>
-					</div>
-					<VLMListView licensingDataList={dataList} showInUse={selectedInUse}/>
-				</div>
-				{
-					isDisplayModal &&
-					<Modal show={isDisplayModal} bsSize='large' animation={true} className={classNames('onborading-modal license-model-modal', setModalClassName(modalHeader))}>
-						<Modal.Header>
-							<Modal.Title>{`${i18n('Create New ')}${i18n(modalHeader)}`}</Modal.Title>
-						</Modal.Header>
-						<Modal.Body>
-							{this.renderModalBody(modalHeader)}
-						</Modal.Body>
-					</Modal>
-				}
-			</div>
-		);
-	}
+    render() {
+        let {
+            isDisplayModal,
+            modalHeader,
+            licensingDataList,
+            selectedTab,
+            onTabSelect,
+            orphanDataList,
+            isReadOnlyMode
+        } = this.props;
+        let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE;
+        let dataList = selectedInUse ? licensingDataList : orphanDataList;
+        return (
+            <div className="license-model-overview">
+                <SummaryView isReadOnlyMode={isReadOnlyMode} />
+                <div
+                    className={classNames(
+                        'overview-list-section ',
+                        !selectedInUse ? 'overview-list-orphans' : ''
+                    )}>
+                    <div className="vlm-list-tab-panel">
+                        <ListButtons
+                            onTabSelect={onTabSelect}
+                            selectedTab={selectedTab}
+                            hasOrphans={orphanDataList.length > 0}
+                            hasLicensing={licensingDataList.length > 0}
+                        />
+                    </div>
+                    <VLMListView
+                        licensingDataList={dataList}
+                        showInUse={selectedInUse}
+                    />
+                </div>
+                {isDisplayModal && (
+                    <Modal
+                        show={isDisplayModal}
+                        bsSize="large"
+                        animation={true}
+                        className={classNames(
+                            'onborading-modal license-model-modal',
+                            setModalClassName(modalHeader)
+                        )}>
+                        <Modal.Header>
+                            <Modal.Title>{`${i18n('Create New ')}${i18n(
+                                modalHeader
+                            )}`}</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            {this.renderModalBody(modalHeader)}
+                        </Modal.Body>
+                    </Modal>
+                )}
+            </div>
+        );
+    }
 
-	renderModalBody(modalHeader) {
-		let {licenseModelId, version, isReadOnlyMode} = this.props;
-		switch (modalHeader) {
-			case overviewEditorHeaders.ENTITLEMENT_POOL:
-				return <EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-			case overviewEditorHeaders.LICENSE_AGREEMENT:
-				return <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-			case overviewEditorHeaders.FEATURE_GROUP:
-				return <FeatureGroupEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-			case overviewEditorHeaders.LICENSE_KEY_GROUP:
-				return <LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-		}
-	}
+    renderModalBody(modalHeader) {
+        let { licenseModelId, version, isReadOnlyMode } = this.props;
+        switch (modalHeader) {
+            case overviewEditorHeaders.ENTITLEMENT_POOL:
+                return (
+                    <EntitlementPoolsEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+            case overviewEditorHeaders.LICENSE_AGREEMENT:
+                return (
+                    <LicenseAgreementEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+            case overviewEditorHeaders.FEATURE_GROUP:
+                return (
+                    <FeatureGroupEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+            case overviewEditorHeaders.LICENSE_KEY_GROUP:
+                return (
+                    <LicenseKeyGroupsEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+        }
+    }
 }
 
-export default  LicenseModelOverviewView;
+export default LicenseModelOverviewView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
index 4053f14ced..f416b0a07f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
@@ -13,24 +13,24 @@
  * 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {default as VendorDataView} from './summary/VendorDataView.js';
-import {default as SummaryCountList} from './summary/SummaryCountList.js';
+import { default as VendorDataView } from './summary/VendorDataView.js';
+import { default as SummaryCountList } from './summary/SummaryCountList.js';
 
 class SummaryView extends Component {
-	render() {
-		const {isReadOnlyMode} = this.props;
-		return(
-			<div className='overview-top-section'>
-				<div className='page-title'>{i18n('overview')}</div>
-				<div className='license-model-overview-top'>
-					<VendorDataView isReadOnlyMode={isReadOnlyMode}/>
-					<SummaryCountList isReadOnlyMode={isReadOnlyMode}/>
-				</div>
-			</div>
-		);
-	}
+    render() {
+        const { isReadOnlyMode } = this.props;
+        return (
+            <div className="overview-top-section">
+                <div className="page-title">{i18n('overview')}</div>
+                <div className="license-model-overview-top">
+                    <VendorDataView isReadOnlyMode={isReadOnlyMode} />
+                    <SummaryCountList isReadOnlyMode={isReadOnlyMode} />
+                </div>
+            </div>
+        );
+    }
 }
 
 export default SummaryView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
index 012bd6e158..d91960e6a3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
@@ -13,114 +13,130 @@
  * 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 PropTypes from 'prop-types';
-import {Collapse} from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
 import LicenseAgreement from './listItems/LicenseAgreement.jsx';
 import EntitlementPool from './listItems/EntitlementPool.jsx';
 import FeatureGroup from './listItems/FeatureGroup.jsx';
 import LicenseKeyGroup from './listItems/LicenseKeyGroup.jsx';
-import {overviewEditorHeaders} from './LicenseModelOverviewConstants.js';
+import { overviewEditorHeaders } from './LicenseModelOverviewConstants.js';
 
 class VLMListView extends Component {
+    static propTypes = {
+        licensingDataList: PropTypes.array,
+        showInUse: PropTypes.bool
+    };
 
-	static propTypes = {
-		licensingDataList: PropTypes.array,
-		showInUse: PropTypes.bool
-	};
+    state = {};
 
-	state = {
+    render() {
+        let { licensingDataList = [] } = this.props;
+        return (
+            <div className="vlm-list-view">
+                <div>
+                    <ul className="vlm-list" data-test-id="vlm-list">
+                        {licensingDataList.map(item =>
+                            this.renderLicensingItem(item)
+                        )}
+                    </ul>
+                </div>
+            </div>
+        );
+    }
 
-	};
+    renderLicensingItem(item) {
+        switch (item.itemType) {
+            case overviewEditorHeaders.LICENSE_AGREEMENT:
+                return this.renderLicenseAgreementItem(item);
+            case overviewEditorHeaders.FEATURE_GROUP:
+                return this.renderFeatureGroupItem(item);
+            case overviewEditorHeaders.LICENSE_KEY_GROUP:
+                return this.renderLicenseKeyGroupItem(item);
+            case overviewEditorHeaders.ENTITLEMENT_POOL:
+                return this.renderEntitlementPoolItem(item);
+            default:
+                return;
+        }
+    }
 
-	render() {
-		let {licensingDataList = []} = this.props;
-		return (
-			<div className='vlm-list-view'>
-				<div>
-					<ul className='vlm-list' data-test-id='vlm-list'>
-						{licensingDataList.map(item => this.renderLicensingItem(item))}
-					</ul>
-				</div>
-			</div>
-		);
-	}
+    renderLicenseAgreementItem(licenseAgreement) {
+        return (
+            <li key={licenseAgreement.id}>
+                <LicenseAgreement
+                    laData={licenseAgreement}
+                    isCollapsed={this.state[licenseAgreement.id]}
+                    onClick={event =>
+                        this.updateCollapsable(event, licenseAgreement.id)
+                    }
+                    isOrphan={!this.props.showInUse}
+                />
+                <Collapse in={this.state[licenseAgreement.id]}>
+                    <ul>
+                        {licenseAgreement.children &&
+                            licenseAgreement.children.map(item =>
+                                this.renderLicensingItem(item)
+                            )}
+                    </ul>
+                </Collapse>
+            </li>
+        );
+    }
 
-	renderLicensingItem(item) {
-		switch (item.itemType) {
-			case overviewEditorHeaders.LICENSE_AGREEMENT :
-				return this.renderLicenseAgreementItem(item);
-			case overviewEditorHeaders.FEATURE_GROUP :
-				return this.renderFeatureGroupItem(item);
-			case overviewEditorHeaders.LICENSE_KEY_GROUP :
-				return this.renderLicenseKeyGroupItem(item);
-			case overviewEditorHeaders.ENTITLEMENT_POOL:
-				return this.renderEntitlementPoolItem(item);
-			default:
-				return;
-		}
-	}
+    renderFeatureGroupItem(featureGroup) {
+        const { showInUse } = this.props;
+        return (
+            <li key={featureGroup.id}>
+                <FeatureGroup
+                    fgData={featureGroup}
+                    isCollapsed={this.state[featureGroup.id]}
+                    onClick={event =>
+                        this.updateCollapsable(event, featureGroup.id)
+                    }
+                    isOrphan={!this.props.showInUse}
+                />
+                {showInUse && (
+                    <Collapse in={this.state[featureGroup.id]}>
+                        <ul>
+                            {featureGroup.children &&
+                                featureGroup.children.map(item =>
+                                    this.renderLicensingItem(item)
+                                )}
+                        </ul>
+                    </Collapse>
+                )}
+            </li>
+        );
+    }
 
-	renderLicenseAgreementItem(licenseAgreement) {
-		return (
-			<li  key={licenseAgreement.id}>
-				<LicenseAgreement
-					laData={licenseAgreement}
-					isCollapsed={this.state[licenseAgreement.id]}
-					onClick={event => this.updateCollapsable(event, licenseAgreement.id) }
-					isOrphan={!this.props.showInUse}/>
-				<Collapse in={this.state[licenseAgreement.id]}>
-					<ul>
-						{licenseAgreement.children && licenseAgreement.children.map(item => this.renderLicensingItem(item))}
-					</ul>
-				</Collapse>
-			</li>
-		);
-	}
+    renderEntitlementPoolItem(entitlementPool) {
+        return (
+            <li key={entitlementPool.id}>
+                <EntitlementPool
+                    epData={entitlementPool}
+                    isOrphan={!this.props.showInUse}
+                />
+            </li>
+        );
+    }
 
-	renderFeatureGroupItem(featureGroup) {
-		const {showInUse} = this.props;
-		return (
-			<li key={featureGroup.id}>
-				<FeatureGroup
-					fgData={featureGroup}
-					isCollapsed={this.state[featureGroup.id]}
-					onClick={event=> this.updateCollapsable(event, featureGroup.id) }
-					isOrphan={!this.props.showInUse}/>
-				{
-					showInUse && <Collapse in={this.state[featureGroup.id]}>
-					<ul>
-						{featureGroup.children && featureGroup.children.map(item => this.renderLicensingItem(item))}
+    renderLicenseKeyGroupItem(licenseKeyGroup) {
+        return (
+            <li key={licenseKeyGroup.id}>
+                <LicenseKeyGroup
+                    lkgData={licenseKeyGroup}
+                    isOrphan={!this.props.showInUse}
+                />
+            </li>
+        );
+    }
 
-					</ul>
-				</Collapse>
-				}
-			</li>
-		);
-	}
-
-	renderEntitlementPoolItem(entitlementPool) {
-		return (
-			<li key={entitlementPool.id}>
-				<EntitlementPool epData={entitlementPool} isOrphan={!this.props.showInUse}/>
-			</li>
-		);
-	}
-
-	renderLicenseKeyGroupItem(licenseKeyGroup) {
-		return (
-			<li key={licenseKeyGroup.id}>
-				<LicenseKeyGroup lkgData={licenseKeyGroup} isOrphan={!this.props.showInUse}/>
-			</li>
-		);
-	}
-
-	updateCollapsable(event, id) {
-		event.stopPropagation();
-		let obj = {};
-		obj[id] = !this.state[id];
-		this.setState(obj);
-	}
+    updateCollapsable(event, id) {
+        event.stopPropagation();
+        let obj = {};
+        obj[id] = !this.state[id];
+        this.setState(obj);
+    }
 }
 
 export default VLMListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
index af9bc22b07..0e9fca7b4a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
@@ -13,27 +13,27 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './LicenseModelOverviewConstants.js';
+import { actionTypes } from './LicenseModelOverviewConstants.js';
 
 export default {
-	selectVLMListView(dispatch, {buttonTab}) {
-		dispatch({
-			type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED,
-			buttonTab
-		});
-	},
+    selectVLMListView(dispatch, { buttonTab }) {
+        dispatch({
+            type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED,
+            buttonTab
+        });
+    },
 
-	editDescriptionOpen(dispatch, {description}) {
-		dispatch({
-			type: actionTypes.LM_DATA_CHANGED,
-			description
-		});
-	},
+    editDescriptionOpen(dispatch, { description }) {
+        dispatch({
+            type: actionTypes.LM_DATA_CHANGED,
+            description
+        });
+    },
 
-	editDescriptionClose(dispatch) {
-		dispatch({
-			type: actionTypes.LM_DATA_CHANGED,
-			description: undefined
-		});
-	}
+    editDescriptionClose(dispatch) {
+        dispatch({
+            type: actionTypes.LM_DATA_CHANGED,
+            description: undefined
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
index 34d2ee6db5..60eba401c7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
@@ -13,33 +13,46 @@
  * 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {extractUnits} from '../../entitlementPools/EntitlementPoolsConstants.js';
+import { extractUnits } from '../../entitlementPools/EntitlementPoolsConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class EntitlementPool extends Component {
-	render() {
-		let {epData: {name, description, thresholdValue, thresholdUnits}, isOrphan} = this.props;
-		return (
-			<div className={`vlm-list-item vlm-list-item-ep ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-ep'>
-				{!isOrphan && <ArrowCol/>}
-				<IconCol className='ep-icon' text='EP'/>
-				<ItemInfo name={name} description={description}/>
-				<AdditionalDataCol>
-					{thresholdValue && <AdditionalDataElement
-						className='vlm-list-item-entitlement-metric'
-						name={i18n('Entitlement')}
-						value={`${thresholdValue} ${extractUnits(thresholdUnits)}`}/>
-					}
-				</AdditionalDataCol>
-			</div>
-		);
-	}
-
+    render() {
+        let {
+            epData: { name, description, thresholdValue, thresholdUnits },
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                className={`vlm-list-item vlm-list-item-ep ${
+                    isOrphan ? 'orphan-list-item' : ''
+                }`}
+                data-test-id="vlm-list-item-ep">
+                {!isOrphan && <ArrowCol />}
+                <IconCol className="ep-icon" text="EP" />
+                <ItemInfo name={name} description={description} />
+                <AdditionalDataCol>
+                    {thresholdValue && (
+                        <AdditionalDataElement
+                            className="vlm-list-item-entitlement-metric"
+                            name={i18n('Entitlement')}
+                            value={`${thresholdValue} ${extractUnits(
+                                thresholdUnits
+                            )}`}
+                        />
+                    )}
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 }
 
 export default EntitlementPool;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
index 6d97dea358..df1d813408 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
@@ -13,49 +13,83 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
-import {overviewEditorHeaders} from '../LicenseModelOverviewConstants.js';
+import React, { Component } from 'react';
+import { overviewEditorHeaders } from '../LicenseModelOverviewConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class FeatureGroup extends Component {
-	render() {
-		let {fgData: {name, manufacturerReferenceNumber, description, children = []}, isCollapsed, onClick, isOrphan} = this.props;
-		return (
-			<div 
-				onClick={e => onClick(e)} 
-				className={`vlm-list-item vlm-list-item-fg ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''}`} data-test-id='vlm-list-item-fg'>
-				{!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />}
-				<IconCol className='fg-icon' text='FG'/>
-				<ItemInfo name={name} description={description}>
-					<div className='children-count'>
-						<span className='count-value'>
-							{i18n('Entitlement Pools: ')}
-							<span data-test-id='vlm-list-ep-count-value'>
-								{`${children.filter(child => child.itemType === overviewEditorHeaders.ENTITLEMENT_POOL).length}`}
-							</span>
-						</span>
-						<span className='fg-pipeline-separator'>|</span>
-						<span className='count-value'>
-								{i18n('License Key Groups: ')}
-								<span data-test-id='vlm-list-lkg-count-value'>
-									{`${children.filter(child => child.itemType === overviewEditorHeaders.LICENSE_KEY_GROUP).length}`}
-								</span>
-						</span>
-					</div>
-				</ItemInfo>
-				<AdditionalDataCol>
-					<AdditionalDataElement
-						name={i18n('Manufacturer Reference Number')}
-						value={manufacturerReferenceNumber}
-						className='vlm-list-item-sku'/>
-				</AdditionalDataCol>
-			</div>
-		);
-	}
+    render() {
+        let {
+            fgData: {
+                name,
+                manufacturerReferenceNumber,
+                description,
+                children = []
+            },
+            isCollapsed,
+            onClick,
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                onClick={e => onClick(e)}
+                className={`vlm-list-item vlm-list-item-fg ${
+                    isOrphan ? 'orphan-list-item' : ''
+                } ${children.length && !isOrphan ? 'clickable' : ''}`}
+                data-test-id="vlm-list-item-fg">
+                {!isOrphan && (
+                    <ArrowCol
+                        isCollapsed={isCollapsed}
+                        length={children.length}
+                    />
+                )}
+                <IconCol className="fg-icon" text="FG" />
+                <ItemInfo name={name} description={description}>
+                    <div className="children-count">
+                        <span className="count-value">
+                            {i18n('Entitlement Pools: ')}
+                            <span data-test-id="vlm-list-ep-count-value">
+                                {`${
+                                    children.filter(
+                                        child =>
+                                            child.itemType ===
+                                            overviewEditorHeaders.ENTITLEMENT_POOL
+                                    ).length
+                                }`}
+                            </span>
+                        </span>
+                        <span className="fg-pipeline-separator">|</span>
+                        <span className="count-value">
+                            {i18n('License Key Groups: ')}
+                            <span data-test-id="vlm-list-lkg-count-value">
+                                {`${
+                                    children.filter(
+                                        child =>
+                                            child.itemType ===
+                                            overviewEditorHeaders.LICENSE_KEY_GROUP
+                                    ).length
+                                }`}
+                            </span>
+                        </span>
+                    </div>
+                </ItemInfo>
+                <AdditionalDataCol>
+                    <AdditionalDataElement
+                        name={i18n('Manufacturer Reference Number')}
+                        value={manufacturerReferenceNumber}
+                        className="vlm-list-item-sku"
+                    />
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 }
 
 export default FeatureGroup;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
index dfbbe20d69..b409776c27 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
@@ -13,44 +13,73 @@
  * 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-import {optionsInputValues} from '../../licenseAgreement/LicenseAgreementConstants.js';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { optionsInputValues } from '../../licenseAgreement/LicenseAgreementConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class LicenseAgreement extends Component {
-	render() {
-		let {laData: {name, description, licenseTerm, children = []}, isCollapsed, onClick, isOrphan} = this.props;
-		return (
-			<div 
-				onClick={e => onClick(e)} 
-				className={`vlm-list-item vlm-list-item-la ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''} `} 
-				data-test-id='vlm-list-la-item'>
-				{!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />}
-				<IconCol className='la-icon' text='LA'/>
-				<ItemInfo name={name} description={description}>
-					<div className='children-count'>
-						<span className='count-value'>{i18n('Feature Groups: ')}<span data-test-id='vlm-list-fg-count-value'>{`${children.length}`}</span></span>
-					</div>
-				</ItemInfo>
-				<AdditionalDataCol>
-					<AdditionalDataElement
-						name={i18n('License Model Type')}
-						value={this.extractValue(licenseTerm)}/>
-				</AdditionalDataCol>
-			</div>
-		);
-	}
+    render() {
+        let {
+            laData: { name, description, licenseTerm, children = [] },
+            isCollapsed,
+            onClick,
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                onClick={e => onClick(e)}
+                className={`vlm-list-item vlm-list-item-la ${
+                    isOrphan ? 'orphan-list-item' : ''
+                } ${children.length && !isOrphan ? 'clickable' : ''} `}
+                data-test-id="vlm-list-la-item">
+                {!isOrphan && (
+                    <ArrowCol
+                        isCollapsed={isCollapsed}
+                        length={children.length}
+                    />
+                )}
+                <IconCol className="la-icon" text="LA" />
+                <ItemInfo name={name} description={description}>
+                    <div className="children-count">
+                        <span className="count-value">
+                            {i18n('Feature Groups: ')}
+                            <span data-test-id="vlm-list-fg-count-value">{`${
+                                children.length
+                            }`}</span>
+                        </span>
+                    </div>
+                </ItemInfo>
+                <AdditionalDataCol>
+                    <AdditionalDataElement
+                        name={i18n('License Model Type')}
+                        value={this.extractValue(licenseTerm)}
+                    />
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 
-	extractValue(item) {
-		if (item === undefined) {return '';} //TODO fix it later
+    extractValue(item) {
+        if (item === undefined) {
+            return '';
+        } //TODO fix it later
 
-		return  item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
-	}
+        return item
+            ? item.choice === optionInputOther.OTHER
+              ? item.other
+              : InputOptions.getTitleByName(optionsInputValues, item.choice)
+            : '';
+    }
 }
 
 export default LicenseAgreement;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
index b1036aae23..555acf8dbe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
@@ -13,36 +13,53 @@
  * 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {extractValue, getOperationalScopes} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js';
+import {
+    extractValue,
+    getOperationalScopes
+} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class LicenseKeyGroup extends Component {
-	render() {
-		let {lkgData: {name, description, operationalScope, type}, isOrphan} = this.props;
-		return (
-			<div className={`vlm-list-item vlm-list-item-lkg ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-lkg'>
-				{!isOrphan && <ArrowCol/>}
-				<IconCol className='lkg-icon' text='LKG'/>
-				<ItemInfo name={name} description={description}/>
-				<AdditionalDataCol>
-					{operationalScope && operationalScope.choices && <AdditionalDataElement
-						className='vlm-list-item-operational-scope'
-						name={i18n('Operational Scope')}
-						value={getOperationalScopes(operationalScope)}/>}
-					<AdditionalDataElement
-						className='vlm-list-item-group-type'
-						name={i18n('Type')}
-						value={extractValue(type)}/>
-				</AdditionalDataCol>
-			</div>
-		);
-	}
-
+    render() {
+        let {
+            lkgData: { name, description, operationalScope, type },
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                className={`vlm-list-item vlm-list-item-lkg ${
+                    isOrphan ? 'orphan-list-item' : ''
+                }`}
+                data-test-id="vlm-list-item-lkg">
+                {!isOrphan && <ArrowCol />}
+                <IconCol className="lkg-icon" text="LKG" />
+                <ItemInfo name={name} description={description} />
+                <AdditionalDataCol>
+                    {operationalScope &&
+                        operationalScope.choices && (
+                            <AdditionalDataElement
+                                className="vlm-list-item-operational-scope"
+                                name={i18n('Operational Scope')}
+                                value={getOperationalScopes(operationalScope)}
+                            />
+                        )}
+                    <AdditionalDataElement
+                        className="vlm-list-item-group-type"
+                        name={i18n('Type')}
+                        value={extractValue(type)}
+                    />
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 }
 
 export default LicenseKeyGroup;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
index ffc0991354..0f9c783eac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
@@ -16,37 +16,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function AdditionalDataCol({children}) {
-	return (
-		<div className='list-item-section list-item-additional-data-col'>
-			<div className='additional-data-col-border'></div>
-			<div className='additional-data'>
-				{children}
-			</div>
-		</div>
-	);
+function AdditionalDataCol({ children }) {
+    return (
+        <div className="list-item-section list-item-additional-data-col">
+            <div className="additional-data-col-border" />
+            <div className="additional-data">{children}</div>
+        </div>
+    );
 }
 
 AdditionalDataCol.propTypes = {
-	children: PropTypes.oneOfType([
-		PropTypes.arrayOf(PropTypes.node),
-		PropTypes.node
-	])
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
 };
 
-function AdditionalDataElement({className, name, value}) {
-	return (
-		<div className={className}>
-			<span className='additional-data-name'>{name}: </span>
-			<span className='additional-data-value'>{value}</span>
-		</div>
-	);
+function AdditionalDataElement({ className, name, value }) {
+    return (
+        <div className={className}>
+            <span className="additional-data-name">{name}: </span>
+            <span className="additional-data-value">{value}</span>
+        </div>
+    );
 }
 
 AdditionalDataElement.propTypes = {
-	name: PropTypes.string,
-	value: PropTypes.string,
-	className: PropTypes.string
+    name: PropTypes.string,
+    value: PropTypes.string,
+    className: PropTypes.string
 };
 
-export {AdditionalDataCol, AdditionalDataElement};
+export { AdditionalDataCol, AdditionalDataElement };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
index 29aec64bdd..de12eae7d5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
@@ -17,20 +17,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-function ArrowCol ({isCollapsed, length}) {
-	return (
-		<div className='list-item-section list-item-arrow-col'>
-			<div className={classNames('arrow-icon', {'chevron': length > 0},
-				{'down': (length > 0 && isCollapsed)},
-				{'right': (length > 0 && (!isCollapsed))})} >
-			</div>
-		</div>
-	);
+function ArrowCol({ isCollapsed, length }) {
+    return (
+        <div className="list-item-section list-item-arrow-col">
+            <div
+                className={classNames(
+                    'arrow-icon',
+                    { chevron: length > 0 },
+                    { down: length > 0 && isCollapsed },
+                    { right: length > 0 && !isCollapsed }
+                )}
+            />
+        </div>
+    );
 }
 
 ArrowCol.propTypes = {
-	isCollapsed: PropTypes.bool,
-	length: PropTypes.number
+    isCollapsed: PropTypes.bool,
+    length: PropTypes.number
 };
 
 export default ArrowCol;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
index 826248e510..61eeb03496 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
@@ -15,12 +15,14 @@
  */
 import React from 'react';
 
-function IconCol({className, text}) {
-	return (
-		<div className='list-item-section list-item-icon-col'>
-			<div className={`overview-list-icon ${className ? className : ''}`}>{text}</div>
-		</div>
-	);
+function IconCol({ className, text }) {
+    return (
+        <div className="list-item-section list-item-icon-col">
+            <div className={`overview-list-icon ${className ? className : ''}`}>
+                {text}
+            </div>
+        </div>
+    );
 }
 
 export default IconCol;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
index 95ae123974..2d2cc8f754 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
@@ -16,25 +16,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function ItemInfo({name, description, children}) {
-	return (
-		<div className='list-item-section vlm-item-info'>
-			<div className='vlm-list-item-title'>
-				<div className='item-name' data-test-id='vlm-list-item-name'>{name}</div>
-				{children}
-			</div>
-			<div className='vlm-list-item-description'>{description}</div>
-		</div>
-	);
+function ItemInfo({ name, description, children }) {
+    return (
+        <div className="list-item-section vlm-item-info">
+            <div className="vlm-list-item-title">
+                <div className="item-name" data-test-id="vlm-list-item-name">
+                    {name}
+                </div>
+                {children}
+            </div>
+            <div className="vlm-list-item-description">{description}</div>
+        </div>
+    );
 }
 
 ItemInfo.propTypes = {
-	name: PropTypes.string,
-	description: PropTypes.string,
-	children: PropTypes.oneOfType([
-		PropTypes.arrayOf(PropTypes.node),
-		PropTypes.node
-	])
+    name: PropTypes.string,
+    description: PropTypes.string,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
 };
 
 export default ItemInfo;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
index af759f1206..04a00177d3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
@@ -18,42 +18,54 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class LicenseModelDescriptionEdit extends React.Component {
-	render() {
-		//TODO check if buttons
-		let {onDataChanged, description, genericFieldInfo} = this.props;
-		let {isValid, errorText} = genericFieldInfo.description;
-		let saveButtonClassName = isValid ? 'description-save' : 'description-save disabled';
-		return(
-			<div className='vendor-description-edit'>
+    render() {
+        //TODO check if buttons
+        let { onDataChanged, description, genericFieldInfo } = this.props;
+        let { isValid, errorText } = genericFieldInfo.description;
+        let saveButtonClassName = isValid
+            ? 'description-save'
+            : 'description-save disabled';
+        return (
+            <div className="vendor-description-edit">
+                <Input
+                    onChange={description => onDataChanged({ description })}
+                    value={description}
+                    isValid={isValid}
+                    errorText={errorText}
+                    className="description-edit-textarea"
+                    type="textarea"
+                />
+                <div className="buttons-row">
+                    <div className="buttons-wrapper">
+                        <div
+                            onClick={() => this.submit()}
+                            className={saveButtonClassName}
+                            data-test-id="vlm-summary-vendor-desc-save-btn">
+                            {i18n('Save')}
+                        </div>
+                        <div
+                            onClick={() => this.onClose()}
+                            className="description-button"
+                            data-test-id="vlm-summary-vendor-desc-cancel-btn">
+                            {i18n('Cancel')}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
-				<Input
-					onChange={description => onDataChanged({description})}
-					value={description}
-					isValid={isValid}
-					errorText={errorText}
-					className='description-edit-textarea'
-					type='textarea'/>
-				<div className='buttons-row'>
-					<div className='buttons-wrapper'>
-						<div onClick={() => this.submit()}  className={saveButtonClassName} data-test-id='vlm-summary-vendor-desc-save-btn'>{i18n('Save')}</div>
-						<div onClick={() => this.onClose()} className='description-button' data-test-id='vlm-summary-vendor-desc-cancel-btn'>{i18n('Cancel')}</div>
-					</div>
-				</div>
-			</div>
-		);
-	}
+    onClose() {
+        this.props.onClose();
+    }
 
-	onClose() {
-		this.props.onClose();
-	}
-
-	submit() {
-		let {onSubmit, data, description} = this.props;
-		onSubmit({
-			...data,
-			description: description.trim()
-		});
-	}
+    submit() {
+        let { onSubmit, data, description } = this.props;
+        onSubmit({
+            ...data,
+            description: description.trim()
+        });
+    }
 }
 
 export default LicenseModelDescriptionEdit;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
index 3fcac3c1d8..d422d5d4b2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
@@ -15,37 +15,39 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {selectedButton} from '../LicenseModelOverviewConstants.js';
+import { selectedButton } from '../LicenseModelOverviewConstants.js';
 import Tabs from 'sdc-ui/lib/react/Tabs.js';
 import Tab from 'sdc-ui/lib/react/Tab.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-function ListButtons ({onTabSelect, selectedTab, hasOrphans, hasLicensing}) {
-	// no data, no tabs
-	if (!hasLicensing && !hasOrphans) {
-		return null;
-	}
-	return (
-		<Tabs 
-			onTabClick={(tabId) => onTabSelect(tabId)}
-			activeTab={selectedTab}
-			className='overview-buttons-section'
-			type='header' >
-			<Tab
-				tabId={selectedButton.VLM_LIST_VIEW}
-				title={i18n('Connections List')}
-				data-test-id='vlm-overview-vlmlist-tab' />
-			<Tab
-				tabId={selectedButton.NOT_IN_USE}
-				title={i18n('Orphans List')}
-				data-test-id='vlm-overview-orphans-tab' />
-		</Tabs>
-	);
+function ListButtons({ onTabSelect, selectedTab, hasOrphans, hasLicensing }) {
+    // no data, no tabs
+    if (!hasLicensing && !hasOrphans) {
+        return null;
+    }
+    return (
+        <Tabs
+            onTabClick={tabId => onTabSelect(tabId)}
+            activeTab={selectedTab}
+            className="overview-buttons-section"
+            type="header">
+            <Tab
+                tabId={selectedButton.VLM_LIST_VIEW}
+                title={i18n('Connections List')}
+                data-test-id="vlm-overview-vlmlist-tab"
+            />
+            <Tab
+                tabId={selectedButton.NOT_IN_USE}
+                title={i18n('Orphans List')}
+                data-test-id="vlm-overview-orphans-tab"
+            />
+        </Tabs>
+    );
 }
 
 ListButtons.propTypes = {
-	onTabSelect: PropTypes.func,
-	selectedInUse: PropTypes.bool
+    onTabSelect: PropTypes.func,
+    selectedInUse: PropTypes.bool
 };
 
 export default ListButtons;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
index 50c547e042..144d9bcc1b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
@@ -16,19 +16,43 @@
 import React from 'react';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-function  SummaryCountItem ({name, counter, onAdd, onNavigate, isReadOnlyMode}) {
-	//TODO check for buttons
-	return(
-		<div className='summary-count-item'>
-			<div className='summary-name-and-count' onClick={onNavigate}>
-				<span className='item-name' onClick={onNavigate}>{name}</span>
-				<span className='item-count' onClick={onNavigate} data-test-id={'vlm-summary-vendor-counter-' + name.toLowerCase().replace(/\s/g,'-')}>({counter})</span>
-			</div>
-			<SVGIcon name='plusCircle' disabled={isReadOnlyMode} className={isReadOnlyMode ? 'disabled' : ''}
-				color='secondary' onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/>
-		</div>
-	);
+function SummaryCountItem({
+    name,
+    counter,
+    onAdd,
+    onNavigate,
+    isReadOnlyMode
+}) {
+    //TODO check for buttons
+    return (
+        <div className="summary-count-item">
+            <div className="summary-name-and-count" onClick={onNavigate}>
+                <span className="item-name" onClick={onNavigate}>
+                    {name}
+                </span>
+                <span
+                    className="item-count"
+                    onClick={onNavigate}
+                    data-test-id={
+                        'vlm-summary-vendor-counter-' +
+                        name.toLowerCase().replace(/\s/g, '-')
+                    }>
+                    ({counter})
+                </span>
+            </div>
+            <SVGIcon
+                name="plusCircle"
+                disabled={isReadOnlyMode}
+                className={isReadOnlyMode ? 'disabled' : ''}
+                color="secondary"
+                onClick={onAdd}
+                data-test-id={
+                    'vlm-summary-vendor-add-btn-' +
+                    name.toLowerCase().replace(/\s/g, '-')
+                }
+            />
+        </div>
+    );
 }
 
 export default SummaryCountItem;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
index 15b6649543..711bb7a374 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
@@ -14,123 +14,158 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 import EntitlementPoolsActionHelper from '../../entitlementPools/EntitlementPoolsActionHelper.js';
 import LicenseAgreementActionHelper from '../../licenseAgreement/LicenseAgreementActionHelper.js';
 import LicenseKeyGroupsActionHelper from '../../licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
 import FeatureGroupsActionHelper from '../../featureGroups/FeatureGroupsActionHelper.js';
 
-import {overviewItems} from '../LicenseModelOverviewConstants.js';
+import { overviewItems } from '../LicenseModelOverviewConstants.js';
 import SummaryCountItem from './SummaryCountItem.jsx';
 
 export const mapStateToProps = ({
-	licenseModel: {
-		licenseModelEditor,
-		licenseAgreement: {licenseAgreementList},
-		featureGroup: {featureGroupsList},
-		entitlementPool: {entitlementPoolsList},
-		licenseKeyGroup: {licenseKeyGroupsList}
-	}
+    licenseModel: {
+        licenseModelEditor,
+        licenseAgreement: { licenseAgreementList },
+        featureGroup: { featureGroupsList },
+        entitlementPool: { entitlementPoolsList },
+        licenseKeyGroup: { licenseKeyGroupsList }
+    }
 }) => {
+    let { vendorName, description, id, version } = licenseModelEditor.data;
+    let counts = [
+        {
+            name: overviewItems.LICENSE_AGREEMENTS,
+            count: licenseAgreementList.length
+        },
+        { name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length },
+        {
+            name: overviewItems.ENTITLEMENT_POOLS,
+            count: entitlementPoolsList.length
+        },
+        {
+            name: overviewItems.LICENSE_KEY_GROUPS,
+            count: licenseKeyGroupsList.length
+        }
+    ];
 
-	let {vendorName, description, id, version} = licenseModelEditor.data;
-	let counts = [
-		{name: overviewItems.LICENSE_AGREEMENTS, count: licenseAgreementList.length},
-		{name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length},
-		{name: overviewItems.ENTITLEMENT_POOLS, count: entitlementPoolsList.length},
-		{name: overviewItems.LICENSE_KEY_GROUPS, count: licenseKeyGroupsList.length},
-	];
-
-	return {
-		vendorName,
-		licenseModelId: id,
-		description,
-		counts,
-		version
-	};
-
+    return {
+        vendorName,
+        licenseModelId: id,
+        description,
+        counts,
+        version
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onEditorOpenClick: (name, licenseModelId, version) => {
-			switch (name) {
-				case overviewItems.ENTITLEMENT_POOLS:
-					EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch);
-					break;
-				case overviewItems.FEATURE_GROUPS:
-					FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version});
-					break;
-				case overviewItems.LICENSE_AGREEMENTS:
-					LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version});
-					break;
-				case overviewItems.LICENSE_KEY_GROUPS:
-					LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch);
-					break;
-				default:
-					break;
-			}
-		},
-		onNavigateClick: ({name, licenseModelId, version}) => {
-			let screenToNavigate;
-			switch (name) {
-				case overviewItems.ENTITLEMENT_POOLS:
-					screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS;
-					break;
-				case overviewItems.FEATURE_GROUPS:
-					screenToNavigate = enums.SCREEN.FEATURE_GROUPS;
-					break;
-				case overviewItems.LICENSE_AGREEMENTS:
-					screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS;
-					break;
-				case overviewItems.LICENSE_KEY_GROUPS:
-					screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS;
-					break;
-				default:
-					break;
-			}
-			ScreensHelper.loadScreen(dispatch, {
-				screen: screenToNavigate, screenType: screenTypes.LICENSE_MODEL,
-				props: {licenseModelId, version}
-			});
-		}
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onEditorOpenClick: (name, licenseModelId, version) => {
+            switch (name) {
+                case overviewItems.ENTITLEMENT_POOLS:
+                    EntitlementPoolsActionHelper.openEntitlementPoolsEditor(
+                        dispatch
+                    );
+                    break;
+                case overviewItems.FEATURE_GROUPS:
+                    FeatureGroupsActionHelper.openFeatureGroupsEditor(
+                        dispatch,
+                        {
+                            licenseModelId,
+                            version
+                        }
+                    );
+                    break;
+                case overviewItems.LICENSE_AGREEMENTS:
+                    LicenseAgreementActionHelper.openLicenseAgreementEditor(
+                        dispatch,
+                        {
+                            licenseModelId,
+                            version
+                        }
+                    );
+                    break;
+                case overviewItems.LICENSE_KEY_GROUPS:
+                    LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(
+                        dispatch
+                    );
+                    break;
+                default:
+                    break;
+            }
+        },
+        onNavigateClick: ({ name, licenseModelId, version }) => {
+            let screenToNavigate;
+            switch (name) {
+                case overviewItems.ENTITLEMENT_POOLS:
+                    screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS;
+                    break;
+                case overviewItems.FEATURE_GROUPS:
+                    screenToNavigate = enums.SCREEN.FEATURE_GROUPS;
+                    break;
+                case overviewItems.LICENSE_AGREEMENTS:
+                    screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS;
+                    break;
+                case overviewItems.LICENSE_KEY_GROUPS:
+                    screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS;
+                    break;
+                default:
+                    break;
+            }
+            ScreensHelper.loadScreen(dispatch, {
+                screen: screenToNavigate,
+                screenType: screenTypes.LICENSE_MODEL,
+                props: { licenseModelId, version }
+            });
+        }
+    };
 };
 
 export class SummaryCountList extends React.Component {
+    render() {
+        let { counts } = this.props;
+        return (
+            <div className="summary-count-list">
+                {counts.map(item => this.renderItem(item))}
+            </div>
+        );
+    }
 
-	render() {
-		let {counts} = this.props;
-		return(
-			<div className='summary-count-list'>
-				{counts.map(item => this.renderItem(item))}
-			</div>
-		);
-	}
-
-	renderItem(item){
-		const {name, count} = item;
-		const {isReadOnlyMode} = this.props;
-		return(
-			<SummaryCountItem isReadOnlyMode={isReadOnlyMode} name={name} counter={count} onNavigate={() => this.onNavigate(name)} onAdd={() => this.onAdd(name)} key={name} />
-		);
-	}
+    renderItem(item) {
+        const { name, count } = item;
+        const { isReadOnlyMode } = this.props;
+        return (
+            <SummaryCountItem
+                isReadOnlyMode={isReadOnlyMode}
+                name={name}
+                counter={count}
+                onNavigate={() => this.onNavigate(name)}
+                onAdd={() => this.onAdd(name)}
+                key={name}
+            />
+        );
+    }
 
-	onAdd(name) {
-		let {onEditorOpenClick, licenseModelId, isReadOnlyMode, version} = this.props;
-		if (!isReadOnlyMode) {
-			onEditorOpenClick(name, licenseModelId, version);
-		}
-	}
+    onAdd(name) {
+        let {
+            onEditorOpenClick,
+            licenseModelId,
+            isReadOnlyMode,
+            version
+        } = this.props;
+        if (!isReadOnlyMode) {
+            onEditorOpenClick(name, licenseModelId, version);
+        }
+    }
 
-	onNavigate(name) {
-		let {onNavigateClick, licenseModelId, version} = this.props;
-		onNavigateClick({licenseModelId, name, version});
-	}
+    onNavigate(name) {
+        let { onNavigateClick, licenseModelId, version } = this.props;
+        onNavigateClick({ licenseModelId, name, version });
+    }
 }
 
 export default connect(mapStateToProps, mapActionsToProps)(SummaryCountList);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
index 616355de41..62fc2c3cb3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
@@ -13,8 +13,8 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
@@ -23,89 +23,139 @@ import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
 import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
 import LicenseModelDescriptionEdit from './LicenseModelDescriptionEdit.jsx';
-import {VLM_DESCRIPTION_FORM} from '../LicenseModelOverviewConstants.js';
+import { VLM_DESCRIPTION_FORM } from '../LicenseModelOverviewConstants.js';
 
 export const mapStateToProps = ({
-	licenseModel: {
-		licenseModelEditor: {data},
-		licenseModelOverview: {descriptionEditor: {data: descriptionData = {}, genericFieldInfo}}
-	}
+    licenseModel: {
+        licenseModelEditor: { data },
+        licenseModelOverview: {
+            descriptionEditor: { data: descriptionData = {}, genericFieldInfo }
+        }
+    }
 }) => {
-	let {description} = descriptionData;
-	return {
-		data,
-		description,
-		genericFieldInfo
-	};
+    let { description } = descriptionData;
+    return {
+        data,
+        description,
+        genericFieldInfo
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VLM_DESCRIPTION_FORM}),
-		onCancel: () => licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
-		onSubmit: (licenseModel) => {
-			licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
-			LicenseModelActionHelper.saveLicenseModel(dispatch, {licenseModel});
-		},
-		onVendorDescriptionEdit: description => licenseModelOverviewActionHelper.editDescriptionOpen(dispatch,{description})
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: VLM_DESCRIPTION_FORM
+            }),
+        onCancel: () =>
+            licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
+        onSubmit: licenseModel => {
+            licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
+            LicenseModelActionHelper.saveLicenseModel(dispatch, {
+                licenseModel
+            });
+        },
+        onVendorDescriptionEdit: description =>
+            licenseModelOverviewActionHelper.editDescriptionOpen(dispatch, {
+                description
+            })
+    };
 };
 
 export class VendorDataView extends Component {
-	render() {
-		let {data: {vendorName}, description, isReadOnlyMode} = this.props;
-		return (
-			<div className='vendor-data-view'>
-				<div className='vendor-title'>vendor</div>
-				<div className='vendor-name' data-test-id='vlm-summary-vendor-name'>{vendorName}</div>
-				{
-					description !== undefined && !isReadOnlyMode ? this.renderDescriptionEdit() : this.renderDescription()
-				}
-			</div>
-		);
-	}
+    render() {
+        let { data: { vendorName }, description, isReadOnlyMode } = this.props;
+        return (
+            <div className="vendor-data-view">
+                <div className="vendor-title">vendor</div>
+                <div
+                    className="vendor-name"
+                    data-test-id="vlm-summary-vendor-name">
+                    {vendorName}
+                </div>
+                {description !== undefined && !isReadOnlyMode
+                    ? this.renderDescriptionEdit()
+                    : this.renderDescription()}
+            </div>
+        );
+    }
 
-	componentWillUnmount() {
-		this.props.onCancel();
-	}
+    componentWillUnmount() {
+        this.props.onCancel();
+    }
 
+    renderDescription() {
+        let {
+            data: { description },
+            onVendorDescriptionEdit,
+            isReadOnlyMode
+        } = this.props;
+        return (
+            <div
+                onClick={() => {
+                    if (!isReadOnlyMode) {
+                        onVendorDescriptionEdit(description);
+                    }
+                }}
+                className={
+                    !isReadOnlyMode
+                        ? 'vendor-description'
+                        : 'vendor-description-readonly'
+                }>
+                {this.renderOverlay(
+                    <div
+                        className="description-data"
+                        data-test-id="vlm-summary-vendor-description">
+                        {description}
+                        {!isReadOnlyMode && <SVGIcon name="pencil" />}
+                    </div>
+                )}
+            </div>
+        );
+    }
 
-	renderDescription() {
-		let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props;
-		return (
-			<div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
-				{this.renderOverlay(
-					<div className='description-data' data-test-id='vlm-summary-vendor-description'>
-						{description}
-						{!isReadOnlyMode && <SVGIcon name='pencil'/>}
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	renderDescriptionEdit() {
-		let {onCancel, onDataChanged, onSubmit, description, genericFieldInfo, data} = this.props;
-		return(
-			<LicenseModelDescriptionEdit onClose={onCancel} onDataChanged={onDataChanged} onSubmit={onSubmit} data={data} genericFieldInfo={genericFieldInfo} description={description}/>
-		);
-	}
-
-	renderOverlay(children) {
-		let {data: {description}, isReadOnlyMode} = this.props;
-		if (isReadOnlyMode) {
-			return (
-				<OverlayTrigger
-					placement='bottom'
-					overlay={<Tooltip className='vendor-description-tooltip' id='tooltip-bottom'>{description}</Tooltip>}
-					delayShow={400}>
-					{children}
-				</OverlayTrigger>
-			);
-		}
-		return children;
-	}
+    renderDescriptionEdit() {
+        let {
+            onCancel,
+            onDataChanged,
+            onSubmit,
+            description,
+            genericFieldInfo,
+            data
+        } = this.props;
+        return (
+            <LicenseModelDescriptionEdit
+                onClose={onCancel}
+                onDataChanged={onDataChanged}
+                onSubmit={onSubmit}
+                data={data}
+                genericFieldInfo={genericFieldInfo}
+                description={description}
+            />
+        );
+    }
 
+    renderOverlay(children) {
+        let { data: { description }, isReadOnlyMode } = this.props;
+        if (isReadOnlyMode) {
+            return (
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={
+                        <Tooltip
+                            className="vendor-description-tooltip"
+                            id="tooltip-bottom">
+                            {description}
+                        </Tooltip>
+                    }
+                    delayShow={400}>
+                    {children}
+                </OverlayTrigger>
+            );
+        }
+        return children;
+    }
 }
 
 export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
index 345c91e01b..7f361d2742 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
@@ -16,71 +16,96 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {catalogItemTypes, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell} from 'sdc-ui/lib/react';
-import {TooltipWrapper} from './onboardingCatalog/Tooltip.jsx';
+import {
+    catalogItemTypes,
+    migrationStatusMapper
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import {
+    Tile,
+    TileInfo,
+    TileInfoLine,
+    TileFooter,
+    TileFooterCell
+} from 'sdc-ui/lib/react';
+import { TooltipWrapper } from './onboardingCatalog/Tooltip.jsx';
 
 const ITEM_TYPE_MAP = {
-	[catalogItemTypes.LICENSE_MODEL]: {
-		headerText: i18n('VLM'),
-		contentIconName: 'vlm',
-		color: 'purple'
-	},
-	[catalogItemTypes.SOFTWARE_PRODUCT]: {
-		headerText: i18n('VSP'),
-		contentIconName: 'vsp',
-		color: 'blue'
-	}
+    [catalogItemTypes.LICENSE_MODEL]: {
+        headerText: i18n('VLM'),
+        contentIconName: 'vlm',
+        color: 'purple'
+    },
+    [catalogItemTypes.SOFTWARE_PRODUCT]: {
+        headerText: i18n('VSP'),
+        contentIconName: 'vsp',
+        color: 'blue'
+    }
 };
 
-const CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) => {
+const CatalogItemDetails = ({
+    catalogItemData,
+    catalogItemTypeClass,
+    onSelect,
+    onMigrate
+}) => {
+    let { vendorName, name, owner } = catalogItemData;
+    let { headerText, color, contentIconName } = ITEM_TYPE_MAP[
+        catalogItemTypeClass
+    ];
 
-	let {vendorName, name, owner} = catalogItemData;
-	let {headerText, color, contentIconName} = ITEM_TYPE_MAP[catalogItemTypeClass];
-
-	let onClick = (e) => {
-		e.stopPropagation();
-		e.preventDefault();
-		if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) {
-			onMigrate({softwareProduct: catalogItemData});
-		} else {
-			onSelect();
-		}
-	};
-
-	return (
-		<Tile
-			headerText={headerText}
-			headerColor={color}
-			iconName={contentIconName}
-			iconColor={color}
-			onClick={onClick}
-			dataTestId={catalogItemTypeClass}>
-			<TileInfo data-test-id='catalog-item-content'>
-				{vendorName &&
-					<TileInfoLine type='supertitle'>
-						<TooltipWrapper className='with-overlay' tooltipClassName='tile-super-info' dataTestId='catalog-item-vendor-name'>{vendorName}</TooltipWrapper>
-					</TileInfoLine>
-				}
-				<TileInfoLine type='title'>
-					<TooltipWrapper className='with-overlay' tooltipClassName='tile-title-info' dataTestId='catalog-item-name'>{name}</TooltipWrapper>
-				</TileInfoLine>
-			</TileInfo>
-				<TileFooter>
-				{owner &&
-					<TileFooterCell>Owner - {owner}</TileFooterCell>
-				}
-				</TileFooter>
-		</Tile>
-	);
+    let onClick = e => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (
+            catalogItemData.isOldVersion &&
+            catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION
+        ) {
+            onMigrate({ softwareProduct: catalogItemData });
+        } else {
+            onSelect();
+        }
+    };
 
+    return (
+        <Tile
+            headerText={headerText}
+            headerColor={color}
+            iconName={contentIconName}
+            iconColor={color}
+            onClick={onClick}
+            dataTestId={catalogItemTypeClass}>
+            <TileInfo data-test-id="catalog-item-content">
+                {vendorName && (
+                    <TileInfoLine type="supertitle">
+                        <TooltipWrapper
+                            className="with-overlay"
+                            tooltipClassName="tile-super-info"
+                            dataTestId="catalog-item-vendor-name">
+                            {vendorName}
+                        </TooltipWrapper>
+                    </TileInfoLine>
+                )}
+                <TileInfoLine type="title">
+                    <TooltipWrapper
+                        className="with-overlay"
+                        tooltipClassName="tile-title-info"
+                        dataTestId="catalog-item-name">
+                        {name}
+                    </TooltipWrapper>
+                </TileInfoLine>
+            </TileInfo>
+            <TileFooter>
+                {owner && <TileFooterCell>Owner - {owner}</TileFooterCell>}
+            </TileFooter>
+        </Tile>
+    );
 };
 
 CatalogItemDetails.PropTypes = {
-	catalogItemData: PropTypes.obj,
-	catalogItemTypeClass: PropTypes.string,
-	onSelect: PropTypes.func,
-	onMigrate: PropTypes.func
+    catalogItemData: PropTypes.obj,
+    catalogItemTypeClass: PropTypes.string,
+    onSelect: PropTypes.func,
+    onMigrate: PropTypes.func
 };
 
 export default CatalogItemDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
index 156adfc5e7..d01b9d0d04 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
@@ -1,33 +1,48 @@
 import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
-import {select, withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf, action } from '@kadira/storybook';
+import { select, withKnobs } from '@kadira/storybook-addon-knobs';
 import CatalogItemDetails from './CatalogItemDetails.jsx';
-import {catalogItemTypes, catalogItemStatuses} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {FinalizedLicenseModelFactory} from 'test-utils/factories/licenseModel/LicenseModelFactories.js';
+import {
+    catalogItemTypes,
+    catalogItemStatuses
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { FinalizedLicenseModelFactory } from 'test-utils/factories/licenseModel/LicenseModelFactories.js';
 
 const stories = storiesOf('CatalogTiles', module);
 stories.addDecorator(withKnobs);
 
 const types = [
-	catalogItemTypes.LICENSE_MODEL,
-	catalogItemTypes.SOFTWARE_PRODUCT
+    catalogItemTypes.LICENSE_MODEL,
+    catalogItemTypes.SOFTWARE_PRODUCT
 ];
 
 function selectType() {
-	return select('Item type' , types, types[0]);
+    return select('Item type', types, types[0]);
 }
 
-let vlm = {...FinalizedLicenseModelFactory.build({name: 'Test-VLM'}), itemStatus: catalogItemStatuses.DRAFT};
-let certifiedVlm = {...vlm, itemStatus: catalogItemStatuses.CERTIFIED};
+let vlm = {
+    ...FinalizedLicenseModelFactory.build({ name: 'Test-VLM' }),
+    itemStatus: catalogItemStatuses.DRAFT
+};
+let certifiedVlm = { ...vlm, itemStatus: catalogItemStatuses.CERTIFIED };
 
-stories
-	.add('preview', () => (
-		<div className='catalog-view'>
-			<div className='catalog-list'>
-				<div className='catalog-items'>
-					<CatalogItemDetails catalogItemData={vlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/>
-					<CatalogItemDetails catalogItemData={certifiedVlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/>
-				</div>
-			</div>
-		</div>
-	));
+stories.add('preview', () => (
+    <div className="catalog-view">
+        <div className="catalog-list">
+            <div className="catalog-items">
+                <CatalogItemDetails
+                    catalogItemData={vlm}
+                    catalogItemTypeClass={selectType()}
+                    onSelect={action('onSelect')}
+                    onMigrate={action('onMigrate')}
+                />
+                <CatalogItemDetails
+                    catalogItemData={certifiedVlm}
+                    catalogItemTypeClass={selectType()}
+                    onSelect={action('onSelect')}
+                    onMigrate={action('onMigrate')}
+                />
+            </div>
+        </div>
+    </div>
+));
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
index 10d855c862..b00ceeb48f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
@@ -17,37 +17,61 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-const SoftwareProductListHeader = ({selectedVendor, onBack}) => (
-	<div className='vendor-page-header'>
-		<SVGIcon name='back' onClick={onBack}/>
-		<div className='tab-separator' />
-		<div className='vendor-name'>{selectedVendor.name}</div>
-	</div>
+const SoftwareProductListHeader = ({ selectedVendor, onBack }) => (
+    <div className="vendor-page-header">
+        <SVGIcon name="back" onClick={onBack} />
+        <div className="tab-separator" />
+        <div className="vendor-name">{selectedVendor.name}</div>
+    </div>
 );
 
-const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => (
-	<div className='catalog-list'>
-		{vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>}
-		<div className='catalog-items'>
-			{ (onAddVLM || onAddVSP) &&
-				<div className='create-catalog-item-wrapper'>
-					{onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-vlm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>}
-					{onAddVSP && <CreateItemTile onClick={() => onAddVSP()} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>}
-				</div>
-			}
-			{children}
-		</div>
-	</div>
+const CatalogList = ({ children, onAddVLM, onAddVSP, vendorPageOptions }) => (
+    <div className="catalog-list">
+        {vendorPageOptions && (
+            <SoftwareProductListHeader
+                onBack={vendorPageOptions.onBack}
+                selectedVendor={vendorPageOptions.selectedVendor}
+            />
+        )}
+        <div className="catalog-items">
+            {(onAddVLM || onAddVSP) && (
+                <div className="create-catalog-item-wrapper">
+                    {onAddVLM && (
+                        <CreateItemTile
+                            onClick={onAddVLM}
+                            dataTestId={'catalog-add-new-vlm'}
+                            className="vlm-type"
+                            title={i18n('CREATE NEW VLM')}
+                        />
+                    )}
+                    {onAddVSP && (
+                        <CreateItemTile
+                            onClick={() => onAddVSP()}
+                            dataTestId={'catalog-add-new-vsp'}
+                            className="vsp-type"
+                            title={i18n('CREATE NEW VSP')}
+                        />
+                    )}
+                </div>
+            )}
+            {children}
+        </div>
+    </div>
 );
 
-const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => {
-	//TODO check for buttons
-	return (
-			<div className={`create-catalog-item tile ${className}`} onClick={onClick} data-test-id={dataTestId}>
-				<div className='create-item-plus-icon'><SVGIcon name='plus' /></div>
-				<div className='create-item-text'>{title}</div>
-			</div>
-	);
+const CreateItemTile = ({ onClick, dataTestId, title, className = '' }) => {
+    //TODO check for buttons
+    return (
+        <div
+            className={`create-catalog-item tile ${className}`}
+            onClick={onClick}
+            data-test-id={dataTestId}>
+            <div className="create-item-plus-icon">
+                <SVGIcon name="plus" />
+            </div>
+            <div className="create-item-text">{title}</div>
+        </div>
+    );
 };
 
 export default CatalogList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
index 1ef9c82822..90496c9be4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
@@ -14,49 +14,52 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import {modalMapper, catalogItemTypes, catalogItemTypeClasses } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import {
+    modalMapper,
+    catalogItemTypes,
+    catalogItemTypeClasses
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
 import LicenseModelCreation from '../licenseModel/creation/LicenseModelCreation.js';
 import SoftwareProductCreation from '../softwareProduct/creation/SoftwareProductCreation.js';
 
-class CatalogModal extends React.Component{
+class CatalogModal extends React.Component {
+    getModalDetails() {
+        const { modalToShow } = this.props;
+        switch (modalToShow) {
+            case catalogItemTypes.LICENSE_MODEL:
+                return {
+                    title: i18n('New License Model'),
+                    element: <LicenseModelCreation />
+                };
+            case catalogItemTypes.SOFTWARE_PRODUCT:
+                return {
+                    title: i18n('New Software Product'),
+                    element: <SoftwareProductCreation />
+                };
+        }
+    }
 
-	getModalDetails(){
-		const {modalToShow} = this.props;
-		switch (modalToShow) {
-			case catalogItemTypes.LICENSE_MODEL:
-				return {
-					title: i18n('New License Model'),
-					element: <LicenseModelCreation/>
-				};
-			case catalogItemTypes.SOFTWARE_PRODUCT:
-				return {
-					title: i18n('New Software Product'),
-					element: <SoftwareProductCreation/>
-				};
-		}
-	}
+    render() {
+        const { modalToShow } = this.props;
+        const modalDetails = this.getModalDetails(modalToShow);
 
-	render(){
-		const {modalToShow} = this.props;
-		const modalDetails = this.getModalDetails(modalToShow);
-
-		return (
-			<Modal
-				show={Boolean(modalDetails)}
-				className={`${catalogItemTypeClasses[modalMapper[modalToShow]]}-modal`}>
-				<Modal.Header>
-					<Modal.Title>{modalDetails && modalDetails.title}</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-					{
-						modalDetails && modalDetails.element
-					}
-				</Modal.Body>
-			</Modal>
-		);
-	}
+        return (
+            <Modal
+                show={Boolean(modalDetails)}
+                className={`${
+                    catalogItemTypeClasses[modalMapper[modalToShow]]
+                }-modal`}>
+                <Modal.Header>
+                    <Modal.Title>
+                        {modalDetails && modalDetails.title}
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>{modalDetails && modalDetails.element}</Modal.Body>
+            </Modal>
+        );
+    }
 }
 
 export default CatalogModal;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
index ea6cf5e9bc..771c0eb6c1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
@@ -15,42 +15,66 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {filterCatalogItemsByType} from './onboardingCatalog/OnboardingCatalogUtils.js';
+import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { filterCatalogItemsByType } from './onboardingCatalog/OnboardingCatalogUtils.js';
 import CatalogList from './CatalogList.jsx';
 import CatalogItemDetails from './CatalogItemDetails.jsx';
 
-class DetailsCatalogView extends React.Component{
+class DetailsCatalogView extends React.Component {
+    static propTypes = {
+        VLMList: PropTypes.array,
+        VSPList: PropTypes.array,
+        onSelectVLM: PropTypes.func.isRequired,
+        onSelectVSP: PropTypes.func.isRequired,
+        onAddVLM: PropTypes.func,
+        onAddVSP: PropTypes.func,
+        filter: PropTypes.string.isRequired
+    };
 
-	static propTypes = {
-		VLMList: PropTypes.array,
-		VSPList: PropTypes.array,
-		onSelectVLM: PropTypes.func.isRequired,
-		onSelectVSP: PropTypes.func.isRequired,
-		onAddVLM: PropTypes.func,
-		onAddVSP: PropTypes.func,
-		filter: PropTypes.string.isRequired
-	};
+    renderCatalogItems({ items, type, filter, onSelect, onMigrate, users }) {
+        return filterCatalogItemsByType({ items, filter }).map(item => (
+            <CatalogItemDetails
+                key={item.id}
+                catalogItemData={item}
+                catalogItemTypeClass={type}
+                onMigrate={onMigrate}
+                onSelect={() => onSelect(item, users)}
+            />
+        ));
+    }
 
-	renderCatalogItems({items, type, filter, onSelect, onMigrate, users}){
-		return filterCatalogItemsByType({items, filter}).map(item =>
-			<CatalogItemDetails
-				key={item.id}
-				catalogItemData={item}
-				catalogItemTypeClass={type}
-				onMigrate={onMigrate}
-				onSelect={() => onSelect(item, users)} />
-		);
-	}
-
-	render() {
-		let {VLMList, VSPList, users, onAddVSP, onAddVLM, onSelectVLM, onSelectVSP, filter = '', onMigrate} = this.props;
-		return (
-			<CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
-				{this.renderCatalogItems({items: VLMList, type: catalogItemTypes.LICENSE_MODEL, filter, onSelect: onSelectVLM, onMigrate, users})}
-				{this.renderCatalogItems({items: VSPList, type: catalogItemTypes.SOFTWARE_PRODUCT, filter, onSelect: onSelectVSP, onMigrate, users})}
-			</CatalogList>
-		);
-	}
+    render() {
+        let {
+            VLMList,
+            VSPList,
+            users,
+            onAddVSP,
+            onAddVLM,
+            onSelectVLM,
+            onSelectVSP,
+            filter = '',
+            onMigrate
+        } = this.props;
+        return (
+            <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
+                {this.renderCatalogItems({
+                    items: VLMList,
+                    type: catalogItemTypes.LICENSE_MODEL,
+                    filter,
+                    onSelect: onSelectVLM,
+                    onMigrate,
+                    users
+                })}
+                {this.renderCatalogItems({
+                    items: VSPList,
+                    type: catalogItemTypes.SOFTWARE_PRODUCT,
+                    filter,
+                    onSelect: onSelectVSP,
+                    onMigrate,
+                    users
+                })}
+            </CatalogList>
+        );
+    }
 }
 export default DetailsCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
index 9535147a46..a1e0018114 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
@@ -14,109 +14,121 @@
  * limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import OnboardView from './OnboardView.jsx';
 import OnboardingCatalogActionHelper from './onboardingCatalog/OnboardingCatalogActionHelper.js';
 import OnboardActionHelper from './OnboardActionHelper.js';
 import LicenseModelCreationActionHelper from '../licenseModel/creation/LicenseModelCreationActionHelper.js';
 import SoftwareProductCreationActionHelper from '../softwareProduct/creation/SoftwareProductCreationActionHelper.js';
 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
-import {tabsMapping} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {itemsType} from './filter/FilterConstants.js';
+import { tabsMapping } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemsType } from './filter/FilterConstants.js';
 
 export const mapStateToProps = ({
-	onboard: {
-		onboardingCatalog,
-		activeTab,
-		searchValue,
-		filter
-	},
-	licenseModelList,
-	users,
-	archivedLicenseModelList,
-	archivedSoftwareProductList,
-	finalizedLicenseModelList,
-	softwareProductList,
-	finalizedSoftwareProductList
+    onboard: { onboardingCatalog, activeTab, searchValue, filter },
+    licenseModelList,
+    users,
+    archivedLicenseModelList,
+    archivedSoftwareProductList,
+    finalizedLicenseModelList,
+    softwareProductList,
+    finalizedSoftwareProductList
 }) => {
+    const fullSoftwareProducts = softwareProductList
+        .filter(
+            vsp =>
+                !finalizedSoftwareProductList.find(fvsp => fvsp.id === vsp.id)
+        )
+        .concat(finalizedSoftwareProductList);
 
-	const fullSoftwareProducts = softwareProductList.filter(vsp =>
-		!finalizedSoftwareProductList
-			.find(fvsp => fvsp.id === vsp.id)
-	).concat(finalizedSoftwareProductList);
+    const reduceLicenseModelList = (accum, vlm) => {
+        let currentSoftwareProductList = sortByStringProperty(
+            fullSoftwareProducts.filter(vsp => vsp.vendorId === vlm.id),
+            'name'
+        );
+        accum.push({ ...vlm, softwareProductList: currentSoftwareProductList });
+        return accum;
+    };
 
-	const reduceLicenseModelList = (accum, vlm) => {
-		let currentSoftwareProductList = sortByStringProperty(
-			fullSoftwareProducts
-				.filter(vsp => vsp.vendorId === vlm.id),
-			'name'
-		);
-		accum.push({...vlm, softwareProductList: currentSoftwareProductList});
-		return accum;
-	};
+    licenseModelList = sortByStringProperty(
+        licenseModelList.reduce(reduceLicenseModelList, []),
+        'name'
+    );
 
-	licenseModelList = sortByStringProperty(
-		licenseModelList
-			.reduce(reduceLicenseModelList, []),
-		'name'
-	);
+    finalizedLicenseModelList = sortByStringProperty(
+        finalizedLicenseModelList.reduce(reduceLicenseModelList, []),
+        'name'
+    );
 
-	finalizedLicenseModelList = sortByStringProperty(
-		finalizedLicenseModelList
-			.reduce(reduceLicenseModelList, []),
-		'name'
-	);
+    const fullLicenseModelList = licenseModelList
+        .filter(
+            vlm => !finalizedLicenseModelList.find(fvlm => fvlm.id === vlm.id)
+        )
+        .concat(finalizedLicenseModelList);
 
-	const fullLicenseModelList = licenseModelList.filter(vlm =>
-		!finalizedLicenseModelList
-			.find(fvlm => fvlm.id === vlm.id)
-	).concat(finalizedLicenseModelList);
-
-	let {activeTab: catalogActiveTab, vendorCatalog: {vspOverlay, selectedVendor}} = onboardingCatalog;
-	if (filter.byVendorView) {
-		catalogActiveTab = tabsMapping.BY_VENDOR;
-	} 
-	else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) {
-		catalogActiveTab = tabsMapping.ARCHIVE;
-	}
-
-	return {
-		finalizedLicenseModelList,
-		finalizedSoftwareProductList,
-		licenseModelList,
-		softwareProductList,
-		archivedLicenseModelList,
-		archivedSoftwareProductList,
-		fullLicenseModelList,
-		activeTab,
-		catalogActiveTab,
-		searchValue,
-		vspOverlay,
-		selectedVendor,
-		users: users.usersList
-	};
+    let {
+        activeTab: catalogActiveTab,
+        vendorCatalog: { vspOverlay, selectedVendor }
+    } = onboardingCatalog;
+    if (filter.byVendorView) {
+        catalogActiveTab = tabsMapping.BY_VENDOR;
+    } else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) {
+        catalogActiveTab = tabsMapping.ARCHIVE;
+    }
 
+    return {
+        finalizedLicenseModelList,
+        finalizedSoftwareProductList,
+        licenseModelList,
+        softwareProductList,
+        archivedLicenseModelList,
+        archivedSoftwareProductList,
+        fullLicenseModelList,
+        activeTab,
+        catalogActiveTab,
+        searchValue,
+        vspOverlay,
+        selectedVendor,
+        users: users.usersList
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-
-	return {
-		onSelectLicenseModel({id: licenseModelId, name}, users, tab) {
-			OnboardActionHelper.loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab);
-		},
-		onSelectSoftwareProduct(softwareProduct, users, tab) {
-			OnboardActionHelper.loadVSPScreen(dispatch, softwareProduct, users, tab);
-		},
-		onAddSoftwareProductClick: (vendorId) => SoftwareProductCreationActionHelper.open(dispatch, vendorId),
-		onAddLicenseModelClick: () => LicenseModelCreationActionHelper.open(dispatch),
-		onVspOverlayChange: (vendor) => OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor),
-		closeVspOverlay: () => OnboardingCatalogActionHelper.closeVspOverlay(dispatch),
-		onCatalogTabClick: (tab) => OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab),
-		onTabClick: (tab) => OnboardActionHelper.changeActiveTab(dispatch, tab),
-		onSearch: (searchValue) => OnboardActionHelper.changeSearchValue(dispatch, searchValue),
-		onVendorSelect: (vendor) => OnboardingCatalogActionHelper.onVendorSelect(dispatch, {vendor}),
-		onMigrate: ({softwareProduct}) => OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct)
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onSelectLicenseModel({ id: licenseModelId, name }, users, tab) {
+            OnboardActionHelper.loadVLMScreen(
+                dispatch,
+                { id: licenseModelId, name },
+                users,
+                tab
+            );
+        },
+        onSelectSoftwareProduct(softwareProduct, users, tab) {
+            OnboardActionHelper.loadVSPScreen(
+                dispatch,
+                softwareProduct,
+                users,
+                tab
+            );
+        },
+        onAddSoftwareProductClick: vendorId =>
+            SoftwareProductCreationActionHelper.open(dispatch, vendorId),
+        onAddLicenseModelClick: () =>
+            LicenseModelCreationActionHelper.open(dispatch),
+        onVspOverlayChange: vendor =>
+            OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor),
+        closeVspOverlay: () =>
+            OnboardingCatalogActionHelper.closeVspOverlay(dispatch),
+        onCatalogTabClick: tab =>
+            OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab),
+        onTabClick: tab => OnboardActionHelper.changeActiveTab(dispatch, tab),
+        onSearch: searchValue =>
+            OnboardActionHelper.changeSearchValue(dispatch, searchValue),
+        onVendorSelect: vendor =>
+            OnboardingCatalogActionHelper.onVendorSelect(dispatch, { vendor }),
+        onMigrate: ({ softwareProduct }) =>
+            OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(OnboardView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
index 892056855f..87ec2d148e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
@@ -13,97 +13,146 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {tabsMapping, actionTypes} from './OnboardConstants.js';
+import { tabsMapping, actionTypes } from './OnboardConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
 import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
 
 const OnboardActionHelper = {
-	resetOnboardStore(dispatch) {
-		dispatch({
-			type: actionTypes.RESET_ONBOARD_STORE
-		});
-	},
-	changeActiveTab(dispatch, activeTab) {
-		this.clearSearchValue(dispatch);
-		dispatch({
-			type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB,
-			activeTab
-		});
-	},
-	changeSearchValue(dispatch, searchValue) {
-		dispatch({
-			type: actionTypes.CHANGE_SEARCH_VALUE,
-			searchValue
-		});
-	},
-	clearSearchValue(dispatch) {
-		dispatch({
-			type: actionTypes.CHANGE_SEARCH_VALUE,
-			searchValue: ''
-		});
-	},
+    resetOnboardStore(dispatch) {
+        dispatch({
+            type: actionTypes.RESET_ONBOARD_STORE
+        });
+    },
+    changeActiveTab(dispatch, activeTab) {
+        this.clearSearchValue(dispatch);
+        dispatch({
+            type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB,
+            activeTab
+        });
+    },
+    changeSearchValue(dispatch, searchValue) {
+        dispatch({
+            type: actionTypes.CHANGE_SEARCH_VALUE,
+            searchValue
+        });
+    },
+    clearSearchValue(dispatch) {
+        dispatch({
+            type: actionTypes.CHANGE_SEARCH_VALUE,
+            searchValue: ''
+        });
+    },
 
-	loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab) {
-		if (tab === tabsMapping.WORKSPACE) {
-			VersionsPageActionHelper.fetchVersions(dispatch, {itemId: licenseModelId, itemType: itemTypes.LICENSE_MODEL}).then(({results})=> {
-				results = results.filter((version) => version.status === catalogItemStatuses.DRAFT);
-				if (results.length !== 1) {
-					ScreensHelper.loadScreen(dispatch, {
-						screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
-						props: {licenseModelId, licenseModel: {name}, usersList: users}
-					});
-				}
-				else {
-					PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: licenseModelId, allUsers: users}).then(() =>
-						ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version: results[0]}})
-					);
-				}
-			});
-		}
-		if (tab === tabsMapping.CATALOG) {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
-				props: {licenseModelId, licenseModel: {name}, usersList: users}
-			});
-		}
-	},
-	loadVSPScreen(dispatch, softwareProduct, users, tab) {
-		let {id: softwareProductId, vendorId: licenseModelId, licensingVersion, name} = softwareProduct;
-		if (tab === tabsMapping.WORKSPACE) {
-			VersionsPageActionHelper.fetchVersions(dispatch,{itemId: softwareProductId, itemType: itemTypes.SOFTWARE_PRODUCT}).then(({results})=> {
-				results = results.filter((version) => version.status === catalogItemStatuses.DRAFT);
-				if (results.length !== 1) {
-					ScreensHelper.loadScreen(dispatch, {
-						screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {
-							softwareProductId,
-							softwareProduct: {name, vendorId: licenseModelId, licensingVersion},
-							usersList: users
-						}
-					});
-				}
-				else {
-					PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users}).then(() =>
-						ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.SOFTWARE_PRODUCT, props: {softwareProductId, licenseModelId, version: results[0]}})
-					);
-				}
-			});
-		}
-		if (tab === tabsMapping.CATALOG) {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-				props: {
-					softwareProductId,
-					softwareProduct: {name, vendorId: licenseModelId, licensingVersion},
-					usersList: users
-				}
-			});
-		}
-	}
+    loadVLMScreen(dispatch, { id: licenseModelId, name }, users, tab) {
+        if (tab === tabsMapping.WORKSPACE) {
+            VersionsPageActionHelper.fetchVersions(dispatch, {
+                itemId: licenseModelId,
+                itemType: itemTypes.LICENSE_MODEL
+            }).then(({ results }) => {
+                results = results.filter(
+                    version => version.status === catalogItemStatuses.DRAFT
+                );
+                if (results.length !== 1) {
+                    ScreensHelper.loadScreen(dispatch, {
+                        screen: enums.SCREEN.VERSIONS_PAGE,
+                        screenType: screenTypes.LICENSE_MODEL,
+                        props: {
+                            licenseModelId,
+                            licenseModel: { name },
+                            usersList: users
+                        }
+                    });
+                } else {
+                    PermissionsActionHelper.fetchItemUsers(dispatch, {
+                        itemId: licenseModelId,
+                        allUsers: users
+                    }).then(() =>
+                        ScreensHelper.loadLandingScreen(dispatch, {
+                            screenType: screenTypes.LICENSE_MODEL,
+                            props: { licenseModelId, version: results[0] }
+                        })
+                    );
+                }
+            });
+        }
+        if (tab === tabsMapping.CATALOG) {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.VERSIONS_PAGE,
+                screenType: screenTypes.LICENSE_MODEL,
+                props: {
+                    licenseModelId,
+                    licenseModel: { name },
+                    usersList: users
+                }
+            });
+        }
+    },
+    loadVSPScreen(dispatch, softwareProduct, users, tab) {
+        let {
+            id: softwareProductId,
+            vendorId: licenseModelId,
+            licensingVersion,
+            name
+        } = softwareProduct;
+        if (tab === tabsMapping.WORKSPACE) {
+            VersionsPageActionHelper.fetchVersions(dispatch, {
+                itemId: softwareProductId,
+                itemType: itemTypes.SOFTWARE_PRODUCT
+            }).then(({ results }) => {
+                results = results.filter(
+                    version => version.status === catalogItemStatuses.DRAFT
+                );
+                if (results.length !== 1) {
+                    ScreensHelper.loadScreen(dispatch, {
+                        screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+                        screenType: screenTypes.SOFTWARE_PRODUCT,
+                        props: {
+                            softwareProductId,
+                            softwareProduct: {
+                                name,
+                                vendorId: licenseModelId,
+                                licensingVersion
+                            },
+                            usersList: users
+                        }
+                    });
+                } else {
+                    PermissionsActionHelper.fetchItemUsers(dispatch, {
+                        itemId: softwareProductId,
+                        allUsers: users
+                    }).then(() =>
+                        ScreensHelper.loadLandingScreen(dispatch, {
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                licenseModelId,
+                                version: results[0]
+                            }
+                        })
+                    );
+                }
+            });
+        }
+        if (tab === tabsMapping.CATALOG) {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: {
+                    softwareProductId,
+                    softwareProduct: {
+                        name,
+                        vendorId: licenseModelId,
+                        licensingVersion
+                    },
+                    usersList: users
+                }
+            });
+        }
+    }
 };
 
 export default OnboardActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
index 41128bfb11..6fbf265afb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
@@ -16,13 +16,13 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const tabsMapping = {
-	'WORKSPACE': 1,
-	'CATALOG': 2
+    WORKSPACE: 1,
+    CATALOG: 2
 };
 
 export const actionTypes = keyMirror({
-	CHANGE_ACTIVE_ONBOARD_TAB: null,
-	CHANGE_SEARCH_VALUE: null,
-	RESET_ONBOARD_STORE: null,
-	VSP_MIGRATION: null
+    CHANGE_ACTIVE_ONBOARD_TAB: null,
+    CHANGE_SEARCH_VALUE: null,
+    RESET_ONBOARD_STORE: null,
+    VSP_MIGRATION: null
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
index b2e7b0479b..39ceb31b34 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
@@ -13,21 +13,27 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, tabsMapping} from './OnboardConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes, tabsMapping } from './OnboardConstants.js';
+import { combineReducers } from 'redux';
 import onboardingCatalogReducer from './onboardingCatalog/OnboardingCatalogReducer.js';
 import filterReducer from './filter/FilterReducer.js';
 
 const onboardReducer = combineReducers({
-	onboardingCatalog: onboardingCatalogReducer,
-	filter: filterReducer,
-	activeTab: (state = tabsMapping.WORKSPACE, action) => action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB ? action.activeTab : state,
-	searchValue: (state = '', action) => action.type === actionTypes.CHANGE_SEARCH_VALUE ? action.searchValue : state
+    onboardingCatalog: onboardingCatalogReducer,
+    filter: filterReducer,
+    activeTab: (state = tabsMapping.WORKSPACE, action) =>
+        action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB
+            ? action.activeTab
+            : state,
+    searchValue: (state = '', action) =>
+        action.type === actionTypes.CHANGE_SEARCH_VALUE
+            ? action.searchValue
+            : state
 });
 
 export default (state, action) => {
-	if (action.type === actionTypes.RESET_ONBOARD_STORE) {
-		state = undefined;
-	}
-	return onboardReducer(state, action);
+    if (action.type === actionTypes.RESET_ONBOARD_STORE) {
+        state = undefined;
+    }
+    return onboardReducer(state, action);
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
index c045a3739a..dcaeaa787d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
@@ -17,89 +17,99 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import OnboardingCatalogView from './onboardingCatalog/OnboardingCatalogView.jsx';
 import WorkspaceView from './workspace/WorkspaceView.jsx';
-import {tabsMapping} from './OnboardConstants.js';
+import { tabsMapping } from './OnboardConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import classnames from 'classnames';
 import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
 import objectValues from 'lodash/values.js';
-import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
 import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx';
 import Filter from 'sdc-app/onboarding/onboard/filter/Filter.jsx';
 
-const OnboardHeaderTabs = ({onTabClick, activeTab}) => (
-	<div className='onboard-header-tabs'>
-		<div
-			className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.WORKSPACE })}
-			onClick={() => onTabClick(tabsMapping.WORKSPACE)}
-			data-test-id='onboard-workspace-tab'>
-			{i18n('WORKSPACE')}
-		</div>
-		<div
-			className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.CATALOG })}
-			onClick={() => onTabClick(tabsMapping.CATALOG)}
-			data-test-id='onboard-onboard-tab'>
-			{i18n('ONBOARD CATALOG')}
-		</div>
-	</div>
+const OnboardHeaderTabs = ({ onTabClick, activeTab }) => (
+    <div className="onboard-header-tabs">
+        <div
+            className={classnames('onboard-header-tab', {
+                active: activeTab === tabsMapping.WORKSPACE
+            })}
+            onClick={() => onTabClick(tabsMapping.WORKSPACE)}
+            data-test-id="onboard-workspace-tab">
+            {i18n('WORKSPACE')}
+        </div>
+        <div
+            className={classnames('onboard-header-tab', {
+                active: activeTab === tabsMapping.CATALOG
+            })}
+            onClick={() => onTabClick(tabsMapping.CATALOG)}
+            data-test-id="onboard-onboard-tab">
+            {i18n('ONBOARD CATALOG')}
+        </div>
+    </div>
 );
 
-const OnboardHeader = ({onSearch, activeTab, onTabClick, searchValue}) => (
-	<div className='onboard-header'>
-		<OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
-		<ExpandableInput
-			onChange={onSearch}
-			iconType='search'
-			value={searchValue}/>
-		<NotificationsView />
-	</div>
+const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => (
+    <div className="onboard-header">
+        <OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
+        <ExpandableInput
+            onChange={onSearch}
+            iconType="search"
+            value={searchValue}
+        />
+        <NotificationsView />
+    </div>
 );
 
 class OnboardView extends React.Component {
-	static propTypes = {
-		licenseModelList: PropTypes.array,
-		softwareProductList: PropTypes.array,
-		finalizedLicenseModelList: PropTypes.array,
-		finalizedSoftwareProductList: PropTypes.array,
-		archivedSoftwareProductList: PropTypes.array,
-		archivedLicenseModelList: PropTypes.array,
-		modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)),
-		onSelectLicenseModel: PropTypes.func.isRequired,
-		onSelectSoftwareProduct: PropTypes.func.isRequired,
-		onAddLicenseModelClick: PropTypes.func.isRequired,
-		onAddSoftwareProductClick: PropTypes.func.isRequired,
-		closeVspOverlay: PropTypes.func.isRequired,
-		onVspOverlayChange: PropTypes.func.isRequired,
-		onTabClick: PropTypes.func.isRequired,
-		onCatalogTabClick: PropTypes.func.isRequired,
-		onSearch: PropTypes.func.isRequired,
-		activeTab: PropTypes.number.isRequired,
-		catalogActiveTab: PropTypes.number.isRequired,
-		searchValue: PropTypes.string.isRequired,
-		onMigrate: PropTypes.func.isRequired,
-	};
-	renderViewByTab(activeTab){
-		switch (activeTab){
-			case tabsMapping.WORKSPACE:
-				return <WorkspaceView {...this.props} />;
-			case tabsMapping.CATALOG:
-				return <OnboardingCatalogView {...this.props} />;
-			default:
-				return <WorkspaceView {...this.props} />;
-		}
-	}
+    static propTypes = {
+        licenseModelList: PropTypes.array,
+        softwareProductList: PropTypes.array,
+        finalizedLicenseModelList: PropTypes.array,
+        finalizedSoftwareProductList: PropTypes.array,
+        archivedSoftwareProductList: PropTypes.array,
+        archivedLicenseModelList: PropTypes.array,
+        modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)),
+        onSelectLicenseModel: PropTypes.func.isRequired,
+        onSelectSoftwareProduct: PropTypes.func.isRequired,
+        onAddLicenseModelClick: PropTypes.func.isRequired,
+        onAddSoftwareProductClick: PropTypes.func.isRequired,
+        closeVspOverlay: PropTypes.func.isRequired,
+        onVspOverlayChange: PropTypes.func.isRequired,
+        onTabClick: PropTypes.func.isRequired,
+        onCatalogTabClick: PropTypes.func.isRequired,
+        onSearch: PropTypes.func.isRequired,
+        activeTab: PropTypes.number.isRequired,
+        catalogActiveTab: PropTypes.number.isRequired,
+        searchValue: PropTypes.string.isRequired,
+        onMigrate: PropTypes.func.isRequired
+    };
+    renderViewByTab(activeTab) {
+        switch (activeTab) {
+            case tabsMapping.WORKSPACE:
+                return <WorkspaceView {...this.props} />;
+            case tabsMapping.CATALOG:
+                return <OnboardingCatalogView {...this.props} />;
+            default:
+                return <WorkspaceView {...this.props} />;
+        }
+    }
 
-	render() {
-		let {activeTab, onTabClick, onSearch, searchValue} = this.props;
-		return (
-			<div className='catalog-view'>
-				<Filter/>
-				<div className='catalog-parts'>
-					<OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/>
-					{this.renderViewByTab(activeTab)}
-				</div>
-			</div>
-		);
-	}
+    render() {
+        let { activeTab, onTabClick, onSearch, searchValue } = this.props;
+        return (
+            <div className="catalog-view">
+                <Filter />
+                <div className="catalog-parts">
+                    <OnboardHeader
+                        activeTab={activeTab}
+                        onTabClick={onTabClick}
+                        searchValue={searchValue}
+                        onSearch={value => onSearch(value)}
+                    />
+                    {this.renderViewByTab(activeTab)}
+                </div>
+            </div>
+        );
+    }
 }
 
 export default OnboardView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
index d8d04f242b..c80232de0a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
@@ -14,83 +14,166 @@
  * limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import Accordion from 'nfvo-components/accordion/Accordion.jsx';
-import {actionTypes} from './FilterConstants.js';
+import { actionTypes } from './FilterConstants.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
-import {tabsMapping as onboardTabsMapping} from '../OnboardConstants.js';
-import {itemsType as itemsTypeConstants} from './FilterConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
+import { tabsMapping as onboardTabsMapping } from '../OnboardConstants.js';
+import { itemsType as itemsTypeConstants } from './FilterConstants.js';
 
-const mapStateToProps = ({onboard: {filter, activeTab}}) => {
-	return {
-		data: filter,
-		activeTab
-	};
+const mapStateToProps = ({ onboard: { filter, activeTab } }) => {
+    return {
+        data: filter,
+        activeTab
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData) => 
-			dispatch({
-				type: actionTypes.FILTER_DATA_CHANGED,
-				deltaData
-			})		
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: deltaData =>
+            dispatch({
+                type: actionTypes.FILTER_DATA_CHANGED,
+                deltaData
+            })
+    };
 };
 
-const Filter = ({onDataChanged, data: {entityTypeVsp, entityTypeVlm, roleOwner, roleContributor, roleViewer,
-		 procedureNetwork, procedureManual, recentlyUpdated, byVendorView, itemsType}, activeTab}) => (
-    <div className='catalog-filter'>			
-		 {activeTab === onboardTabsMapping.CATALOG && <Input
-			type='select'
-			className='catalog-filter-items-type'
-			data-test-id='catalog-filter-items-type' 
-			disabled={byVendorView}
-			value={itemsType}
-			onChange={e => onDataChanged({itemsType: e.target.value})}>
-				<option key={itemsTypeConstants.ACTIVE} value={itemsTypeConstants.ACTIVE}>Active Items</option>
-				<option key={itemsTypeConstants.ARCHIVED} value={itemsTypeConstants.ARCHIVED}>Archived Items</option>
-		</Input>}
-		{activeTab === onboardTabsMapping.CATALOG && <Input 
-			label={i18n('By Vendor View')}
-			 type='checkbox'
-			 disabled={itemsType === itemsTypeConstants.ARCHIVED} 
-			 checked={byVendorView} 
-			 onChange={byVendorView => onDataChanged({byVendorView})}
-			 data-test-id='filter-by-vendor-view' value='' />
-		}
-        <Input label={i18n('Recently Updated')} type='checkbox' checked={recentlyUpdated} 
-	onChange={recentlyUpdated => onDataChanged({recentlyUpdated})}  data-test-id='filter-recently-updated' value='' />
+const Filter = ({
+    onDataChanged,
+    data: {
+        entityTypeVsp,
+        entityTypeVlm,
+        roleOwner,
+        roleContributor,
+        roleViewer,
+        procedureNetwork,
+        procedureManual,
+        recentlyUpdated,
+        byVendorView,
+        itemsType
+    },
+    activeTab
+}) => (
+    <div className="catalog-filter">
+        {activeTab === onboardTabsMapping.CATALOG && (
+            <Input
+                type="select"
+                className="catalog-filter-items-type"
+                data-test-id="catalog-filter-items-type"
+                disabled={byVendorView}
+                value={itemsType}
+                onChange={e => onDataChanged({ itemsType: e.target.value })}>
+                <option
+                    key={itemsTypeConstants.ACTIVE}
+                    value={itemsTypeConstants.ACTIVE}>
+                    Active Items
+                </option>
+                <option
+                    key={itemsTypeConstants.ARCHIVED}
+                    value={itemsTypeConstants.ARCHIVED}>
+                    Archived Items
+                </option>
+            </Input>
+        )}
+        {activeTab === onboardTabsMapping.CATALOG && (
+            <Input
+                label={i18n('By Vendor View')}
+                type="checkbox"
+                disabled={itemsType === itemsTypeConstants.ARCHIVED}
+                checked={byVendorView}
+                onChange={byVendorView => onDataChanged({ byVendorView })}
+                data-test-id="filter-by-vendor-view"
+                value=""
+            />
+        )}
+        <Input
+            label={i18n('Recently Updated')}
+            type="checkbox"
+            checked={recentlyUpdated}
+            onChange={recentlyUpdated => onDataChanged({ recentlyUpdated })}
+            data-test-id="filter-recently-updated"
+            value=""
+        />
 
-		<Accordion title={i18n('ENTITY TYPE')}>
-			<Input label={i18n('VSP')} type='checkbox' checked={entityTypeVsp} onChange={entityTypeVsp => onDataChanged({entityTypeVsp})} data-test-id='filter-type-vsp' value='' />
-			<Input label={i18n('VLM')} type='checkbox' checked={entityTypeVlm} onChange={entityTypeVlm => onDataChanged({entityTypeVlm})} data-test-id='filter-type-vlm' value='' />			
-		</Accordion>
+        <Accordion title={i18n('ENTITY TYPE')}>
+            <Input
+                label={i18n('VSP')}
+                type="checkbox"
+                checked={entityTypeVsp}
+                onChange={entityTypeVsp => onDataChanged({ entityTypeVsp })}
+                data-test-id="filter-type-vsp"
+                value=""
+            />
+            <Input
+                label={i18n('VLM')}
+                type="checkbox"
+                checked={entityTypeVlm}
+                onChange={entityTypeVlm => onDataChanged({ entityTypeVlm })}
+                data-test-id="filter-type-vlm"
+                value=""
+            />
+        </Accordion>
 
-		<Accordion title={i18n('ROLE')}>
-			<Input label={i18n('Owner')} type='checkbox' checked={roleOwner} onChange={roleOwner => onDataChanged({roleOwner})}  data-test-id='filter-role-owner' value='' />
-			<Input label={i18n('Contributer')} type='checkbox' checked={roleContributor} 
-				onChange={roleContributor => onDataChanged({roleContributor})}  data-test-id='filter-role-contributor' value='' />
-			<Input label={i18n('Viewer')} type='checkbox' checked={roleViewer} onChange={roleViewer => onDataChanged({roleViewer})} data-test-id='filter-role-viewr' value='' />
-		</Accordion>
-		
-		<Accordion title={i18n('ONBOARDING PROCEDURE')}>
-			<Input label={i18n('Network Package')} type='checkbox' checked={procedureNetwork} 
-				onChange={procedureNetwork => onDataChanged({procedureNetwork})}  data-test-id='filter-procedure-network' value='' />
-			<Input label={i18n('Manual')} type='checkbox' checked={procedureManual} 
-				onChange={procedureManual => onDataChanged({procedureManual})} data-test-id='filter-procedure-manual' value='' />			
-		</Accordion>
+        <Accordion title={i18n('ROLE')}>
+            <Input
+                label={i18n('Owner')}
+                type="checkbox"
+                checked={roleOwner}
+                onChange={roleOwner => onDataChanged({ roleOwner })}
+                data-test-id="filter-role-owner"
+                value=""
+            />
+            <Input
+                label={i18n('Contributer')}
+                type="checkbox"
+                checked={roleContributor}
+                onChange={roleContributor => onDataChanged({ roleContributor })}
+                data-test-id="filter-role-contributor"
+                value=""
+            />
+            <Input
+                label={i18n('Viewer')}
+                type="checkbox"
+                checked={roleViewer}
+                onChange={roleViewer => onDataChanged({ roleViewer })}
+                data-test-id="filter-role-viewr"
+                value=""
+            />
+        </Accordion>
+
+        <Accordion title={i18n('ONBOARDING PROCEDURE')}>
+            <Input
+                label={i18n('Network Package')}
+                type="checkbox"
+                checked={procedureNetwork}
+                onChange={procedureNetwork =>
+                    onDataChanged({ procedureNetwork })
+                }
+                data-test-id="filter-procedure-network"
+                value=""
+            />
+            <Input
+                label={i18n('Manual')}
+                type="checkbox"
+                checked={procedureManual}
+                onChange={procedureManual => onDataChanged({ procedureManual })}
+                data-test-id="filter-procedure-manual"
+                value=""
+            />
+        </Accordion>
     </div>
 );
 
 Filter.PropTypes = {
-	onDataChanged: PropTypes.func,
-	data: PropTypes.object
+    onDataChanged: PropTypes.func,
+    data: PropTypes.object
 };
 
-export default featureToggle(featureToggleNames.FILTER)(connect(mapStateToProps, mapActionsToProps)(Filter));
+export default featureToggle(featureToggleNames.FILTER)(
+    connect(mapStateToProps, mapActionsToProps)(Filter)
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
index d944cb02fb..edfe592877 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
@@ -17,10 +17,10 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	FILTER_DATA_CHANGED: null
+    FILTER_DATA_CHANGED: null
 });
 
 export const itemsType = {
-	ACTIVE: '1',
-	ARCHIVED: '2'
-};
\ No newline at end of file
+    ACTIVE: '1',
+    ARCHIVED: '2'
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
index 963226cd38..f1e857498a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
@@ -13,16 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {actionTypes} from './FilterConstants.js';
+import { actionTypes } from './FilterConstants.js';
 
-export default (state = {}, action) => {	
-	switch (action.type) {
-		case actionTypes.FILTER_DATA_CHANGED:						
-			return {				
-				...state,
-				...action.deltaData
-			};			
-		default:
-			return state;
-	}   	
+export default (state = {}, action) => {
+    switch (action.type) {
+        case actionTypes.FILTER_DATA_CHANGED:
+            return {
+                ...state,
+                ...action.deltaData
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
index a85c79edd9..aebb829a88 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
@@ -15,69 +15,88 @@
  */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes} from './OnboardingCatalogConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './OnboardingCatalogConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import OnboardActionHelper from '../OnboardActionHelper.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 
-
 function getMessageForMigration(name) {
-	return (
-		<div>
-			<div>{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', {name: name})}</div>
-			<div>{i18n('Please don’t forget to submit afterwards')}</div>
-		</div>
-	);
+    return (
+        <div>
+            <div>
+                {i18n(
+                    '{name} needs to be updated. Click ‘Checkout & Update’, to proceed.',
+                    { name: name }
+                )}
+            </div>
+            <div>{i18n('Please don’t forget to submit afterwards')}</div>
+        </div>
+    );
 }
 
 const OnboardingCatalogActionHelper = {
-	changeVspOverlay(dispatch, vendor) {
-		dispatch({
-			type: actionTypes.CHANGE_VSP_OVERLAY,
-			vendorId: vendor ? vendor.id : null
-		});
-	},
-	closeVspOverlay(dispatch) {
-		dispatch({
-			type: actionTypes.CLOSE_VSP_OVERLAY
-		});
-	},
-	changeActiveTab(dispatch, activeTab) {
-		OnboardActionHelper.clearSearchValue(dispatch);
-		dispatch({
-			type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB,
-			activeTab
-		});
-	},
-	onVendorSelect(dispatch, {vendor}) {
-		OnboardActionHelper.clearSearchValue(dispatch);
-		dispatch({
-			type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE,
-			selectedVendor: vendor
-		});
-	},
-	onMigrate(dispatch, softwareProduct) {
-		const {name, lockingUser} = softwareProduct;
-		if (NaN === NaN) { // TODO
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data: {
-					title: 'WARNING',
-					msg: i18n('{name} is locked by user {lockingUser} for self-healing', {name: name, lockingUser: lockingUser})
-				}
-			});
-		} else {
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data:{
-					title: 'WARNING',
-					msg: getMessageForMigration(softwareProduct.name.toUpperCase()),
-					confirmationButtonText: i18n('Checkout & Update'),
-					onConfirmed: ()=>SoftwareProductActionHelper.migrateSoftwareProduct(dispatch, {softwareProduct})
-				}
-			});
-		}
-	}
+    changeVspOverlay(dispatch, vendor) {
+        dispatch({
+            type: actionTypes.CHANGE_VSP_OVERLAY,
+            vendorId: vendor ? vendor.id : null
+        });
+    },
+    closeVspOverlay(dispatch) {
+        dispatch({
+            type: actionTypes.CLOSE_VSP_OVERLAY
+        });
+    },
+    changeActiveTab(dispatch, activeTab) {
+        OnboardActionHelper.clearSearchValue(dispatch);
+        dispatch({
+            type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB,
+            activeTab
+        });
+    },
+    onVendorSelect(dispatch, { vendor }) {
+        OnboardActionHelper.clearSearchValue(dispatch);
+        dispatch({
+            type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE,
+            selectedVendor: vendor
+        });
+    },
+    onMigrate(dispatch, softwareProduct) {
+        const { name, lockingUser } = softwareProduct;
+        if (NaN === NaN) {
+            // TODO
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    title: 'WARNING',
+                    msg: i18n(
+                        '{name} is locked by user {lockingUser} for self-healing',
+                        {
+                            name: name,
+                            lockingUser: lockingUser
+                        }
+                    )
+                }
+            });
+        } else {
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    title: 'WARNING',
+                    msg: getMessageForMigration(
+                        softwareProduct.name.toUpperCase()
+                    ),
+                    confirmationButtonText: i18n('Checkout & Update'),
+                    onConfirmed: () =>
+                        SoftwareProductActionHelper.migrateSoftwareProduct(
+                            dispatch,
+                            {
+                                softwareProduct
+                            }
+                        )
+                }
+            });
+        }
+    }
 };
 
 export default OnboardingCatalogActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
index 239ae4545f..f0cefdcde3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
@@ -16,41 +16,41 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const catalogItemTypes = Object.freeze({
-	LICENSE_MODEL: 'license-model',
-	SOFTWARE_PRODUCT: 'software-product'
+    LICENSE_MODEL: 'license-model',
+    SOFTWARE_PRODUCT: 'software-product'
 });
 
 export const catalogItemTypeClasses = {
-	LICENSE_MODEL: 'license-model-type',
-	SOFTWARE_PRODUCT: 'software-product-type',
-	VENDOR: 'vendor-type'
+    LICENSE_MODEL: 'license-model-type',
+    SOFTWARE_PRODUCT: 'software-product-type',
+    VENDOR: 'vendor-type'
 };
 
 export const catalogItemStatuses = {
-	DRAFT: 'Draft',
-	CERTIFIED: 'Certified',
-	ARCHIVED: 'ARCHIVED'
+    DRAFT: 'Draft',
+    CERTIFIED: 'Certified',
+    ARCHIVED: 'ARCHIVED'
 };
 
 export const modalMapper = {
-	'license-model': 'LICENSE_MODEL',
-	'software-product': 'SOFTWARE_PRODUCT'
+    'license-model': 'LICENSE_MODEL',
+    'software-product': 'SOFTWARE_PRODUCT'
 };
 
 export const tabsMapping = {
-	'BY_VENDOR': 1,
-	'ACTIVE': 2,
-	'ARCHIVE': 3
+    BY_VENDOR: 1,
+    ACTIVE: 2,
+    ARCHIVE: 3
 };
 
 export const migrationStatusMapper = {
-	OLD_VERSION: 'True',
+    OLD_VERSION: 'True'
 };
 
 export const actionTypes = keyMirror({
-	ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null,
-	CHANGE_ACTIVE_CATALOG_TAB: null,
-	CHANGE_SEARCH_VALUE: null,
-	CHANGE_VSP_OVERLAY: null,
-	CLOSE_VSP_OVERLAY: null
+    ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null,
+    CHANGE_ACTIVE_CATALOG_TAB: null,
+    CHANGE_SEARCH_VALUE: null,
+    CHANGE_VSP_OVERLAY: null,
+    CLOSE_VSP_OVERLAY: null
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
index 3f8a833074..9796cf8918 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
@@ -13,18 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {actionTypes, tabsMapping} from './OnboardingCatalogConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes, tabsMapping } from './OnboardingCatalogConstants.js';
+import { combineReducers } from 'redux';
 import vendorCatalogReducer from './VendorCatalogReducer.js';
 
 const onboardingCatalogReducer = combineReducers({
-	vendorCatalog: vendorCatalogReducer,
-	activeTab: (state = tabsMapping.ACTIVE, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state
+    vendorCatalog: vendorCatalogReducer,
+    activeTab: (state = tabsMapping.ACTIVE, action) =>
+        action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB
+            ? action.activeTab
+            : state
 });
 
 export default (state, action) => {
-	if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) {
-		state = undefined;
-	}
-	return onboardingCatalogReducer(state, action);
+    if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) {
+        state = undefined;
+    }
+    return onboardingCatalogReducer(state, action);
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
index 78258255ec..d1e401f57d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
@@ -14,6 +14,8 @@
  * permissions and limitations under the License.
  */
 
-export const filterCatalogItemsByType = ({items, filter}) => {
-	return items.filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) > -1);
+export const filterCatalogItemsByType = ({ items, filter }) => {
+    return items.filter(
+        item => item.name.toLowerCase().indexOf(filter.toLowerCase()) > -1
+    );
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
index 8ae8549688..2cc32c2936 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
@@ -18,120 +18,202 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import classnames from 'classnames';
 import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.jsx';
 import VendorCatalogView from './VendorCatalogView.jsx';
-import { tabsMapping} from './OnboardingCatalogConstants.js';
-import {tabsMapping as WCTabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js';
+import { tabsMapping } from './OnboardingCatalogConstants.js';
+import { tabsMapping as WCTabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
 
-const Separator = () => (
-	<div className='tab-separator'/>
-);
+const Separator = () => <div className="tab-separator" />;
 
-const Tab = ({onTabPress, title, dataTestId, activeTab, tabMapping}) => (
-	<div
-		className={classnames('catalog-header-tab', {'active': activeTab === tabMapping })}
-		onClick={() => onTabPress(tabMapping)}
-		data-test-id={dataTestId}>
-		{title}
-	</div>
+const Tab = ({ onTabPress, title, dataTestId, activeTab, tabMapping }) => (
+    <div
+        className={classnames('catalog-header-tab', {
+            active: activeTab === tabMapping
+        })}
+        onClick={() => onTabPress(tabMapping)}
+        data-test-id={dataTestId}>
+        {title}
+    </div>
 );
 
 const ArchiveTab = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Tab);
-const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Separator);
+const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(
+    Separator
+);
 
-const CatalogHeaderTabs = (props) => (
-	<div className='catalog-header-tabs'>
-		<Tab {...props} title={i18n('ACTIVE')}  dataTestId='catalog-all-tab' tabMapping={tabsMapping.ACTIVE}/>
-		<Separator/>
-		<Tab {...props} title={i18n('BY VENDOR')} dataTestId='catalog-header-tab' tabMapping={tabsMapping.BY_VENDOR}/>
-		<ArchiveTabSeparator/>
-		<ArchiveTab {...props} title={i18n('ARCHIVE')} dataTestId='catalog-archive-tab' tabMapping={tabsMapping.ARCHIVE}/>
-	</div>
+const CatalogHeaderTabs = props => (
+    <div className="catalog-header-tabs">
+        <Tab
+            {...props}
+            title={i18n('ACTIVE')}
+            dataTestId="catalog-all-tab"
+            tabMapping={tabsMapping.ACTIVE}
+        />
+        <Separator />
+        <Tab
+            {...props}
+            title={i18n('BY VENDOR')}
+            dataTestId="catalog-header-tab"
+            tabMapping={tabsMapping.BY_VENDOR}
+        />
+        <ArchiveTabSeparator />
+        <ArchiveTab
+            {...props}
+            title={i18n('ARCHIVE')}
+            dataTestId="catalog-archive-tab"
+            tabMapping={tabsMapping.ARCHIVE}
+        />
+    </div>
 );
 
-const CatalogHeader = ({activeTab, onTabPress}) => (
-	<div className='catalog-header'>
-		<CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
-	</div>
+const CatalogHeader = ({ activeTab, onTabPress }) => (
+    <div className="catalog-header">
+        <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
+    </div>
 );
 
 const FilterCatalogHeader = () => (
-	<div className='catalog-header'>
-		<div className='catalog-header-tabs'>
-			<div className='catalog-header-tab active'>
-				{i18n('ONBOARD CATALOG')}
-			</div>
-		</div>	
-	</div>
+    <div className="catalog-header">
+        <div className="catalog-header-tabs">
+            <div className="catalog-header-tab active">
+                {i18n('ONBOARD CATALOG')}
+            </div>
+        </div>
+    </div>
 );
 
-
-const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({AComp: FilterCatalogHeader, BComp: CatalogHeader});
+const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({
+    AComp: FilterCatalogHeader,
+    BComp: CatalogHeader
+});
 
 class OnboardingCatalogView extends React.Component {
-	renderViewByTab(activeTab){
-		const {finalizedLicenseModelList: licenseModelList, fullLicenseModelList, users, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct,
-				onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate,
-				archivedSoftwareProductList, archivedLicenseModelList} = this.props;
+    renderViewByTab(activeTab) {
+        const {
+            finalizedLicenseModelList: licenseModelList,
+            fullLicenseModelList,
+            users,
+            vspOverlay,
+            finalizedSoftwareProductList: softwareProductList,
+            onSelectLicenseModel,
+            onSelectSoftwareProduct,
+            onAddLicenseModelClick,
+            onAddSoftwareProductClick,
+            onVspOverlayChange,
+            onVendorSelect,
+            selectedVendor,
+            searchValue,
+            onMigrate,
+            archivedSoftwareProductList,
+            archivedLicenseModelList
+        } = this.props;
 
-		switch (activeTab){
-			case tabsMapping.ARCHIVE:
-				return (
-					<DetailsCatalogView
-						VLMList={archivedLicenseModelList}
-						VSPList={archivedSoftwareProductList}
-						users={users}						
-						onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
-						onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
-						filter={searchValue}
-						onMigrate={onMigrate}/>
-				);
-			case tabsMapping.ACTIVE:
-				return (
-					<DetailsCatalogView
-						VLMList={licenseModelList}
-						VSPList={softwareProductList}
-						users={users}
-						onAddVLM={onAddLicenseModelClick}
-						onAddVSP={onAddSoftwareProductClick}
-						onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
-						onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
-						filter={searchValue}
-						onMigrate={onMigrate}/>
-				);
-			case tabsMapping.BY_VENDOR:
-			default:
-				return (
-					<VendorCatalogView
-						licenseModelList={fullLicenseModelList}
-						users={users}
-						onAddVSP={onAddSoftwareProductClick}
-						onAddVLM={onAddLicenseModelClick}
-						onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
-						onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
-						vspOverlay={vspOverlay}
-						onVendorSelect={onVendorSelect}
-						selectedVendor={selectedVendor}
-						onVspOverlayChange={onVspOverlayChange}
-						onMigrate={onMigrate}
-						filter={searchValue}/>
-				);
-		}
-	}
+        switch (activeTab) {
+            case tabsMapping.ARCHIVE:
+                return (
+                    <DetailsCatalogView
+                        VLMList={archivedLicenseModelList}
+                        VSPList={archivedSoftwareProductList}
+                        users={users}
+                        onSelectVLM={(item, users) =>
+                            onSelectLicenseModel(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        onSelectVSP={(item, users) =>
+                            onSelectSoftwareProduct(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        filter={searchValue}
+                        onMigrate={onMigrate}
+                    />
+                );
+            case tabsMapping.ACTIVE:
+                return (
+                    <DetailsCatalogView
+                        VLMList={licenseModelList}
+                        VSPList={softwareProductList}
+                        users={users}
+                        onAddVLM={onAddLicenseModelClick}
+                        onAddVSP={onAddSoftwareProductClick}
+                        onSelectVLM={(item, users) =>
+                            onSelectLicenseModel(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        onSelectVSP={(item, users) =>
+                            onSelectSoftwareProduct(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        filter={searchValue}
+                        onMigrate={onMigrate}
+                    />
+                );
+            case tabsMapping.BY_VENDOR:
+            default:
+                return (
+                    <VendorCatalogView
+                        licenseModelList={fullLicenseModelList}
+                        users={users}
+                        onAddVSP={onAddSoftwareProductClick}
+                        onAddVLM={onAddLicenseModelClick}
+                        onSelectVSP={(item, users) =>
+                            onSelectSoftwareProduct(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        onSelectVLM={(item, users) =>
+                            onSelectLicenseModel(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        vspOverlay={vspOverlay}
+                        onVendorSelect={onVendorSelect}
+                        selectedVendor={selectedVendor}
+                        onVspOverlayChange={onVspOverlayChange}
+                        onMigrate={onMigrate}
+                        filter={searchValue}
+                    />
+                );
+        }
+    }
 
-	render() {
-		const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props;
-		return (
-			<div className='catalog-wrapper'>
-				{!selectedVendor && <FeaturedCatalogHeader
-					onSearch={event => onSearch(event.target.value)}
-					activeTab={activeTab}
-					onTabPress={tab => onCatalogTabClick(tab)}
-					searchValue={searchValue}/>}
-				{this.renderViewByTab(activeTab)}
-			</div>
-		);
-	}
+    render() {
+        const {
+            selectedVendor,
+            catalogActiveTab: activeTab,
+            onCatalogTabClick,
+            onSearch,
+            searchValue
+        } = this.props;
+        return (
+            <div className="catalog-wrapper">
+                {!selectedVendor && (
+                    <FeaturedCatalogHeader
+                        onSearch={event => onSearch(event.target.value)}
+                        activeTab={activeTab}
+                        onTabPress={tab => onCatalogTabClick(tab)}
+                        searchValue={searchValue}
+                    />
+                )}
+                {this.renderViewByTab(activeTab)}
+            </div>
+        );
+    }
 }
 
 export default OnboardingCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
index 80d9b07ac9..2f00bf95ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
@@ -19,13 +19,27 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 
 const tooltip = (msg, className = '') => (
-	<Tooltip className={className} id={className}>{msg}</Tooltip>
+    <Tooltip className={className} id={className}>
+        {msg}
+    </Tooltip>
 );
 
-export const TooltipWrapper = ({placement = 'top', className = '', tooltipClassName = '', dataTestId, delayShow = 0, children}) => (
-	<OverlayTrigger placement={placement} overlay={tooltip(children, tooltipClassName)} delayShow={delayShow}>
-		<div className={className} data-test-id={dataTestId}>{children}</div>
-	</OverlayTrigger>
+export const TooltipWrapper = ({
+    placement = 'top',
+    className = '',
+    tooltipClassName = '',
+    dataTestId,
+    delayShow = 0,
+    children
+}) => (
+    <OverlayTrigger
+        placement={placement}
+        overlay={tooltip(children, tooltipClassName)}
+        delayShow={delayShow}>
+        <div className={className} data-test-id={dataTestId}>
+            {children}
+        </div>
+    </OverlayTrigger>
 );
 
 export default tooltip;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
index a2852e5afa..c2eb8250f8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
@@ -16,36 +16,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {migrationStatusMapper} from './OnboardingCatalogConstants.js';
+import { migrationStatusMapper } from './OnboardingCatalogConstants.js';
 
-const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => (
-	<div className='vsp-overlay-wrapper' onClick={(e) => {
-		e.stopPropagation();
-		e.preventDefault();
-	}}>
-		<div className='vsp-overlay-arrow'></div>
-		<div className='vsp-overlay'>
-			<div className='vsp-overlay-title'>{i18n('Recently Edited')}</div>
-			<div className='vsp-overlay-list'>
-				{VSPList.slice(0, 5).map(vsp => <div key={vsp.id} className='vsp-overlay-detail' onClick={() => {
-					if (vsp.isOldVersion && vsp.isOldVersion === migrationStatusMapper.OLD_VERSION) {
-						onMigrate({
-							softwareProduct: vsp
-						});
-					} else {
-						onSelectVSP(vsp);
-					}
-				}
-				}>{i18n(vsp.name)}</div>)}
-			</div>
-			{VSPList.length > 5 && <div className='vsp-overlay-see-more' onClick={onSeeMore}>{i18n('See More')}</div>}
-		</div>
-	</div>
+const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => (
+    <div
+        className="vsp-overlay-wrapper"
+        onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+        }}>
+        <div className="vsp-overlay-arrow" />
+        <div className="vsp-overlay">
+            <div className="vsp-overlay-title">{i18n('Recently Edited')}</div>
+            <div className="vsp-overlay-list">
+                {VSPList.slice(0, 5).map(vsp => (
+                    <div
+                        key={vsp.id}
+                        className="vsp-overlay-detail"
+                        onClick={() => {
+                            if (
+                                vsp.isOldVersion &&
+                                vsp.isOldVersion ===
+                                    migrationStatusMapper.OLD_VERSION
+                            ) {
+                                onMigrate({
+                                    softwareProduct: vsp
+                                });
+                            } else {
+                                onSelectVSP(vsp);
+                            }
+                        }}>
+                        {i18n(vsp.name)}
+                    </div>
+                ))}
+            </div>
+            {VSPList.length > 5 && (
+                <div className="vsp-overlay-see-more" onClick={onSeeMore}>
+                    {i18n('See More')}
+                </div>
+            )}
+        </div>
+    </div>
 );
 
 VSPOverlay.PropTypes = {
-	VSPList: PropTypes.array,
-	onSelectVSP: PropTypes.func
+    VSPList: PropTypes.array,
+    onSelectVSP: PropTypes.func
 };
 
 export default VSPOverlay;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
index dd8b41bd22..2d22a2db90 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
@@ -13,26 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './OnboardingCatalogConstants.js';
+import { actionTypes } from './OnboardingCatalogConstants.js';
 
 export default (state = {}, action) => {
-	switch(action.type) {
-		case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE:
-			return {
-				...state,
-				selectedVendor: action.selectedVendor
-			};
-		case actionTypes.CHANGE_VSP_OVERLAY:
-			return {
-				...state,
-				vspOverlay: action.vendorId
-			};
-		case actionTypes.CLOSE_VSP_OVERLAY:
-			return {
-				...state,
-				vspOverlay: null
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE:
+            return {
+                ...state,
+                selectedVendor: action.selectedVendor
+            };
+        case actionTypes.CHANGE_VSP_OVERLAY:
+            return {
+                ...state,
+                vspOverlay: action.vendorId
+            };
+        case actionTypes.CLOSE_VSP_OVERLAY:
+            return {
+                ...state,
+                vspOverlay: null
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
index 9914ea2154..02f8d50c5c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
@@ -17,58 +17,100 @@ import React from 'react';
 import VendorItem from './VendorItem.jsx';
 import CatalogList from '../CatalogList.jsx';
 import CatalogItemDetails from '../CatalogItemDetails.jsx';
-import {catalogItemTypes} from './OnboardingCatalogConstants.js';
-import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js';
+import { catalogItemTypes } from './OnboardingCatalogConstants.js';
+import { filterCatalogItemsByType } from './OnboardingCatalogUtils.js';
 
-const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate, users}) => {
-	return(
-		<CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
-			{
-				filterCatalogItemsByType({items: licenseModelList, filter}).map(vlm =>
-					<VendorItem
-						key={vlm.id}
-						onAddVSP={onAddVSP}
-						onSelectVSP={(vsp) => onSelectVSP(vsp, users)}
-						shouldShowOverlay={currentOverlay === vlm.id}
-						onVSPButtonClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)}
-						onVendorSelect={onVendorSelect}
-						onMigrate={onMigrate}
-						vendor={vlm}/>)
-			}
-		</CatalogList>
-	);
+const VendorList = ({
+    onAddVLM,
+    onAddVSP,
+    onSelectVSP,
+    licenseModelList = [],
+    vspOverlay: currentOverlay,
+    onVspOverlayChange,
+    onVendorSelect,
+    filter,
+    onMigrate,
+    users
+}) => {
+    return (
+        <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
+            {filterCatalogItemsByType({ items: licenseModelList, filter }).map(
+                vlm => (
+                    <VendorItem
+                        key={vlm.id}
+                        onAddVSP={onAddVSP}
+                        onSelectVSP={vsp => onSelectVSP(vsp, users)}
+                        shouldShowOverlay={currentOverlay === vlm.id}
+                        onVSPButtonClick={hasVSP =>
+                            onVspOverlayChange(
+                                vlm.id === currentOverlay || !hasVSP
+                                    ? null
+                                    : vlm
+                            )
+                        }
+                        onVendorSelect={onVendorSelect}
+                        onMigrate={onMigrate}
+                        vendor={vlm}
+                    />
+                )
+            )}
+        </CatalogList>
+    );
 };
 
-const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate, users}) => {
-	return(
-		<div>
-			<CatalogList onAddVSP={()=>{onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}>
-				<CatalogItemDetails
-					key={selectedVendor.id}
-					onSelect={() => onSelectVLM(selectedVendor, users)}
-					catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL}
-					onMigrate={onMigrate}
-					catalogItemData={selectedVendor}/>
-				{
-					filterCatalogItemsByType({items: selectedVendor.softwareProductList, filter}).map(vsp =>
-						<CatalogItemDetails
-							key={vsp.id}
-							catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT}
-							onMigrate={onMigrate}
-							onSelect={() => onSelectVSP(vsp, users)}
-							catalogItemData={vsp}/>
-					)
-				}
-			</CatalogList>
-		</div>
-	);
+const SoftwareProductListByVendor = ({
+    onAddVSP,
+    selectedVendor,
+    onVendorSelect,
+    onSelectVSP,
+    onSelectVLM,
+    filter,
+    onMigrate,
+    users
+}) => {
+    return (
+        <div>
+            <CatalogList
+                onAddVSP={() => {
+                    onAddVSP(selectedVendor.id);
+                }}
+                vendorPageOptions={{
+                    selectedVendor,
+                    onBack: () => onVendorSelect(false)
+                }}>
+                <CatalogItemDetails
+                    key={selectedVendor.id}
+                    onSelect={() => onSelectVLM(selectedVendor, users)}
+                    catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL}
+                    onMigrate={onMigrate}
+                    catalogItemData={selectedVendor}
+                />
+                {filterCatalogItemsByType({
+                    items: selectedVendor.softwareProductList,
+                    filter
+                }).map(vsp => (
+                    <CatalogItemDetails
+                        key={vsp.id}
+                        catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT}
+                        onMigrate={onMigrate}
+                        onSelect={() => onSelectVSP(vsp, users)}
+                        catalogItemData={vsp}
+                    />
+                ))}
+            </CatalogList>
+        </div>
+    );
 };
 
 class VendorCatalogView extends React.Component {
-	render() {
-		let {selectedVendor} = this.props;
-		return( selectedVendor ? <SoftwareProductListByVendor {...this.props}/> : <VendorList {...this.props}/>);
-	}
+    render() {
+        let { selectedVendor } = this.props;
+        return selectedVendor ? (
+            <SoftwareProductListByVendor {...this.props} />
+        ) : (
+            <VendorList {...this.props} />
+        );
+    }
 }
 
 export default VendorCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
index 158282cc48..bef47d5acf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
@@ -16,82 +16,102 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell, Button} from 'sdc-ui/lib/react';
+import {
+    Tile,
+    TileInfo,
+    TileInfoLine,
+    TileFooter,
+    TileFooterCell,
+    Button
+} from 'sdc-ui/lib/react';
 
 import VSPOverlay from './VSPOverlay.jsx';
-import {TooltipWrapper} from './Tooltip.jsx';
+import { TooltipWrapper } from './Tooltip.jsx';
 
 class VendorItem extends React.Component {
+    static PropTypes = {
+        softwareProductList: PropTypes.array,
+        vendor: PropTypes.object,
+        shouldShowOverlay: PropTypes.bool,
+        onSelectVSP: PropTypes.func,
+        onVendorSelect: PropTypes.func,
+        onAddVSP: PropTypes.func,
+        onVSPButtonClick: PropTypes.func
+    };
 
-	static PropTypes = {
-		softwareProductList: PropTypes.array,
-		vendor: PropTypes.object,
-		shouldShowOverlay: PropTypes.bool,
-		onSelectVSP: PropTypes.func,
-		onVendorSelect: PropTypes.func,
-		onAddVSP: PropTypes.func,
-		onVSPButtonClick: PropTypes.func
-	};
+    render() {
+        let {
+            vendor,
+            onSelectVSP,
+            shouldShowOverlay,
+            onVendorSelect,
+            onMigrate
+        } = this.props;
+        let { softwareProductList = [], name } = vendor;
+        return (
+            <Tile iconName="vendor" onClick={() => onVendorSelect(vendor)}>
+                <TileInfo align="center">
+                    <TileInfoLine type="title">
+                        <TooltipWrapper
+                            className="with-overlay"
+                            dataTestId="catalog-item-name">
+                            {name}
+                        </TooltipWrapper>
+                    </TileInfoLine>
+                    <TileInfoLine>
+                        <Button
+                            btnType="outline-rounded"
+                            color="dark-gray"
+                            onClick={e => this.handleVspCountClick(e)}
+                            data-test-id="catalog-vsp-count"
+                            disabled={!softwareProductList.length}>
+                            {i18n('{length} VSPs', {
+                                length: softwareProductList.length
+                            })}
+                        </Button>
+                        {shouldShowOverlay &&
+                            softwareProductList.length > 0 && (
+                                <VSPOverlay
+                                    onMigrate={onMigrate}
+                                    VSPList={softwareProductList}
+                                    onSelectVSP={onSelectVSP}
+                                    onSeeMore={() => onVendorSelect(vendor)}
+                                />
+                            )}
+                    </TileInfoLine>
+                </TileInfo>
+                <TileFooter align="center">
+                    <TileFooterCell dataTestId="catalog-create-new-vsp-from-vendor">
+                        <Button
+                            btnType="link"
+                            color="primary"
+                            iconName="plusThin"
+                            onClick={e => this.onCreateVspClick(e)}>
+                            {i18n('Create new VSP')}
+                        </Button>
+                    </TileFooterCell>
+                </TileFooter>
+            </Tile>
+        );
+    }
 
-	render() {
-		let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props;
-		let {softwareProductList = [], name} = vendor;
-		return (
-			<Tile
-				iconName='vendor'
-				onClick={() => onVendorSelect(vendor)}>
-				<TileInfo align='center'>
-					<TileInfoLine type='title'>
-						<TooltipWrapper className='with-overlay' dataTestId='catalog-item-name'>{name}</TooltipWrapper>
-					</TileInfoLine>
-					<TileInfoLine>
-						<Button
-							btnType='outline-rounded'
-							color='dark-gray'
-							onClick={e => this.handleVspCountClick(e)}
-							data-test-id='catalog-vsp-count'
-							disabled={!softwareProductList.length}>
-							{i18n('{length} VSPs', {length: softwareProductList.length})}
-						</Button>
-						{shouldShowOverlay && softwareProductList.length > 0 &&
-							<VSPOverlay
-								onMigrate={onMigrate}
-								VSPList={softwareProductList}
-								onSelectVSP={onSelectVSP}
-								onSeeMore={() => onVendorSelect(vendor)} />
-						}
-					</TileInfoLine>
-				</TileInfo>
-				<TileFooter align='center'>
-					<TileFooterCell dataTestId='catalog-create-new-vsp-from-vendor'>
-						<Button
-							btnType='link'
-							color='primary'
-							iconName='plusThin'
-							onClick={e => this.onCreateVspClick(e)}>
-							{i18n('Create new VSP')}
-						</Button>
-					</TileFooterCell>
-				</TileFooter>
-			</Tile>
-		);
-	}
-
-	onCreateVspClick(e) {
-		e.stopPropagation();
-		e.preventDefault();
-		const {onAddVSP, vendor: {id}} = this.props;
-		onAddVSP(id);
-	}
-
-	handleVspCountClick(e){
-		e.stopPropagation();
-		e.preventDefault();
-		const {onVSPButtonClick, vendor: {softwareProductList}} = this.props;
-		const hasVSP = Boolean(softwareProductList.length);
-		onVSPButtonClick(hasVSP);
-	}
+    onCreateVspClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const { onAddVSP, vendor: { id } } = this.props;
+        onAddVSP(id);
+    }
 
+    handleVspCountClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const {
+            onVSPButtonClick,
+            vendor: { softwareProductList }
+        } = this.props;
+        const hasVSP = Boolean(softwareProductList.length);
+        onVSPButtonClick(hasVSP);
+    }
 }
 
 export default VendorItem;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
index a937c11d85..2f17867af1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
@@ -16,31 +16,43 @@
 import React from 'react';
 import DetailsCatalogView from '../DetailsCatalogView.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {tabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js';
+import { tabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js';
 
-const WorkspaceView = (props) => {
-	let {
-		licenseModelList, softwareProductList, onAddLicenseModelClick, users,
-		onAddSoftwareProductClick, onSelectLicenseModel, onSelectSoftwareProduct, searchValue, onMigrate
-	} = props;
+const WorkspaceView = props => {
+    let {
+        licenseModelList,
+        softwareProductList,
+        onAddLicenseModelClick,
+        users,
+        onAddSoftwareProductClick,
+        onSelectLicenseModel,
+        onSelectSoftwareProduct,
+        searchValue,
+        onMigrate
+    } = props;
 
-	return (
-		<div className='catalog-wrapper workspace-view'>
-			<div className='catalog-header workspace-header'>
-				{i18n('WORKSPACE')}
-			</div>
-			<DetailsCatalogView
-				VLMList={licenseModelList}
-				VSPList={softwareProductList}
-				users={users}
-				onAddVLM={onAddLicenseModelClick}
-				onAddVSP={onAddSoftwareProductClick}
-				onSelectVLM={(item, users) => onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)}
-				onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)}
-				onMigrate={onMigrate}
-				filter={searchValue} />
-		</div>
-	);
+    return (
+        <div className="catalog-wrapper workspace-view">
+            <div className="catalog-header workspace-header">
+                {i18n('WORKSPACE')}
+            </div>
+            <DetailsCatalogView
+                VLMList={licenseModelList}
+                VSPList={softwareProductList}
+                users={users}
+                onAddVLM={onAddLicenseModelClick}
+                onAddVSP={onAddSoftwareProductClick}
+                onSelectVLM={(item, users) =>
+                    onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)
+                }
+                onSelectVSP={(item, users) =>
+                    onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)
+                }
+                onMigrate={onMigrate}
+                filter={searchValue}
+            />
+        </div>
+    );
 };
 
 export default WorkspaceView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js
index c25d93f2fc..d42a2f83ad 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js
@@ -15,94 +15,110 @@
  */
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {actionTypes} from './PermissionsConstants.js';
-import {permissionTypes} from './PermissionsConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {askForRightsMsg} from './PermissionsManager.jsx';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './PermissionsConstants.js';
+import { permissionTypes } from './PermissionsConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { askForRightsMsg } from './PermissionsManager.jsx';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 
 const PermissionsActionHelper = {
-	openPermissonsManager(dispatch, {itemId, askForRights}) {
-		if (askForRights) {
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_SHOW,
-				data: {
-					title: i18n('Ask For Contributers Rights'),
-					msg: askForRightsMsg(),
-					confirmationButtonText: i18n('SEND'),
-					onConfirmed: () => 	this.askForContributorRights()
-				}
-			});
-		} else {
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_SHOW,
-				data: {
-					modalComponentName: modalContentMapper.MANAGE_PERMISSIONS,
-					title: i18n('Manage Permissions'),
-					modalComponentProps: {
-						itemId
-					}
-				}
-			});
-		}
-	},
+    openPermissonsManager(dispatch, { itemId, askForRights }) {
+        if (askForRights) {
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    title: i18n('Ask For Contributers Rights'),
+                    msg: askForRightsMsg(),
+                    confirmationButtonText: i18n('SEND'),
+                    onConfirmed: () => this.askForContributorRights()
+                }
+            });
+        } else {
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    modalComponentName: modalContentMapper.MANAGE_PERMISSIONS,
+                    title: i18n('Manage Permissions'),
+                    modalComponentProps: {
+                        itemId
+                    }
+                }
+            });
+        }
+    },
 
-	closePermissionManager(dispatch) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-	},
+    closePermissionManager(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+    },
 
-	saveItemUsers(dispatch, {itemId, removedUsersIds, addedUsersIds, allUsers}) {
-		return ItemsHelper.updateContributors({itemId, removedUsersIds, addedUsersIds}).then(() =>
-			PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers})
-		);
-	},
+    saveItemUsers(
+        dispatch,
+        { itemId, removedUsersIds, addedUsersIds, allUsers }
+    ) {
+        return ItemsHelper.updateContributors({
+            itemId,
+            removedUsersIds,
+            addedUsersIds
+        }).then(() =>
+            PermissionsActionHelper.fetchItemUsers(dispatch, {
+                itemId,
+                allUsers
+            })
+        );
+    },
 
-	changeOwner(dispatch, {itemId, newOwnerId, allUsers}) {
-		return ItemsHelper.changeOwner({itemId, ownerId: newOwnerId}).then(() =>
-			PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers})
-		);
-	},
+    changeOwner(dispatch, { itemId, newOwnerId, allUsers }) {
+        return ItemsHelper.changeOwner({ itemId, ownerId: newOwnerId }).then(
+            () =>
+                PermissionsActionHelper.fetchItemUsers(dispatch, {
+                    itemId,
+                    allUsers
+                })
+        );
+    },
 
-	fetchItemUsers(dispatch, {itemId, allUsers}) {
-		return ItemsHelper.fetchUsers({itemId}).then(response => {
+    fetchItemUsers(dispatch, { itemId, allUsers }) {
+        return ItemsHelper.fetchUsers({ itemId }).then(response => {
+            let allContributors = response.results;
 
-			let allContributors = response.results;
-
-			let owner = {};
-			let contributors = [];
-			allContributors.map(user => {
-				let userObject = allUsers.find(userObject => userObject.userId === user.userId);
-				if (userObject) {
-					user = {...user, fullName: userObject.fullName, role: userObject.role};
-
-					switch(user.permission) {
-						case permissionTypes.OWNER:
-							owner = user;
-							break;
-						case permissionTypes.CONTRIBUTOR:
-							contributors.push(user);
-							break;
-					}
-				}
-			});
-
-			dispatch({
-				type: actionTypes.ITEM_USERS_LOADED,
-				contributors,
-				owner
-			});
-		});
-	},
-
-	askForContributorRights() {
-		console.log('asked for contributor rights');
-	}
+            let owner = {};
+            let contributors = [];
+            allContributors.map(user => {
+                let userObject = allUsers.find(
+                    userObject => userObject.userId === user.userId
+                );
+                if (userObject) {
+                    user = {
+                        ...user,
+                        fullName: userObject.fullName,
+                        role: userObject.role
+                    };
 
+                    switch (user.permission) {
+                        case permissionTypes.OWNER:
+                            owner = user;
+                            break;
+                        case permissionTypes.CONTRIBUTOR:
+                            contributors.push(user);
+                            break;
+                    }
+                }
+            });
 
+            dispatch({
+                type: actionTypes.ITEM_USERS_LOADED,
+                contributors,
+                owner
+            });
+        });
+    },
 
+    askForContributorRights() {
+        console.log('asked for contributor rights');
+    }
 };
 
 export default PermissionsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js
index 48a3461799..686aaaf0dd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js
@@ -16,12 +16,13 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	ITEM_USERS_LOADED: null
+    ITEM_USERS_LOADED: null
 });
 
 export const permissionTypes = {
-	OWNER: 'Owner',
-	CONTRIBUTOR: 'Contributor'
+    OWNER: 'Owner',
+    CONTRIBUTOR: 'Contributor'
 };
 
-export const changeOwnerMessage = 'You will no longer be able to manage the permissions of this item.\nYour permission level will be set to contributor.';
+export const changeOwnerMessage =
+    'You will no longer be able to manage the permissions of this item.\nYour permission level will be set to contributor.';
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js
index ba6562b28f..3b6d62bc15 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js
@@ -14,30 +14,55 @@
  * permissions and limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import PermissionsManager from './PermissionsManager.jsx';
 import PermissionsActionHelper from './PermissionsActionHelper.js';
 
-export const mapStateToProps = ({versionsPage, users: {usersList, userInfo}}) => {
-	let {permissions} = versionsPage;
+export const mapStateToProps = ({
+    versionsPage,
+    users: { usersList, userInfo }
+}) => {
+    let { permissions } = versionsPage;
 
-	return {
-		users: usersList,
-		userInfo,
-		owner: permissions.owner,
-		itemUsers: permissions.contributors
-	};
+    return {
+        users: usersList,
+        userInfo,
+        owner: permissions.owner,
+        itemUsers: permissions.contributors
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onCancel: () => PermissionsActionHelper.closePermissionManager(dispatch),
-		onSubmit: ({itemId, addedUsersIds, removedUsersIds, allUsers, newOwnerId}) => {
-			return PermissionsActionHelper.saveItemUsers(dispatch,{itemId, addedUsersIds, removedUsersIds, allUsers}).then(() => {
-				return newOwnerId ? PermissionsActionHelper.changeOwner(dispatch, {itemId, newOwnerId, allUsers}) : Promise.resolve();
-			}).then(() => PermissionsActionHelper.closePermissionManager(dispatch));
-		}
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onCancel: () =>
+            PermissionsActionHelper.closePermissionManager(dispatch),
+        onSubmit: ({
+            itemId,
+            addedUsersIds,
+            removedUsersIds,
+            allUsers,
+            newOwnerId
+        }) => {
+            return PermissionsActionHelper.saveItemUsers(dispatch, {
+                itemId,
+                addedUsersIds,
+                removedUsersIds,
+                allUsers
+            })
+                .then(() => {
+                    return newOwnerId
+                        ? PermissionsActionHelper.changeOwner(dispatch, {
+                              itemId,
+                              newOwnerId,
+                              allUsers
+                          })
+                        : Promise.resolve();
+                })
+                .then(() =>
+                    PermissionsActionHelper.closePermissionManager(dispatch)
+                );
+        }
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(PermissionsManager);
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
index b7d5d57cca..ab6add8ac2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
@@ -21,97 +21,154 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {permissionTypes, changeOwnerMessage} from './PermissionsConstants.js';
+import { permissionTypes, changeOwnerMessage } from './PermissionsConstants.js';
 
 export const askForRightsMsg = () => {
-	return (
-		<div>
-			<p>{i18n('Send a Contributor rights reguest to Owner')}</p>
-		</div>
-	);
+    return (
+        <div>
+            <p>{i18n('Send a Contributor rights reguest to Owner')}</p>
+        </div>
+    );
 };
 
-
 class Permissions extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			itemUsers: props.itemUsers,
-			newOwnerId: '',
-			showChangeOwner: false
-		};
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            itemUsers: props.itemUsers,
+            newOwnerId: '',
+            showChangeOwner: false
+        };
+    }
 
-	buildUserOptions() {
-		let {users, owner} = this.props;
-		return users.filter(user => user.userId !== owner.userId).map(item => {return {label: item.fullName, value: item.userId};});
-	}
+    buildUserOptions() {
+        let { users, owner } = this.props;
+        return users.filter(user => user.userId !== owner.userId).map(item => {
+            return { label: item.fullName, value: item.userId };
+        });
+    }
 
-	render() {
-		let {onCancel, owner} = this.props;
-		let {newOwnerId} = this.state;
-		return (
-			<div className='manage-permissions-page'>
-				<Form
-					hasButtons={true}
-					onSubmit={() => this.onsaveItemUsers()}
-					onReset={() => onCancel() }
-					labledButtons={true}>
-					<div className='manage-permissions-title'>{i18n('Owner')}</div>
-					<div className='owner-details'>
-						<span>{owner.fullName}</span>
-						<span className='change-owner' onClick={() => this.setState({showChangeOwner: !this.state.showChangeOwner})}>{i18n('Change Owner')}</span>
-					</div>
-					{this.state.showChangeOwner && <div className='change-owner-wrapper'>
-						<div className='change-owner-title'>
-							<span className='manage-permissions-title' data-test-id='change-owner'>{i18n('Change Owner')}</span>
-							<OverlayTrigger placement='right' trigger='click' overlay={
-								<Tooltip id='manage-permissions-owner-tooltip' className='manage-permissions-owner-tooltip'>{i18n(changeOwnerMessage)}</Tooltip> }>
-								<SVGIcon name='questionMark' />
-							</OverlayTrigger>
-						</div>
-						<Select
-							data-test-id='selected-owner'
-							value={newOwnerId}
-							onChange={(item) => this.setState({newOwnerId: item ? item.value : ''})}
-							options={this.buildUserOptions()} />
-					</div>}
-					<div className='manage-permissions-title'>{i18n('Contributors')}</div>
-					<Select
-						data-test-id='selected-contributors'
-						value={this.state.itemUsers.map(item => item.userId)}
-						className='options-input contributors-select'
-						clearable={false}
-						onMultiSelectChanged={(value) => {this.onChangeItemUsers({itemUsers: value});}}
-						options={this.buildUserOptions()}
-						multi/>
-				</Form>
-			</div>
-		);
-	}
+    render() {
+        let { onCancel, owner } = this.props;
+        let { newOwnerId } = this.state;
+        return (
+            <div className="manage-permissions-page">
+                <Form
+                    hasButtons={true}
+                    onSubmit={() => this.onsaveItemUsers()}
+                    onReset={() => onCancel()}
+                    labledButtons={true}>
+                    <div className="manage-permissions-title">
+                        {i18n('Owner')}
+                    </div>
+                    <div className="owner-details">
+                        <span>{owner.fullName}</span>
+                        <span
+                            className="change-owner"
+                            onClick={() =>
+                                this.setState({
+                                    showChangeOwner: !this.state.showChangeOwner
+                                })
+                            }>
+                            {i18n('Change Owner')}
+                        </span>
+                    </div>
+                    {this.state.showChangeOwner && (
+                        <div className="change-owner-wrapper">
+                            <div className="change-owner-title">
+                                <span
+                                    className="manage-permissions-title"
+                                    data-test-id="change-owner">
+                                    {i18n('Change Owner')}
+                                </span>
+                                <OverlayTrigger
+                                    placement="right"
+                                    trigger="click"
+                                    overlay={
+                                        <Tooltip
+                                            id="manage-permissions-owner-tooltip"
+                                            className="manage-permissions-owner-tooltip">
+                                            {i18n(changeOwnerMessage)}
+                                        </Tooltip>
+                                    }>
+                                    <SVGIcon name="questionMark" />
+                                </OverlayTrigger>
+                            </div>
+                            <Select
+                                data-test-id="selected-owner"
+                                value={newOwnerId}
+                                onChange={item =>
+                                    this.setState({
+                                        newOwnerId: item ? item.value : ''
+                                    })
+                                }
+                                options={this.buildUserOptions()}
+                            />
+                        </div>
+                    )}
+                    <div className="manage-permissions-title">
+                        {i18n('Contributors')}
+                    </div>
+                    <Select
+                        data-test-id="selected-contributors"
+                        value={this.state.itemUsers.map(item => item.userId)}
+                        className="options-input contributors-select"
+                        clearable={false}
+                        onMultiSelectChanged={value => {
+                            this.onChangeItemUsers({ itemUsers: value });
+                        }}
+                        options={this.buildUserOptions()}
+                        multi
+                    />
+                </Form>
+            </div>
+        );
+    }
 
-	onChangeItemUsers({itemUsers}) {
-		this.setState({
-			itemUsers: itemUsers.map(contributor => {
-				let contributorFromProps = this.props.itemUsers.find(user => user.userId === contributor.userId);
-				return {
-					userId: contributor.value,
-					fullName: contributor.label,
-					permission: contributorFromProps ? contributorFromProps.permission : permissionTypes.CONTRIBUTOR
-				};
-			})
-		});
-	}
+    onChangeItemUsers({ itemUsers }) {
+        this.setState({
+            itemUsers: itemUsers.map(contributor => {
+                let contributorFromProps = this.props.itemUsers.find(
+                    user => user.userId === contributor.userId
+                );
+                return {
+                    userId: contributor.value,
+                    fullName: contributor.label,
+                    permission: contributorFromProps
+                        ? contributorFromProps.permission
+                        : permissionTypes.CONTRIBUTOR
+                };
+            })
+        });
+    }
 
-	onsaveItemUsers() {
-		let {itemUsers: newUsers, newOwnerId} = this.state;
-		let {itemUsers: oldUsers, onSubmit, itemId, users} = this.props;
-		let addedUsersIds = newUsers.filter(newUser => !oldUsers.map(oldUser => oldUser.userId).includes(newUser.userId))
-			.map(user => user.userId);
-		let removedUsersIds = oldUsers.filter(oldUser => !newUsers.map(newUser => newUser.userId).includes(oldUser.userId))
-			.map(user => user.userId);
-		onSubmit({itemId, addedUsersIds, removedUsersIds, allUsers: users, newOwnerId});
-	}
+    onsaveItemUsers() {
+        let { itemUsers: newUsers, newOwnerId } = this.state;
+        let { itemUsers: oldUsers, onSubmit, itemId, users } = this.props;
+        let addedUsersIds = newUsers
+            .filter(
+                newUser =>
+                    !oldUsers
+                        .map(oldUser => oldUser.userId)
+                        .includes(newUser.userId)
+            )
+            .map(user => user.userId);
+        let removedUsersIds = oldUsers
+            .filter(
+                oldUser =>
+                    !newUsers
+                        .map(newUser => newUser.userId)
+                        .includes(oldUser.userId)
+            )
+            .map(user => user.userId);
+        onSubmit({
+            itemId,
+            addedUsersIds,
+            removedUsersIds,
+            allUsers: users,
+            newOwnerId
+        });
+    }
 }
 
 export default Permissions;
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js
index b4ab78964d..6e817ae3db 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js
@@ -13,16 +13,16 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './PermissionsConstants.js';
+import { actionTypes } from './PermissionsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.ITEM_USERS_LOADED:
-			return {
-				owner: action.owner,
-				contributors: action.contributors
-			};
-		default:
-			return state;
-	}
-};
\ No newline at end of file
+    switch (action.type) {
+        case actionTypes.ITEM_USERS_LOADED:
+            return {
+                owner: action.owner,
+                contributors: action.contributors
+            };
+        default:
+            return state;
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js b/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js
index 73ee5dea21..738e7459fe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js
@@ -14,24 +14,31 @@
  * permissions and limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import RevisionsView from './RevisionsView.jsx';
 import RevisionsActionHelper from './RevisionsActionHelper.js';
 
-export const mapStateToProps = ({revisions, users}) => {
-	return {
-		revisions: revisions,
-		users: users.usersList
-	};
+export const mapStateToProps = ({ revisions, users }) => {
+    return {
+        revisions: revisions,
+        users: users.usersList
+    };
 };
 
-export const mapActionsToProps = (dispatch, {itemId, version, itemType}) => {
-	return {
-		onCancel: () => RevisionsActionHelper.closeRevisionsView(dispatch),
-		onRevert: (revisionId) => {
-			RevisionsActionHelper.revertToRevision(dispatch, {itemId, version, revisionId, itemType});
-		}
-	};
+export const mapActionsToProps = (dispatch, { itemId, version, itemType }) => {
+    return {
+        onCancel: () => RevisionsActionHelper.closeRevisionsView(dispatch),
+        onRevert: revisionId => {
+            RevisionsActionHelper.revertToRevision(dispatch, {
+                itemId,
+                version,
+                revisionId,
+                itemType
+            });
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(RevisionsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(RevisionsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
index 4fd9082b5b..61ccad0cc4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
@@ -16,85 +16,89 @@
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {actionsEnum as vcActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionsEnum as vcActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
 
 import Configuration from 'sdc-app/config/Configuration.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
-import {actionTypes} from './RevisionsConstants.js';
+import { actionTypes } from './RevisionsConstants.js';
 
 function baseUrl(itemId, version) {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/items/${itemId}/versions/${version.id}`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/items/${itemId}/versions/${version.id}`;
 }
 
-function fetchRevisions(itemId, version){
-	let fetchUrl = `${baseUrl(itemId, version)}/revisions`;
-	return RestAPIUtil.fetch(fetchUrl);
+function fetchRevisions(itemId, version) {
+    let fetchUrl = `${baseUrl(itemId, version)}/revisions`;
+    return RestAPIUtil.fetch(fetchUrl);
 }
 
 function revertToRevision(itemId, version, revisionId) {
-	let putUrl = `${baseUrl(itemId, version)}/actions`;
-	let requestBody = {
-		action: vcActionsEnum.REVERT,
-		revisionRequest: {
-			revisionId: revisionId
-		}
-	};
-	return RestAPIUtil.put(putUrl, requestBody);
+    let putUrl = `${baseUrl(itemId, version)}/actions`;
+    let requestBody = {
+        action: vcActionsEnum.REVERT,
+        revisionRequest: {
+            revisionId: revisionId
+        }
+    };
+    return RestAPIUtil.put(putUrl, requestBody);
 }
 
 const RevisionaActionHelper = {
-	openRevisionsView(dispatch, {itemId, version, itemType}) {
-		this.fetchRevisions(dispatch, {itemId, version}).then(() => {
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_SHOW,
-				data: {
-					modalComponentName: modalContentMapper.REVISIONS_LIST,
-					modalClassName: 'manage-revisions-modal',
-					title: i18n('Revert'),
-					modalComponentProps: {
-						itemId: itemId,
-						version: version,
-						itemType
-					}
-				}
-			});
-		});
-	},
+    openRevisionsView(dispatch, { itemId, version, itemType }) {
+        this.fetchRevisions(dispatch, { itemId, version }).then(() => {
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    modalComponentName: modalContentMapper.REVISIONS_LIST,
+                    modalClassName: 'manage-revisions-modal',
+                    title: i18n('Revert'),
+                    modalComponentProps: {
+                        itemId: itemId,
+                        version: version,
+                        itemType
+                    }
+                }
+            });
+        });
+    },
 
-	closeRevisionsView(dispatch) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-	},
+    closeRevisionsView(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+    },
 
+    fetchRevisions(dispatch, { itemId, version }) {
+        return fetchRevisions(itemId, version).then(response => {
+            dispatch({
+                type: actionTypes.ITEM_REVISIONS_LOADED,
+                response: response
+            });
+        });
+    },
 
-	fetchRevisions(dispatch, {itemId, version}) {
-		return fetchRevisions(itemId, version).then((response) => {
-			dispatch({
-				type: actionTypes.ITEM_REVISIONS_LOADED,
-				response: response
-			});
-		});
-	},
-
-	revertToRevision(dispatch, {itemId, version,  revisionId, itemType}) {
-		return revertToRevision(itemId, version, revisionId).then(() => {
-			this.closeRevisionsView(dispatch);
-			if (itemType === screenTypes.LICENSE_MODEL) {
-				ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL,
-					props: {licenseModelId: itemId, version}});
-			} else {
-				ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-					props: {softwareProductId: itemId, version}});
-			}
-		});
-
-	}
+    revertToRevision(dispatch, { itemId, version, revisionId, itemType }) {
+        return revertToRevision(itemId, version, revisionId).then(() => {
+            this.closeRevisionsView(dispatch);
+            if (itemType === screenTypes.LICENSE_MODEL) {
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+                    screenType: screenTypes.LICENSE_MODEL,
+                    props: { licenseModelId: itemId, version }
+                });
+            } else {
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                    screenType: screenTypes.SOFTWARE_PRODUCT,
+                    props: { softwareProductId: itemId, version }
+                });
+            }
+        });
+    }
 };
 
 export default RevisionaActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js
index 28a9fa0ff5..dc1845c59c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js
@@ -16,5 +16,5 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	ITEM_REVISIONS_LOADED: null
+    ITEM_REVISIONS_LOADED: null
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js
index 778350b93f..a3e6ce8ab0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './RevisionsConstants.js';
+import { actionTypes } from './RevisionsConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.ITEM_REVISIONS_LOADED:
-			return  action.response.results;
-		default:
-			return state;
-	}
-};
\ No newline at end of file
+    switch (action.type) {
+        case actionTypes.ITEM_REVISIONS_LOADED:
+            return action.response.results;
+        default:
+            return state;
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
index d6ef604a22..1fc8c06925 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
@@ -23,65 +23,111 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
-
 class RevisionsView extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			revertId : null
-		};
-	}
-
-	render() {
-		let {onCancel, onRevert, revisions, users} = this.props;
-		return (
-			<div className='manage-revisions-page'>
-				<Form
-					hasButtons={true}
-					onSubmit={() => onRevert(this.state.revertId)}
-					onReset={() => onCancel() }
-					submitButtonText={i18n('Revert')}
-					labledButtons={true}>
-					<ListEditorView
-						title={i18n('Select a Commit')}
-						isReadOnlyMode={false}>
-						{revisions.map((revision) => {
-							return (
-								<div key={revision.id} data-test-id='revision-list-item' className={`revision-list-item ${this.state.revertId === revision.id ? 'selected' : ''}`}>
-									<ListEditorItemView
-										isReadOnlyMode={false}
-										onSelect={() => this.setState({revertId : revision.id})}>
-											<ListEditorItemViewField>
-												<div className='revision-list-item-fields'>
-												    <div data-test-id='revision-user' className='revision-user'>
-													    <SVGIcon name='user' label={users.find(userObject => userObject.userId === revision.user).fullName} labelPosition='right'/>
-												    </div>
-													<div className='revision-date' data-test-id='revision-date'>
-														<span className='revision-date'>{i18n.dateNormal(revision.time, {
-															year: 'numeric', month: 'numeric', day: 'numeric'
-														})}</span>
-														<span className='revision-time'>{i18n.dateNormal(revision.time, {
-															hour: 'numeric', minute: 'numeric',
-															hour12: true
-														})}</span>
-													</div>
-													<div className='revision-message'data-test-id='revision-message'>
-														{revision.message && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
-														{revision.message}
-													</ShowMore>}</div>
-												</div>
-											</ListEditorItemViewField>
-									</ListEditorItemView>
-								</div>
-
-							);
-						})}
-					</ListEditorView>
-				</Form>
-			</div>
-		);
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            revertId: null
+        };
+    }
 
+    render() {
+        let { onCancel, onRevert, revisions, users } = this.props;
+        return (
+            <div className="manage-revisions-page">
+                <Form
+                    hasButtons={true}
+                    onSubmit={() => onRevert(this.state.revertId)}
+                    onReset={() => onCancel()}
+                    submitButtonText={i18n('Revert')}
+                    labledButtons={true}>
+                    <ListEditorView
+                        title={i18n('Select a Commit')}
+                        isReadOnlyMode={false}>
+                        {revisions.map(revision => {
+                            return (
+                                <div
+                                    key={revision.id}
+                                    data-test-id="revision-list-item"
+                                    className={`revision-list-item ${
+                                        this.state.revertId === revision.id
+                                            ? 'selected'
+                                            : ''
+                                    }`}>
+                                    <ListEditorItemView
+                                        isReadOnlyMode={false}
+                                        onSelect={() =>
+                                            this.setState({
+                                                revertId: revision.id
+                                            })
+                                        }>
+                                        <ListEditorItemViewField>
+                                            <div className="revision-list-item-fields">
+                                                <div
+                                                    data-test-id="revision-user"
+                                                    className="revision-user">
+                                                    <SVGIcon
+                                                        name="user"
+                                                        label={
+                                                            users.find(
+                                                                userObject =>
+                                                                    userObject.userId ===
+                                                                    revision.user
+                                                            ).fullName
+                                                        }
+                                                        labelPosition="right"
+                                                    />
+                                                </div>
+                                                <div
+                                                    className="revision-date"
+                                                    data-test-id="revision-date">
+                                                    <span className="revision-date">
+                                                        {i18n.dateNormal(
+                                                            revision.time,
+                                                            {
+                                                                year: 'numeric',
+                                                                month:
+                                                                    'numeric',
+                                                                day: 'numeric'
+                                                            }
+                                                        )}
+                                                    </span>
+                                                    <span className="revision-time">
+                                                        {i18n.dateNormal(
+                                                            revision.time,
+                                                            {
+                                                                hour: 'numeric',
+                                                                minute:
+                                                                    'numeric',
+                                                                hour12: true
+                                                            }
+                                                        )}
+                                                    </span>
+                                                </div>
+                                                <div
+                                                    className="revision-message"
+                                                    data-test-id="revision-message">
+                                                    {revision.message && (
+                                                        <ShowMore
+                                                            anchorClass="more-less"
+                                                            lines={2}
+                                                            more={i18n('More')}
+                                                            less={i18n('Less')}>
+                                                            {revision.message}
+                                                        </ShowMore>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </ListEditorItemViewField>
+                                    </ListEditorItemView>
+                                </div>
+                            );
+                        })}
+                    </ListEditorView>
+                </Form>
+            </div>
+        );
+    }
 }
 
 export default RevisionsView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js
index b484f5e0a0..9faa6ffd68 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductConstants.js';
+import { actionTypes } from './SoftwareProductConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED:
-			return [...action.response.results];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED:
+            return [...action.response.results];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js
index 396f65f5d7..f91c8f31e3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductConstants.js';
+import { actionTypes } from './SoftwareProductConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED:
-			return [...action.response.results];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED:
+            return [...action.response.results];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
index e3ea7e1907..db3cc04f76 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
@@ -13,359 +13,668 @@
  * 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 ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
 import TabulatedEditor from 'src/nfvo-components/editor/TabulatedEditor.jsx';
 
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from './SoftwareProductConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
+import {
+    onboardingMethod as onboardingMethodTypes,
+    onboardingOriginTypes
+} from './SoftwareProductConstants.js';
 import SoftwareProductActionHelper from './SoftwareProductActionHelper.js';
 import SoftwareProductComponentsActionHelper from './components/SoftwareProductComponentsActionHelper.js';
 import PermissionsActionHelper from './../permissions/PermissionsActionHelper.js';
 import RevisionsActionHelper from './../revisions/RevisionsActionHelper.js';
 import HeatSetupActionHelper from './attachments/setup/HeatSetupActionHelper.js';
 import { actionsEnum as versionControllerActions } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
-import {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { onboardingMethod as onboardingMethodType } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { SyncStates } from 'sdc-app/common/merge/MergeEditorConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
 
 function getActiveNavigationId(screen, componentId) {
-	let activeItemId = componentId ? screen + '|' + componentId : screen;
-	return activeItemId;
+    let activeItemId = componentId ? screen + '|' + componentId : screen;
+    return activeItemId;
 }
 
-const buildComponentNavigationBarGroups = ({componentId, meta}) => {
-	const groups = ([
-		{
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL + '|' + componentId,
-			name: i18n('General'),
-			disabled: false,
-			meta
-		}, {
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE + '|' + componentId,
-			name: i18n('Compute'),
-			disabled: false,
-			meta
-		}, {
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING + '|' + componentId,
-			name: i18n('High Availability & Load Balancing'),
-			disabled: false,
-			meta
-		}, {
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK + '|' + componentId,
-			name: i18n('Networks'),
-			disabled: false,
-			meta
-		}, {
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE + '|' + componentId,
-			name: i18n('Storage'),
-			disabled: false,
-			meta
-		}, {
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES + '|' + componentId,
-			name: i18n('Images'),
-			disabled: false,
-			meta
-		}, {
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES + '|' + componentId,
-			name: i18n('Process Details'),
-			disabled: false,
-			meta
-		}, {
-			id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING + '|' + componentId,
-			name: i18n('Monitoring'),
-			disabled: false,
-			meta
-		}
-	]);
+const buildComponentNavigationBarGroups = ({ componentId, meta }) => {
+    const groups = [
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL +
+                '|' +
+                componentId,
+            name: i18n('General'),
+            disabled: false,
+            meta
+        },
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE +
+                '|' +
+                componentId,
+            name: i18n('Compute'),
+            disabled: false,
+            meta
+        },
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING +
+                '|' +
+                componentId,
+            name: i18n('High Availability & Load Balancing'),
+            disabled: false,
+            meta
+        },
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK +
+                '|' +
+                componentId,
+            name: i18n('Networks'),
+            disabled: false,
+            meta
+        },
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE +
+                '|' +
+                componentId,
+            name: i18n('Storage'),
+            disabled: false,
+            meta
+        },
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES +
+                '|' +
+                componentId,
+            name: i18n('Images'),
+            disabled: false,
+            meta
+        },
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES +
+                '|' +
+                componentId,
+            name: i18n('Process Details'),
+            disabled: false,
+            meta
+        },
+        {
+            id:
+                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING +
+                '|' +
+                componentId,
+            name: i18n('Monitoring'),
+            disabled: false,
+            meta
+        }
+    ];
 
-	return groups;
+    return groups;
 };
 
-const buildNavigationBarProps = ({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}) => {
-	const {softwareProductEditor: {data: currentSoftwareProduct = {}}} = softwareProduct;
-	const {id, name, onboardingMethod, candidateOnboardingOrigin, onboardingOrigin} = currentSoftwareProduct;
-	const groups = [{
-		id: id,
-		name: name,
-		items: [
-			{
-				id: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
-				name: i18n('Overview'),
-				disabled: false,
-				meta
-			}, {
-				id: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
-				name: i18n('General'),
-				disabled: false,
-				meta
-			},
-			{
-				id: enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT,
-				name: i18n('Deployment Flavors'),
-				disabled: false,
-				hidden: onboardingMethod !== onboardingMethodTypes.MANUAL,
-				meta
-			}, {
-				id: enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES,
-				name: i18n('Process Details'),
-				disabled: false,
-				meta
-			}, {
-				id: enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS,
-				name: i18n('Networks'),
-				disabled: false,
-				meta
-			}, {
-				id: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS,
-				name: i18n('Attachments'),
-				disabled: false,
-				hidden: !candidateOnboardingOrigin && !onboardingOrigin,
-				meta
-			}, {
-				id: enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG,
-				name: i18n('Activity Log'),
-				disabled: false,
-				meta
-			}, {
-				id: enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES,
-				name: i18n('Component Dependencies'),
-				hidden: componentsList.length <= 1,
-				disabled: false,
-				meta
-			}, {
-				id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS,
-				name: i18n('Components'),
-				hidden: componentsList.length <= 0,
-				meta,
-				expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
-				items: [
-					...componentsList.map(({id, displayName}) => ({
-						id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id,
-						name: displayName,
-						meta,
-						expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id] === true  && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
-						items: buildComponentNavigationBarGroups({componentId: id, meta})
-					}))
-				]
-			}
-		]
-	}];
-	let activeItemId = getActiveNavigationId(screen, componentId);
-	return {
-		activeItemId, groups, disabled: !!candidateOnboardingOrigin
-	};
+const buildNavigationBarProps = ({
+    softwareProduct,
+    meta,
+    screen,
+    componentId,
+    componentsList,
+    mapOfExpandedIds
+}) => {
+    const {
+        softwareProductEditor: { data: currentSoftwareProduct = {} }
+    } = softwareProduct;
+    const {
+        id,
+        name,
+        onboardingMethod,
+        candidateOnboardingOrigin,
+        onboardingOrigin
+    } = currentSoftwareProduct;
+    const groups = [
+        {
+            id: id,
+            name: name,
+            items: [
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                    name: i18n('Overview'),
+                    disabled: false,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
+                    name: i18n('General'),
+                    disabled: false,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT,
+                    name: i18n('Deployment Flavors'),
+                    disabled: false,
+                    hidden: onboardingMethod !== onboardingMethodTypes.MANUAL,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES,
+                    name: i18n('Process Details'),
+                    disabled: false,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS,
+                    name: i18n('Networks'),
+                    disabled: false,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS,
+                    name: i18n('Attachments'),
+                    disabled: false,
+                    hidden: !candidateOnboardingOrigin && !onboardingOrigin,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG,
+                    name: i18n('Activity Log'),
+                    disabled: false,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES,
+                    name: i18n('Component Dependencies'),
+                    hidden: componentsList.length <= 1,
+                    disabled: false,
+                    meta
+                },
+                {
+                    id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS,
+                    name: i18n('Components'),
+                    hidden: componentsList.length <= 0,
+                    meta,
+                    expanded:
+                        mapOfExpandedIds[
+                            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS
+                        ] === true &&
+                        screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                    items: [
+                        ...componentsList.map(({ id, displayName }) => ({
+                            id:
+                                enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS +
+                                '|' +
+                                id,
+                            name: displayName,
+                            meta,
+                            expanded:
+                                mapOfExpandedIds[
+                                    enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS +
+                                        '|' +
+                                        id
+                                ] === true &&
+                                screen !==
+                                    enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                            items: buildComponentNavigationBarGroups({
+                                componentId: id,
+                                meta
+                            })
+                        }))
+                    ]
+                }
+            ]
+        }
+    ];
+    let activeItemId = getActiveNavigationId(screen, componentId);
+    return {
+        activeItemId,
+        groups,
+        disabled: !!candidateOnboardingOrigin
+    };
 };
 
-const buildVersionControllerProps = ({softwareProduct, versions, currentVersion, permissions, userInfo, isArchived, usersList, itemPermission, isReadOnlyMode}) => {
-	const {softwareProductEditor = {data: {}}} = softwareProduct;
-	const {isValidityData = true, data: {name, onboardingMethod, candidateOnboardingOrigin}} = softwareProductEditor;
-	
-	return {
-		version: currentVersion,
-		viewableVersions: versions,
-		isFormDataValid: isValidityData,
-		permissions,
-		itemName: name,
-		itemPermission,
-		isReadOnlyMode,
-		isArchived,
-		userInfo,
-		usersList,
-		isManual: onboardingMethod === onboardingMethodType.MANUAL,
-		candidateInProcess: !!candidateOnboardingOrigin
-	};
+const buildVersionControllerProps = ({
+    softwareProduct,
+    versions,
+    currentVersion,
+    permissions,
+    userInfo,
+    isArchived,
+    usersList,
+    itemPermission,
+    isReadOnlyMode
+}) => {
+    const { softwareProductEditor = { data: {} } } = softwareProduct;
+    const {
+        isValidityData = true,
+        data: { name, onboardingMethod, candidateOnboardingOrigin }
+    } = softwareProductEditor;
+
+    return {
+        version: currentVersion,
+        viewableVersions: versions,
+        isFormDataValid: isValidityData,
+        permissions,
+        itemName: name,
+        itemPermission,
+        isReadOnlyMode,
+        isArchived,
+        userInfo,
+        usersList,
+        isManual: onboardingMethod === onboardingMethodType.MANUAL,
+        candidateInProcess: !!candidateOnboardingOrigin
+    };
 };
 
-function buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode}) {
-	const {softwareProductEditor, softwareProductComponents, softwareProductQuestionnaire, softwareProductAttachments} = softwareProduct;
-	const {data: currentSoftwareProduct = {}} = softwareProductEditor;
-	const {version, onboardingOrigin, candidateOnboardingOrigin} = currentSoftwareProduct;
-	const {qdata} = softwareProductQuestionnaire;
-	const {heatSetup, heatSetupCache} = softwareProductAttachments;
-	let currentComponentMeta = {};
-	if(componentId) {
-		const {componentEditor: {data: componentData = {} , qdata: componentQdata}} = softwareProductComponents;
-		currentComponentMeta = {componentData, componentQdata};
-	}
-	const meta = {softwareProduct: currentSoftwareProduct, qdata, version, onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache,
-		isReadOnlyMode, currentComponentMeta, softwareProductDependencies};
-	return meta;
+function buildMeta({
+    softwareProduct,
+    componentId,
+    softwareProductDependencies,
+    isReadOnlyMode
+}) {
+    const {
+        softwareProductEditor,
+        softwareProductComponents,
+        softwareProductQuestionnaire,
+        softwareProductAttachments
+    } = softwareProduct;
+    const { data: currentSoftwareProduct = {} } = softwareProductEditor;
+    const {
+        version,
+        onboardingOrigin,
+        candidateOnboardingOrigin
+    } = currentSoftwareProduct;
+    const { qdata } = softwareProductQuestionnaire;
+    const { heatSetup, heatSetupCache } = softwareProductAttachments;
+    let currentComponentMeta = {};
+    if (componentId) {
+        const {
+            componentEditor: { data: componentData = {}, qdata: componentQdata }
+        } = softwareProductComponents;
+        currentComponentMeta = { componentData, componentQdata };
+    }
+    const meta = {
+        softwareProduct: currentSoftwareProduct,
+        qdata,
+        version,
+        onboardingOrigin,
+        candidateOnboardingOrigin,
+        heatSetup,
+        heatSetupCache,
+        isReadOnlyMode,
+        currentComponentMeta,
+        softwareProductDependencies
+    };
+    return meta;
 }
 
 const mapStateToProps = (
-	{
-		softwareProduct,
-		users: {usersList, userInfo},
-		versionsPage: {versionsList: {versions}, permissions}
-	},
-	{
-		currentScreen: {screen, itemPermission, props: {version: currentVersion, componentId, isReadOnlyMode}}
-	}
+    {
+        softwareProduct,
+        users: { usersList, userInfo },
+        versionsPage: { versionsList: { versions }, permissions }
+    },
+    {
+        currentScreen: {
+            screen,
+            itemPermission,
+            props: { version: currentVersion, componentId, isReadOnlyMode }
+        }
+    }
 ) => {
-	const {softwareProductEditor, softwareProductComponents, softwareProductDependencies} = softwareProduct;
-	const {mapOfExpandedIds = []} = softwareProductEditor;
-	const {componentsList = []} = softwareProductComponents;
+    const {
+        softwareProductEditor,
+        softwareProductComponents,
+        softwareProductDependencies
+    } = softwareProduct;
+    const { mapOfExpandedIds = [] } = softwareProductEditor;
+    const { componentsList = [] } = softwareProductComponents;
 
-	const meta = buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode});
-	return {
-		versionControllerProps: buildVersionControllerProps({
-			softwareProduct,
-			versions,
-			currentVersion,
-			userInfo,
-			usersList,
-			isArchived: itemPermission.isArchived,
-			permissions,
-			itemPermission: {...itemPermission, isDirty: true},
-			isReadOnlyMode
-		}),
-		navigationBarProps: buildNavigationBarProps({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}),
-		meta
-	};
+    const meta = buildMeta({
+        softwareProduct,
+        componentId,
+        softwareProductDependencies,
+        isReadOnlyMode
+    });
+    return {
+        versionControllerProps: buildVersionControllerProps({
+            softwareProduct,
+            versions,
+            currentVersion,
+            userInfo,
+            usersList,
+            isArchived: itemPermission.isArchived,
+            permissions,
+            itemPermission: { ...itemPermission, isDirty: true },
+            isReadOnlyMode
+        }),
+        navigationBarProps: buildNavigationBarProps({
+            softwareProduct,
+            meta,
+            screen,
+            componentId,
+            componentsList,
+            mapOfExpandedIds
+        }),
+        meta
+    };
 };
 
-const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, version, componentId,
-		meta: {isReadOnlyMode, softwareProduct, qdata,
-		currentComponentMeta: {componentData, componentQdata}}}) => {
-	let promise;
-	if (isReadOnlyMode) {
-		promise = Promise.resolve();
-	} else {
-		switch(screen) {
-			case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-				promise = SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, version, qdata});
-				break;
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-				promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
-					{softwareProductId, version, vspComponentId: componentId, componentData, qdata: componentQdata});
-				break;
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-			case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-				promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata: componentQdata});
-				break;
-			default:
-				promise = Promise.resolve();
-				break;
-		}
-	}
-	return promise;
+const autoSaveBeforeNavigate = ({
+    dispatch,
+    screen,
+    softwareProductId,
+    version,
+    componentId,
+    meta: {
+        isReadOnlyMode,
+        softwareProduct,
+        qdata,
+        currentComponentMeta: { componentData, componentQdata }
+    }
+}) => {
+    let promise;
+    if (isReadOnlyMode) {
+        promise = Promise.resolve();
+    } else {
+        switch (screen) {
+            case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+                promise = SoftwareProductActionHelper.updateSoftwareProduct(
+                    dispatch,
+                    { softwareProduct, version, qdata }
+                );
+                break;
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+                promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        version,
+                        vspComponentId: componentId,
+                        componentData,
+                        qdata: componentQdata
+                    }
+                );
+                break;
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+            case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+                promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        version,
+                        vspComponentId: componentId,
+                        qdata: componentQdata
+                    }
+                );
+                break;
+            default:
+                promise = Promise.resolve();
+                break;
+        }
+    }
+    return promise;
 };
 
+const mapActionsToProps = (
+    dispatch,
+    {
+        currentScreen: {
+            screen,
+            props: {
+                softwareProductId,
+                licenseModelId,
+                version,
+                componentId: currentComponentId
+            }
+        }
+    }
+) => {
+    const props = {
+        onVersionSwitching: (versionToSwitch, meta) => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: {
+                    softwareProductId: meta.softwareProduct.id,
+                    version: versionToSwitch
+                }
+            });
+        },
+        onOpenPermissions: ({ users }) => {
+            return PermissionsActionHelper.fetchItemUsers(dispatch, {
+                itemId: softwareProductId,
+                allUsers: users
+            });
+        },
+        onOpenRevisionsModal: () => {
+            return RevisionsActionHelper.openRevisionsView(dispatch, {
+                itemId: softwareProductId,
+                version: version,
+                itemType: screenTypes.SOFTWARE_PRODUCT
+            });
+        },
+        onOpenCommentCommitModal: ({ onCommit, title }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    modalComponentName: modalContentMapper.COMMIT_COMMENT,
+                    modalComponentProps: {
+                        onCommit,
+                        type: CommitModalType.COMMIT
+                    },
+                    title
+                }
+            }),
+        onMoreVersionsClick: ({ itemName, users }) => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: {
+                    softwareProductId,
+                    softwareProduct: {
+                        name: itemName,
+                        vendorId: licenseModelId
+                    },
+                    usersList: users
+                }
+            });
+        },
+        onToggle: (groups, itemIdToExpand) =>
+            groups.map(({ items }) =>
+                SoftwareProductActionHelper.toggleNavigationItems(dispatch, {
+                    items,
+                    itemIdToExpand
+                })
+            ),
+        onNavigate: ({ id, meta, newVersion }) => {
+            let navigationVersion = newVersion || version;
+            let {
+                onboardingOrigin,
+                candidateOnboardingOrigin,
+                heatSetup,
+                heatSetupCache
+            } = meta;
+            let heatSetupPopupPromise =
+                screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+                    ? HeatSetupActionHelper.heatSetupLeaveConfirmation(
+                          dispatch,
+                          { softwareProductId, heatSetup, heatSetupCache }
+                      )
+                    : Promise.resolve();
+            let preNavigate = meta
+                ? autoSaveBeforeNavigate({
+                      dispatch,
+                      screen,
+                      meta,
+                      version,
+                      softwareProductId,
+                      componentId: currentComponentId
+                  })
+                : Promise.resolve();
+            version = version || (meta ? meta.version : undefined);
+            Promise.all([preNavigate, heatSetupPopupPromise])
+                .then(() => {
+                    let [nextScreen, nextComponentId] = id.split('|');
+                    if (
+                        nextScreen ===
+                            enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS &&
+                        nextComponentId &&
+                        nextComponentId === currentComponentId
+                    ) {
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen: nextScreen,
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                version: navigationVersion
+                            }
+                        });
+                    } else {
+                        if (
+                            nextScreen ===
+                            enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+                        ) {
+                            if (
+                                onboardingOrigin ===
+                                    onboardingOriginTypes.ZIP ||
+                                candidateOnboardingOrigin ===
+                                    onboardingOriginTypes.ZIP
+                            ) {
+                                nextScreen =
+                                    enums.SCREEN
+                                        .SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
+                            } else if (
+                                onboardingOrigin === onboardingOriginTypes.CSAR
+                            ) {
+                                nextScreen =
+                                    enums.SCREEN
+                                        .SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
+                            }
+                        }
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen: nextScreen,
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                version: navigationVersion,
+                                componentId: nextComponentId
+                            }
+                        });
+                    }
+                })
+                .catch(e => {
+                    console.error(e);
+                });
+        }
+    };
 
-const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwareProductId, licenseModelId, version, componentId: currentComponentId}}}) => {
-
-	const props = {
-		onVersionSwitching: (versionToSwitch, meta) => {
-			ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-				props: {softwareProductId: meta.softwareProduct.id, version: versionToSwitch}});
-		},
-		onOpenPermissions: ({users}) => {
-			return PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users});
-		},
-		onOpenRevisionsModal: () => {
-			return RevisionsActionHelper.openRevisionsView(dispatch, {itemId: softwareProductId, version: version, itemType: screenTypes.SOFTWARE_PRODUCT});
-		},
-		onOpenCommentCommitModal: ({onCommit, title}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.COMMIT_COMMENT,
-				modalComponentProps: {
-					onCommit,
-					type: CommitModalType.COMMIT
-				},
-				title
-			}
-		}),
-		onMoreVersionsClick: ({itemName, users}) => {
-			ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-				props: {softwareProductId, softwareProduct: {name: itemName, vendorId: licenseModelId}, usersList: users}});
-
-		},
-		onToggle: (groups, itemIdToExpand) => groups.map(({items}) => SoftwareProductActionHelper.toggleNavigationItems(dispatch, {items, itemIdToExpand})),
-		onNavigate: ({id, meta, newVersion}) => {
-			let navigationVersion = newVersion || version;
-			let {onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache} = meta;
-			let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS ?
-								HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
-								Promise.resolve();
-			let preNavigate = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve();
-			version = version || (meta ? meta.version : undefined);
-			Promise.all([preNavigate, heatSetupPopupPromise]).then(() => {
-				let [nextScreen, nextComponentId] = id.split('|');
-				if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS && nextComponentId && nextComponentId === currentComponentId) {
-					ScreensHelper.loadScreen(dispatch, {
-						screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {softwareProductId, version: navigationVersion}
-					});
-				}
-				else {
-					if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS) {
-						if(onboardingOrigin === onboardingOriginTypes.ZIP || candidateOnboardingOrigin === onboardingOriginTypes.ZIP) {
-							nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
-						}
-						else if(onboardingOrigin === onboardingOriginTypes.CSAR) {
-							nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
-						}
-					}
-					ScreensHelper.loadScreen(dispatch, {
-						screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {softwareProductId, version: navigationVersion, componentId: nextComponentId}
-					});
-				}
-			}).catch((e) => {console.error(e);});
-		}
-	};
-
-	switch (screen) {
-		case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-		case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
-		case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-		case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-		case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-		case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-		case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-		case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-		case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-		case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-			props.onSave = () => Promise.resolve();
-			break;
-		default:
-			props.onSave = ({softwareProduct, qdata}) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version});
-			break;
-	}
-
+    switch (screen) {
+        case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+        case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+        case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+        case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+        case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+        case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+        case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+        case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+            props.onSave = () => Promise.resolve();
+            break;
+        default:
+            props.onSave = ({ softwareProduct, qdata }) =>
+                SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
+                    softwareProduct,
+                    qdata,
+                    version
+                });
+            break;
+    }
 
-	props.onVersionControllerAction = (action, version, comment, meta) => {
-		let {heatSetup, heatSetupCache} = meta;
-		let autoSavePromise = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve();
-		let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS && action === versionControllerActions.COMMIT ?
-								HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
-								Promise.resolve();
-		Promise.all([autoSavePromise, heatSetupPopupPromise]).then(() => {
-			return SoftwareProductActionHelper.performVCAction(dispatch, {softwareProductId, action, version, comment, meta}).then(updatedVersion => {
-				const inMerge = updatedVersion && updatedVersion.state && updatedVersion.state.synchronizationState === SyncStates.MERGE;
-				if((action === versionControllerActions.SYNC && !inMerge) ||
-					 ((action === versionControllerActions.COMMIT || action === versionControllerActions.SYNC) && updatedVersion.status === catalogItemStatuses.CERTIFIED)) {
-					ScreensHelper.loadLandingScreen(dispatch, {previousScreenName: screen, props: {softwareProductId, version: updatedVersion}});
-				} else {
-					ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {softwareProductId, version: updatedVersion, componentId: currentComponentId}});
-				}
-			});
-		}).catch((e) => {console.error(e);});
-	};
+    props.onVersionControllerAction = (action, version, comment, meta) => {
+        let { heatSetup, heatSetupCache } = meta;
+        let autoSavePromise = meta
+            ? autoSaveBeforeNavigate({
+                  dispatch,
+                  screen,
+                  meta,
+                  version,
+                  softwareProductId,
+                  componentId: currentComponentId
+              })
+            : Promise.resolve();
+        let heatSetupPopupPromise =
+            screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS &&
+            action === versionControllerActions.COMMIT
+                ? HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {
+                      softwareProductId,
+                      heatSetup,
+                      heatSetupCache
+                  })
+                : Promise.resolve();
+        Promise.all([autoSavePromise, heatSetupPopupPromise])
+            .then(() => {
+                return SoftwareProductActionHelper.performVCAction(dispatch, {
+                    softwareProductId,
+                    action,
+                    version,
+                    comment,
+                    meta
+                }).then(updatedVersion => {
+                    const inMerge =
+                        updatedVersion &&
+                        updatedVersion.state &&
+                        updatedVersion.state.synchronizationState ===
+                            SyncStates.MERGE;
+                    if (
+                        (action === versionControllerActions.SYNC &&
+                            !inMerge) ||
+                        ((action === versionControllerActions.COMMIT ||
+                            action === versionControllerActions.SYNC) &&
+                            updatedVersion.status ===
+                                catalogItemStatuses.CERTIFIED)
+                    ) {
+                        ScreensHelper.loadLandingScreen(dispatch, {
+                            previousScreenName: screen,
+                            props: {
+                                softwareProductId,
+                                version: updatedVersion
+                            }
+                        });
+                    } else {
+                        ScreensHelper.loadScreen(dispatch, {
+                            screen,
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                version: updatedVersion,
+                                componentId: currentComponentId
+                            }
+                        });
+                    }
+                });
+            })
+            .catch(e => {
+                console.error(e);
+            });
+    };
 
-	props.onManagePermissions = () => PermissionsActionHelper.openPermissonsManager(dispatch, {itemId: softwareProductId, askForRights: false});
-	return props;
+    props.onManagePermissions = () =>
+        PermissionsActionHelper.openPermissonsManager(dispatch, {
+            itemId: softwareProductId,
+            askForRights: false
+        });
+    return props;
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(TabulatedEditor);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index 42786bf752..4a2d7a2ece 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -21,553 +21,769 @@ import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseMod
 import LicenseAgreementActionHelper from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js';
 import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
 
-import {actionTypes, onboardingOriginTypes, PRODUCT_QUESTIONNAIRE, forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import {
+    actionTypes,
+    onboardingOriginTypes,
+    PRODUCT_QUESTIONNAIRE,
+    forms
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
 import SoftwareProductComponentsActionHelper from './components/SoftwareProductComponentsActionHelper.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import {actionTypes as HeatSetupActions} from 'sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
-import {actionTypes as featureGroupsActionConstants} from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js';
-import {actionTypes as licenseAgreementActionTypes} from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
-import {actionTypes as componentActionTypes} from './components/SoftwareProductComponentsConstants.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes as HeatSetupActions } from 'sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
+import { actionTypes as featureGroupsActionConstants } from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js';
+import { actionTypes as licenseAgreementActionTypes } from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
+import { actionTypes as componentActionTypes } from './components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {default as ItemsHelper} from 'sdc-app/common/helpers/ItemsHelper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { default as ItemsHelper } from 'sdc-app/common/helpers/ItemsHelper.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
-import {actionTypes as commonActionTypes} from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { actionTypes as commonActionTypes } from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
 import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
 import getValue from 'nfvo-utils/getValue.js';
 
 function getLicensingData(licensingData = {}) {
-	const {licenseAgreement, featureGroups} = licensingData;
-	const newlicenseAgreement = getValue(licenseAgreement);
-	const newfeatureGroups = getValue(featureGroups);
-	return newlicenseAgreement ? {
-		licenseAgreement: newlicenseAgreement,
-		featureGroups: newfeatureGroups
-	} : undefined;
-};
+    const { licenseAgreement, featureGroups } = licensingData;
+    const newlicenseAgreement = getValue(licenseAgreement);
+    const newfeatureGroups = getValue(featureGroups);
+    return newlicenseAgreement
+        ? {
+              licenseAgreement: newlicenseAgreement,
+              featureGroups: newfeatureGroups
+          }
+        : undefined;
+}
 
 function baseUrl() {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/`;
 }
 function softwareProductCategoriesUrl() {
-	const restCatalogPrefix = Configuration.get('restCatalogPrefix');
-	return `${restCatalogPrefix}/v1/categories/resources/`;
+    const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+    return `${restCatalogPrefix}/v1/categories/resources/`;
 }
 
 function uploadFile(vspId, formData, version) {
-	return RestAPIUtil.post(`${baseUrl()}${vspId}/versions/${version.id}/orchestration-template-candidate`, formData);
-
+    return RestAPIUtil.post(
+        `${baseUrl()}${vspId}/versions/${
+            version.id
+        }/orchestration-template-candidate`,
+        formData
+    );
 }
 
-function putSoftwareProduct({softwareProduct, version}) {
-	return RestAPIUtil.put(`${baseUrl()}${softwareProduct.id}/versions/${version.id}`, {
-		name: softwareProduct.name,
-		description: softwareProduct.description,
-		category: softwareProduct.category,
-		subCategory: softwareProduct.subCategory,
-		vendorId: softwareProduct.vendorId,
-		vendorName: softwareProduct.vendorName,
-		licensingVersion: softwareProduct.licensingVersion ? softwareProduct.licensingVersion : undefined,
-		icon: softwareProduct.icon,
-		licensingData: getLicensingData(softwareProduct.licensingData)
-	});
+function putSoftwareProduct({ softwareProduct, version }) {
+    return RestAPIUtil.put(
+        `${baseUrl()}${softwareProduct.id}/versions/${version.id}`,
+        {
+            name: softwareProduct.name,
+            description: softwareProduct.description,
+            category: softwareProduct.category,
+            subCategory: softwareProduct.subCategory,
+            vendorId: softwareProduct.vendorId,
+            vendorName: softwareProduct.vendorName,
+            licensingVersion: softwareProduct.licensingVersion
+                ? softwareProduct.licensingVersion
+                : undefined,
+            icon: softwareProduct.icon,
+            licensingData: getLicensingData(softwareProduct.licensingData)
+        }
+    );
 }
 
 function putSoftwareProductQuestionnaire(vspId, qdata, version) {
-	return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/questionnaire`, qdata);
+    return RestAPIUtil.put(
+        `${baseUrl()}${vspId}/versions/${version.id}/questionnaire`,
+        qdata
+    );
 }
 
 function putSoftwareProductAction(id, action, version) {
-	return RestAPIUtil.put(`${baseUrl()}${id}/versions/${version.id}/actions`, {action: action});
+    return RestAPIUtil.put(`${baseUrl()}${id}/versions/${version.id}/actions`, {
+        action: action
+    });
 }
 
 function fetchSoftwareProductList() {
-	return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`
+    );
 }
 
 function fetchArchivedSoftwareProductList() {
-	return RestAPIUtil.fetch(`${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`
+    );
 }
 
 function fetchFinalizedSoftwareProductList() {
-	return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`
+    );
 }
 
 function fetchSoftwareProduct(vspId, version) {
-	return RestAPIUtil.fetch(`${baseUrl()}${vspId}/versions/${version.id}`);
+    return RestAPIUtil.fetch(`${baseUrl()}${vspId}/versions/${version.id}`);
 }
 
 function fetchSoftwareProductQuestionnaire(vspId, version) {
-	return RestAPIUtil.fetch(`${baseUrl()}${vspId}/versions/${version.id}/questionnaire`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}${vspId}/versions/${version.id}/questionnaire`
+    );
 }
 
-function updateSoftwareProductHeatCandidate(softwareProductId, heatCandidate, version) {
-	return RestAPIUtil.put(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate/manifest`, heatCandidate);
+function updateSoftwareProductHeatCandidate(
+    softwareProductId,
+    heatCandidate,
+    version
+) {
+    return RestAPIUtil.put(
+        `${baseUrl()}${softwareProductId}/versions/${
+            version.id
+        }/orchestration-template-candidate/manifest`,
+        heatCandidate
+    );
 }
 function validateHeatCandidate(softwareProductId, version) {
-	return RestAPIUtil.put(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate/process`);
+    return RestAPIUtil.put(
+        `${baseUrl()}${softwareProductId}/versions/${
+            version.id
+        }/orchestration-template-candidate/process`
+    );
 }
 
-function fetchOrchestrationTemplateCandidate(softwareProductId, version, ) {
-	return RestAPIUtil.fetch(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate`, {dataType: 'binary'});
+function fetchOrchestrationTemplateCandidate(softwareProductId, version) {
+    return RestAPIUtil.fetch(
+        `${baseUrl()}${softwareProductId}/versions/${
+            version.id
+        }/orchestration-template-candidate`,
+        { dataType: 'binary' }
+    );
 }
 
 function abortValidationProcess(softwareProductId, version) {
-	return RestAPIUtil.destroy(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate`);
+    return RestAPIUtil.destroy(
+        `${baseUrl()}${softwareProductId}/versions/${
+            version.id
+        }/orchestration-template-candidate`
+    );
 }
 
 function objToString(obj) {
-	let str = '';
-	if (obj instanceof Array) {
-		obj.forEach((item) => {
-			str += objToString(item) + '\n';
-		});
-	}
-	else {
-		for (let p in obj) {
-			if (obj.hasOwnProperty(p)) {
-				str += obj[p] + '\n';
-			}
-		}
-	}
-	return str.replace(/\n$/, '');
+    let str = '';
+    if (obj instanceof Array) {
+        obj.forEach(item => {
+            str += objToString(item) + '\n';
+        });
+    } else {
+        for (let p in obj) {
+            if (obj.hasOwnProperty(p)) {
+                str += obj[p] + '\n';
+            }
+        }
+    }
+    return str.replace(/\n$/, '');
 }
 
 function parseUploadErrorMsg(error) {
-	let message = '';
-	for (let key in error) {
-		if (error.hasOwnProperty(key)) {
-			message += objToString(error[key]) + '\n';
-		}
-	}
-	return message.replace(/\n$/, '');
+    let message = '';
+    for (let key in error) {
+        if (error.hasOwnProperty(key)) {
+            message += objToString(error[key]) + '\n';
+        }
+    }
+    return message.replace(/\n$/, '');
 }
 
 function fetchSoftwareProductCategories(dispatch) {
-	let handleResponse = response => dispatch({
-		type: actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED,
-		softwareProductCategories: response
-	});
-	return RestAPIUtil.fetch(softwareProductCategoriesUrl())
-		.then(handleResponse)
-		.catch(() => handleResponse(null));
+    let handleResponse = response =>
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED,
+            softwareProductCategories: response
+        });
+    return RestAPIUtil.fetch(softwareProductCategoriesUrl())
+        .then(handleResponse)
+        .catch(() => handleResponse(null));
 }
 
-function loadLicensingData(dispatch, {licenseModelId, licensingVersion}) {
-	return ItemsHelper.fetchVersion({itemId: licenseModelId, versionId: licensingVersion}).then(() => {
-		return Promise.all([
-			LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version: {id: licensingVersion}}),
-			FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version: {id: licensingVersion}})
-		]);
-	});
+function loadLicensingData(dispatch, { licenseModelId, licensingVersion }) {
+    return ItemsHelper.fetchVersion({
+        itemId: licenseModelId,
+        versionId: licensingVersion
+    }).then(() => {
+        return Promise.all([
+            LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+                licenseModelId,
+                version: { id: licensingVersion }
+            }),
+            FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+                licenseModelId,
+                version: { id: licensingVersion }
+            })
+        ]);
+    });
 }
 
 function getExpandedItemsId(items, itemIdToToggle) {
-	for (let i = 0; i < items.length; i++) {
-		if (items[i].id === itemIdToToggle) {
-			if (items[i].expanded) {
-				return {};
-			}
-			else {
-				return {[itemIdToToggle]: true};
-			}
-		}
-		else if (items[i].items && items[i].items.length > 0) {
-			let mapOfExpandedIds = getExpandedItemsId(items[i].items, itemIdToToggle);
-			if (mapOfExpandedIds !== false) {
-				mapOfExpandedIds[items[i].id] = true;
-				return mapOfExpandedIds;
-			}
-		}
-	}
-	return false;
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].id === itemIdToToggle) {
+            if (items[i].expanded) {
+                return {};
+            } else {
+                return { [itemIdToToggle]: true };
+            }
+        } else if (items[i].items && items[i].items.length > 0) {
+            let mapOfExpandedIds = getExpandedItemsId(
+                items[i].items,
+                itemIdToToggle
+            );
+            if (mapOfExpandedIds !== false) {
+                mapOfExpandedIds[items[i].id] = true;
+                return mapOfExpandedIds;
+            }
+        }
+    }
+    return false;
 }
 
 function migrateSoftwareProduct(vspId, version) {
-	return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/heal`);
+    return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/heal`);
 }
 
-
-
 const SoftwareProductActionHelper = {
-
-	fetchFinalizedSoftwareProductList(dispatch) {
-		return fetchFinalizedSoftwareProductList().then(response => dispatch({
-			type: actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED,
-			response
-		}));
-	},
-
-	fetchArchivedSoftwareProductList(dispatch) {
-		return fetchArchivedSoftwareProductList().then(response => dispatch({
-			type: actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED,
-			response
-		}));
-	},
-
-	loadSoftwareProductAssociatedData(dispatch) {
-		fetchSoftwareProductCategories(dispatch);
-		LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
-	},
-
-	loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion}) {
-		SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
-		if (licensingVersion) {
-			return loadLicensingData(dispatch, {licenseModelId, licensingVersion});
-		}
-		return Promise.resolve();
-	},
-
-	fetchSoftwareProductList(dispatch) {
-		return fetchSoftwareProductList().then(response => dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_LIST_LOADED,
-			response
-		}));
-	},
-
-	loadSoftwareProductHeatCandidate(dispatch, {softwareProductId, version}){
-		return RestAPIUtil.fetch(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate/manifest`).then(response => dispatch({
-			type: HeatSetupActions.MANIFEST_LOADED,
-			response
-		}));
-	},
-
-	loadLicensingVersionsList(dispatch, {licenseModelId}){
-		return ItemsHelper.fetchVersions({itemId: licenseModelId}).then(response => {
-			dispatch({
-				type: actionTypes.LOAD_LICENSING_VERSIONS_LIST,
-				licensingVersionsList: response.results
-			});
-		});
-	},
-	updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}){
-		return updateSoftwareProductHeatCandidate(softwareProductId, heatCandidate, version);
-	},
-
-	processAndValidateHeatCandidate(dispatch, {softwareProductId, version}){
-		return validateHeatCandidate(softwareProductId, version).then(response => {
-			if (response.status === 'Success') {
-				SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version});
-				SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version});
-			} else {
-				SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version});
-			}
-		});
-	},
-
-	uploadFile(dispatch, {softwareProductId, formData, failedNotificationTitle, version}) {
-		dispatch({
-			type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
-			payload: {}
-		});
-
-		Promise.resolve()
-			.then(() => uploadFile(softwareProductId, formData, version))
-			.then(response => {
-				if (response.status === 'Success') {
-					dispatch({
-						type: commonActionTypes.DATA_CHANGED,
-						deltaData: {onboardingOrigin: response.onboardingOrigin},
-						formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
-					});
-					switch(response.onboardingOrigin){
-						case onboardingOriginTypes.ZIP:
-							ScreensHelper.loadScreen(dispatch, {
-								screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT,
-								props: {softwareProductId, version}
-							});
-							dispatch({
-								type: actionTypes.CANDIDATE_IN_PROCESS,
-								inProcess: true
-							});
-							break;
-						case onboardingOriginTypes.CSAR:
-							ScreensHelper.loadScreen(dispatch, {
-								screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION, screenType: screenTypes.SOFTWARE_PRODUCT,
-								props: {softwareProductId, version}
-							});
-							break;
-					}
-				}
-				else {
-					throw new Error(parseUploadErrorMsg(response.errors));
-				}
-			})
-			.catch(error => {
-				dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_ERROR,
-					data: {
-						title: failedNotificationTitle,
-						msg: error.message || (error.responseJSON && error.responseJSON.message)
-					}
-				});
-			});
-	},
-
-	downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}){
-		let p = isReadOnlyMode ? Promise.resolve() : SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {
-			softwareProductId,
-			heatCandidate,
-			version});
-		p.then(() => {
-			fetchOrchestrationTemplateCandidate(softwareProductId, version)
-				.then((response) => {
-					showFileSaveDialog({
-						blob: response.blob,
-						headers: response.headers,
-						defaultFilename: 'HEAT_file.zip',
-						addTimestamp: true
-					});
-				});
-		}, null/* do not download if data was not saved correctly*/);
-	},
-
-	hideUploadConfirm (dispatch) {
-		dispatch({
-			type: actionTypes.softwareProductEditor.UPLOAD_CONFIRMATION
-		});
-	},
-	updateSoftwareProduct(dispatch, {softwareProduct, version, qdata}) {
-		return Promise.all([
-			SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {softwareProduct, version}).then(
-				() => dispatch({
-					type: actionTypes.SOFTWARE_PRODUCT_LIST_EDIT,
-					payload: {softwareProduct}
-				})
-			),
-			SoftwareProductActionHelper.updateSoftwareProductQuestionnaire(dispatch, {
-				softwareProductId: softwareProduct.id,
-				qdata,
-				version
-			})
-		]);
-	},
-
-	updateSoftwareProductData(dispatch, {softwareProduct, version}) {
-		return putSoftwareProduct({softwareProduct, version});
-	},
-
-	updateSoftwareProductQuestionnaire(dispatch, {softwareProductId, qdata, version}) {
-		return putSoftwareProductQuestionnaire(softwareProductId, qdata, version);
-	},
-
-	softwareProductEditorDataChanged(dispatch, {deltaData}) {
-		dispatch({
-			type: actionTypes.softwareProductEditor.DATA_CHANGED,
-			deltaData
-		});
-	},
-
-	softwareProductQuestionnaireUpdate(dispatch, {data}) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE,
-			payload: {qdata: data}
-		});
-	},
-
-	softwareProductEditorVendorChanged(dispatch, {deltaData, formName}) {
-		if (deltaData.licensingVersion){
-			return loadLicensingData(dispatch, {licenseModelId: deltaData.vendorId, licensingVersion: deltaData.licensingVersion}).then(() => {
-				ValidationHelper.dataChanged(dispatch, {deltaData, formName});
-				return Promise.resolve();
-			});
-		} else if (deltaData.vendorId) {
-			ValidationHelper.dataChanged(dispatch, {deltaData, formName});
-			return SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, {
-				licenseModelId: deltaData.vendorId
-			}).then( () =>
-				OnboardingActionHelper.forceBreadCrumbsUpdate(dispatch)
-			);
-		} else {
-			ValidationHelper.dataChanged(dispatch, {deltaData, formName});
-
-			dispatch({
-				type: licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
-				response: {results: []}
-			});
-
-			dispatch({
-				type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
-				response: {results: []}
-			});
-		}
-
-	},
-
-	setIsValidityData(dispatch, {isValidityData}) {
-		dispatch({
-			type: actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED,
-			isValidityData
-		});
-	},
-
-	fetchSoftwareProduct(dispatch, {softwareProductId, version}) {
-		return Promise.all([
-			fetchSoftwareProduct(softwareProductId, version).then(response => {
-				dispatch({
-					type: actionTypes.SOFTWARE_PRODUCT_LOADED,
-					response
-				});
-				return response;
-			}),
-			fetchSoftwareProductQuestionnaire(softwareProductId, version).then(response => {
-				ValidationHelper.qDataLoaded(dispatch, {response: {qdata: response.data ? JSON.parse(response.data) : {},
-					qschema: JSON.parse(response.schema)}, qName: PRODUCT_QUESTIONNAIRE});
-			})
-		]);
-	},
-
-	manageSubmitAction(dispatch, {softwareProductId, version, isDirty}) {
-		if (isDirty) {
-			const onCommit = comment => {
-				return this.performVCAction(dispatch, {softwareProductId, action: VersionControllerActionsEnum.COMMIT, version, comment}).then(() => {
-					return this.performSubmitAction(dispatch, {softwareProductId, version});
-				});
-			};
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_SHOW,
-				data: {
-					modalComponentName: modalContentMapper.COMMIT_COMMENT,
-					modalComponentProps: {
-						onCommit,
-						type: CommitModalType.COMMIT_SUBMIT
-					},
-					title: i18n('Commit & Submit')
-				}
-			});
-			return Promise.resolve(version);
-		}
-		return this.performSubmitAction(dispatch, {softwareProductId, version});
-	},
-
-	performSubmitAction(dispatch, {softwareProductId, version}) {
-		return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.SUBMIT, version).then(() => {
-			return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.CREATE_PACKAGE, version).then(() => {
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id}).then(updatedVersion => {
-					dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
-						data: {
-							title: i18n('Submit Succeeded'),
-							msg: i18n('This software product successfully submitted'),
-							cancelButtonText: i18n('OK'),
-							timeout: 2000
-						}
-					});
-					versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
-					return Promise.resolve(updatedVersion);
-				});
-			});
-		}, error =>
-		{
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_ERROR,
-				data: {
-					modalComponentName: modalContentMapper.SUMBIT_ERROR_RESPONSE,
-					title: i18n('Submit Failed'),
-					modalComponentProps: {
-						validationResponse: error.responseJSON
-					},
-					cancelButtonText: i18n('OK')
-				}
-			});
-			return Promise.reject(error.responseJSON);
-		});
-	},
-
-	performVCAction(dispatch, {softwareProductId, action, version, comment}) {
-		return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({inMerge, isDirty, updatedVersion}) => {
-			if ((updatedVersion.status === catalogItemStatuses.CERTIFIED || updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED) &&
-					 (action === VersionControllerActionsEnum.COMMIT || action === VersionControllerActionsEnum.SYNC)) {
-				versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
-				const msg = updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED ? i18n('Item was Archived') : i18n('Item version already Certified');
-				dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_WARNING,
-					data: {
-						title: i18n('Commit error'),
-						msg,
-						cancelButtonText: i18n('Cancel')
-					}
-				});
-				return Promise.resolve(updatedVersion);
-			}
-			if (!inMerge) {
-				if (action === VersionControllerActionsEnum.SUBMIT) {
-					return this.manageSubmitAction(dispatch, {softwareProductId, version, isDirty});
-				}
-				else {
-					let isCallActionValid = action !== VersionControllerActionsEnum.COMMIT || isDirty;
-					if(isCallActionValid) {
-						return 	ItemsHelper.performVCAction({itemId: softwareProductId, action, version, comment}).then(() => {
-							versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: softwareProductId});
-							if (action === VersionControllerActionsEnum.SYNC) {
-								return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({updatedVersion}) => {
-									return Promise.resolve(updatedVersion);
-								});
-							} else {
-								return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id});
-							}
-						});
-					}
-					else {
-						dispatch({
-							type: modalActionTypes.GLOBAL_MODAL_ERROR,
-							data: {
-								title: i18n('Commit Failed'),
-								msg: i18n('There is nothing to commit')
-							}
-						});
-					}
-				}
-			}
-		});
-	},
-
-	toggleNavigationItems(dispatch, {items, itemIdToExpand}) {
-		let mapOfExpandedIds = getExpandedItemsId(items, itemIdToExpand);
-		dispatch({
-			type: actionTypes.TOGGLE_NAVIGATION_ITEM,
-			mapOfExpandedIds
-		});
-	},
-
-	/** for the next verision */
-	addComponent(dispatch, {softwareProductId, modalClassName, version}) {
-		SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch);
-		dispatch({
-			type: componentActionTypes.COMPONENT_CREATE_OPEN
-		});
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.COMPONENT_CREATION,
-				modalComponentProps: {softwareProductId, version},
-				modalClassName,
-				title: 'Create Virtual Function Component'
-			}
-		});
-	},
-
-	migrateSoftwareProduct(dispatch, {softwareProduct}) {
-		let {id: softwareProductId, version} = softwareProduct;
-		const  newVer = version.id;
-		migrateSoftwareProduct(softwareProductId, version).then(() => ScreensHelper.loadScreen(dispatch, {
-			screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-			props: {softwareProductId, version: {id: newVer, label: newVer}}
-		}));
-	},
-
-	abortCandidateValidation(dispatch, {softwareProductId, version}) {		
-		return abortValidationProcess(softwareProductId, version);
-	}
-
+    fetchFinalizedSoftwareProductList(dispatch) {
+        return fetchFinalizedSoftwareProductList().then(response =>
+            dispatch({
+                type: actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED,
+                response
+            })
+        );
+    },
+
+    fetchArchivedSoftwareProductList(dispatch) {
+        return fetchArchivedSoftwareProductList().then(response =>
+            dispatch({
+                type: actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED,
+                response
+            })
+        );
+    },
+
+    loadSoftwareProductAssociatedData(dispatch) {
+        fetchSoftwareProductCategories(dispatch);
+        LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
+    },
+
+    loadSoftwareProductDetailsData(
+        dispatch,
+        { licenseModelId, licensingVersion }
+    ) {
+        SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
+        if (licensingVersion) {
+            return loadLicensingData(dispatch, {
+                licenseModelId,
+                licensingVersion
+            });
+        }
+        return Promise.resolve();
+    },
+
+    fetchSoftwareProductList(dispatch) {
+        return fetchSoftwareProductList().then(response =>
+            dispatch({
+                type: actionTypes.SOFTWARE_PRODUCT_LIST_LOADED,
+                response
+            })
+        );
+    },
+
+    loadSoftwareProductHeatCandidate(dispatch, { softwareProductId, version }) {
+        return RestAPIUtil.fetch(
+            `${baseUrl()}${softwareProductId}/versions/${
+                version.id
+            }/orchestration-template-candidate/manifest`
+        ).then(response =>
+            dispatch({
+                type: HeatSetupActions.MANIFEST_LOADED,
+                response
+            })
+        );
+    },
+
+    loadLicensingVersionsList(dispatch, { licenseModelId }) {
+        return ItemsHelper.fetchVersions({ itemId: licenseModelId }).then(
+            response => {
+                dispatch({
+                    type: actionTypes.LOAD_LICENSING_VERSIONS_LIST,
+                    licensingVersionsList: response.results
+                });
+            }
+        );
+    },
+    updateSoftwareProductHeatCandidate(
+        dispatch,
+        { softwareProductId, heatCandidate, version }
+    ) {
+        return updateSoftwareProductHeatCandidate(
+            softwareProductId,
+            heatCandidate,
+            version
+        );
+    },
+
+    processAndValidateHeatCandidate(dispatch, { softwareProductId, version }) {
+        return validateHeatCandidate(softwareProductId, version).then(
+            response => {
+                if (response.status === 'Success') {
+                    SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+                        dispatch,
+                        { softwareProductId, version }
+                    );
+                    SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+                        softwareProductId,
+                        version
+                    });
+                } else {
+                    SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+                        softwareProductId,
+                        version
+                    });
+                }
+            }
+        );
+    },
+
+    uploadFile(
+        dispatch,
+        { softwareProductId, formData, failedNotificationTitle, version }
+    ) {
+        dispatch({
+            type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
+            payload: {}
+        });
+
+        Promise.resolve()
+            .then(() => uploadFile(softwareProductId, formData, version))
+            .then(response => {
+                if (response.status === 'Success') {
+                    dispatch({
+                        type: commonActionTypes.DATA_CHANGED,
+                        deltaData: {
+                            onboardingOrigin: response.onboardingOrigin
+                        },
+                        formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+                    });
+                    switch (response.onboardingOrigin) {
+                        case onboardingOriginTypes.ZIP:
+                            ScreensHelper.loadScreen(dispatch, {
+                                screen:
+                                    enums.SCREEN
+                                        .SOFTWARE_PRODUCT_ATTACHMENTS_SETUP,
+                                screenType: screenTypes.SOFTWARE_PRODUCT,
+                                props: { softwareProductId, version }
+                            });
+                            dispatch({
+                                type: actionTypes.CANDIDATE_IN_PROCESS,
+                                inProcess: true
+                            });
+                            break;
+                        case onboardingOriginTypes.CSAR:
+                            ScreensHelper.loadScreen(dispatch, {
+                                screen:
+                                    enums.SCREEN
+                                        .SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION,
+                                screenType: screenTypes.SOFTWARE_PRODUCT,
+                                props: { softwareProductId, version }
+                            });
+                            break;
+                    }
+                } else {
+                    throw new Error(parseUploadErrorMsg(response.errors));
+                }
+            })
+            .catch(error => {
+                dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                    data: {
+                        title: failedNotificationTitle,
+                        msg:
+                            error.message ||
+                            (error.responseJSON && error.responseJSON.message)
+                    }
+                });
+            });
+    },
+
+    downloadHeatFile(
+        dispatch,
+        { softwareProductId, heatCandidate, isReadOnlyMode, version }
+    ) {
+        let p = isReadOnlyMode
+            ? Promise.resolve()
+            : SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+                  dispatch,
+                  {
+                      softwareProductId,
+                      heatCandidate,
+                      version
+                  }
+              );
+        p.then(() => {
+            fetchOrchestrationTemplateCandidate(
+                softwareProductId,
+                version
+            ).then(response => {
+                showFileSaveDialog({
+                    blob: response.blob,
+                    headers: response.headers,
+                    defaultFilename: 'HEAT_file.zip',
+                    addTimestamp: true
+                });
+            });
+        }, null /* do not download if data was not saved correctly*/);
+    },
+
+    hideUploadConfirm(dispatch) {
+        dispatch({
+            type: actionTypes.softwareProductEditor.UPLOAD_CONFIRMATION
+        });
+    },
+    updateSoftwareProduct(dispatch, { softwareProduct, version, qdata }) {
+        return Promise.all([
+            SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {
+                softwareProduct,
+                version
+            }).then(() =>
+                dispatch({
+                    type: actionTypes.SOFTWARE_PRODUCT_LIST_EDIT,
+                    payload: { softwareProduct }
+                })
+            ),
+            SoftwareProductActionHelper.updateSoftwareProductQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId: softwareProduct.id,
+                    qdata,
+                    version
+                }
+            )
+        ]);
+    },
+
+    updateSoftwareProductData(dispatch, { softwareProduct, version }) {
+        return putSoftwareProduct({ softwareProduct, version });
+    },
+
+    updateSoftwareProductQuestionnaire(
+        dispatch,
+        { softwareProductId, qdata, version }
+    ) {
+        return putSoftwareProductQuestionnaire(
+            softwareProductId,
+            qdata,
+            version
+        );
+    },
+
+    softwareProductEditorDataChanged(dispatch, { deltaData }) {
+        dispatch({
+            type: actionTypes.softwareProductEditor.DATA_CHANGED,
+            deltaData
+        });
+    },
+
+    softwareProductQuestionnaireUpdate(dispatch, { data }) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE,
+            payload: { qdata: data }
+        });
+    },
+
+    softwareProductEditorVendorChanged(dispatch, { deltaData, formName }) {
+        if (deltaData.licensingVersion) {
+            return loadLicensingData(dispatch, {
+                licenseModelId: deltaData.vendorId,
+                licensingVersion: deltaData.licensingVersion
+            }).then(() => {
+                ValidationHelper.dataChanged(dispatch, { deltaData, formName });
+                return Promise.resolve();
+            });
+        } else if (deltaData.vendorId) {
+            ValidationHelper.dataChanged(dispatch, { deltaData, formName });
+            return SoftwareProductActionHelper.loadLicensingVersionsList(
+                dispatch,
+                {
+                    licenseModelId: deltaData.vendorId
+                }
+            ).then(() =>
+                OnboardingActionHelper.forceBreadCrumbsUpdate(dispatch)
+            );
+        } else {
+            ValidationHelper.dataChanged(dispatch, { deltaData, formName });
+
+            dispatch({
+                type: licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
+                response: { results: [] }
+            });
+
+            dispatch({
+                type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
+                response: { results: [] }
+            });
+        }
+    },
+
+    setIsValidityData(dispatch, { isValidityData }) {
+        dispatch({
+            type: actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED,
+            isValidityData
+        });
+    },
+
+    fetchSoftwareProduct(dispatch, { softwareProductId, version }) {
+        return Promise.all([
+            fetchSoftwareProduct(softwareProductId, version).then(response => {
+                dispatch({
+                    type: actionTypes.SOFTWARE_PRODUCT_LOADED,
+                    response
+                });
+                return response;
+            }),
+            fetchSoftwareProductQuestionnaire(softwareProductId, version).then(
+                response => {
+                    ValidationHelper.qDataLoaded(dispatch, {
+                        response: {
+                            qdata: response.data
+                                ? JSON.parse(response.data)
+                                : {},
+                            qschema: JSON.parse(response.schema)
+                        },
+                        qName: PRODUCT_QUESTIONNAIRE
+                    });
+                }
+            )
+        ]);
+    },
+
+    manageSubmitAction(dispatch, { softwareProductId, version, isDirty }) {
+        if (isDirty) {
+            const onCommit = comment => {
+                return this.performVCAction(dispatch, {
+                    softwareProductId,
+                    action: VersionControllerActionsEnum.COMMIT,
+                    version,
+                    comment
+                }).then(() => {
+                    return this.performSubmitAction(dispatch, {
+                        softwareProductId,
+                        version
+                    });
+                });
+            };
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    modalComponentName: modalContentMapper.COMMIT_COMMENT,
+                    modalComponentProps: {
+                        onCommit,
+                        type: CommitModalType.COMMIT_SUBMIT
+                    },
+                    title: i18n('Commit & Submit')
+                }
+            });
+            return Promise.resolve(version);
+        }
+        return this.performSubmitAction(dispatch, {
+            softwareProductId,
+            version
+        });
+    },
+
+    performSubmitAction(dispatch, { softwareProductId, version }) {
+        return putSoftwareProductAction(
+            softwareProductId,
+            VersionControllerActionsEnum.SUBMIT,
+            version
+        ).then(
+            () => {
+                return putSoftwareProductAction(
+                    softwareProductId,
+                    VersionControllerActionsEnum.CREATE_PACKAGE,
+                    version
+                ).then(() => {
+                    return ItemsHelper.checkItemStatus(dispatch, {
+                        itemId: softwareProductId,
+                        versionId: version.id
+                    }).then(updatedVersion => {
+                        dispatch({
+                            type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
+                            data: {
+                                title: i18n('Submit Succeeded'),
+                                msg: i18n(
+                                    'This software product successfully submitted'
+                                ),
+                                cancelButtonText: i18n('OK'),
+                                timeout: 2000
+                            }
+                        });
+                        versionPageActionHelper.fetchVersions(dispatch, {
+                            itemType: itemTypes.SOFTWARE_PRODUCT,
+                            itemId: softwareProductId
+                        });
+                        return Promise.resolve(updatedVersion);
+                    });
+                });
+            },
+            error => {
+                dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                    data: {
+                        modalComponentName:
+                            modalContentMapper.SUMBIT_ERROR_RESPONSE,
+                        title: i18n('Submit Failed'),
+                        modalComponentProps: {
+                            validationResponse: error.responseJSON
+                        },
+                        cancelButtonText: i18n('OK')
+                    }
+                });
+                return Promise.reject(error.responseJSON);
+            }
+        );
+    },
+
+    performVCAction(dispatch, { softwareProductId, action, version, comment }) {
+        return MergeEditorActionHelper.analyzeSyncResult(dispatch, {
+            itemId: softwareProductId,
+            version
+        }).then(({ inMerge, isDirty, updatedVersion }) => {
+            if (
+                (updatedVersion.status === catalogItemStatuses.CERTIFIED ||
+                    updatedVersion.archivedStatus ===
+                        catalogItemStatuses.ARCHIVED) &&
+                (action === VersionControllerActionsEnum.COMMIT ||
+                    action === VersionControllerActionsEnum.SYNC)
+            ) {
+                versionPageActionHelper.fetchVersions(dispatch, {
+                    itemType: itemTypes.SOFTWARE_PRODUCT,
+                    itemId: softwareProductId
+                });
+                const msg =
+                    updatedVersion.archivedStatus ===
+                    catalogItemStatuses.ARCHIVED
+                        ? i18n('Item was Archived')
+                        : i18n('Item version already Certified');
+                dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                    data: {
+                        title: i18n('Commit error'),
+                        msg,
+                        cancelButtonText: i18n('Cancel')
+                    }
+                });
+                return Promise.resolve(updatedVersion);
+            }
+            if (!inMerge) {
+                if (action === VersionControllerActionsEnum.SUBMIT) {
+                    return this.manageSubmitAction(dispatch, {
+                        softwareProductId,
+                        version,
+                        isDirty
+                    });
+                } else {
+                    let isCallActionValid =
+                        action !== VersionControllerActionsEnum.COMMIT ||
+                        isDirty;
+                    if (isCallActionValid) {
+                        return ItemsHelper.performVCAction({
+                            itemId: softwareProductId,
+                            action,
+                            version,
+                            comment
+                        }).then(() => {
+                            versionPageActionHelper.fetchVersions(dispatch, {
+                                itemType: itemTypes.LICENSE_MODEL,
+                                itemId: softwareProductId
+                            });
+                            if (action === VersionControllerActionsEnum.SYNC) {
+                                return MergeEditorActionHelper.analyzeSyncResult(
+                                    dispatch,
+                                    { itemId: softwareProductId, version }
+                                ).then(({ updatedVersion }) => {
+                                    return Promise.resolve(updatedVersion);
+                                });
+                            } else {
+                                return ItemsHelper.checkItemStatus(dispatch, {
+                                    itemId: softwareProductId,
+                                    versionId: version.id
+                                });
+                            }
+                        });
+                    } else {
+                        dispatch({
+                            type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                            data: {
+                                title: i18n('Commit Failed'),
+                                msg: i18n('There is nothing to commit')
+                            }
+                        });
+                    }
+                }
+            }
+        });
+    },
+
+    toggleNavigationItems(dispatch, { items, itemIdToExpand }) {
+        let mapOfExpandedIds = getExpandedItemsId(items, itemIdToExpand);
+        dispatch({
+            type: actionTypes.TOGGLE_NAVIGATION_ITEM,
+            mapOfExpandedIds
+        });
+    },
+
+    /** for the next verision */
+    addComponent(dispatch, { softwareProductId, modalClassName, version }) {
+        SoftwareProductComponentsActionHelper.clearComponentCreationData(
+            dispatch
+        );
+        dispatch({
+            type: componentActionTypes.COMPONENT_CREATE_OPEN
+        });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.COMPONENT_CREATION,
+                modalComponentProps: { softwareProductId, version },
+                modalClassName,
+                title: 'Create Virtual Function Component'
+            }
+        });
+    },
+
+    migrateSoftwareProduct(dispatch, { softwareProduct }) {
+        let { id: softwareProductId, version } = softwareProduct;
+        const newVer = version.id;
+        migrateSoftwareProduct(softwareProductId, version).then(() =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: {
+                    softwareProductId,
+                    version: { id: newVer, label: newVer }
+                }
+            })
+        );
+    },
+
+    abortCandidateValidation(dispatch, { softwareProductId, version }) {
+        return abortValidationProcess(softwareProductId, version);
+    }
 };
 
 export default SoftwareProductActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js
index 9b147415f9..d1ba947f81 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js
@@ -14,17 +14,21 @@
  * permissions and limitations under the License.
  */
 export default {
-
-	getCurrentCategoryOfSubCategory(selectedSubCategory, softwareProductCategories) {
-		let category, subCategory;
-		for (var i = 0; i < softwareProductCategories.length; i++) {
-			let {subcategories = []} = softwareProductCategories[i];
-			subCategory = subcategories.find(sub => sub.uniqueId === selectedSubCategory);
-			if (subCategory) {
-				category = softwareProductCategories[i].uniqueId;
-				break;
-			}
-		}
-		return category;
-	}
+    getCurrentCategoryOfSubCategory(
+        selectedSubCategory,
+        softwareProductCategories
+    ) {
+        let category, subCategory;
+        for (var i = 0; i < softwareProductCategories.length; i++) {
+            let { subcategories = [] } = softwareProductCategories[i];
+            subCategory = subcategories.find(
+                sub => sub.uniqueId === selectedSubCategory
+            );
+            if (subCategory) {
+                category = softwareProductCategories[i].uniqueId;
+                break;
+            }
+        }
+        return category;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
index d33eb822cf..711bbf8db8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
@@ -16,41 +16,38 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	SOFTWARE_PRODUCT_LOADED: null,
-	SOFTWARE_PRODUCT_LIST_LOADED: null,
-	ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED: null,
-	FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED: null,
-	SOFTWARE_PRODUCT_LIST_EDIT: null,
-	SOFTWARE_PRODUCT_CATEGORIES_LOADED: null,
-	SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE: null,
-	LOAD_LICENSING_VERSIONS_LIST: null,
-	TOGGLE_NAVIGATION_ITEM: null,
-	CANDIDATE_IN_PROCESS: null,
-
-	softwareProductEditor: {
-		OPEN: null,
-		CLOSE: null,
-		DATA_CHANGED: null,
-		IS_VALIDITY_DATA_CHANGED: null
-	}
+    SOFTWARE_PRODUCT_LOADED: null,
+    SOFTWARE_PRODUCT_LIST_LOADED: null,
+    ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED: null,
+    FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED: null,
+    SOFTWARE_PRODUCT_LIST_EDIT: null,
+    SOFTWARE_PRODUCT_CATEGORIES_LOADED: null,
+    SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE: null,
+    LOAD_LICENSING_VERSIONS_LIST: null,
+    TOGGLE_NAVIGATION_ITEM: null,
+    CANDIDATE_IN_PROCESS: null,
+
+    softwareProductEditor: {
+        OPEN: null,
+        CLOSE: null,
+        DATA_CHANGED: null,
+        IS_VALIDITY_DATA_CHANGED: null
+    }
 });
 
-
-
 export const onboardingMethod = {
-	MANUAL: 'Manual',
-	NETWORK_PACKAGE: 'NetworkPackage'
+    MANUAL: 'Manual',
+    NETWORK_PACKAGE: 'NetworkPackage'
 };
 
 export const onboardingOriginTypes = {
-	NONE: 'none',
-	ZIP: 'zip',
-	CSAR: 'csar'
+    NONE: 'none',
+    ZIP: 'zip',
+    CSAR: 'csar'
 };
 
 export const forms = keyMirror({
-	VENDOR_SOFTWARE_PRODUCT_DETAILS: 'vendor-software-product-details',
+    VENDOR_SOFTWARE_PRODUCT_DETAILS: 'vendor-software-product-details'
 });
 
 export const PRODUCT_QUESTIONNAIRE = 'product';
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
index 31be338ff5..f52153a29f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
@@ -13,16 +13,22 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductConstants.js';
+import { actionTypes } from './SoftwareProductConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.SOFTWARE_PRODUCT_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.SOFTWARE_PRODUCT_LIST_EDIT:
-			const indexForEdit = state.findIndex(vsp => vsp.id === action.payload.softwareProduct.id);
-			return [...state.slice(0, indexForEdit), action.payload.softwareProduct, ...state.slice(indexForEdit + 1)];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.SOFTWARE_PRODUCT_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.SOFTWARE_PRODUCT_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                vsp => vsp.id === action.payload.softwareProduct.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.payload.softwareProduct,
+                ...state.slice(indexForEdit + 1)
+            ];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
index d7a6c2ef5c..f3de517a1c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
@@ -13,12 +13,15 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {combineReducers} from 'redux';
-import {actionTypes, PRODUCT_QUESTIONNAIRE} from './SoftwareProductConstants.js';
+import { combineReducers } from 'redux';
+import {
+    actionTypes,
+    PRODUCT_QUESTIONNAIRE
+} from './SoftwareProductConstants.js';
 import SoftwareProductAttachmentsReducer from './attachments/SoftwareProductAttachmentsReducer.js';
 import HeatValidationReducer from './attachments/validation/HeatValidationReducer.js';
 import HeatSetupReducer from './attachments/setup/HeatSetupReducer.js';
-import {actionTypes as heatSetupActionTypes} from './attachments/setup/HeatSetupConstants.js';
+import { actionTypes as heatSetupActionTypes } from './attachments/setup/HeatSetupConstants.js';
 import SoftwareProductCreationReducer from './creation/SoftwareProductCreationReducer.js';
 import SoftwareProductDetailsReducer from './details/SoftwareProductDetailsReducer.js';
 import SoftwareProductProcessesListReducer from './processes/SoftwareProductProcessesListReducer.js';
@@ -28,10 +31,10 @@ import SoftwareProductDeploymentEditorReducer from './deployment/editor/Software
 import SoftwareProductNetworksListReducer from './networks/SoftwareProductNetworksListReducer.js';
 import SoftwareProductComponentsListReducer from './components/SoftwareProductComponentsListReducer.js';
 import SoftwareProductComponentEditorReducer from './components/SoftwareProductComponentEditorReducer.js';
-import  {actionTypes as processesActionTypes} from './processes/SoftwareProductProcessesConstants.js';
-import SoftwareProductComponentProcessesListReducer  from './components/processes/SoftwareProductComponentProcessesListReducer.js';
+import { actionTypes as processesActionTypes } from './processes/SoftwareProductProcessesConstants.js';
+import SoftwareProductComponentProcessesListReducer from './components/processes/SoftwareProductComponentProcessesListReducer.js';
 import SoftwareProductComponentProcessesEditorReducer from './components/processes/SoftwareProductComponentProcessesEditorReducer.js';
-import  {actionTypes as componentProcessesActionTypes} from './components/processes/SoftwareProductComponentProcessesConstants.js';
+import { actionTypes as componentProcessesActionTypes } from './components/processes/SoftwareProductComponentProcessesConstants.js';
 import SoftwareProductComponentsNICListReducer from './components/network/SoftwareProductComponentsNICListReducer.js';
 import SoftwareProductComponentsNICEditorReducer from './components/network/SoftwareProductComponentsNICEditorReducer.js';
 import SoftwareProductComponentsImageListReducer from './components/images/SoftwareProductComponentsImageListReducer.js';
@@ -40,63 +43,112 @@ import SoftwareProductComponentsNICCreationReducer from './components/network/NI
 import SoftwareProductComponentsMonitoringReducer from './components/monitoring/SoftwareProductComponentsMonitoringReducer.js';
 import SoftwareProductComponentsComputeFlavorListReducer from './components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js';
 import SoftwareProductComponentsComputeFlavorReducer from './components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
 import SoftwareProductDependenciesReducer from './dependencies/SoftwareProductDependenciesReducer.js';
-import {createJSONSchemaReducer, createComposedJSONSchemaReducer} from 'sdc-app/common/reducers/JSONSchemaReducer.js';
-import {COMPONENTS_QUESTIONNAIRE, COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
-import {IMAGE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js';
+import {
+    createJSONSchemaReducer,
+    createComposedJSONSchemaReducer
+} from 'sdc-app/common/reducers/JSONSchemaReducer.js';
+import {
+    COMPONENTS_QUESTIONNAIRE,
+    COMPONENTS_COMPUTE_QUESTIONNAIRE
+} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
+import { IMAGE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js';
 
 export default combineReducers({
-	softwareProductAttachments: combineReducers({
-		attachmentsDetails: SoftwareProductAttachmentsReducer,
-		heatValidation: HeatValidationReducer,
-		heatSetup: HeatSetupReducer,
-		heatSetupCache: (state = {}, action) => action.type === heatSetupActionTypes.FILL_HEAT_SETUP_CACHE ? action.payload : state
-	}),
-	softwareProductCreation: createPlainDataReducer(SoftwareProductCreationReducer),
-	softwareProductEditor: createPlainDataReducer(SoftwareProductDetailsReducer),
-	softwareProductProcesses: combineReducers({
-		processesList: SoftwareProductProcessesListReducer,
-		processesEditor: createPlainDataReducer(SoftwareProductProcessesEditorReducer),
-		processToDelete: (state = false, action) => action.type === processesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM ? action.processToDelete : state
-	}),
-	softwareProductDeployment: combineReducers({
-		deploymentFlavors: SoftwareProductDeploymentListReducer,
-		deploymentFlavorEditor: createPlainDataReducer(SoftwareProductDeploymentEditorReducer)
-	}),
-	softwareProductNetworks: combineReducers({
-		networksList: SoftwareProductNetworksListReducer
-	}),
-	softwareProductDependencies: SoftwareProductDependenciesReducer,
-	softwareProductComponents: combineReducers({
-		componentsList: SoftwareProductComponentsListReducer,
-		componentEditor: createPlainDataReducer(createComposedJSONSchemaReducer(COMPONENTS_QUESTIONNAIRE, SoftwareProductComponentEditorReducer)),
-		componentProcesses: combineReducers({
-			processesList: SoftwareProductComponentProcessesListReducer,
-			processesEditor: createPlainDataReducer(SoftwareProductComponentProcessesEditorReducer),
-			processToDelete: (state = false, action) => action.type === componentProcessesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM ? action.processToDelete : state,
-		}),
-		network: combineReducers({
-			nicList: SoftwareProductComponentsNICListReducer,
-			nicEditor: createPlainDataReducer(createComposedJSONSchemaReducer(NIC_QUESTIONNAIRE, SoftwareProductComponentsNICEditorReducer)),
-			nicCreation: createPlainDataReducer(SoftwareProductComponentsNICCreationReducer)
-		}),
-		images: combineReducers({
-			imagesList: SoftwareProductComponentsImageListReducer,
-			imageEditor: createPlainDataReducer(createComposedJSONSchemaReducer(IMAGE_QUESTIONNAIRE, SoftwareProductComponentsImageEditorReducer))
-		}),
-		computeFlavor: combineReducers({
-			computesList: SoftwareProductComponentsComputeFlavorListReducer,
-			computeEditor: createPlainDataReducer(createComposedJSONSchemaReducer(COMPONENTS_COMPUTE_QUESTIONNAIRE, SoftwareProductComponentsComputeFlavorReducer)),
-		}),
-		monitoring: SoftwareProductComponentsMonitoringReducer
-	}),
-	softwareProductCategories: (state = [], action) => {
-		if (action.type === actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED) {
-			return action.softwareProductCategories;
-		}
-		return state;
-	},
-	softwareProductQuestionnaire: createJSONSchemaReducer(PRODUCT_QUESTIONNAIRE)
+    softwareProductAttachments: combineReducers({
+        attachmentsDetails: SoftwareProductAttachmentsReducer,
+        heatValidation: HeatValidationReducer,
+        heatSetup: HeatSetupReducer,
+        heatSetupCache: (state = {}, action) =>
+            action.type === heatSetupActionTypes.FILL_HEAT_SETUP_CACHE
+                ? action.payload
+                : state
+    }),
+    softwareProductCreation: createPlainDataReducer(
+        SoftwareProductCreationReducer
+    ),
+    softwareProductEditor: createPlainDataReducer(
+        SoftwareProductDetailsReducer
+    ),
+    softwareProductProcesses: combineReducers({
+        processesList: SoftwareProductProcessesListReducer,
+        processesEditor: createPlainDataReducer(
+            SoftwareProductProcessesEditorReducer
+        ),
+        processToDelete: (state = false, action) =>
+            action.type ===
+            processesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM
+                ? action.processToDelete
+                : state
+    }),
+    softwareProductDeployment: combineReducers({
+        deploymentFlavors: SoftwareProductDeploymentListReducer,
+        deploymentFlavorEditor: createPlainDataReducer(
+            SoftwareProductDeploymentEditorReducer
+        )
+    }),
+    softwareProductNetworks: combineReducers({
+        networksList: SoftwareProductNetworksListReducer
+    }),
+    softwareProductDependencies: SoftwareProductDependenciesReducer,
+    softwareProductComponents: combineReducers({
+        componentsList: SoftwareProductComponentsListReducer,
+        componentEditor: createPlainDataReducer(
+            createComposedJSONSchemaReducer(
+                COMPONENTS_QUESTIONNAIRE,
+                SoftwareProductComponentEditorReducer
+            )
+        ),
+        componentProcesses: combineReducers({
+            processesList: SoftwareProductComponentProcessesListReducer,
+            processesEditor: createPlainDataReducer(
+                SoftwareProductComponentProcessesEditorReducer
+            ),
+            processToDelete: (state = false, action) =>
+                action.type ===
+                componentProcessesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM
+                    ? action.processToDelete
+                    : state
+        }),
+        network: combineReducers({
+            nicList: SoftwareProductComponentsNICListReducer,
+            nicEditor: createPlainDataReducer(
+                createComposedJSONSchemaReducer(
+                    NIC_QUESTIONNAIRE,
+                    SoftwareProductComponentsNICEditorReducer
+                )
+            ),
+            nicCreation: createPlainDataReducer(
+                SoftwareProductComponentsNICCreationReducer
+            )
+        }),
+        images: combineReducers({
+            imagesList: SoftwareProductComponentsImageListReducer,
+            imageEditor: createPlainDataReducer(
+                createComposedJSONSchemaReducer(
+                    IMAGE_QUESTIONNAIRE,
+                    SoftwareProductComponentsImageEditorReducer
+                )
+            )
+        }),
+        computeFlavor: combineReducers({
+            computesList: SoftwareProductComponentsComputeFlavorListReducer,
+            computeEditor: createPlainDataReducer(
+                createComposedJSONSchemaReducer(
+                    COMPONENTS_COMPUTE_QUESTIONNAIRE,
+                    SoftwareProductComponentsComputeFlavorReducer
+                )
+            )
+        }),
+        monitoring: SoftwareProductComponentsMonitoringReducer
+    }),
+    softwareProductCategories: (state = [], action) => {
+        if (action.type === actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED) {
+            return action.softwareProductCategories;
+        }
+        return state;
+    },
+    softwareProductQuestionnaire: createJSONSchemaReducer(PRODUCT_QUESTIONNAIRE)
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
index d942172973..4d5887be6f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
@@ -13,100 +13,142 @@
  * 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import HeatSetupActionHelper from './setup/HeatSetupActionHelper.js';
 import SoftwareProductAttachmentsView from './SoftwareProductAttachmentsView.jsx';
-import {errorLevels} from 'sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js';
+import { errorLevels } from 'sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js';
 import HeatSetup from './setup/HeatSetup.js';
-import {doesHeatDataExist} from './SoftwareProductAttachmentsUtils.js';
+import { doesHeatDataExist } from './SoftwareProductAttachmentsUtils.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import SoftwareProductAttachmentsActionHelper from './SoftwareProductAttachmentsActionHelper.js';
 
-export const mapStateToProps = (state) => {
-	let {
-		softwareProduct: {
-			softwareProductEditor:{data: currentSoftwareProduct = {}},
-			softwareProductAttachments: {attachmentsDetails: {activeTab}, heatSetup, heatSetupCache, heatValidation : {errorList}}
-		}
-	} = state;
+export const mapStateToProps = state => {
+    let {
+        softwareProduct: {
+            softwareProductEditor: { data: currentSoftwareProduct = {} },
+            softwareProductAttachments: {
+                attachmentsDetails: { activeTab },
+                heatSetup,
+                heatSetupCache,
+                heatValidation: { errorList }
+            }
+        }
+    } = state;
 
-	let {unassigned = [], modules = []} = heatSetup;
-	let goToOverview = true;
-	if (errorList) {
-		for (let i = 0 ; i < errorList.length ; i++) {
-			if (errorList[i].level === errorLevels.ERROR) {
-				goToOverview = false;
-			}
-		}
-	}
-	let heatDataExist = doesHeatDataExist(heatSetup);
+    let { unassigned = [], modules = [] } = heatSetup;
+    let goToOverview = true;
+    if (errorList) {
+        for (let i = 0; i < errorList.length; i++) {
+            if (errorList[i].level === errorLevels.ERROR) {
+                goToOverview = false;
+            }
+        }
+    }
+    let heatDataExist = doesHeatDataExist(heatSetup);
 
-	let {version, onboardingOrigin} = currentSoftwareProduct;
-	return {
-		isValidationAvailable: unassigned.length === 0 && modules.length > 0,
-		heatSetup,
-		heatSetupCache,
-		heatDataExist,
-		goToOverview,
-		HeatSetupComponent: HeatSetup,
-		version,
-		onboardingOrigin,
-		activeTab,
-		candidateInProcess: !!currentSoftwareProduct.candidateOnboardingOrigin
-	};
+    let { version, onboardingOrigin } = currentSoftwareProduct;
+    return {
+        isValidationAvailable: unassigned.length === 0 && modules.length > 0,
+        heatSetup,
+        heatSetupCache,
+        heatDataExist,
+        goToOverview,
+        HeatSetupComponent: HeatSetup,
+        version,
+        onboardingOrigin,
+        activeTab,
+        candidateInProcess: !!currentSoftwareProduct.candidateOnboardingOrigin
+    };
 };
 
-export const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDownload: ({heatCandidate, isReadOnlyMode}) => SoftwareProductActionHelper.downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}),
-		onUpload: (formData) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Upload will erase existing data. Do you want to continue?'),
-				confirmationButtonText: i18n('Continue'),
-				title: i18n('WARNING'),
+export const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDownload: ({ heatCandidate, isReadOnlyMode }) =>
+            SoftwareProductActionHelper.downloadHeatFile(dispatch, {
+                softwareProductId,
+                heatCandidate,
+                isReadOnlyMode,
+                version
+            }),
+        onUpload: formData =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n(
+                        'Upload will erase existing data. Do you want to continue?'
+                    ),
+                    confirmationButtonText: i18n('Continue'),
+                    title: i18n('WARNING'),
 
-				onConfirmed: ()=>SoftwareProductActionHelper.uploadFile(dispatch, {
-					softwareProductId,
-					formData,
-					failedNotificationTitle: i18n('Upload validation failed'),
-					version
-				})
-			}
-		}),
-		onUploadAbort: () => {
-			SoftwareProductActionHelper.abortCandidateValidation(dispatch, {softwareProductId, version})
-				.then(()=>{
-					ScreensHelper.loadScreen(dispatch, {
-						screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {softwareProductId, version}
-					});
-				});
-		},
-		onInvalidFileUpload: () => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_ERROR,
-			data: {
-				title: i18n('Upload Failed'),
-				confirmationButtonText: i18n('Continue'),
-				msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist')
-			}
-		}),
-		onSave: (heatCandidate) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}),
-		onGoToOverview: () => ScreensHelper.loadScreen(dispatch, {
-			screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-			props: {softwareProductId, version}
-		}),
-		onProcessAndValidate: ({heatData, heatDataCache, isReadOnlyMode}) => {
-			return HeatSetupActionHelper.processAndValidateHeat(dispatch,
-				{softwareProductId, heatData, heatDataCache, isReadOnlyMode, version});
-		},
-		setActiveTab: ({activeTab}) => SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab})
-
-	};
+                    onConfirmed: () =>
+                        SoftwareProductActionHelper.uploadFile(dispatch, {
+                            softwareProductId,
+                            formData,
+                            failedNotificationTitle: i18n(
+                                'Upload validation failed'
+                            ),
+                            version
+                        })
+                }
+            }),
+        onUploadAbort: () => {
+            SoftwareProductActionHelper.abortCandidateValidation(dispatch, {
+                softwareProductId,
+                version
+            }).then(() => {
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                    screenType: screenTypes.SOFTWARE_PRODUCT,
+                    props: { softwareProductId, version }
+                });
+            });
+        },
+        onInvalidFileUpload: () =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                data: {
+                    title: i18n('Upload Failed'),
+                    confirmationButtonText: i18n('Continue'),
+                    msg: i18n(
+                        "no zip or csar file was uploaded or expected file doesn't exist"
+                    )
+                }
+            }),
+        onSave: heatCandidate =>
+            SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+                dispatch,
+                {
+                    softwareProductId,
+                    heatCandidate,
+                    version
+                }
+            ),
+        onGoToOverview: () =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version }
+            }),
+        onProcessAndValidate: ({ heatData, heatDataCache, isReadOnlyMode }) => {
+            return HeatSetupActionHelper.processAndValidateHeat(dispatch, {
+                softwareProductId,
+                heatData,
+                heatDataCache,
+                isReadOnlyMode,
+                version
+            });
+        },
+        setActiveTab: ({ activeTab }) =>
+            SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {
+                activeTab
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductAttachmentsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductAttachmentsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js
index ae4a615a40..2d35bc27ee 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js
@@ -14,13 +14,13 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './SoftwareProductAttachmentsConstants';
+import { actionTypes } from './SoftwareProductAttachmentsConstants';
 
 export default {
-	setActiveTab(dispatch, {activeTab}) {
-		dispatch({
-			type: actionTypes.SET_ACTIVE_TAB,
-			activeTab
-		});
-	}
+    setActiveTab(dispatch, { activeTab }) {
+        dispatch({
+            type: actionTypes.SET_ACTIVE_TAB,
+            activeTab
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js
index 67265909d7..aff0a3dbdf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js
@@ -16,10 +16,10 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const tabsMapping = {
-	SETUP: 1,
-	VALIDATION: 2
+    SETUP: 1,
+    VALIDATION: 2
 };
 
 export const actionTypes = keyMirror({
-	SET_ACTIVE_TAB: null
+    SET_ACTIVE_TAB: null
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js
index 5f6538ab7e..5d9a37f98a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductAttachmentsConstants.js';
+import { actionTypes } from './SoftwareProductAttachmentsConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.SET_ACTIVE_TAB:
-			return {activeTab: action.activeTab};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.SET_ACTIVE_TAB:
+            return { activeTab: action.activeTab };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js
index 2e76b11630..f4e77229e9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js
@@ -15,11 +15,11 @@
  */
 
 export function doesHeatDataExist(heatData) {
-	let result = false;
-	for (let key of Object.keys(heatData)) {
-		if(heatData[key].length > 0) {
-			result = true;
-		}
-	}
-	return result;
+    let result = false;
+    for (let key of Object.keys(heatData)) {
+        if (heatData[key].length > 0) {
+            result = true;
+        }
+    }
+    return result;
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
index 2a849f376e..2007493d48 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
@@ -13,140 +13,208 @@
  * 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 PropTypes from 'prop-types';
 import accept from 'attr-accept';
-import {SVGIcon, Tab, Tabs} from 'sdc-ui/lib/react';
-import {tabsMapping} from './SoftwareProductAttachmentsConstants.js';
+import { SVGIcon, Tab, Tabs } from 'sdc-ui/lib/react';
+import { tabsMapping } from './SoftwareProductAttachmentsConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import HeatValidation from './validation/HeatValidation.js';
-import {onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { onboardingOriginTypes } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 import Button from 'sdc-ui/lib/react/Button.js';
 
 class HeatScreenView extends Component {
+    static propTypes = {
+        isValidationAvailable: PropTypes.bool,
+        goToOverview: PropTypes.bool,
+        setActiveTab: PropTypes.func
+    };
 
-	static propTypes = {
-		isValidationAvailable: PropTypes.bool,
-		goToOverview: PropTypes.bool,
-		setActiveTab: PropTypes.func
-	};
+    componentDidMount() {
+        if (!this.props.goToOverview && this.props.candidateInProcess) {
+            this.props.setActiveTab({ activeTab: tabsMapping.VALIDATION });
+        }
+    }
 
-	componentDidMount() {
-		 if (!this.props.goToOverview && this.props.candidateInProcess) {
-			this.props.setActiveTab({activeTab: tabsMapping.VALIDATION});
-		 }
-	}
+    render() {
+        let {
+            isValidationAvailable,
+            isReadOnlyMode,
+            heatDataExist,
+            onDownload,
+            softwareProductId,
+            onProcessAndValidate,
+            onUploadAbort,
+            candidateInProcess,
+            heatSetup,
+            HeatSetupComponent,
+            onGoToOverview,
+            version,
+            onboardingOrigin,
+            activeTab,
+            setActiveTab,
+            ...other
+        } = this.props;
 
-	render() {
-		let {isValidationAvailable, isReadOnlyMode, heatDataExist, onDownload, softwareProductId, onProcessAndValidate, onUploadAbort,
-			candidateInProcess, heatSetup, HeatSetupComponent, onGoToOverview, version, onboardingOrigin, activeTab, setActiveTab, ...other} = this.props;
+        return (
+            <div className="vsp-attachments-view">
+                <div className="attachments-view-controllers">
+                    {activeTab === tabsMapping.SETUP &&
+                        candidateInProcess && (
+                            <Button
+                                data-test-id="proceed-to-validation-btn"
+                                disabled={!isValidationAvailable}
+                                className="proceed-to-validation-btn"
+                                onClick={() => this.validate()}>
+                                {i18n('PROCEED TO VALIDATION')}
+                            </Button>
+                        )}
+                    {candidateInProcess && (
+                        <SVGIcon
+                            onClick={onUploadAbort}
+                            name="close"
+                            className="icon-component abort-btn"
+                            label={i18n('ABORT')}
+                            labelPosition="right"
+                            color="secondary"
+                            data-test-id="abort-btn"
+                        />
+                    )}
+                    {activeTab === tabsMapping.VALIDATION &&
+                        softwareProductId && (
+                            <Button
+                                btnType="outline"
+                                data-test-id="go-to-overview"
+                                disabled={this.props.goToOverview !== true}
+                                className="go-to-overview-btn"
+                                onClick={
+                                    this.props.goToOverview
+                                        ? () => onGoToOverview({ version })
+                                        : undefined
+                                }>
+                                {i18n('GO TO OVERVIEW')}
+                            </Button>
+                        )}
+                    <div className="separator" />
+                    <SVGIcon
+                        disabled={heatDataExist ? false : true}
+                        name="download"
+                        className="icon-component"
+                        color="dark-gray"
+                        onClick={
+                            heatDataExist
+                                ? () =>
+                                      onDownload({
+                                          heatCandidate: heatSetup,
+                                          isReadOnlyMode:
+                                              isReadOnlyMode ||
+                                              !candidateInProcess,
+                                          version
+                                      })
+                                : undefined
+                        }
+                        data-test-id="download-heat"
+                    />
+                    <SVGIcon
+                        name="upload"
+                        className="icon-component"
+                        color="dark-gray"
+                        disabled={isReadOnlyMode || candidateInProcess}
+                        onClick={
+                            isReadOnlyMode
+                                ? undefined
+                                : evt =>
+                                      this.refs.hiddenImportFileInput.click(evt)
+                        }
+                        data-test-id="upload-heat"
+                    />
+                    <input
+                        ref="hiddenImportFileInput"
+                        type="file"
+                        name="fileInput"
+                        accept=".zip, .csar"
+                        onChange={evt => this.handleImport(evt)}
+                    />
+                </div>
+                <Tabs
+                    className="attachments-tabs"
+                    type="header"
+                    activeTab={activeTab}
+                    onTabClick={key => this.handleTabPress(key)}>
+                    <Tab
+                        tabId={tabsMapping.SETUP}
+                        title="Setup"
+                        disabled={
+                            onboardingOrigin === onboardingOriginTypes.CSAR
+                        }>
+                        <HeatSetupComponent
+                            heatDataExist={heatDataExist}
+                            changeAttachmentsTab={tab =>
+                                setActiveTab({ activeTab: tab })
+                            }
+                            onProcessAndValidate={onProcessAndValidate}
+                            softwareProductId={softwareProductId}
+                            isReadOnlyMode={isReadOnlyMode}
+                            version={version}
+                        />
+                    </Tab>
+                    <Tab
+                        tabId={tabsMapping.VALIDATION}
+                        title="Validation"
+                        disabled={!isValidationAvailable || candidateInProcess}>
+                        <HeatValidation {...other} />
+                    </Tab>
+                </Tabs>
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-attachments-view'>
-				<div className='attachments-view-controllers'>
-					{(activeTab === tabsMapping.SETUP) && candidateInProcess &&	
-						<Button  
-							data-test-id='proceed-to-validation-btn'
-							disabled={!isValidationAvailable} 
-							className='proceed-to-validation-btn'
-							onClick={()=>this.validate()}>{i18n('PROCEED TO VALIDATION')}</Button>
-					}
-					{candidateInProcess && <SVGIcon
-						onClick={onUploadAbort}
-						name='close'
-						className='icon-component abort-btn'
-						label={i18n('ABORT')}
-						labelPosition='right'
-						color='secondary'
-						data-test-id='abort-btn'/>
-					}
-					{(activeTab === tabsMapping.VALIDATION && softwareProductId) &&
-						<Button btnType='outline' 
-							data-test-id='go-to-overview'
-							disabled={this.props.goToOverview !== true}
-							className='go-to-overview-btn'
-							onClick={this.props.goToOverview ? () => onGoToOverview({version}) : undefined}>{i18n('GO TO OVERVIEW')}</Button>}						
-					<div className='separator'></div>
-					<SVGIcon
-						disabled={heatDataExist ? false : true}
-						name='download'
-						className='icon-component'
-						color='dark-gray'
-						onClick={heatDataExist ? () => onDownload({heatCandidate: heatSetup, isReadOnlyMode: isReadOnlyMode || !candidateInProcess, version}) : undefined}
-						data-test-id='download-heat'/>
-					<SVGIcon
-						name='upload'
-						className='icon-component'
-						color='dark-gray'
-						disabled={isReadOnlyMode || candidateInProcess}
-						onClick={isReadOnlyMode ? undefined : evt => this.refs.hiddenImportFileInput.click(evt)}
-						data-test-id='upload-heat'/>
-					<input
-						ref='hiddenImportFileInput'
-						type='file'
-						name='fileInput'
-						accept='.zip, .csar'
-						onChange={evt => this.handleImport(evt)}/>
-				</div>
-				<Tabs
-					className='attachments-tabs'
-					type='header'
-					activeTab={activeTab}
-					onTabClick={key => this.handleTabPress(key)}>
-					<Tab tabId={tabsMapping.SETUP} title='Setup' disabled={onboardingOrigin === onboardingOriginTypes.CSAR}>
-						<HeatSetupComponent
-							heatDataExist={heatDataExist}
-							changeAttachmentsTab={tab => setActiveTab({activeTab: tab})}
-							onProcessAndValidate={onProcessAndValidate}
-							softwareProductId={softwareProductId}
-							isReadOnlyMode={isReadOnlyMode}
-							version={version}/>
-					</Tab>
-					<Tab tabId={tabsMapping.VALIDATION} title='Validation' disabled={!isValidationAvailable || candidateInProcess}>
-						<HeatValidation {...other}/>
-					</Tab>
-				</Tabs>
-			</div>
-		);
-	}
-
-	handleTabPress(key) {
-		let {setActiveTab} = this.props;
-		switch (key) {
-			case tabsMapping.VALIDATION:
-				setActiveTab({activeTab: tabsMapping.VALIDATION});		
-				return;
-			case tabsMapping.SETUP:
-				setActiveTab({activeTab: tabsMapping.SETUP});
-				return;
-		}
-	}
-
-	handleImport(evt) {
-		evt.preventDefault();
-		let file = this.refs.hiddenImportFileInput.files[0];
-		if(! (file && file.size && accept(file, ['.zip', '.csar'])) ) {
-			this.props.onInvalidFileUpload();
-			return;
-		}
-		let {version} = this.props;
-		let formData = new FormData();
-		formData.append('upload', file);
-		this.refs.hiddenImportFileInput.value = '';
-		this.props.onUpload(formData, version);
-	}
-	validate() {
-		let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version, setActiveTab} = this.props;
-		onProcessAndValidate({heatData: heatSetup, heatDataCache: heatSetupCache, isReadOnlyMode, version}).then(
-			() => setActiveTab({activeTab: tabsMapping.VALIDATION})
-		);
-	}
-	save() {
-		return this.props.onboardingOrigin === onboardingOriginTypes.ZIP ?
-			this.props.onSave(this.props.heatSetup, this.props.version) :
-			Promise.resolve();
-	}
+    handleTabPress(key) {
+        let { setActiveTab } = this.props;
+        switch (key) {
+            case tabsMapping.VALIDATION:
+                setActiveTab({ activeTab: tabsMapping.VALIDATION });
+                return;
+            case tabsMapping.SETUP:
+                setActiveTab({ activeTab: tabsMapping.SETUP });
+                return;
+        }
+    }
 
+    handleImport(evt) {
+        evt.preventDefault();
+        let file = this.refs.hiddenImportFileInput.files[0];
+        if (!(file && file.size && accept(file, ['.zip', '.csar']))) {
+            this.props.onInvalidFileUpload();
+            return;
+        }
+        let { version } = this.props;
+        let formData = new FormData();
+        formData.append('upload', file);
+        this.refs.hiddenImportFileInput.value = '';
+        this.props.onUpload(formData, version);
+    }
+    validate() {
+        let {
+            heatSetup,
+            heatSetupCache,
+            onProcessAndValidate,
+            isReadOnlyMode,
+            version,
+            setActiveTab
+        } = this.props;
+        onProcessAndValidate({
+            heatData: heatSetup,
+            heatDataCache: heatSetupCache,
+            isReadOnlyMode,
+            version
+        }).then(() => setActiveTab({ activeTab: tabsMapping.VALIDATION }));
+    }
+    save() {
+        return this.props.onboardingOrigin === onboardingOriginTypes.ZIP
+            ? this.props.onSave(this.props.heatSetup, this.props.version)
+            : Promise.resolve();
+    }
 }
 
 export default HeatScreenView;
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js
index 21f6e6c77f..00130e4bc7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js
@@ -13,39 +13,55 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import HeatValidationView from './HeatValidationView.jsx';
 import HeatValidationActionHelper from './HeatValidationActionHelper.js';
-import {errorLevels, nodeFilters} from './HeatValidationConstants.js';
+import { errorLevels, nodeFilters } from './HeatValidationConstants.js';
 
-export const mapStateToProps = ({softwareProduct: {softwareProductAttachments: {heatValidation}}}) => {
-	let {attachmentsTree, selectedNode, errorList} = heatValidation;
-	let currentErrors = [], currentWarnings = [];
-	if (errorList) {
-		for (let i = 0 ; i < errorList.length ; i++) {
-			if (errorList[i].level === errorLevels.ERROR && (errorList[i].name === selectedNode || selectedNode === nodeFilters.ALL)) {
-				currentErrors[currentErrors.length] = errorList[i];
-			}
-			if (errorList[i].level === errorLevels.WARNING  && (errorList[i].name === selectedNode || selectedNode === nodeFilters.ALL)) {
-				currentWarnings[currentWarnings.length] = errorList[i];
-			}
-		}
-	}
-	return {
-		attachmentsTree,
-		selectedNode,
-		errorList,
-		currentErrors,
-		currentWarnings
-	};
+export const mapStateToProps = ({
+    softwareProduct: { softwareProductAttachments: { heatValidation } }
+}) => {
+    let { attachmentsTree, selectedNode, errorList } = heatValidation;
+    let currentErrors = [],
+        currentWarnings = [];
+    if (errorList) {
+        for (let i = 0; i < errorList.length; i++) {
+            if (
+                errorList[i].level === errorLevels.ERROR &&
+                (errorList[i].name === selectedNode ||
+                    selectedNode === nodeFilters.ALL)
+            ) {
+                currentErrors[currentErrors.length] = errorList[i];
+            }
+            if (
+                errorList[i].level === errorLevels.WARNING &&
+                (errorList[i].name === selectedNode ||
+                    selectedNode === nodeFilters.ALL)
+            ) {
+                currentWarnings[currentWarnings.length] = errorList[i];
+            }
+        }
+    }
+    return {
+        attachmentsTree,
+        selectedNode,
+        errorList,
+        currentErrors,
+        currentWarnings
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		toggleExpanded: (path) => HeatValidationActionHelper.toggleExpanded(dispatch, {path}),
-		onSelectNode: (nodeName) => HeatValidationActionHelper.onSelectNode(dispatch, {nodeName}),
-		onDeselectNode: () => HeatValidationActionHelper.onDeselectNode(dispatch)
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        toggleExpanded: path =>
+            HeatValidationActionHelper.toggleExpanded(dispatch, { path }),
+        onSelectNode: nodeName =>
+            HeatValidationActionHelper.onSelectNode(dispatch, { nodeName }),
+        onDeselectNode: () =>
+            HeatValidationActionHelper.onDeselectNode(dispatch)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(HeatValidationView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(HeatValidationView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js
index 73366c20cc..5e8e49cf8a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js
@@ -13,27 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './HeatValidationConstants.js';
+import { actionTypes } from './HeatValidationConstants.js';
 
 export default {
+    toggleExpanded(dispatch, { path }) {
+        dispatch({
+            type: actionTypes.TOGGLE_EXPANDED,
+            path
+        });
+    },
 
-	toggleExpanded(dispatch, {path}) {
-		dispatch({
-			type: actionTypes.TOGGLE_EXPANDED,
-			path
-		});
-	},
+    onSelectNode(dispatch, { nodeName }) {
+        dispatch({
+            type: actionTypes.SELECTED_NODE,
+            nodeName
+        });
+    },
 
-	onSelectNode(dispatch, {nodeName}) {
-		dispatch({
-			type: actionTypes.SELECTED_NODE,
-			nodeName
-		});
-	},
-
-	onDeselectNode(dispatch) {
-		dispatch({
-			type: actionTypes.UNSELECTED_NODE
-		});
-	}
+    onDeselectNode(dispatch) {
+        dispatch({
+            type: actionTypes.UNSELECTED_NODE
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js
index f783fe6482..8c9f54b5ba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js
@@ -17,41 +17,48 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 export const actionTypes = keyMirror({
-	TOGGLE_EXPANDED: null,
-	SELECTED_NODE: null,
-	UNSELECTED_NODE: null
+    TOGGLE_EXPANDED: null,
+    SELECTED_NODE: null,
+    UNSELECTED_NODE: null
 });
 
 export const errorTypes = keyMirror({
-	MISSING_FILE_IN_ZIP: i18n('missing file in zip'),
-	MISSING_FILE_IN_MANIFEST: i18n('missing file in manifest'),
-	MISSING_OR_ILLEGAL_FILE_TYPE_IN_MANIFEST: i18n('missing or illegal file type in manifest'),
-	FILE_IS_YML_WITHOUT_YML_EXTENSION: i18n('file is defined as a heat file but it doesn\'t have .yml or .yaml extension'),
-	FILE_IS_ENV_WITHOUT_ENV_EXTENSION: i18n('file is defined as an env file but it doesn\'t have .env extension'),
-	ILLEGAL_YAML_FILE_CONTENT: i18n('illegal yaml file content'),
-	ILLEGAL_HEAT_YAML_FILE_CONTENT: i18n('illegal HEAT yaml file content'),
-	MISSING_FILE_NAME_IN_MANIFEST: i18n('a file is written in manifest without file name'),
-	MISSING_ENV_FILE_IN_ZIP: i18n('missing env file in zip'),
-	ARTIFACT_NOT_IN_USE: i18n('artifact not in use')
+    MISSING_FILE_IN_ZIP: i18n('missing file in zip'),
+    MISSING_FILE_IN_MANIFEST: i18n('missing file in manifest'),
+    MISSING_OR_ILLEGAL_FILE_TYPE_IN_MANIFEST: i18n(
+        'missing or illegal file type in manifest'
+    ),
+    FILE_IS_YML_WITHOUT_YML_EXTENSION: i18n(
+        "file is defined as a heat file but it doesn't have .yml or .yaml extension"
+    ),
+    FILE_IS_ENV_WITHOUT_ENV_EXTENSION: i18n(
+        "file is defined as an env file but it doesn't have .env extension"
+    ),
+    ILLEGAL_YAML_FILE_CONTENT: i18n('illegal yaml file content'),
+    ILLEGAL_HEAT_YAML_FILE_CONTENT: i18n('illegal HEAT yaml file content'),
+    MISSING_FILE_NAME_IN_MANIFEST: i18n(
+        'a file is written in manifest without file name'
+    ),
+    MISSING_ENV_FILE_IN_ZIP: i18n('missing env file in zip'),
+    ARTIFACT_NOT_IN_USE: i18n('artifact not in use')
 });
 
 export const errorLevels = keyMirror({
-	WARNING: 'WARNING',
-	ERROR: 'ERROR'
+    WARNING: 'WARNING',
+    ERROR: 'ERROR'
 });
 export const nodeFilters = keyMirror({
-	ALL: 'All'
+    ALL: 'All'
 });
 export const nodeTypes = keyMirror({
-	heat: i18n('Heat'),
-	volume: i18n('Volume'),
-	network: i18n('Network'),
-	artifact: i18n('Artifact'),
-	env: i18n('Environment'),
-	other: i18n('')
+    heat: i18n('Heat'),
+    volume: i18n('Volume'),
+    network: i18n('Network'),
+    artifact: i18n('Artifact'),
+    env: i18n('Environment'),
+    other: i18n('')
 });
 
 export const mouseActions = keyMirror({
-	MOUSE_BUTTON_CLICK: 0
+    MOUSE_BUTTON_CLICK: 0
 });
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js
index 1d11bdd6b7..67e36ca040 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js
@@ -13,185 +13,242 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes as softwareProductsActionTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-import {actionTypes, nodeFilters} from './HeatValidationConstants.js';
+import { actionTypes as softwareProductsActionTypes } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes, nodeFilters } from './HeatValidationConstants.js';
 
-const mapVolumeData = ({fileName, env, errors}) => ({
-	name: fileName,
-	expanded: true,
-	type: 'volume',
-	children: env && [{
-		name: env.fileName,
-		errors: env.errors,
-		type: 'env'
-	}],
-	errors
+const mapVolumeData = ({ fileName, env, errors }) => ({
+    name: fileName,
+    expanded: true,
+    type: 'volume',
+    children: env && [
+        {
+            name: env.fileName,
+            errors: env.errors,
+            type: 'env'
+        }
+    ],
+    errors
 });
 
-const mapNetworkData = ({fileName, env, errors}) => ({
-	name: fileName,
-	expanded: true,
-	type: 'network',
-	children: env && [{
-		name: env.fileName,
-		errors: env.errors,
-		type: 'env'
-	}],
-	errors
+const mapNetworkData = ({ fileName, env, errors }) => ({
+    name: fileName,
+    expanded: true,
+    type: 'network',
+    children: env && [
+        {
+            name: env.fileName,
+            errors: env.errors,
+            type: 'env'
+        }
+    ],
+    errors
 });
 
-const mapArtifactsData = ({fileName, errors}) => ({
-	name: fileName,
-	type: 'artifact',
-	errors
+const mapArtifactsData = ({ fileName, errors }) => ({
+    name: fileName,
+    type: 'artifact',
+    errors
 });
 
-const mapOtherData = ({fileName, errors}) => ({
-	name: fileName,
-	type: 'other',
-	errors
+const mapOtherData = ({ fileName, errors }) => ({
+    name: fileName,
+    type: 'other',
+    errors
 });
 
-
-const mapHeatData = ({fileName, env, nested, volume, network, artifacts, errors, other}) => ({
-	name: fileName,
-	expanded: true,
-	type: 'heat',
-	errors,
-	children: [
-		...(volume ? volume.map(mapVolumeData) : []),
-		...(network ? network.map(mapNetworkData) : []),
-		...(env ? [{
-			name: env.fileName,
-			errors: env.errors,
-			type: 'env'
-		}] : []),
-		...(artifacts ? artifacts.map(mapArtifactsData) : []),
-		...(other ? other.map(mapOtherData) : []),
-		...(nested ? nested.map(mapHeatData) : [])
-	]
+const mapHeatData = ({
+    fileName,
+    env,
+    nested,
+    volume,
+    network,
+    artifacts,
+    errors,
+    other
+}) => ({
+    name: fileName,
+    expanded: true,
+    type: 'heat',
+    errors,
+    children: [
+        ...(volume ? volume.map(mapVolumeData) : []),
+        ...(network ? network.map(mapNetworkData) : []),
+        ...(env
+            ? [
+                  {
+                      name: env.fileName,
+                      errors: env.errors,
+                      type: 'env'
+                  }
+              ]
+            : []),
+        ...(artifacts ? artifacts.map(mapArtifactsData) : []),
+        ...(other ? other.map(mapOtherData) : []),
+        ...(nested ? nested.map(mapHeatData) : [])
+    ]
 });
 
 function createErrorList(node, parent, deep = 0, errorList = []) {
-	if (node.errors) {
-		errorList.push(...node.errors.map((error) => ({
-			level: error.level,
-			errorMessage: error.message,
-			name: node.name,
-			hasParent: deep > 2,
-			parentName: parent.name,
-			type: node.type,
-		})));
-	}
-	if (node.children && node.children.length) {
-		node.children.map((child) => createErrorList(child, node, deep + 1, errorList));
-	}
-	return errorList;
+    if (node.errors) {
+        errorList.push(
+            ...node.errors.map(error => ({
+                level: error.level,
+                errorMessage: error.message,
+                name: node.name,
+                hasParent: deep > 2,
+                parentName: parent.name,
+                type: node.type
+            }))
+        );
+    }
+    if (node.children && node.children.length) {
+        node.children.map(child =>
+            createErrorList(child, node, deep + 1, errorList)
+        );
+    }
+    return errorList;
 }
 
 const mapValidationDataToTree = (validationData, packageName) => {
-	let {heat, nested, volume, network, artifacts, other} = validationData.importStructure || {};
-	return {
-		children: [
-			{
-				name: packageName,
-				expanded: true,
-				type: 'heat',
-				header: true,
-				children: (heat ? heat.map(mapHeatData) : nested ? nested.map(mapHeatData) : [])
-			},
-			...(artifacts ? [{
-				name: 'artifacts',
-				expanded: true,
-				type: 'artifact',
-				children: (artifacts ? artifacts.map(mapArtifactsData) : [])
-			}] : []),
-			...(network ? [{
-				name: 'networks',
-				expanded: true,
-				type: 'network',
-				children: (network ? network.map(mapNetworkData) : []),
-			}] : []),
-			...(volume ? [{
-				name: 'volume',
-				expanded: true,
-				type: 'volume',
-				children: (volume ? volume.map(mapVolumeData) : []),
-			}] : []),
-			...(other ? [{
-				name: 'other',
-				expanded: true,
-				type: 'other',
-				children: (other ? other.map(mapOtherData) : []),
-			}] : [])
-		]
-	};
+    let { heat, nested, volume, network, artifacts, other } =
+        validationData.importStructure || {};
+    return {
+        children: [
+            {
+                name: packageName,
+                expanded: true,
+                type: 'heat',
+                header: true,
+                children: heat
+                    ? heat.map(mapHeatData)
+                    : nested ? nested.map(mapHeatData) : []
+            },
+            ...(artifacts
+                ? [
+                      {
+                          name: 'artifacts',
+                          expanded: true,
+                          type: 'artifact',
+                          children: artifacts
+                              ? artifacts.map(mapArtifactsData)
+                              : []
+                      }
+                  ]
+                : []),
+            ...(network
+                ? [
+                      {
+                          name: 'networks',
+                          expanded: true,
+                          type: 'network',
+                          children: network ? network.map(mapNetworkData) : []
+                      }
+                  ]
+                : []),
+            ...(volume
+                ? [
+                      {
+                          name: 'volume',
+                          expanded: true,
+                          type: 'volume',
+                          children: volume ? volume.map(mapVolumeData) : []
+                      }
+                  ]
+                : []),
+            ...(other
+                ? [
+                      {
+                          name: 'other',
+                          expanded: true,
+                          type: 'other',
+                          children: other ? other.map(mapOtherData) : []
+                      }
+                  ]
+                : [])
+        ]
+    };
 };
 
 const toggleExpanded = (node, path) => {
-	let newNode = {...node};
-	if (path.length === 0) {
-		newNode.expanded = !node.expanded;
-	} else {
-		let index = path[0];
-		newNode.children = [
-			...node.children.slice(0, index),
-			toggleExpanded(node.children[index], path.slice(1)),
-			...node.children.slice(index + 1)
-		];
-	}
-	return newNode;
+    let newNode = { ...node };
+    if (path.length === 0) {
+        newNode.expanded = !node.expanded;
+    } else {
+        let index = path[0];
+        newNode.children = [
+            ...node.children.slice(0, index),
+            toggleExpanded(node.children[index], path.slice(1)),
+            ...node.children.slice(index + 1)
+        ];
+    }
+    return newNode;
 };
 
 const expandSelected = (node, selectedNode) => {
-	let shouldExpand = node.name === selectedNode;
-	let children = node.children && node.children.map(child => {
-		let {shouldExpand: shouldExpandChild, node: newChild} = expandSelected(child, selectedNode);
-		shouldExpand = shouldExpand || shouldExpandChild;
-		return newChild;
-	});
+    let shouldExpand = node.name === selectedNode;
+    let children =
+        node.children &&
+        node.children.map(child => {
+            let {
+                shouldExpand: shouldExpandChild,
+                node: newChild
+            } = expandSelected(child, selectedNode);
+            shouldExpand = shouldExpand || shouldExpandChild;
+            return newChild;
+        });
 
-	return {
-		node: {
-			...node,
-			expanded: node.expanded || shouldExpand,
-			children
-		},
-		shouldExpand
-	};
+    return {
+        node: {
+            ...node,
+            expanded: node.expanded || shouldExpand,
+            children
+        },
+        shouldExpand
+    };
 };
 
-export default (state = {attachmentsTree: {}}, action) => {
-	switch (action.type) {
-		case softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED:
-			let currentSoftwareProduct = action.response;
-			const packageName = currentSoftwareProduct.networkPackageName;
-			let attachmentsTree = currentSoftwareProduct.validationData ? mapValidationDataToTree(currentSoftwareProduct.validationData, packageName) : {};
-			let errorList = createErrorList(attachmentsTree);
-			return {
-				...state,
-				attachmentsTree,
-				errorList,
-				selectedNode: nodeFilters.ALL
-			};
-		case actionTypes.TOGGLE_EXPANDED:
-			return {
-				...state,
-				attachmentsTree: toggleExpanded(state.attachmentsTree, action.path)
-			};
-		case actionTypes.SELECTED_NODE:
-			let selectedNode = action.nodeName;
-			return {
-				...state,
-				attachmentsTree: expandSelected(state.attachmentsTree, selectedNode).node,
-				selectedNode
-			};
-		case actionTypes.UNSELECTED_NODE:
-			return {
-				...state,
-				selectedNode: nodeFilters.ALL
-			};
-		default:
-			return state;
-	}
+export default (state = { attachmentsTree: {} }, action) => {
+    switch (action.type) {
+        case softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED:
+            let currentSoftwareProduct = action.response;
+            const packageName = currentSoftwareProduct.networkPackageName;
+            let attachmentsTree = currentSoftwareProduct.validationData
+                ? mapValidationDataToTree(
+                      currentSoftwareProduct.validationData,
+                      packageName
+                  )
+                : {};
+            let errorList = createErrorList(attachmentsTree);
+            return {
+                ...state,
+                attachmentsTree,
+                errorList,
+                selectedNode: nodeFilters.ALL
+            };
+        case actionTypes.TOGGLE_EXPANDED:
+            return {
+                ...state,
+                attachmentsTree: toggleExpanded(
+                    state.attachmentsTree,
+                    action.path
+                )
+            };
+        case actionTypes.SELECTED_NODE:
+            let selectedNode = action.nodeName;
+            return {
+                ...state,
+                attachmentsTree: expandSelected(
+                    state.attachmentsTree,
+                    selectedNode
+                ).node,
+                selectedNode
+            };
+        case actionTypes.UNSELECTED_NODE:
+            return {
+                ...state,
+                selectedNode: nodeFilters.ALL
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
index 3fdaa9c591..c6ee5efd36 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
@@ -13,254 +13,352 @@
  * 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 PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Collapse from 'react-bootstrap/lib/Collapse.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {mouseActions, errorLevels, nodeFilters} from './HeatValidationConstants.js';
+import {
+    mouseActions,
+    errorLevels,
+    nodeFilters
+} from './HeatValidationConstants.js';
 
 const leftPanelWidth = 250;
 const typeToIcon = Object.freeze({
-	heat: 'nestedHeat',
-	volume: 'base',
-	network: 'network',
-	artifact: 'artifacts',
-	env: 'env',
-	other: 'other'
+    heat: 'nestedHeat',
+    volume: 'base',
+    network: 'network',
+    artifact: 'artifacts',
+    env: 'env',
+    other: 'other'
 });
 
-
 class HeatValidationView extends Component {
+    static propTypes = {
+        attachmentsTree: PropTypes.object.isRequired,
+        errorList: PropTypes.array.isRequired,
+        currentErrors: PropTypes.array.isRequired,
+        currentWarnings: PropTypes.array.isRequired,
+        onSelectNode: PropTypes.func.isRequired,
+        onDeselectNode: PropTypes.func.isRequired,
+        toggleExpanded: PropTypes.func.isRequired,
+        selectedNode: PropTypes.string
+    };
 
-	static propTypes = {
-		attachmentsTree: PropTypes.object.isRequired,
-		errorList: PropTypes.array.isRequired,
-		currentErrors: PropTypes.array.isRequired,
-		currentWarnings: PropTypes.array.isRequired,
-		onSelectNode: PropTypes.func.isRequired,
-		onDeselectNode: PropTypes.func.isRequired,
-		toggleExpanded: PropTypes.func.isRequired,
-		selectedNode: PropTypes.string
-	};
-
-	render() {
-		return (<div className='vsp-attachments-heat-validation' data-test-id='heat-validation-editor'>
-			<HeatFileTree errorList={this.props.errorList} attachmentsTree={this.props.attachmentsTree}
-				onSelectNode={this.props.onSelectNode} toggleExpanded={this.props.toggleExpanded}
-				selectedNode={this.props.selectedNode} onDeselectNode={this.props.onDeselectNode} />
-			<HeatMessageBoard errors={this.props.currentErrors} warnings={this.props.currentWarnings} selectedNode={this.props.selectedNode} />
-		</div> );
-	}
+    render() {
+        return (
+            <div
+                className="vsp-attachments-heat-validation"
+                data-test-id="heat-validation-editor">
+                <HeatFileTree
+                    errorList={this.props.errorList}
+                    attachmentsTree={this.props.attachmentsTree}
+                    onSelectNode={this.props.onSelectNode}
+                    toggleExpanded={this.props.toggleExpanded}
+                    selectedNode={this.props.selectedNode}
+                    onDeselectNode={this.props.onDeselectNode}
+                />
+                <HeatMessageBoard
+                    errors={this.props.currentErrors}
+                    warnings={this.props.currentWarnings}
+                    selectedNode={this.props.selectedNode}
+                />
+            </div>
+        );
+    }
 }
 
 function HeatFileTreeRow(props) {
-	let {node, path, toggleExpanded, selectedNode, selectNode} = props;
-	let isFolder = node.children && node.children.length > 0;
-	return (
-		<div onDoubleClick={() => toggleExpanded(path)} className={classNames({
-			'tree-node-row': true,
-			'tree-node-clicked': node.name === props.selectedNode
-		})} data-test-id='validation-tree-node'>
-			<div className='name-section'>
-				{
-					isFolder &&
-						<div onClick={() => toggleExpanded(path)}
-							className='tree-node-expander'>
-							<SVGIcon name={!node.expanded ? 'chevronUp' : 'chevronDown'} data-test-id='validation-tree-block-toggle'/>
-						</div>
-				}
-				{
-
-					<span className='tree-node-icon'>
-						<SVGIcon name={typeToIcon[node.type]} color={selectedNode === node.name ? 'primary' : 'secondary'}/>
-					</span>
-				}
-				{
-
-					<span  className='tree-node-name' onClick={() => selectNode(node.name)} data-test-id='validation-tree-node-name'>
-						{node.name ? node.name : 'UNKNOWN'}
-					</span>
-				}
-			</div>
-			<ErrorsAndWarningsCount errorList={node.errors} onClick={() => selectNode(node.name)} />
-		</div>);
+    let { node, path, toggleExpanded, selectedNode, selectNode } = props;
+    let isFolder = node.children && node.children.length > 0;
+    return (
+        <div
+            onDoubleClick={() => toggleExpanded(path)}
+            className={classNames({
+                'tree-node-row': true,
+                'tree-node-clicked': node.name === props.selectedNode
+            })}
+            data-test-id="validation-tree-node">
+            <div className="name-section">
+                {isFolder && (
+                    <div
+                        onClick={() => toggleExpanded(path)}
+                        className="tree-node-expander">
+                        <SVGIcon
+                            name={!node.expanded ? 'chevronUp' : 'chevronDown'}
+                            data-test-id="validation-tree-block-toggle"
+                        />
+                    </div>
+                )}
+                {
+                    <span className="tree-node-icon">
+                        <SVGIcon
+                            name={typeToIcon[node.type]}
+                            color={
+                                selectedNode === node.name
+                                    ? 'primary'
+                                    : 'secondary'
+                            }
+                        />
+                    </span>
+                }
+                {
+                    <span
+                        className="tree-node-name"
+                        onClick={() => selectNode(node.name)}
+                        data-test-id="validation-tree-node-name">
+                        {node.name ? node.name : 'UNKNOWN'}
+                    </span>
+                }
+            </div>
+            <ErrorsAndWarningsCount
+                errorList={node.errors}
+                onClick={() => selectNode(node.name)}
+            />
+        </div>
+    );
 }
 
 function HeatFileTreeHeader(props) {
-	let hasErrors = props.errorList.filter(error => error.level === errorLevels.ERROR).length > 0;
-	return (
-		<div onClick={() => props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true,
-			'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'>
-			<div className='tree-header-title' >
-				{/*<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''}  iconClassName='header-icon' />*/}
-				<span className={classNames({'tree-header-title-text' : true,
-					'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n('{title} {hasErrors}', {title: props.headerTitle, hasErrors: hasErrors ? '(Draft)' : ''})}</span>
-			</div>
-			<ErrorsAndWarningsCount errorList={props.errorList} size='large' />
-		</div>);
+    let hasErrors =
+        props.errorList.filter(error => error.level === errorLevels.ERROR)
+            .length > 0;
+    return (
+        <div
+            onClick={() => props.selectNode(nodeFilters.ALL)}
+            className={classNames({
+                'attachments-tree-header': true,
+                'header-selected': props.selectedNode === nodeFilters.ALL
+            })}
+            data-test-id="validation-tree-header">
+            <div className="tree-header-title">
+                {/*<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''}  iconClassName='header-icon' />*/}
+                <span
+                    className={classNames({
+                        'tree-header-title-text': true,
+                        'tree-header-title-selected':
+                            props.selectedNode === nodeFilters.ALL
+                    })}>
+                    {i18n('{title} {hasErrors}', {
+                        title: props.headerTitle,
+                        hasErrors: hasErrors ? '(Draft)' : ''
+                    })}
+                </span>
+            </div>
+            <ErrorsAndWarningsCount errorList={props.errorList} size="large" />
+        </div>
+    );
 }
 
-class HeatFileTree extends React.Component  {
-	static propTypes = {
-		attachmentsTree: PropTypes.object.isRequired,
-		errorList: PropTypes.array.isRequired,
-		onSelectNode: PropTypes.func.isRequired,
-		onDeselectNode: PropTypes.func.isRequired,
-		toggleExpanded: PropTypes.func.isRequired,
-		selectedNode: PropTypes.string
-	};
-	state = {
-		treeWidth: '400'
-	};
-	render() {
-		let {attachmentsTree} = this.props;
-		return (
-			<div className='validation-tree-section' style={{'width' : this.state.treeWidth + 'px'}}>
-				<div className='vsp-attachments-heat-validation-tree'>
-					<div className='tree-wrapper'>
-						{attachmentsTree && attachmentsTree.children && attachmentsTree.children.map((child, ind) => this.renderNode(child, [ind]))}
-					</div>
-				</div>
-				<div onMouseDown={(e) => this.onChangeTreeWidth(e)}
-					 className='vsp-attachments-heat-validation-separator' data-test-id='validation-tree-separator'></div>
-			</div>);
-	}
-	renderNode(node, path) {
-		let rand = Math.random() * (3000 - 1) + 1;
-		let isFolder = node.children && node.children.length > 0;
-		let {selectedNode} = this.props;
-		return (
-			<div key={node.name + rand} className={classNames({'tree-block-inside' : !node.header})}>
-				{
-					node.header ?
-					<HeatFileTreeHeader headerTitle={node.name} selectedNode={selectedNode} errorList={this.props.errorList} selectNode={(nodeName) => this.selectNode(nodeName)}  /> :
-					<HeatFileTreeRow toggleExpanded={this.props.toggleExpanded} node={node} path={path} selectedNode={selectedNode} selectNode={() => this.selectNode(node.name)} />
-				}
-				{
-					isFolder &&
-					<Collapse in={node.expanded}>
-						<div className='tree-node-children'>
-							{
-								node.children.map((child, ind) => this.renderNode(child, [...path, ind]))
-							}
-						</div>
-					</Collapse>
-				}
-			</div>
-		);
-	}
-
-
-
-
-
-	selectNode(currentSelectedNode) {
-		let {onDeselectNode, onSelectNode, selectedNode} = this.props;
-		if (currentSelectedNode !== selectedNode) {
-			onSelectNode(currentSelectedNode);
-		} else {
-			onDeselectNode();
-		}
-
-
+class HeatFileTree extends React.Component {
+    static propTypes = {
+        attachmentsTree: PropTypes.object.isRequired,
+        errorList: PropTypes.array.isRequired,
+        onSelectNode: PropTypes.func.isRequired,
+        onDeselectNode: PropTypes.func.isRequired,
+        toggleExpanded: PropTypes.func.isRequired,
+        selectedNode: PropTypes.string
+    };
+    state = {
+        treeWidth: '400'
+    };
+    render() {
+        let { attachmentsTree } = this.props;
+        return (
+            <div
+                className="validation-tree-section"
+                style={{ width: this.state.treeWidth + 'px' }}>
+                <div className="vsp-attachments-heat-validation-tree">
+                    <div className="tree-wrapper">
+                        {attachmentsTree &&
+                            attachmentsTree.children &&
+                            attachmentsTree.children.map((child, ind) =>
+                                this.renderNode(child, [ind])
+                            )}
+                    </div>
+                </div>
+                <div
+                    onMouseDown={e => this.onChangeTreeWidth(e)}
+                    className="vsp-attachments-heat-validation-separator"
+                    data-test-id="validation-tree-separator"
+                />
+            </div>
+        );
+    }
+    renderNode(node, path) {
+        let rand = Math.random() * (3000 - 1) + 1;
+        let isFolder = node.children && node.children.length > 0;
+        let { selectedNode } = this.props;
+        return (
+            <div
+                key={node.name + rand}
+                className={classNames({ 'tree-block-inside': !node.header })}>
+                {node.header ? (
+                    <HeatFileTreeHeader
+                        headerTitle={node.name}
+                        selectedNode={selectedNode}
+                        errorList={this.props.errorList}
+                        selectNode={nodeName => this.selectNode(nodeName)}
+                    />
+                ) : (
+                    <HeatFileTreeRow
+                        toggleExpanded={this.props.toggleExpanded}
+                        node={node}
+                        path={path}
+                        selectedNode={selectedNode}
+                        selectNode={() => this.selectNode(node.name)}
+                    />
+                )}
+                {isFolder && (
+                    <Collapse in={node.expanded}>
+                        <div className="tree-node-children">
+                            {node.children.map((child, ind) =>
+                                this.renderNode(child, [...path, ind])
+                            )}
+                        </div>
+                    </Collapse>
+                )}
+            </div>
+        );
+    }
 
-	}
+    selectNode(currentSelectedNode) {
+        let { onDeselectNode, onSelectNode, selectedNode } = this.props;
+        if (currentSelectedNode !== selectedNode) {
+            onSelectNode(currentSelectedNode);
+        } else {
+            onDeselectNode();
+        }
+    }
 
-	onChangeTreeWidth(e) {
-		if (e.button === mouseActions.MOUSE_BUTTON_CLICK) {
-			let onMouseMove = (e) => {
-				this.setState({treeWidth: e.clientX - leftPanelWidth});
-			};
-			let onMouseUp = () => {
-				document.removeEventListener('mousemove', onMouseMove);
-				document.removeEventListener('mouseup', onMouseUp);
-			};
-			document.addEventListener('mousemove', onMouseMove);
-			document.addEventListener('mouseup', onMouseUp);
-		}
-	}
+    onChangeTreeWidth(e) {
+        if (e.button === mouseActions.MOUSE_BUTTON_CLICK) {
+            let onMouseMove = e => {
+                this.setState({ treeWidth: e.clientX - leftPanelWidth });
+            };
+            let onMouseUp = () => {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            };
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        }
+    }
 }
 
 class HeatMessageBoard extends Component {
-	static propTypes = {
-		currentErrors: PropTypes.array,
-		currentWarnings: PropTypes.array,
-		selectedNode: PropTypes.string
-	};
-	render() {
-		let {errors, warnings} = this.props;
-		let allItems = [...errors, ...warnings];
-		return (
-			<div className='message-board-section'>
-				{ allItems.map(error => this.renderError(error)) }
-			</div>
-		);
-	}
-	renderError(error) {
-		let rand = Math.random() * (3000 - 1) + 1;
-		return (
-			<div
-				key={error.name + error.errorMessage + error.parentName + rand}
-				className='error-item' data-test-id='validation-error'>
-				{error.level === errorLevels.WARNING ?
-					<SVGIcon name='exclamationTriangleLine' iconClassName='large' color='warning' /> : <SVGIcon name='error' iconClassName='large' color='negative' /> }
-				<span className='error-item-file-type'>
-				{
-					(this.props.selectedNode === nodeFilters.ALL) ?
-						<span>
-							<span className='error-file-name'>
-								{error.name}
-							</span>
-							<span>
-								{error.errorMessage}
-							</span>
-						</span> :
-						error.errorMessage
-				}
-				</span>
-			</div>
-		);
-	}
+    static propTypes = {
+        currentErrors: PropTypes.array,
+        currentWarnings: PropTypes.array,
+        selectedNode: PropTypes.string
+    };
+    render() {
+        let { errors, warnings } = this.props;
+        let allItems = [...errors, ...warnings];
+        return (
+            <div className="message-board-section">
+                {allItems.map(error => this.renderError(error))}
+            </div>
+        );
+    }
+    renderError(error) {
+        let rand = Math.random() * (3000 - 1) + 1;
+        return (
+            <div
+                key={error.name + error.errorMessage + error.parentName + rand}
+                className="error-item"
+                data-test-id="validation-error">
+                {error.level === errorLevels.WARNING ? (
+                    <SVGIcon
+                        name="exclamationTriangleLine"
+                        iconClassName="large"
+                        color="warning"
+                    />
+                ) : (
+                    <SVGIcon
+                        name="error"
+                        iconClassName="large"
+                        color="negative"
+                    />
+                )}
+                <span className="error-item-file-type">
+                    {this.props.selectedNode === nodeFilters.ALL ? (
+                        <span>
+                            <span className="error-file-name">
+                                {error.name}
+                            </span>
+                            <span>{error.errorMessage}</span>
+                        </span>
+                    ) : (
+                        error.errorMessage
+                    )}
+                </span>
+            </div>
+        );
+    }
 }
 class ErrorsAndWarningsCount extends Component {
-	static propTypes = {
-		errorList: PropTypes.array,
-		size: PropTypes.string
-	};
-	render() {
-		let errors = this.getErrorsAndWarningsCount(this.props.errorList);
-		if (!errors) {
-			return null;
-		}
-		let {size} = this.props;
-		return (<div className='counters'>
-			{(errors.errorCount > 0) && <div className='counter'>
-				<SVGIcon name='error' color='negative' iconClassName={size}/>
-				<div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>{errors.errorCount}</div>
-			</div>}
-			{(errors.warningCount > 0) && <div className='counter'>
-				<SVGIcon name='exclamationTriangleLine' iconClassName={size} color='warning'/>
-				<div className={'warning-text ' + (size ? size : '')} data-test-id='validation-warning-count'>{errors.warningCount}</div>
-			</div>}
-		</div>);
-	}
-	getErrorsAndWarningsCount(errorList) {
-		let errorCount = 0, warningCount = 0;
-		if (errorList && errorList.length > 0) {
-			for (let i = 0; i < errorList.length; i++) {
-				if (errorList[i].level === errorLevels.ERROR) {
-					errorCount++;
-				} else if (errorList[i].level === errorLevels.WARNING) {
-					warningCount++;
-				}
-			}
-		}
-		if (errorCount === 0 && warningCount === 0) {
-			return null;
-		}
-		return {errorCount, warningCount};
-	}
+    static propTypes = {
+        errorList: PropTypes.array,
+        size: PropTypes.string
+    };
+    render() {
+        let errors = this.getErrorsAndWarningsCount(this.props.errorList);
+        if (!errors) {
+            return null;
+        }
+        let { size } = this.props;
+        return (
+            <div className="counters">
+                {errors.errorCount > 0 && (
+                    <div className="counter">
+                        <SVGIcon
+                            name="error"
+                            color="negative"
+                            iconClassName={size}
+                        />
+                        <div
+                            className={'error-text ' + (size ? size : '')}
+                            data-test-id="validation-error-count">
+                            {errors.errorCount}
+                        </div>
+                    </div>
+                )}
+                {errors.warningCount > 0 && (
+                    <div className="counter">
+                        <SVGIcon
+                            name="exclamationTriangleLine"
+                            iconClassName={size}
+                            color="warning"
+                        />
+                        <div
+                            className={'warning-text ' + (size ? size : '')}
+                            data-test-id="validation-warning-count">
+                            {errors.warningCount}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+    getErrorsAndWarningsCount(errorList) {
+        let errorCount = 0,
+            warningCount = 0;
+        if (errorList && errorList.length > 0) {
+            for (let i = 0; i < errorList.length; i++) {
+                if (errorList[i].level === errorLevels.ERROR) {
+                    errorCount++;
+                } else if (errorList[i].level === errorLevels.WARNING) {
+                    warningCount++;
+                }
+            }
+        }
+        if (errorCount === 0 && warningCount === 0) {
+            return null;
+        }
+        return { errorCount, warningCount };
+    }
 }
 export default HeatValidationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
index b13bde03c8..e59337c122 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
@@ -13,79 +13,83 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, forms} from './SoftwareProductComponentsConstants.js';
+import { actionTypes, forms } from './SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.COMPONENT_CREATE_OPEN: 
-			return {
-				...state,
-				formName: forms.CREATE_FORM,
-				formReady: null,
-				genericFieldInfo: {
-					'displayName' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'validateName', data: true}, {type: 'maxLength', data: 25}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					}
-				}
-			};
-		case actionTypes.COMPONENT_LOAD:
-			return {
-				...state,
-				data: action.component,
-				formReady: null,
-				formName: forms.ALL_SPC_FORMS,
-				genericFieldInfo: {
-					'displayName' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'vfcCode' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'nfcFunction' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 30}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				}
-			};
-		case actionTypes.COMPONENT_UPDATE:
-			return {
-				...state,
-				data: action.component
-			};
-		case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE:
-			return {
-				...state,
-				qdata: action.payload.qdata || state.qdata,
-				qschema: action.payload.qschema || state.qschema
-			};
-		case actionTypes.COMPONENT_DATA_CHANGED:
-			return {
-				...state,
-				data: {
-					...state.data,
-					...action.deltaData
-				}
-			};
-		case actionTypes.COMPONENT_DATA_CLEAR:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.COMPONENT_CREATE_OPEN:
+            return {
+                ...state,
+                formName: forms.CREATE_FORM,
+                formReady: null,
+                genericFieldInfo: {
+                    displayName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'validateName', data: true },
+                            { type: 'maxLength', data: 25 }
+                        ]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    }
+                }
+            };
+        case actionTypes.COMPONENT_LOAD:
+            return {
+                ...state,
+                data: action.component,
+                formReady: null,
+                formName: forms.ALL_SPC_FORMS,
+                genericFieldInfo: {
+                    displayName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    vfcCode: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    nfcFunction: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 30 }]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                }
+            };
+        case actionTypes.COMPONENT_UPDATE:
+            return {
+                ...state,
+                data: action.component
+            };
+        case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE:
+            return {
+                ...state,
+                qdata: action.payload.qdata || state.qdata,
+                qschema: action.payload.qschema || state.qschema
+            };
+        case actionTypes.COMPONENT_DATA_CHANGED:
+            return {
+                ...state,
+                data: {
+                    ...state.data,
+                    ...action.deltaData
+                }
+            };
+        case actionTypes.COMPONENT_DATA_CLEAR:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
index f74b2fe2fb..bffa9f7d25 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
@@ -1,50 +1,71 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js';
-import {onboardingMethod as onboardingMethodTypes} from '../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../SoftwareProductConstants.js';
 import ConfirmationModalConstants from 'nfvo-components/modal/GlobalModalConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import SoftwareProductComponentsView from './SoftwareProductComponentsListView.jsx';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 
-const generateMessage = (name) => {
-	return i18n('Are you sure you want to delete {name}?', {name: name});
+const generateMessage = name => {
+    return i18n('Are you sure you want to delete {name}?', { name: name });
 };
 
-const mapStateToProps = ({softwareProduct, currentScreen: {props: {version}}}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct;
-	let {componentsList} = softwareProductComponents;
-	let {onboardingMethod = onboardingMethodTypes.HEAT} = currentSoftwareProduct;
-	return {
-		currentSoftwareProduct,
-		componentsList,
-		isManual: onboardingMethod === onboardingMethodTypes.MANUAL,
-		version
-	};
+const mapStateToProps = ({
+    softwareProduct,
+    currentScreen: { props: { version } }
+}) => {
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents
+    } = softwareProduct;
+    let { componentsList } = softwareProductComponents;
+    let {
+        onboardingMethod = onboardingMethodTypes.HEAT
+    } = currentSoftwareProduct;
+    return {
+        currentSoftwareProduct,
+        componentsList,
+        isManual: onboardingMethod === onboardingMethodTypes.MANUAL,
+        version
+    };
 };
 
-const mapActionToProps = (dispatch) => {
-	return {
-		onComponentSelect: ({id: softwareProductId, componentId, version}) =>
-			ScreensHelper.loadScreen(dispatch, {
-				screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT,
-				props: {softwareProductId, version, componentId}
-			}),
-		onAddComponent: (softwareProductId, version) => SoftwareProductActionHelper.addComponent(dispatch, {softwareProductId, version, modalClassName: 'create-vfc-modal'}),
-		onDeleteComponent: (component, softwareProductId, version) => dispatch({
-			type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: generateMessage(component.displayName),
-				onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch, {
-					softwareProductId,
-					componentId: component.id,
-					version
-				})
-			}
-		})
-	};
+const mapActionToProps = dispatch => {
+    return {
+        onComponentSelect: ({ id: softwareProductId, componentId, version }) =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version, componentId }
+            }),
+        onAddComponent: (softwareProductId, version) =>
+            SoftwareProductActionHelper.addComponent(dispatch, {
+                softwareProductId,
+                version,
+                modalClassName: 'create-vfc-modal'
+            }),
+        onDeleteComponent: (component, softwareProductId, version) =>
+            dispatch({
+                type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: generateMessage(component.displayName),
+                    onConfirmed: () =>
+                        SoftwareProductComponentsActionHelper.deleteComponent(
+                            dispatch,
+                            {
+                                softwareProductId,
+                                componentId: component.id,
+                                version
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(SoftwareProductComponentsView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
index cf63ad79d0..73a971ccbb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
@@ -16,157 +16,265 @@
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
-import {actionTypes, COMPONENTS_QUESTIONNAIRE} from './SoftwareProductComponentsConstants.js';
+import {
+    actionTypes,
+    COMPONENTS_QUESTIONNAIRE
+} from './SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 function baseUrl(softwareProductId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`;
 }
 
 function fetchSoftwareProductComponents(softwareProductId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-function putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, vspComponent) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`, vspComponent);
+function putSoftwareProductComponentQuestionnaire(
+    softwareProductId,
+    version,
+    vspComponentId,
+    vspComponent
+) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            version
+        )}/${vspComponentId}/questionnaire`,
+        vspComponent
+    );
 }
 
-function fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId){
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`);
+function fetchSoftwareProductComponentQuestionnaire(
+    softwareProductId,
+    version,
+    vspComponentId
+) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`
+    );
 }
 
-function fetchSoftwareProductComponent(softwareProductId, version, vspComponentId){
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}`);
+function fetchSoftwareProductComponent(
+    softwareProductId,
+    version,
+    vspComponentId
+) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version)}/${vspComponentId}`
+    );
 }
 
-function putSoftwareProductComponent(softwareProductId, version, vspComponentId, vspComponent) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}`, {
-		name: vspComponent.name,
-		displayName: vspComponent.displayName,
-		vfcCode: vspComponent.vfcCode,
-		nfcFunction: vspComponent.nfcFunction,
-		description: vspComponent.description
-	});
+function putSoftwareProductComponent(
+    softwareProductId,
+    version,
+    vspComponentId,
+    vspComponent
+) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version)}/${vspComponentId}`,
+        {
+            name: vspComponent.name,
+            displayName: vspComponent.displayName,
+            vfcCode: vspComponent.vfcCode,
+            nfcFunction: vspComponent.nfcFunction,
+            description: vspComponent.description
+        }
+    );
 }
 
-function deleteSoftwareProductComponent(softwareProductId, componentId, version) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${componentId}`,);
+function deleteSoftwareProductComponent(
+    softwareProductId,
+    componentId,
+    version
+) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version)}/${componentId}`
+    );
 }
 
+function postSoftwareProductComponent(
+    softwareProductId,
+    vspComponent,
+    version
+) {
+    return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+        name: vspComponent.displayName,
+        displayName: vspComponent.displayName,
+        description: vspComponent.description
+    });
+}
 
-function postSoftwareProductComponent(softwareProductId, vspComponent, version) {
+const SoftwareProductComponentsActionHelper = {
+    fetchSoftwareProductComponents(dispatch, { softwareProductId, version }) {
+        return fetchSoftwareProductComponents(softwareProductId, version).then(
+            response => {
+                dispatch({
+                    type: actionTypes.COMPONENTS_LIST_UPDATE,
+                    componentsList: response.results
+                });
+                return response;
+            }
+        );
+    },
 
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
-		name: vspComponent.displayName,
-		displayName: vspComponent.displayName,
-		description: vspComponent.description
-	});
-}
+    updateSoftwareProductComponent(
+        dispatch,
+        { softwareProductId, version, vspComponentId, componentData, qdata }
+    ) {
+        return Promise.all([
+            SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                { softwareProductId, version, vspComponentId, qdata }
+            ),
+            SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(
+                dispatch,
+                { softwareProductId, version, vspComponentId, componentData }
+            )
+        ]);
+    },
 
+    updateSoftwareProductComponentQuestionnaire(
+        dispatch,
+        { softwareProductId, version, vspComponentId, qdata }
+    ) {
+        return putSoftwareProductComponentQuestionnaire(
+            softwareProductId,
+            version,
+            vspComponentId,
+            qdata
+        );
+    },
 
-const SoftwareProductComponentsActionHelper = {
-	fetchSoftwareProductComponents(dispatch, {softwareProductId, version}) {
-		return fetchSoftwareProductComponents(softwareProductId, version).then(response => {
-			dispatch({
-				type: actionTypes.COMPONENTS_LIST_UPDATE,
-				componentsList: response.results
-			});
-			return response;
-		});
-	},
-
-	updateSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId, componentData, qdata}) {
-		return Promise.all([
-			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}),
-			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData})
-		]);
-	},
-
-	updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}) {
-		return putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, qdata);
-	},
-
-	updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) {
-		return putSoftwareProductComponent(softwareProductId, version, vspComponentId, componentData).then(() => dispatch({
-			type: actionTypes.COMPONENTS_LIST_EDIT,
-			component: {
-				id: vspComponentId,
-				...componentData
-			}
-		}));
-	},
-
-	fetchSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId}) {
-		return fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
-			ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)}});
-		});
-	},
-
-	fetchSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId}) {
-		return Promise.all([
-			fetchSoftwareProductComponent(softwareProductId, version, vspComponentId).then(response => {
-				dispatch({
-					type: actionTypes.COMPONENT_LOAD,
-					component: response.data
-				});
-				return response;
-			}),
-			fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
-				ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
-					qschema: JSON.parse(response.schema)}});
-			})
-		]);
-	},
-
-
-	clearComponentsStore(dispatch) {
-		dispatch({
-			type: actionTypes.COMPONENTS_LIST_UPDATE,
-			componentsList: []
-		});
-	},
-
-	createSoftwareProductComponent(dispatch,{softwareProductId, componentData, version}) {
-		SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch);
-		/* for mock only */
-
-		dispatch({
-			type: actionTypes.COMPONENTS_LIST_UPDATE,
-			componentsList: [{id: '123', ...componentData}]
-		});
-
-		postSoftwareProductComponent(softwareProductId, componentData, version).then(() => {
-			SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version});
-		});
-	},
-
-	clearComponentCreationData(dispatch) {
-		dispatch({
-			type: actionTypes.COMPONENT_DATA_CLEAR
-		});
-	},
-
-	closeComponentCreationModal(dispatch) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch);
-	},
-
-	deleteComponent(dispatch, {softwareProductId, componentId, version}) {
-		deleteSoftwareProductComponent(softwareProductId, componentId, version);
-		dispatch({
-			type: actionTypes.COMPONENT_DELETE,
-			componentId: componentId
-		});
-	},
+    updateSoftwareProductComponentData(
+        dispatch,
+        { softwareProductId, version, vspComponentId, componentData }
+    ) {
+        return putSoftwareProductComponent(
+            softwareProductId,
+            version,
+            vspComponentId,
+            componentData
+        ).then(() =>
+            dispatch({
+                type: actionTypes.COMPONENTS_LIST_EDIT,
+                component: {
+                    id: vspComponentId,
+                    ...componentData
+                }
+            })
+        );
+    },
+
+    fetchSoftwareProductComponentQuestionnaire(
+        dispatch,
+        { softwareProductId, version, vspComponentId }
+    ) {
+        return fetchSoftwareProductComponentQuestionnaire(
+            softwareProductId,
+            version,
+            vspComponentId
+        ).then(response => {
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: COMPONENTS_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            });
+        });
+    },
+
+    fetchSoftwareProductComponent(
+        dispatch,
+        { softwareProductId, version, vspComponentId }
+    ) {
+        return Promise.all([
+            fetchSoftwareProductComponent(
+                softwareProductId,
+                version,
+                vspComponentId
+            ).then(response => {
+                dispatch({
+                    type: actionTypes.COMPONENT_LOAD,
+                    component: response.data
+                });
+                return response;
+            }),
+            fetchSoftwareProductComponentQuestionnaire(
+                softwareProductId,
+                version,
+                vspComponentId
+            ).then(response => {
+                ValidationHelper.qDataLoaded(dispatch, {
+                    qName: COMPONENTS_QUESTIONNAIRE,
+                    response: {
+                        qdata: response.data ? JSON.parse(response.data) : {},
+                        qschema: JSON.parse(response.schema)
+                    }
+                });
+            })
+        ]);
+    },
+
+    clearComponentsStore(dispatch) {
+        dispatch({
+            type: actionTypes.COMPONENTS_LIST_UPDATE,
+            componentsList: []
+        });
+    },
+
+    createSoftwareProductComponent(
+        dispatch,
+        { softwareProductId, componentData, version }
+    ) {
+        SoftwareProductComponentsActionHelper.closeComponentCreationModal(
+            dispatch
+        );
+        /* for mock only */
+
+        dispatch({
+            type: actionTypes.COMPONENTS_LIST_UPDATE,
+            componentsList: [{ id: '123', ...componentData }]
+        });
+
+        postSoftwareProductComponent(
+            softwareProductId,
+            componentData,
+            version
+        ).then(() => {
+            SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
+    clearComponentCreationData(dispatch) {
+        dispatch({
+            type: actionTypes.COMPONENT_DATA_CLEAR
+        });
+    },
 
+    closeComponentCreationModal(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        SoftwareProductComponentsActionHelper.clearComponentCreationData(
+            dispatch
+        );
+    },
 
+    deleteComponent(dispatch, { softwareProductId, componentId, version }) {
+        deleteSoftwareProductComponent(softwareProductId, componentId, version);
+        dispatch({
+            type: actionTypes.COMPONENT_DELETE,
+            componentId: componentId
+        });
+    }
 };
 
 export default SoftwareProductComponentsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
index 35633b65cf..cc120d359a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
@@ -16,40 +16,40 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	COMPONENTS_LIST_UPDATE: null,
-	COMPONENTS_LIST_EDIT: null,
-	COMPONENT_UPDATE: null,
-	COMPONENT_DATA_CHANGED: null,
-	COMPONENT_DATA_CLEAR: null,
-	COMPONENT_QUESTIONNAIRE_UPDATE: null,
-	COMPONENT_DELETE: null,
-	COMPONENT_LOAD: null,
-	COMPONENT_CREATE_OPEN: null
+    COMPONENTS_LIST_UPDATE: null,
+    COMPONENTS_LIST_EDIT: null,
+    COMPONENT_UPDATE: null,
+    COMPONENT_DATA_CHANGED: null,
+    COMPONENT_DATA_CLEAR: null,
+    COMPONENT_QUESTIONNAIRE_UPDATE: null,
+    COMPONENT_DELETE: null,
+    COMPONENT_LOAD: null,
+    COMPONENT_CREATE_OPEN: null
 });
 
-export const storageConstants  = keyMirror({
-	backupType: {
-		ON_SITE: 'OnSite',
-		OFF_SITE: 'OffSite'
-	}
+export const storageConstants = keyMirror({
+    backupType: {
+        ON_SITE: 'OnSite',
+        OFF_SITE: 'OffSite'
+    }
 });
 
 export const forms = keyMirror({
-	ALL_SPC_FORMS: null,
-	NIC_EDIT_FORM: null,
-	CREATE_FORM: null,
-	IMAGE_EDIT_FORM: null
+    ALL_SPC_FORMS: null,
+    NIC_EDIT_FORM: null,
+    CREATE_FORM: null,
+    IMAGE_EDIT_FORM: null
 });
 
 export const COMPONENTS_QUESTIONNAIRE = 'component';
 export const COMPONENTS_COMPUTE_QUESTIONNAIRE = 'compute';
 
 export const navigationItems = keyMirror({
-	STORAGE: 'Storage',
-	PROCESS_DETAILS: 'Process Details',
-	MONITORING: 'Monitoring',
-	NETWORK: 'Network',
-	IMAGES: 'Images',
-	COMPUTE: 'Compute',
-	LOAD_BALANCING: 'High Availability & Load Balancing'
+    STORAGE: 'Storage',
+    PROCESS_DETAILS: 'Process Details',
+    MONITORING: 'Monitoring',
+    NETWORK: 'Network',
+    IMAGES: 'Images',
+    COMPUTE: 'Compute',
+    LOAD_BALANCING: 'High Availability & Load Balancing'
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
index 92211e0fd2..e1cf5f4fc3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
@@ -13,18 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.COMPONENTS_LIST_UPDATE:
-			return [...action.componentsList];
-		case actionTypes.COMPONENTS_LIST_EDIT:
-			const indexForEdit = state.findIndex(component => component.id === action.component.id);
-			return [...state.slice(0, indexForEdit), action.component, ...state.slice(indexForEdit + 1)];
-		case actionTypes.COMPONENT_DELETE:
-			return state.filter(component => component.id !== action.componentId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.COMPONENTS_LIST_UPDATE:
+            return [...action.componentsList];
+        case actionTypes.COMPONENTS_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                component => component.id === action.component.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.component,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.COMPONENT_DELETE:
+            return state.filter(
+                component => component.id !== action.componentId
+            );
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
index 0bf32df1a3..fc8abf6ff6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
@@ -22,85 +22,113 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
 const ComponentPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	displayName: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    displayName: PropTypes.string,
+    description: PropTypes.string
 });
 
 class SoftwareProductComponentsListView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    static propTypes = {
+        isReadOnlyMode: PropTypes.bool,
+        componentsList: PropTypes.arrayOf(ComponentPropType),
+        onComponentSelect: PropTypes.func
+    };
 
-	static propTypes = {
-		isReadOnlyMode: PropTypes.bool,
-		componentsList: PropTypes.arrayOf(ComponentPropType),
-		onComponentSelect: PropTypes.func
-	};
+    render() {
+        let { componentsList = [], isManual } = this.props;
+        return (
+            <div className="">
+                {(componentsList.length > 0 || isManual) &&
+                    this.renderComponents()}
+            </div>
+        );
+    }
 
-	render() {
-		let {componentsList = [], isManual} =  this.props;
-		return (
-			<div className=''>
-				{
-					(componentsList.length > 0 || isManual) && this.renderComponents()
-				}
-			</div>
-		);
-	}
+    renderComponents() {
+        const { localFilter } = this.state;
+        const {
+            isManual,
+            onAddComponent,
+            isReadOnlyMode,
+            version,
+            currentSoftwareProduct: { id: softwareProductId },
+            componentsList
+        } = this.props;
+        return (
+            <ListEditorView
+                title={i18n('Virtual Function Components')}
+                filterValue={localFilter}
+                placeholder={i18n('Filter Components')}
+                onFilter={value => this.setState({ localFilter: value })}
+                isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
+                plusButtonTitle={i18n('Add Component')}
+                onAdd={
+                    isManual && componentsList.length === 0
+                        ? () => onAddComponent(softwareProductId, version)
+                        : false
+                }
+                twoColumns>
+                {this.filterList().map(component =>
+                    this.renderComponentsListItem(component)
+                )}
+            </ListEditorView>
+        );
+    }
 
-	renderComponents() {
-		const {localFilter} = this.state;
-		const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props;
-		return (
-			<ListEditorView
-				title={i18n('Virtual Function Components')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Components')}
-				onFilter={value => this.setState({localFilter: value})}
-				isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
-				plusButtonTitle={i18n('Add Component')}
-				onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId, version) : false}
-				twoColumns>
-				{this.filterList().map(component => this.renderComponentsListItem(component))}
-			</ListEditorView>
-		);
-	}
+    renderComponentsListItem(component) {
+        let {
+            id: componentId,
+            name,
+            displayName,
+            description = ''
+        } = component;
+        let {
+            currentSoftwareProduct: { id },
+            onComponentSelect,
+            version
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={
+                    name + Math.floor(Math.random() * (100 - 1) + 1).toString()
+                }
+                className="list-editor-item-view"
+                onSelect={() =>
+                    onComponentSelect({ id, componentId, version })
+                }>
+                <ListEditorItemViewField>
+                    <div className="name">{displayName}</div>
+                </ListEditorItemViewField>
+                <ListEditorItemViewField>
+                    <div className="description">{description}</div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	renderComponentsListItem(component) {
-		let {id: componentId, name, displayName, description = ''} = component;
-		let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props;
-		return (
-			<ListEditorItemView
-				key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()}
-				className='list-editor-item-view'				
-				onSelect={() => onComponentSelect({id, componentId, version})}>
-				<ListEditorItemViewField>
-					<div className='name'>{displayName}</div>
-				</ListEditorItemViewField>
-				<ListEditorItemViewField>
-					<div className='description'>{description}</div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
+    filterList() {
+        let { componentsList = [] } = this.props;
 
-	filterList() {
-		let {componentsList = []} = this.props;
-
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return componentsList.filter(({displayName = '', description = ''}) => {
-				return escape(displayName).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return componentsList;
-		}
-	}
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return componentsList.filter(
+                ({ displayName = '', description = '' }) => {
+                    return (
+                        escape(displayName).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return componentsList;
+        }
+    }
 }
 
 export default SoftwareProductComponentsListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
index 02c09fbdf8..cd37c317af 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
@@ -16,154 +16,270 @@
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes} from './computeComponents/computeFlavor/ComputeFlavorConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as globalModalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './computeComponents/computeFlavor/ComputeFlavorConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import {
+    actionTypes as globalModalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 function baseUrl(softwareProductId, componentId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`;
 }
 
-function baseUrlVSPLevel(softwareProductId, version){
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`;
+function baseUrlVSPLevel(softwareProductId, version) {
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`;
 }
 
-function fetchComputesList(softwareProductId, componentId, version){
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}`);
+function fetchComputesList(softwareProductId, componentId, version) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, componentId, version)}`
+    );
 }
 
-function fetchComputesListForVSP(softwareProductId, version){
-	return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`);
+function fetchComputesListForVSP(softwareProductId, version) {
+    return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`);
 }
 
 function fetchCompute(softwareProductId, componentId, computeId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, componentId, version)}/${computeId}`
+    );
 }
 
-function fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`);
+function fetchComputeQuestionnaire({
+    softwareProductId,
+    componentId,
+    computeId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            componentId,
+            version
+        )}/${computeId}/questionnaire`
+    );
 }
 
-function postCompute({softwareProductId, componentId, compute, version}) {
-	return RestAPIUtil.post(baseUrl(softwareProductId, componentId, version), compute);
+function postCompute({ softwareProductId, componentId, compute, version }) {
+    return RestAPIUtil.post(
+        baseUrl(softwareProductId, componentId, version),
+        compute
+    );
 }
 
-function putCompute({softwareProductId, componentId, compute, version}) {
-	const computeData = {
-		name: compute.name,
-		description: compute.description
-	};
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${compute.id}`, computeData);
+function putCompute({ softwareProductId, componentId, compute, version }) {
+    const computeData = {
+        name: compute.name,
+        description: compute.description
+    };
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, componentId, version)}/${compute.id}`,
+        computeData
+    );
 }
 
-function putComputeQuestionnaire({softwareProductId, componentId, computeId, qdata, version}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`, qdata);
+function putComputeQuestionnaire({
+    softwareProductId,
+    componentId,
+    computeId,
+    qdata,
+    version
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            componentId,
+            version
+        )}/${computeId}/questionnaire`,
+        qdata
+    );
 }
 
-function deleteCompute({softwareProductId, componentId, computeId, version}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`);
+function deleteCompute({ softwareProductId, componentId, computeId, version }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, componentId, version)}/${computeId}`
+    );
 }
 
-
 const ComputeFlavorActionHelper = {
-	openComputeEditor(dispatch, {props}) {
-		dispatch({
-			type: actionTypes.computeEditor.LOAD_EDITOR_DATA,
-			compute: props.compute || {}
-		});
-		dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR,
-				modalClassName: `compute-flavor-editor-modal-${props.compute ? 'edit' : 'create'}`,
-				modalComponentProps: {...props, size: props.compute ? modalSizes.LARGE : undefined, dialogClassName:'compute-flavor-editor-modal'},
-				title: `${props.compute ? i18n('Edit Compute Flavor') : i18n('Create New Compute Flavor')}`
-			}
-		});
-	},
-
-	closeComputeEditor(dispatch){
-		dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		dispatch({
-			type: actionTypes.computeEditor.CLEAR_DATA
-		});
-	},
-
-	fetchComputesList(dispatch, {softwareProductId, componentId, version}) {
-		return fetchComputesList(softwareProductId, componentId, version).then(response => dispatch({
-			type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
-			response
-		}));
-	},
-
-	fetchComputesListForVSP(dispatch, {softwareProductId, version}) {
-		return fetchComputesListForVSP(softwareProductId, version).then(response => dispatch({
-			type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
-			response
-		}));
-	},
-
-	loadComputeData({softwareProductId, componentId, computeId, version}) {
-		return fetchCompute(softwareProductId, componentId, computeId, version);
-	},
-
-	loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}) {
-		return fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}).then(response =>
-			ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_COMPUTE_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}})
-		);
-	},
-
-	loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}){
-		return ComputeFlavorActionHelper.loadComputeData({softwareProductId, componentId, computeId, version}).then(({data}) =>
-			ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}).then(() =>
-				ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, version, isReadOnlyMode, compute: {id: computeId, ...data}}})
-			));
-	},
-
-	saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data: compute, qdata, version}) {
-		ComputeFlavorActionHelper.closeComputeEditor(dispatch);
-		if(compute.id) {
-			return Promise.all([
-				putComputeQuestionnaire({softwareProductId, componentId, computeId: compute.id, qdata, version}),
-				putCompute({softwareProductId, componentId, compute, version}).then(() => {
-					dispatch({
-						type: actionTypes.COMPUTE_LIST_EDIT,
-						compute
-					});
-				})
-			]);
-		}
-		else {
-			return postCompute({softwareProductId, componentId, compute, version}).then(response =>
-				dispatch({
-					type: actionTypes.ADD_COMPUTE,
-					compute: {
-						...compute,
-						id: response.id,
-						componentId
-					}
-				})
-			);
-		}
-	},
-
-	deleteCompute(dispatch, {softwareProductId, componentId, computeId, version}) {
-		return deleteCompute({softwareProductId, componentId, computeId, version}).then(() => dispatch({
-			type: actionTypes.DELETE_COMPUTE,
-			computeId
-		}));
-	}
+    openComputeEditor(dispatch, { props }) {
+        dispatch({
+            type: actionTypes.computeEditor.LOAD_EDITOR_DATA,
+            compute: props.compute || {}
+        });
+        dispatch({
+            type: globalModalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName:
+                    modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR,
+                modalClassName: `compute-flavor-editor-modal-${
+                    props.compute ? 'edit' : 'create'
+                }`,
+                modalComponentProps: {
+                    ...props,
+                    size: props.compute ? modalSizes.LARGE : undefined,
+                    dialogClassName: 'compute-flavor-editor-modal'
+                },
+                title: `${
+                    props.compute
+                        ? i18n('Edit Compute Flavor')
+                        : i18n('Create New Compute Flavor')
+                }`
+            }
+        });
+    },
+
+    closeComputeEditor(dispatch) {
+        dispatch({
+            type: globalModalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({
+            type: actionTypes.computeEditor.CLEAR_DATA
+        });
+    },
+
+    fetchComputesList(dispatch, { softwareProductId, componentId, version }) {
+        return fetchComputesList(softwareProductId, componentId, version).then(
+            response =>
+                dispatch({
+                    type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    fetchComputesListForVSP(dispatch, { softwareProductId, version }) {
+        return fetchComputesListForVSP(softwareProductId, version).then(
+            response =>
+                dispatch({
+                    type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    loadComputeData({ softwareProductId, componentId, computeId, version }) {
+        return fetchCompute(softwareProductId, componentId, computeId, version);
+    },
+
+    loadComputeQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, computeId, version }
+    ) {
+        return fetchComputeQuestionnaire({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(response =>
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: COMPONENTS_COMPUTE_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            })
+        );
+    },
+
+    loadCompute(
+        dispatch,
+        { softwareProductId, componentId, version, computeId, isReadOnlyMode }
+    ) {
+        return ComputeFlavorActionHelper.loadComputeData({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(({ data }) =>
+            ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, {
+                softwareProductId,
+                componentId,
+                computeId,
+                version
+            }).then(() =>
+                ComputeFlavorActionHelper.openComputeEditor(dispatch, {
+                    props: {
+                        softwareProductId,
+                        componentId,
+                        version,
+                        isReadOnlyMode,
+                        compute: { id: computeId, ...data }
+                    }
+                })
+            )
+        );
+    },
+
+    saveComputeDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, data: compute, qdata, version }
+    ) {
+        ComputeFlavorActionHelper.closeComputeEditor(dispatch);
+        if (compute.id) {
+            return Promise.all([
+                putComputeQuestionnaire({
+                    softwareProductId,
+                    componentId,
+                    computeId: compute.id,
+                    qdata,
+                    version
+                }),
+                putCompute({
+                    softwareProductId,
+                    componentId,
+                    compute,
+                    version
+                }).then(() => {
+                    dispatch({
+                        type: actionTypes.COMPUTE_LIST_EDIT,
+                        compute
+                    });
+                })
+            ]);
+        } else {
+            return postCompute({
+                softwareProductId,
+                componentId,
+                compute,
+                version
+            }).then(response =>
+                dispatch({
+                    type: actionTypes.ADD_COMPUTE,
+                    compute: {
+                        ...compute,
+                        id: response.id,
+                        componentId
+                    }
+                })
+            );
+        }
+    },
+
+    deleteCompute(
+        dispatch,
+        { softwareProductId, componentId, computeId, version }
+    ) {
+        return deleteCompute({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(() =>
+            dispatch({
+                type: actionTypes.DELETE_COMPUTE,
+                computeId
+            })
+        );
+    }
 };
 
 export default ComputeFlavorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
index 574828c9ef..d595a82e11 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
@@ -13,35 +13,63 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx';
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
+const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentVSP },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        componentEditor: { qdata, dataMap, qgenericFieldInfo },
+        computeFlavor: { computesList: computeFlavorsList }
+    } = softwareProductComponents;
 
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {qdata, dataMap, qgenericFieldInfo}, computeFlavor: {computesList: computeFlavorsList}} = softwareProductComponents;
-
-	return {
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		computeFlavorsList,
-		isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        computeFlavorsList,
+        isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
-	return {
-		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, customValidations: customValidations,
-			qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});},
-		qValidateData: (data, customValidations) => ValidationHelper.qValidateData(dispatch, {data, customValidations: customValidations,
-			qName: COMPONENTS_QUESTIONNAIRE})
-	};
+const mapActionToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onQDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                customValidations: customValidations,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onSubmit: ({ qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    qdata
+                }
+            );
+        },
+        qValidateData: (data, customValidations) =>
+            ValidationHelper.qValidateData(dispatch, {
+                data,
+                customValidations: customValidations,
+                qName: COMPONENTS_QUESTIONNAIRE
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentComputeView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductComponentComputeView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
index 55e5e2b30b..e6ce96666e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
@@ -22,67 +22,99 @@ import ComputeFlavors from './computeComponents/ComputeFlavors.js';
 import Validator from 'nfvo-utils/Validator.js';
 
 class SoftwareProductComponentComputeView extends React.Component {
+    static propTypes = {
+        dataMap: PropTypes.object,
+        qgenericFieldInfo: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onQDataChanged: PropTypes.func.isRequired,
+        qValidateData: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		dataMap: PropTypes.object,
-		qgenericFieldInfo: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		isManual: PropTypes.bool,
-		onQDataChanged: PropTypes.func.isRequired,
-		qValidateData: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired
-	};
+    render() {
+        let {
+            softwareProductId,
+            componentId,
+            version,
+            qdata,
+            dataMap,
+            qgenericFieldInfo,
+            isReadOnlyMode,
+            onQDataChanged,
+            qValidateData,
+            onSubmit,
+            computeFlavorsList,
+            isManual
+        } = this.props;
 
-	render() {
-		let {softwareProductId, componentId, version, qdata, dataMap, qgenericFieldInfo, isReadOnlyMode, onQDataChanged, qValidateData,
-			onSubmit, computeFlavorsList, isManual} = this.props;
+        return (
+            <div className="vsp-component-questionnaire-view">
+                {qgenericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        formReady={null}
+                        isValid={true}
+                        hasButtons={false}
+                        onSubmit={() => onSubmit({ qdata })}
+                        className="component-questionnaire-validation-form"
+                        isReadOnlyMode={isReadOnlyMode}>
+                        <NumberOfVms
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qgenericFieldInfo}
+                            qValidateData={qValidateData}
+                            customValidations={{
+                                'compute/numOfVMs/maximum': this.validateMax,
+                                'compute/numOfVMs/minimum': this.validateMin
+                            }}
+                        />
+                        <GuestOs
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qgenericFieldInfo}
+                        />
+                        <ComputeFlavors
+                            computeFlavorsList={computeFlavorsList}
+                            softwareProductId={softwareProductId}
+                            componentId={componentId}
+                            version={version}
+                            isReadOnlyMode={isReadOnlyMode}
+                            isManual={isManual}
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-component-questionnaire-view'>
-				{ qgenericFieldInfo && <Form
-					ref={ (form) => { this.form = form; }}
-					formReady={null}
-					isValid={true}
-					hasButtons={false}
-					onSubmit={() => onSubmit({qdata})}
-					className='component-questionnaire-validation-form'
-					isReadOnlyMode={isReadOnlyMode} >
-					<NumberOfVms onQDataChanged={onQDataChanged} dataMap={dataMap}
-						 qgenericFieldInfo={qgenericFieldInfo} qValidateData={qValidateData}
-						 customValidations={{'compute/numOfVMs/maximum' : this.validateMax, 'compute/numOfVMs/minimum': this.validateMin}} />
-					<GuestOs onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} />
-					<ComputeFlavors computeFlavorsList={computeFlavorsList} softwareProductId={softwareProductId} componentId={componentId}
-						version={version} isReadOnlyMode={isReadOnlyMode} isManual={isManual}/>
-				</Form> }
-			</div>
-		);
-	}
+    save() {
+        return this.form.handleFormSubmit(new Event('dummy'));
+    }
 
-	save(){
-		return this.form.handleFormSubmit(new Event('dummy'));
-	}
+    validateMin(value, state) {
+        let maxVal = state.dataMap['compute/numOfVMs/maximum'];
+        // we are allowed to have an empty maxval, that will allow all minvals.
+        // if we do not have a minval than there is no point to check it either.
+        if (value === undefined || maxVal === undefined) {
+            return { isValid: true, errorText: '' };
+        } else {
+            return Validator.validateItem(value, maxVal, 'maximum');
+        }
+    }
 
-	validateMin(value, state) {
-		let maxVal = state.dataMap['compute/numOfVMs/maximum'];
-		// we are allowed to have an empty maxval, that will allow all minvals.
-		// if we do not have a minval than there is no point to check it either.
-		if (value === undefined || maxVal === undefined) {
-			return { isValid: true, errorText: '' };
-		} else {
-			return Validator.validateItem(value, maxVal,'maximum');
-		}
-	}
-
-	validateMax(value, state) {
-		let minVal = state.dataMap['compute/numOfVMs/minimum'];
-		if (minVal === undefined ) {
-			// having no minimum is the same as 0, maximum value doesn't need to be checked
-			// against it.
-			return { isValid: true, errorText: '' };
-		} else {
-			return Validator.validateItem(value,minVal,'minimum');
-		}
-	}
+    validateMax(value, state) {
+        let minVal = state.dataMap['compute/numOfVMs/minimum'];
+        if (minVal === undefined) {
+            // having no minimum is the same as 0, maximum value doesn't need to be checked
+            // against it.
+            return { isValid: true, errorText: '' };
+        } else {
+            return Validator.validateItem(value, minVal, 'minimum');
+        }
+    }
 }
 
 export default SoftwareProductComponentComputeView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
index 2b6d84f381..2004c94137 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
@@ -15,103 +15,159 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onAddComputeClick: (isReadOnlyMode) => ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, isReadOnlyMode, version}}),
-		onEditCompute: ({computeId, isReadOnlyMode}) => ComputeFlavorActionHelper.loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}),
-		onDeleteCompute: ({id, name}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{name}"?', {name: name}),
-				onConfirmed: () => ComputeFlavorActionHelper.deleteCompute(dispatch, {softwareProductId, componentId, computeId: id, version})
-			}
-		})
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onAddComputeClick: isReadOnlyMode =>
+            ComputeFlavorActionHelper.openComputeEditor(dispatch, {
+                props: {
+                    softwareProductId,
+                    componentId,
+                    isReadOnlyMode,
+                    version
+                }
+            }),
+        onEditCompute: ({ computeId, isReadOnlyMode }) =>
+            ComputeFlavorActionHelper.loadCompute(dispatch, {
+                softwareProductId,
+                componentId,
+                version,
+                computeId,
+                isReadOnlyMode
+            }),
+        onDeleteCompute: ({ id, name }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{name}"?', {
+                        name: name
+                    }),
+                    onConfirmed: () =>
+                        ComputeFlavorActionHelper.deleteCompute(dispatch, {
+                            softwareProductId,
+                            componentId,
+                            computeId: id,
+                            version
+                        })
+                }
+            })
+    };
 };
 
 const computeItemPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string
 });
 
 class ComputeFlavors extends React.Component {
+    static propTypes = {
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onAddComputeClick: PropTypes.func,
+        computeFlavorsList: PropTypes.arrayOf(computeItemPropType)
+    };
 
-	static propTypes = {
-		isReadOnlyMode: PropTypes.bool,
-		isManual: PropTypes.bool,
-		onAddComputeClick: PropTypes.func,
-		computeFlavorsList: PropTypes.arrayOf(computeItemPropType)
-	};
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    render() {
+        const { localFilter } = this.state;
+        const {
+            isReadOnlyMode,
+            isManual,
+            onAddComputeClick,
+            onEditCompute,
+            onDeleteCompute
+        } = this.props;
+        return (
+            <div className="computes-list">
+                <ListEditorView
+                    title={i18n('Computes')}
+                    plusButtonTitle={i18n('Add Compute')}
+                    onAdd={
+                        isManual
+                            ? () => onAddComputeClick(isReadOnlyMode)
+                            : null
+                    }
+                    isReadOnlyMode={isReadOnlyMode}
+                    onFilter={
+                        isManual
+                            ? value => this.setState({ localFilter: value })
+                            : null
+                    }
+                    filterValue={localFilter}
+                    twoColumns>
+                    {this.filterList().map(computeItem => (
+                        <ComputeItem
+                            key={computeItem.id}
+                            computeItem={computeItem}
+                            isReadOnlyMode={isReadOnlyMode}
+                            isManual={isManual}
+                            onEditCompute={onEditCompute}
+                            onDeleteCompute={onDeleteCompute}
+                        />
+                    ))}
+                </ListEditorView>
+            </div>
+        );
+    }
 
-	render() {
-		const {localFilter} = this.state;
-		const {isReadOnlyMode, isManual, onAddComputeClick, onEditCompute, onDeleteCompute} = this.props;
-		return (
-			<div className='computes-list'>
-				<ListEditorView
-					title={i18n('Computes')}
-					plusButtonTitle={i18n('Add Compute')}
-					onAdd={isManual ? () => onAddComputeClick(isReadOnlyMode) : null}
-					isReadOnlyMode={isReadOnlyMode}
-					onFilter={isManual ? value => this.setState({localFilter: value}) : null}
-					filterValue={localFilter}
-					twoColumns>
-					{this.filterList().map(computeItem =>
-						<ComputeItem key={computeItem.id}
-							computeItem={computeItem} isReadOnlyMode={isReadOnlyMode} isManual={isManual}
-							onEditCompute={onEditCompute} onDeleteCompute={onDeleteCompute}/>)
-					}
-				</ListEditorView>
-			</div>
-		);
-	}
+    filterList() {
+        const { computeFlavorsList = [] } = this.props;
 
-	filterList() {
-		const {computeFlavorsList = []} = this.props;
-
-		const {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return computeFlavorsList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return computeFlavorsList;
-		}
-	}
+        const { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return computeFlavorsList.filter(
+                ({ name = '', description = '' }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return computeFlavorsList;
+        }
+    }
 }
 
-const ComputeItem = ({computeItem, isReadOnlyMode, isManual, onEditCompute, onDeleteCompute}) => {
-	const {id, name, description} = computeItem;
-	return (
-		<ListEditorItemView
-			key={'item_' + id}
-			className='list-editor-item-view'
-			isReadOnlyMode={isReadOnlyMode}
-			onSelect={() => onEditCompute({computeId: id, isReadOnlyMode})}
-			onDelete={isManual ? () => onDeleteCompute({id, name}) : null}>
-
-			<div className='list-editor-item-view-field'>
-				<div className='name'>{name}</div>
-			</div>
-			<div className='list-editor-item-view-field'>
-				<div className='description'>{description}</div>
-			</div>
-		</ListEditorItemView>
-	);
+const ComputeItem = ({
+    computeItem,
+    isReadOnlyMode,
+    isManual,
+    onEditCompute,
+    onDeleteCompute
+}) => {
+    const { id, name, description } = computeItem;
+    return (
+        <ListEditorItemView
+            key={'item_' + id}
+            className="list-editor-item-view"
+            isReadOnlyMode={isReadOnlyMode}
+            onSelect={() => onEditCompute({ computeId: id, isReadOnlyMode })}
+            onDelete={isManual ? () => onDeleteCompute({ id, name }) : null}>
+            <div className="list-editor-item-view-field">
+                <div className="name">{name}</div>
+            </div>
+            <div className="list-editor-item-view-field">
+                <div className="description">{description}</div>
+            </div>
+        </ListEditorItemView>
+    );
 };
 
-export default connect(null, mapActionsToProps, null, {withRef: true})(ComputeFlavors);
+export default connect(null, mapActionsToProps, null, { withRef: true })(
+    ComputeFlavors
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
index 8ae9961859..c16ab5cdfe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
@@ -19,57 +19,91 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-
-const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<div>
-			<GridSection title={i18n('Guest OS')} hasLastColSet>
-				<GridItem>
-					<div className='vertical-flex'>
-						<label key='label' className='control-label'>{i18n('OS Bit Size')}</label>
-						<div className='radio-options-content-row'>
-							{qgenericFieldInfo['compute/guestOS/bitSize'].enum.map(bitSize => (
-							<Input
-								data-test-id='guestOS-bitSize'
-								type='radio'
-								key={bitSize.enum}
-								name={'compute/guestOS/bitSize'}
-								className='radio-field'
-								value={bitSize.enum}
-								label={bitSize.title}
-								onChange={(bit) => onQDataChanged({'compute/guestOS/bitSize' :  Number(bit)})}
-								isValid={qgenericFieldInfo['compute/guestOS/bitSize'].isValid}
-								errorText={qgenericFieldInfo['compute/guestOS/bitSize'].errorText}
-								checked={dataMap['compute/guestOS/bitSize'] === bitSize.enum} /> )) }
-						</div>
-					</div>
-				</GridItem>
-				<GridItem colSpan={2}/>
-				<GridItem colSpan={2}>
-					<Input
-						data-test-id='guestOS-name'
-						label={i18n('Guest OS')}
-						type='textarea'
-						onChange={(tools) => onQDataChanged({'compute/guestOS/name' : tools})}
-						isValid={qgenericFieldInfo['compute/guestOS/name'].isValid}
-						errorText={qgenericFieldInfo['compute/guestOS/name'].errorText}
-						value={dataMap['compute/guestOS/name']} />
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						data-test-id='guestOS-tools'
-						type='textarea'
-						label={i18n('Guest OS Tools:')}
-						onChange={(tools) => onQDataChanged({'compute/guestOS/tools' : tools})}
-						isValid={qgenericFieldInfo['compute/guestOS/tools'].isValid}
-						errorText={qgenericFieldInfo['compute/guestOS/tools'].errorText}
-						value={dataMap['compute/guestOS/tools']} />
-				</GridItem>
-			</GridSection>
-
-
-		</div>
-	);
+const GuestOs = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <div>
+            <GridSection title={i18n('Guest OS')} hasLastColSet>
+                <GridItem>
+                    <div className="vertical-flex">
+                        <label key="label" className="control-label">
+                            {i18n('OS Bit Size')}
+                        </label>
+                        <div className="radio-options-content-row">
+                            {qgenericFieldInfo[
+                                'compute/guestOS/bitSize'
+                            ].enum.map(bitSize => (
+                                <Input
+                                    data-test-id="guestOS-bitSize"
+                                    type="radio"
+                                    key={bitSize.enum}
+                                    name={'compute/guestOS/bitSize'}
+                                    className="radio-field"
+                                    value={bitSize.enum}
+                                    label={bitSize.title}
+                                    onChange={bit =>
+                                        onQDataChanged({
+                                            'compute/guestOS/bitSize': Number(
+                                                bit
+                                            )
+                                        })
+                                    }
+                                    isValid={
+                                        qgenericFieldInfo[
+                                            'compute/guestOS/bitSize'
+                                        ].isValid
+                                    }
+                                    errorText={
+                                        qgenericFieldInfo[
+                                            'compute/guestOS/bitSize'
+                                        ].errorText
+                                    }
+                                    checked={
+                                        dataMap['compute/guestOS/bitSize'] ===
+                                        bitSize.enum
+                                    }
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </GridItem>
+                <GridItem colSpan={2} />
+                <GridItem colSpan={2}>
+                    <Input
+                        data-test-id="guestOS-name"
+                        label={i18n('Guest OS')}
+                        type="textarea"
+                        onChange={tools =>
+                            onQDataChanged({ 'compute/guestOS/name': tools })
+                        }
+                        isValid={
+                            qgenericFieldInfo['compute/guestOS/name'].isValid
+                        }
+                        errorText={
+                            qgenericFieldInfo['compute/guestOS/name'].errorText
+                        }
+                        value={dataMap['compute/guestOS/name']}
+                    />
+                </GridItem>
+                <GridItem colSpan={2} lastColInRow>
+                    <Input
+                        data-test-id="guestOS-tools"
+                        type="textarea"
+                        label={i18n('Guest OS Tools:')}
+                        onChange={tools =>
+                            onQDataChanged({ 'compute/guestOS/tools': tools })
+                        }
+                        isValid={
+                            qgenericFieldInfo['compute/guestOS/tools'].isValid
+                        }
+                        errorText={
+                            qgenericFieldInfo['compute/guestOS/tools'].errorText
+                        }
+                        value={dataMap['compute/guestOS/tools']}
+                    />
+                </GridItem>
+            </GridSection>
+        </div>
+    );
 };
 
 export default GuestOs;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
index 967c6f7aef..5451354502 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
@@ -20,38 +20,77 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-
-const NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData, customValidations}) => {
-	return(
-		<GridSection titleClassName='software-product-compute-number-of-vms' title={i18n('NUMBER OF VMs')}>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-minimum'
-					type='number'
-					label={i18n('Minimum')}
-					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/minimum' : tools}, customValidations);
-						qValidateData({'compute/numOfVMs/maximum' : dataMap['compute/numOfVMs/maximum']}, customValidations); } }
-					isValid={qgenericFieldInfo['compute/numOfVMs/minimum'].isValid}
-					errorText={qgenericFieldInfo['compute/numOfVMs/minimum'].errorText}
-					value={dataMap['compute/numOfVMs/minimum']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-maximum'
-					type='number'
-					label={i18n('Maximum')}
-					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/maximum' : tools}, customValidations);
-						qValidateData({'compute/numOfVMs/minimum' : dataMap['compute/numOfVMs/minimum']}, customValidations); } }
-					isValid={qgenericFieldInfo['compute/numOfVMs/maximum'].isValid}
-					errorText={qgenericFieldInfo['compute/numOfVMs/maximum'].errorText}
-					value={dataMap['compute/numOfVMs/maximum']} />
-			</GridItem>
-		</GridSection>
-	);
+const NumberOfVms = ({
+    qgenericFieldInfo,
+    dataMap,
+    onQDataChanged,
+    qValidateData,
+    customValidations
+}) => {
+    return (
+        <GridSection
+            titleClassName="software-product-compute-number-of-vms"
+            title={i18n('NUMBER OF VMs')}>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-minimum"
+                    type="number"
+                    label={i18n('Minimum')}
+                    onChange={tools => {
+                        onQDataChanged(
+                            { 'compute/numOfVMs/minimum': tools },
+                            customValidations
+                        );
+                        qValidateData(
+                            {
+                                'compute/numOfVMs/maximum':
+                                    dataMap['compute/numOfVMs/maximum']
+                            },
+                            customValidations
+                        );
+                    }}
+                    isValid={
+                        qgenericFieldInfo['compute/numOfVMs/minimum'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['compute/numOfVMs/minimum'].errorText
+                    }
+                    value={dataMap['compute/numOfVMs/minimum']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-maximum"
+                    type="number"
+                    label={i18n('Maximum')}
+                    onChange={tools => {
+                        onQDataChanged(
+                            { 'compute/numOfVMs/maximum': tools },
+                            customValidations
+                        );
+                        qValidateData(
+                            {
+                                'compute/numOfVMs/minimum':
+                                    dataMap['compute/numOfVMs/minimum']
+                            },
+                            customValidations
+                        );
+                    }}
+                    isValid={
+                        qgenericFieldInfo['compute/numOfVMs/maximum'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['compute/numOfVMs/maximum'].errorText
+                    }
+                    value={dataMap['compute/numOfVMs/maximum']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 NumberOfVms.propTypes = {
-	minNumberOfVMsSelectedByUser: PropTypes.number
+    minNumberOfVMsSelectedByUser: PropTypes.number
 };
 
 export default NumberOfVms;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
index 41728eefb0..58c27c6bba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
@@ -19,14 +19,14 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 export const COMPUTE_FLAVOR_FORM = 'COMPUTE_FLAVOR_FORM';
 
 export const actionTypes = keyMirror({
-	ADD_COMPUTE: null,
-	COMPUTE_FLAVORS_LIST_LOADED: null,
-	COMPUTE_LIST_EDIT: null,
-	EDIT_COMPUTE_FLAVOR: null,
-	DELETE_COMPUTE: null,
-	CONFIRM_DELETE_COMPUTE: null,
-	computeEditor: {
-		LOAD_EDITOR_DATA: null,
-		CLEAR_DATA: null
-	}
+    ADD_COMPUTE: null,
+    COMPUTE_FLAVORS_LIST_LOADED: null,
+    COMPUTE_LIST_EDIT: null,
+    EDIT_COMPUTE_FLAVOR: null,
+    DELETE_COMPUTE: null,
+    CONFIRM_DELETE_COMPUTE: null,
+    computeEditor: {
+        LOAD_EDITOR_DATA: null,
+        CLEAR_DATA: null
+    }
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
index a3ba5fbc4a..06f9e8fd19 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
@@ -13,49 +13,78 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ComputeFlavorEditorView from './ComputeFlavorEditorView.jsx';
-import {COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js';
+import { COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js';
 import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
 export const mapStateToProps = ({
-	softwareProduct: {
-		softwareProductEditor,
-		softwareProductComponents: {computeFlavor: {computeEditor = {}}}
-	},
-	currentScreen: {
-		props: {isReadOnlyMode}
-	}
+    softwareProduct: {
+        softwareProductEditor,
+        softwareProductComponents: { computeFlavor: { computeEditor = {} } }
+    },
+    currentScreen: { props: { isReadOnlyMode } }
 }) => {
-	const {data: currentSoftwareProduct = {}} = softwareProductEditor;
-	let {data , qdata, qgenericFieldInfo, dataMap, genericFieldInfo, formReady} = computeEditor;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    const { data: currentSoftwareProduct = {} } = softwareProductEditor;
+    let {
+        data,
+        qdata,
+        qgenericFieldInfo,
+        dataMap,
+        genericFieldInfo,
+        formReady
+    } = computeEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {
-		data,
-		qdata,
-		qgenericFieldInfo,
-		dataMap,
-		genericFieldInfo,
-		isReadOnlyMode,
-		isFormValid,
-		formReady,
-		isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        data,
+        qdata,
+        qgenericFieldInfo,
+        dataMap,
+        genericFieldInfo,
+        isReadOnlyMode,
+        isFormValid,
+        formReady,
+        isManual:
+            currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: COMPUTE_FLAVOR_FORM}),
-		onQDataChanged: deltaData => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_COMPUTE_QUESTIONNAIRE}),
-		onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch),
-		onSubmit: ({data, qdata}) => ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata, version}),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM)
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: COMPUTE_FLAVOR_FORM
+            }),
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_COMPUTE_QUESTIONNAIRE
+            }),
+        onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch),
+        onSubmit: ({ data, qdata }) =>
+            ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    componentId,
+                    data,
+                    qdata,
+                    version
+                }
+            ),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(ComputeFlavorEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    ComputeFlavorEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
index e542ce1fd1..840f722bb2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
@@ -23,75 +23,112 @@ import VmSizing from './VmSizing.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 class ComputeEditorView extends React.Component {
+    static propTypes = {
+        data: PropTypes.object,
+        qdata: PropTypes.object,
+        qschema: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onDataChanged: PropTypes.func.isRequired,
+        onQDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		data: PropTypes.object,
-		qdata: PropTypes.object,
-		qschema: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		isManual: PropTypes.bool,
-		onDataChanged: PropTypes.func.isRequired,
-		onQDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    render() {
+        let {
+            data = {},
+            qdata = {},
+            qgenericFieldInfo,
+            dataMap,
+            genericFieldInfo,
+            isReadOnlyMode,
+            isManual,
+            isFormValid,
+            formReady,
+            onDataChanged,
+            onQDataChanged,
+            onSubmit,
+            onCancel,
+            onValidateForm
+        } = this.props;
+        const { id, name, description } = data;
+        const edittingComputeMode = Boolean(id);
 
-	render() {
-		let {data = {}, qdata = {}, qgenericFieldInfo, dataMap, genericFieldInfo, isReadOnlyMode, isManual, isFormValid, formReady,
-			onDataChanged, onQDataChanged, onSubmit, onCancel, onValidateForm} = this.props;
-		const {id, name, description} = data;
-		const edittingComputeMode = Boolean(id);
+        return (
+            <div className="vsp-component-computeFlavor-view">
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => onSubmit({ data, qdata })}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        onValidateForm={() => onValidateForm()}
+                        className="component-questionnaire-validation-form"
+                        submitButtonText={
+                            edittingComputeMode ? i18n('Save') : i18n('Create')
+                        }>
+                        <GridSection hasLostColSet>
+                            <GridItem
+                                colSpan={edittingComputeMode ? 2 : 4}
+                                lastColInRow={!edittingComputeMode}>
+                                <Input
+                                    disabled={!isManual}
+                                    data-test-id="name"
+                                    type="text"
+                                    label={i18n('Flavor Name')}
+                                    value={name}
+                                    onChange={name => onDataChanged({ name })}
+                                    isValid={genericFieldInfo['name'].isValid}
+                                    errorText={
+                                        genericFieldInfo['name'].errorText
+                                    }
+                                    isRequired
+                                />
+                            </GridItem>
+                            <GridItem
+                                colSpan={edittingComputeMode ? 2 : 4}
+                                lastColInRow>
+                                <Input
+                                    data-test-id="description"
+                                    type="textarea"
+                                    label={i18n('Description')}
+                                    value={description}
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    isValid={
+                                        genericFieldInfo['description'].isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo['description']
+                                            .errorText
+                                    }
+                                />
+                            </GridItem>
+                        </GridSection>
+                        {edittingComputeMode && (
+                            <VmSizing
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                        )}
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-component-computeFlavor-view'>
-				{genericFieldInfo && <Form
-					ref={(form) => {
-						this.form = form;
-					}}
-					hasButtons={true}
-					onSubmit={ () => onSubmit({data, qdata}) }
-					onReset={ () => onCancel() }
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					isValid={isFormValid}
-					formReady={formReady}
-					onValidateForm={() => onValidateForm() }
-					className='component-questionnaire-validation-form'
-					submitButtonText={edittingComputeMode ? i18n('Save') : i18n('Create')}>
-					<GridSection hasLostColSet>
-						<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow={!edittingComputeMode}>
-							<Input
-								disabled={!isManual}
-								data-test-id='name'
-								type='text'
-								label={i18n('Flavor Name')}
-								value={name}
-								onChange={name => onDataChanged({name})}
-								isValid={genericFieldInfo['name'].isValid}
-								errorText={genericFieldInfo['name'].errorText}
-								isRequired/>
-							</GridItem>
-							<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow>
-							<Input
-								data-test-id='description'
-								type='textarea'
-								label={i18n('Description')}
-								value={description}
-								onChange={description => onDataChanged({description})}
-								isValid={genericFieldInfo['description'].isValid}
-								errorText={genericFieldInfo['description'].errorText}/>
-						</GridItem>
-					</GridSection>
-					{edittingComputeMode && <VmSizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
-				</Form>
-				}
-			</div>
-		);
-	}
-
-	save(){
-		return this.form.handleFormSubmit(new Event('dummy'));
-	}
+    save() {
+        return this.form.handleFormSubmit(new Event('dummy'));
+    }
 }
 
 export default ComputeEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
index 6c02f36c90..b691084cc3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
@@ -14,20 +14,26 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './ComputeFlavorConstants.js';
+import { actionTypes } from './ComputeFlavorConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.COMPUTE_FLAVORS_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.ADD_COMPUTE:
-			return [...state, action.compute];
-		case actionTypes.COMPUTE_LIST_EDIT:
-			const indexForEdit = state.findIndex(({id}) => id === action.compute.id);
-			return [...state.slice(0, indexForEdit), action.compute, ...state.slice(indexForEdit + 1)];
-		case actionTypes.DELETE_COMPUTE:
-			return state.filter(({id}) => id !== action.computeId);
-		default:
-			return state;
-	}
-};
\ No newline at end of file
+    switch (action.type) {
+        case actionTypes.COMPUTE_FLAVORS_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.ADD_COMPUTE:
+            return [...state, action.compute];
+        case actionTypes.COMPUTE_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                ({ id }) => id === action.compute.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.compute,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.DELETE_COMPUTE:
+            return state.filter(({ id }) => id !== action.computeId);
+        default:
+            return state;
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
index a476f85a19..00d76eff23 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
@@ -13,33 +13,32 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js';
+import { actionTypes, COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.computeEditor.LOAD_EDITOR_DATA:
-			return {
-				...state,
-				formName: COMPUTE_FLAVOR_FORM,
-				data: action.compute,
-				formReady: null,
-				genericFieldInfo: {
-					name: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true }]
-					},
-					description: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 300}]
-					}
-				}
-			};
-		case actionTypes.computeEditor.CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.computeEditor.LOAD_EDITOR_DATA:
+            return {
+                ...state,
+                formName: COMPUTE_FLAVOR_FORM,
+                data: action.compute,
+                formReady: null,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 300 }]
+                    }
+                }
+            };
+        case actionTypes.computeEditor.CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
index 54f22e0760..2f40706736 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
@@ -18,89 +18,146 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('VM Sizing')} hasLastColSet>
-			<GridItem>
-				<Input
-					data-test-id='numOfCPUs'
-					type='number'
-					label={i18n('Number of CPUs')}
-					onChange={(tools) => onQDataChanged({'vmSizing/numOfCPUs' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/numOfCPUs'].errorText}
-					value={dataMap['vmSizing/numOfCPUs']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='fileSystemSizeGB'
-					type='number'
-					label={i18n('File System Size (GB)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/fileSystemSizeGB' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText}
-					value={dataMap['vmSizing/fileSystemSizeGB']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='persistentStorageVolumeSize'
-					type='number'
-					label={i18n('Persistent Storage/Volume Size (GB)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/persistentStorageVolumeSize' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText}
-					value={dataMap['vmSizing/persistentStorageVolumeSize']} />
-			</GridItem>
-			<GridItem lastColInRow>
-				<Input
-					data-test-id='ioOperationsPerSec'
-					type='number'
-					label={i18n('I/O Operations (per second)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/ioOperationsPerSec' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].errorText}
-					value={dataMap['vmSizing/ioOperationsPerSec']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-cpuOverSubscriptionRatio'
-					label={i18n('CPU Oversubscription Ratio')}
-					type='select'
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					isValid={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].errorText}
-					value={dataMap['vmSizing/cpuOverSubscriptionRatio']}
-					onChange={(e) => {
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onQDataChanged({'vmSizing/cpuOverSubscriptionRatio' : val});}
-					}>
-					<option key='placeholder' value=''>{i18n('Select...')}</option>
-					{qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].enum.map(cpuOSR => <option value={cpuOSR.enum} key={cpuOSR.enum}>{cpuOSR.title}</option>)}
-				</Input>
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-memoryRAM'
-					type='select'
-					label={i18n('Memory - RAM')}
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/memoryRAM'].errorText}
-					value={dataMap['vmSizing/memoryRAM']}
-					onChange={(e) => {
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onQDataChanged({'vmSizing/memoryRAM' : val});}
-					}>
-					<option key='placeholder' value=''>{i18n('Select...')}</option>
-					{qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => <option value={mRAM.enum} key={mRAM.enum}>{mRAM.title}</option>)}
-				</Input>
-			</GridItem>
-		</GridSection>
-	);
+const VmSizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('VM Sizing')} hasLastColSet>
+            <GridItem>
+                <Input
+                    data-test-id="numOfCPUs"
+                    type="number"
+                    label={i18n('Number of CPUs')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/numOfCPUs': tools })
+                    }
+                    isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid}
+                    errorText={
+                        qgenericFieldInfo['vmSizing/numOfCPUs'].errorText
+                    }
+                    value={dataMap['vmSizing/numOfCPUs']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="fileSystemSizeGB"
+                    type="number"
+                    label={i18n('File System Size (GB)')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/fileSystemSizeGB': tools })
+                    }
+                    isValid={
+                        qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText
+                    }
+                    value={dataMap['vmSizing/fileSystemSizeGB']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="persistentStorageVolumeSize"
+                    type="number"
+                    label={i18n('Persistent Storage/Volume Size (GB)')}
+                    onChange={tools =>
+                        onQDataChanged({
+                            'vmSizing/persistentStorageVolumeSize': tools
+                        })
+                    }
+                    isValid={
+                        qgenericFieldInfo[
+                            'vmSizing/persistentStorageVolumeSize'
+                        ].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo[
+                            'vmSizing/persistentStorageVolumeSize'
+                        ].errorText
+                    }
+                    value={dataMap['vmSizing/persistentStorageVolumeSize']}
+                />
+            </GridItem>
+            <GridItem lastColInRow>
+                <Input
+                    data-test-id="ioOperationsPerSec"
+                    type="number"
+                    label={i18n('I/O Operations (per second)')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/ioOperationsPerSec': tools })
+                    }
+                    isValid={
+                        qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/ioOperationsPerSec']
+                            .errorText
+                    }
+                    value={dataMap['vmSizing/ioOperationsPerSec']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-cpuOverSubscriptionRatio"
+                    label={i18n('CPU Oversubscription Ratio')}
+                    type="select"
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={
+                        qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio']
+                            .isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio']
+                            .errorText
+                    }
+                    value={dataMap['vmSizing/cpuOverSubscriptionRatio']}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({
+                            'vmSizing/cpuOverSubscriptionRatio': val
+                        });
+                    }}>
+                    <option key="placeholder" value="">
+                        {i18n('Select...')}
+                    </option>
+                    {qgenericFieldInfo[
+                        'vmSizing/cpuOverSubscriptionRatio'
+                    ].enum.map(cpuOSR => (
+                        <option value={cpuOSR.enum} key={cpuOSR.enum}>
+                            {cpuOSR.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-memoryRAM"
+                    type="select"
+                    label={i18n('Memory - RAM')}
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid}
+                    errorText={
+                        qgenericFieldInfo['vmSizing/memoryRAM'].errorText
+                    }
+                    value={dataMap['vmSizing/memoryRAM']}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({ 'vmSizing/memoryRAM': val });
+                    }}>
+                    <option key="placeholder" value="">
+                        {i18n('Select...')}
+                    </option>
+                    {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => (
+                        <option value={mRAM.enum} key={mRAM.enum}>
+                            {mRAM.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default VmSizing;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
index 9f59cd5b27..d831765674 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
@@ -14,36 +14,50 @@
  * permissions and limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentCreationView from './SoftwareProductComponentCreationView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {forms} from '../SoftwareProductComponentsConstants.js';
+import { forms } from '../SoftwareProductComponentsConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}} = softwareProduct;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-	return {
-		data,
-		genericFieldInfo,
-		formReady,
-		isFormValid
-	};
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductComponents: {
+            componentEditor: { data, genericFieldInfo, formReady }
+        }
+    } = softwareProduct;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    return {
+        data,
+        genericFieldInfo,
+        formReady,
+        isFormValid
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.CREATE_FORM}),
-		//onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
-		onSubmit: (componentData) => {
-			return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(dispatch,
-			{softwareProductId, componentData, version});
-		},
-		onCancel: () => SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch),
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
-
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.CREATE_FORM
+            }),
+        //onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
+        onSubmit: componentData => {
+            return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(
+                dispatch,
+                { softwareProductId, componentData, version }
+            );
+        },
+        onCancel: () =>
+            SoftwareProductComponentsActionHelper.closeComponentCreationModal(
+                dispatch
+            ),
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentCreationView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
index 42804ce5a6..0b33b4017f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
@@ -21,59 +21,80 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {forms} from '../SoftwareProductComponentsConstants.js';
+import { forms } from '../SoftwareProductComponentsConstants.js';
 
 class ComponentCreationView extends React.Component {
-	render() {
-		let {data = {}, onDataChanged, onCancel, genericFieldInfo} = this.props;
-		let {displayName, description} = data;
-		return(
-			<div>
-				{
-					genericFieldInfo && <Form
-						ref='validationForm'
-						hasButtons={true}
-						onSubmit={ () => this.submit() }
-						onReset={ () => onCancel() }
-						submitButtonText={i18n('Create')}
-						labledButtons={true}
-						isValid={this.props.isFormValid}
-						formReady={this.props.formReady}
-						onValidateForm={() => this.props.onValidateForm(forms.CREATE_FORM) }
-						className='entitlement-pools-form'>
-						<GridSection hasLastColSet>
-							<GridItem colSpan={4} lastColInRow>
-								<Input
-									data-test-id='name'
-									onChange={displayName => onDataChanged({displayName})}
-									label={i18n('Name')}
-									isRequired={true}
-									isValid={genericFieldInfo.displayName.isValid}
-									errorText={genericFieldInfo.displayName.errorText}
-									value={displayName}
-									type='text'/>
-							</GridItem>
-							<GridItem colSpan={4} lastColInRow>
-								<Input
-									label={i18n('Description')}
-									onChange={description => onDataChanged({description})}
-									value={description}
-									isValid={genericFieldInfo.description.isValid}
-									errorText={genericFieldInfo.description.errorText}
-									data-test-id='description'
-									type='textarea'/>
-							</GridItem>
-						</GridSection>
-					</Form>
-				}
-			</div>
-		);
-	}
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            onCancel,
+            genericFieldInfo
+        } = this.props;
+        let { displayName, description } = data;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        submitButtonText={i18n('Create')}
+                        labledButtons={true}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() =>
+                            this.props.onValidateForm(forms.CREATE_FORM)
+                        }
+                        className="entitlement-pools-form">
+                        <GridSection hasLastColSet>
+                            <GridItem colSpan={4} lastColInRow>
+                                <Input
+                                    data-test-id="name"
+                                    onChange={displayName =>
+                                        onDataChanged({ displayName })
+                                    }
+                                    label={i18n('Name')}
+                                    isRequired={true}
+                                    isValid={
+                                        genericFieldInfo.displayName.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.displayName.errorText
+                                    }
+                                    value={displayName}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={4} lastColInRow>
+                                <Input
+                                    label={i18n('Description')}
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    value={description}
+                                    isValid={
+                                        genericFieldInfo.description.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.description.errorText
+                                    }
+                                    data-test-id="description"
+                                    type="textarea"
+                                />
+                            </GridItem>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	submit() {
-		const {onSubmit, data} = this.props;
-		onSubmit(data);
-	}
+    submit() {
+        const { onSubmit, data } = this.props;
+        onSubmit(data);
+    }
 }
 
 export default ComponentCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
index 8c06fd0ab8..f3f64e4b20 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
@@ -13,41 +13,79 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 
-import {forms, COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
-import {onboardingMethod} from '../../SoftwareProductConstants.js';
+import {
+    forms,
+    COMPONENTS_QUESTIONNAIRE
+} from '../SoftwareProductComponentsConstants.js';
+import { onboardingMethod } from '../../SoftwareProductConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentVSP },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        componentEditor: {
+            data: componentData = {},
+            qdata,
+            qgenericFieldInfo: qGenericFieldInfo,
+            dataMap,
+            genericFieldInfo
+        }
+    } = softwareProductComponents;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {
-		componentData,
-		qdata,
-		isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL,
-		genericFieldInfo,
-		qGenericFieldInfo,
-		dataMap,
-		isFormValid
-	};
+    return {
+        componentData,
+        qdata,
+        isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL,
+        genericFieldInfo,
+        qGenericFieldInfo,
+        dataMap,
+        isFormValid
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}),
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
-			{softwareProductId, version, vspComponentId: componentId, componentData, qdata});
-		},
-		onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData})
-	};
-
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.ALL_SPC_FORMS
+            }),
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onSubmit: ({ componentData, qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    componentData,
+                    qdata
+                }
+            );
+        },
+        onValidityChanged: isValidityData =>
+            SoftwareProductActionHelper.setIsValidityData(dispatch, {
+                isValidityData
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsGeneralView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsGeneralView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
index 6aa51d1609..ad1fcaacff 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
@@ -21,9 +21,18 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, description, isReadOnlyMode, genericFieldInfo, isManual}) => (
-	<GridSection title={i18n('General')}>
-		{/* disabled until backend will be ready to implement it
+const GeneralSection = ({
+    onDataChanged,
+    displayName,
+    vfcCode,
+    nfcFunction,
+    description,
+    isReadOnlyMode,
+    genericFieldInfo,
+    isManual
+}) => (
+    <GridSection title={i18n('General')}>
+        {/* disabled until backend will be ready to implement it
 			<div className='validation-input-wrapper'>
 			<div className='form-group'>
 			<label className='control-label'>{i18n('Name')}</label>
@@ -32,156 +41,248 @@ const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, descr
 			</div>
 
 		*/}
-		<GridItem>
-			<Input
-				data-test-id='name'
-				label={i18n('Name')}
-				value={displayName}
-				disabled={!isManual || isReadOnlyMode}
-				type='text'/>
-			{!isManual  && <Input
-				data-test-id='vfcCode'
-				label={i18n('Naming Code')}
-				value={vfcCode}
-				isValid={genericFieldInfo.vfcCode.isValid}
-				errorText={genericFieldInfo.vfcCode.errorText}
-				onChange={vfcCode => onDataChanged({vfcCode})}
-				disabled={isReadOnlyMode}
-				type='text'/> }
-			<Input
-				data-test-id='nfcFunction'
-				label={i18n('Function')}
-				value={nfcFunction}
-				isValid={genericFieldInfo.nfcFunction.isValid}
-				errorText={genericFieldInfo.nfcFunction.errorText}
-				onChange={nfcFunction => onDataChanged({nfcFunction})}
-				disabled={isReadOnlyMode}
-				type='text'/>
-		</GridItem>
-		<GridItem colSpan={2}>
-			<Input
-				label={i18n('Description')}
-				isValid={genericFieldInfo.description.isValid}
-				errorText={genericFieldInfo.description.errorText}
-				onChange={description => onDataChanged({description})}
-				disabled={isReadOnlyMode}
-				value={description}
-				groupClassName='multi-line-textarea'
-				data-test-id='description'
-				type='textarea'/>
-		</GridItem>
-		<GridItem />
-	</GridSection>
+        <GridItem>
+            <Input
+                data-test-id="name"
+                label={i18n('Name')}
+                value={displayName}
+                disabled={!isManual || isReadOnlyMode}
+                type="text"
+            />
+            {!isManual && (
+                <Input
+                    data-test-id="vfcCode"
+                    label={i18n('Naming Code')}
+                    value={vfcCode}
+                    isValid={genericFieldInfo.vfcCode.isValid}
+                    errorText={genericFieldInfo.vfcCode.errorText}
+                    onChange={vfcCode => onDataChanged({ vfcCode })}
+                    disabled={isReadOnlyMode}
+                    type="text"
+                />
+            )}
+            <Input
+                data-test-id="nfcFunction"
+                label={i18n('Function')}
+                value={nfcFunction}
+                isValid={genericFieldInfo.nfcFunction.isValid}
+                errorText={genericFieldInfo.nfcFunction.errorText}
+                onChange={nfcFunction => onDataChanged({ nfcFunction })}
+                disabled={isReadOnlyMode}
+                type="text"
+            />
+        </GridItem>
+        <GridItem colSpan={2}>
+            <Input
+                label={i18n('Description')}
+                isValid={genericFieldInfo.description.isValid}
+                errorText={genericFieldInfo.description.errorText}
+                onChange={description => onDataChanged({ description })}
+                disabled={isReadOnlyMode}
+                value={description}
+                groupClassName="multi-line-textarea"
+                data-test-id="description"
+                type="textarea"
+            />
+        </GridItem>
+        <GridItem />
+    </GridSection>
 );
 
-const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Hypervisor')}>
-		<GridItem>
-			<Input
-				data-test-id='hypervisor'
-				label={i18n('Supported Hypervisors')}
-				type='select'
-				className='input-options-select'
-				groupClassName='bootstrap-input-options'
-				isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
-				errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
-				value={dataMap['general/hypervisor/hypervisor']}
-				onChange={(e) => {
-					const selectedIndex = e.target.selectedIndex;
-					const val = e.target.options[selectedIndex].value;
-					onQDataChanged({'general/hypervisor/hypervisor' : val});}
-				}>
-				<option key='placeholder' value=''>{i18n('Select...')}</option>
-				{qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
-			</Input>
-		</GridItem>
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='drivers'
-				onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
-				label={i18n('Hypervisor Drivers')}
-				type='text'
-				isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
-				errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
-				value={dataMap['general/hypervisor/drivers']}/>
-		</GridItem>
-		<GridItem colSpan={3}>
-			<Input
-				data-test-id='containerFeaturesDescription'
-				label={i18n('Describe Container Features')}
-				type='textarea'
-				onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
-				isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
-				errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
-				value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
-		</GridItem>
-	</GridSection>
+const HypervisorSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Hypervisor')}>
+        <GridItem>
+            <Input
+                data-test-id="hypervisor"
+                label={i18n('Supported Hypervisors')}
+                type="select"
+                className="input-options-select"
+                groupClassName="bootstrap-input-options"
+                isValid={
+                    qgenericFieldInfo['general/hypervisor/hypervisor'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/hypervisor/hypervisor'].errorText
+                }
+                value={dataMap['general/hypervisor/hypervisor']}
+                onChange={e => {
+                    const selectedIndex = e.target.selectedIndex;
+                    const val = e.target.options[selectedIndex].value;
+                    onQDataChanged({ 'general/hypervisor/hypervisor': val });
+                }}>
+                <option key="placeholder" value="">
+                    {i18n('Select...')}
+                </option>
+                {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(
+                    hv => (
+                        <option value={hv.enum} key={hv.enum}>
+                            {hv.title}
+                        </option>
+                    )
+                )}
+            </Input>
+        </GridItem>
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="drivers"
+                onChange={driver =>
+                    onQDataChanged({ 'general/hypervisor/drivers': driver })
+                }
+                label={i18n('Hypervisor Drivers')}
+                type="text"
+                isValid={
+                    qgenericFieldInfo['general/hypervisor/drivers'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/hypervisor/drivers'].errorText
+                }
+                value={dataMap['general/hypervisor/drivers']}
+            />
+        </GridItem>
+        <GridItem colSpan={3}>
+            <Input
+                data-test-id="containerFeaturesDescription"
+                label={i18n('Describe Container Features')}
+                type="textarea"
+                onChange={containerFeaturesDescription =>
+                    onQDataChanged({
+                        'general/hypervisor/containerFeaturesDescription': containerFeaturesDescription
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo[
+                        'general/hypervisor/containerFeaturesDescription'
+                    ].isValid
+                }
+                errorText={
+                    qgenericFieldInfo[
+                        'general/hypervisor/containerFeaturesDescription'
+                    ].errorText
+                }
+                value={
+                    dataMap['general/hypervisor/containerFeaturesDescription']
+                }
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Disk')}>
-		<GridItem>
-			<Input
-				data-test-id='bootDiskSizePerVM'
-				onChange={(bootDiskSizePerVM) => onQDataChanged({'general/disk/bootDiskSizePerVM' : bootDiskSizePerVM})}
-				label={i18n('Size of boot disk per VM (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid}
-				errorText={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].errorText}
-				value={dataMap['general/disk/bootDiskSizePerVM']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='ephemeralDiskSizePerVM'
-				onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/disk/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
-				label={i18n('Size of ephemeral disk per VM (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].isValid}
-				errorText={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].errorText}
-				value={dataMap['general/disk/ephemeralDiskSizePerVM']}/>
-		</GridItem>
-	</GridSection>
+const ImageSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Disk')}>
+        <GridItem>
+            <Input
+                data-test-id="bootDiskSizePerVM"
+                onChange={bootDiskSizePerVM =>
+                    onQDataChanged({
+                        'general/disk/bootDiskSizePerVM': bootDiskSizePerVM
+                    })
+                }
+                label={i18n('Size of boot disk per VM (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/disk/bootDiskSizePerVM']
+                        .errorText
+                }
+                value={dataMap['general/disk/bootDiskSizePerVM']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="ephemeralDiskSizePerVM"
+                onChange={ephemeralDiskSizePerVM =>
+                    onQDataChanged({
+                        'general/disk/ephemeralDiskSizePerVM': ephemeralDiskSizePerVM
+                    })
+                }
+                label={i18n('Size of ephemeral disk per VM (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
+                        .errorText
+                }
+                value={dataMap['general/disk/ephemeralDiskSizePerVM']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Recovery')}>
-		<GridItem>
-			<Input
-				data-test-id='pointObjective'
-				label={i18n('VM Recovery Point Objective (Minutes)')}
-				type='number'
-				onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
-				isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
-				errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
-				value={dataMap['general/recovery/pointObjective']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='timeObjective'
-				label={i18n('VM Recovery Time Objective (Minutes)')}
-				type='number'
-				onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
-				isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
-				errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
-				value={dataMap['general/recovery/timeObjective']}/>
-			<div className='empty-two-col' />
-		</GridItem>
-		<GridItem colSpan={2} />
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='vmProcessFailuresHandling'
-				className='textarea'
-				label={i18n('How are in VM process failures handled?')}
-				type='textarea'
-				onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
-				isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
-				errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
-				value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
-			<div className='empty-two-col' />
-
-		</GridItem>
-		{
-			/** disabled until backend will be ready to implement it
+const RecoverySection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Recovery')}>
+        <GridItem>
+            <Input
+                data-test-id="pointObjective"
+                label={i18n('VM Recovery Point Objective (Minutes)')}
+                type="number"
+                onChange={pointObjective =>
+                    onQDataChanged({
+                        'general/recovery/pointObjective': pointObjective
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo['general/recovery/pointObjective'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/recovery/pointObjective']
+                        .errorText
+                }
+                value={dataMap['general/recovery/pointObjective']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="timeObjective"
+                label={i18n('VM Recovery Time Objective (Minutes)')}
+                type="number"
+                onChange={timeObjective =>
+                    onQDataChanged({
+                        'general/recovery/timeObjective': timeObjective
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo['general/recovery/timeObjective'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['general/recovery/timeObjective']
+                        .errorText
+                }
+                value={dataMap['general/recovery/timeObjective']}
+            />
+            <div className="empty-two-col" />
+        </GridItem>
+        <GridItem colSpan={2} />
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="vmProcessFailuresHandling"
+                className="textarea"
+                label={i18n('How are in VM process failures handled?')}
+                type="textarea"
+                onChange={vmProcessFailuresHandling =>
+                    onQDataChanged({
+                        'general/recovery/vmProcessFailuresHandling': vmProcessFailuresHandling
+                    })
+                }
+                isValid={
+                    qgenericFieldInfo[
+                        'general/recovery/vmProcessFailuresHandling'
+                    ].isValid
+                }
+                errorText={
+                    qgenericFieldInfo[
+                        'general/recovery/vmProcessFailuresHandling'
+                    ].errorText
+                }
+                value={dataMap['general/recovery/vmProcessFailuresHandling']}
+            />
+            <div className="empty-two-col" />
+        </GridItem>
+        {/** disabled until backend will be ready to implement it
 			<div className='row'>
 			<div className='col-md-3'>
 			<Input
@@ -190,78 +291,127 @@ const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 			pointer='/general/recovery/VMRecoveryDocument'/>
 			</div>
 			</div>
-			*/
-		}
-	</GridSection>
+			*/}
+    </GridSection>
 );
 
-const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('DNS Configuration')}>
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='dnsConfiguration'
-				label={i18n('Do you have a need for DNS as a Service? Please describe.')}
-				type='textarea'
-				onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
-				isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
-				errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
-				value={dataMap['general/dnsConfiguration']}/>
-		</GridItem>
-	</GridSection>
+const DNSConfigurationSection = ({
+    dataMap,
+    onQDataChanged,
+    qgenericFieldInfo
+}) => (
+    <GridSection title={i18n('DNS Configuration')}>
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="dnsConfiguration"
+                label={i18n(
+                    'Do you have a need for DNS as a Service? Please describe.'
+                )}
+                type="textarea"
+                onChange={dnsConfiguration =>
+                    onQDataChanged({
+                        'general/dnsConfiguration': dnsConfiguration
+                    })
+                }
+                isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
+                errorText={
+                    qgenericFieldInfo['general/dnsConfiguration'].errorText
+                }
+                value={dataMap['general/dnsConfiguration']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Clone')}>
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='vmCloneUsage'
-				label={i18n('Describe VM Clone Use')}
-				type='textarea'
-				onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
-				isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
-				errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
-				value={dataMap['general/vmCloneUsage']}/>
-		</GridItem>
-	</GridSection>
+const CloneSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Clone')}>
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="vmCloneUsage"
+                label={i18n('Describe VM Clone Use')}
+                type="textarea"
+                onChange={vmCloneUsage =>
+                    onQDataChanged({ 'general/vmCloneUsage': vmCloneUsage })
+                }
+                isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
+                errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
+                value={dataMap['general/vmCloneUsage']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
 class SoftwareProductComponentsGeneralView extends React.Component {
+    render() {
+        let {
+            isManual,
+            onQDataChanged,
+            onDataChanged,
+            genericFieldInfo,
+            dataMap,
+            qGenericFieldInfo,
+            componentData: { displayName, vfcCode, nfcFunction, description },
+            isReadOnlyMode
+        } = this.props;
+        return (
+            <div className="vsp-components-general">
+                <div className="general-data">
+                    {genericFieldInfo &&
+                        qGenericFieldInfo && (
+                            <Form
+                                isValid={this.props.isFormValid}
+                                formReady={null}
+                                isReadOnlyMode={isReadOnlyMode}
+                                onValidityChanged={isValidityData =>
+                                    this.props.onValidityChanged(isValidityData)
+                                }
+                                hasButtons={false}>
+                                <GeneralSection
+                                    onDataChanged={onDataChanged}
+                                    displayName={displayName}
+                                    vfcCode={vfcCode}
+                                    nfcFunction={nfcFunction}
+                                    description={description}
+                                    isManual={isManual}
+                                    isReadOnlyMode={isReadOnlyMode}
+                                    genericFieldInfo={genericFieldInfo}
+                                />
+                                <HypervisorSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <ImageSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <RecoverySection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <DNSConfigurationSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                                <CloneSection
+                                    onQDataChanged={onQDataChanged}
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qGenericFieldInfo}
+                                />
+                            </Form>
+                        )}
+                </div>
+            </div>
+        );
+    }
 
-	render() {
-		let {isManual, onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, nfcFunction, description}, isReadOnlyMode} =  this.props;
-		return(
-			<div className='vsp-components-general'>
-				<div className='general-data'>
-					{genericFieldInfo && qGenericFieldInfo && <Form
-						isValid={this.props.isFormValid}
-						formReady={null}
-						isReadOnlyMode={isReadOnlyMode}
-						onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
-						hasButtons={false}>
-						<GeneralSection
-							onDataChanged={onDataChanged}
-							displayName={displayName}
-							vfcCode={vfcCode}
-							nfcFunction={nfcFunction}
-							description={description}
-							isManual={isManual}
-							isReadOnlyMode={isReadOnlyMode}
-							genericFieldInfo={genericFieldInfo}/>
-						<HypervisorSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<ImageSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<RecoverySection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<DNSConfigurationSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-						<CloneSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-					</Form> }
-				</div>
-			</div>
-		);
-	}
-
-	save() {
-		let {onSubmit, componentData, qdata} = this.props;
-		return onSubmit({componentData, qdata});
-	}
+    save() {
+        let { onSubmit, componentData, qdata } = this.props;
+        return onSubmit({ componentData, qdata });
+    }
 }
 
 export default SoftwareProductComponentsGeneralView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
index 2483d0aaa2..900a9a1c46 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
@@ -1,6 +1,6 @@
-
 import Validator from 'nfvo-utils/Validator.js';
 
-export  const imageCustomValidations = {
-	'version': value => Validator.validate('version', value, [{type: 'required', data: true}])
+export const imageCustomValidations = {
+    version: value =>
+        Validator.validate('version', value, [{ type: 'required', data: true }])
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
index 8d70d6f14c..3f661b76fe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
@@ -17,157 +17,268 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
 
 function baseUrl(softwareProductId, version, componentId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
 }
 
-function fetchImagesList({softwareProductId, componentId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchImagesList({ softwareProductId, componentId, version }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}`
+    );
 }
 
-function fetchImage({softwareProductId, componentId, imageId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function fetchImage({ softwareProductId, componentId, imageId, version }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+    );
 }
 
-function destroyImage({softwareProductId, componentId, version, imageId}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function destroyImage({ softwareProductId, componentId, version, imageId }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+    );
 }
 
-function createImage({softwareProductId, componentId, version, data}) {
-	return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
-		fileName: data.fileName
-	});
+function createImage({ softwareProductId, componentId, version, data }) {
+    return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
+        fileName: data.fileName
+    });
 }
 
-function fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`);
+function fetchImageQuestionnaire({
+    softwareProductId,
+    componentId,
+    imageId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${imageId}/questionnaire`
+    );
 }
 
-function saveImage({softwareProductId, version, componentId, image: {id, fileName}}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
-		fileName
-	});
-
+function saveImage({
+    softwareProductId,
+    version,
+    componentId,
+    image: { id, fileName }
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version, componentId)}/${id}`,
+        {
+            fileName
+        }
+    );
 }
 
-function saveImageQuestionnaire({softwareProductId, componentId, version, imageId, qdata}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`, qdata);
+function saveImageQuestionnaire({
+    softwareProductId,
+    componentId,
+    version,
+    imageId,
+    qdata
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${imageId}/questionnaire`,
+        qdata
+    );
 }
 
 const SoftwareProductComponentImagesActionHelper = {
-	fetchImagesList(dispatch, {softwareProductId, componentId, version}) {
-		dispatch({
-			type: actionTypes.IMAGES_LIST_UPDATE,
-			response: []
-		});
-
-		return fetchImagesList({softwareProductId, componentId, version}).then((response) => {
-			dispatch({
-				type: actionTypes.IMAGES_LIST_UPDATE,
-				response: response.results,
-				componentId : componentId
-			});
-		});
-	},
-
-	deleteImage(dispatch, {softwareProductId, componentId, version, imageId}) {
-		return destroyImage({softwareProductId, componentId, version, imageId}).then(() => {
-			return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-		});
-	},
-
-	loadImageData({softwareProductId, componentId, imageId, version}) {
-		return fetchImage({softwareProductId, componentId, imageId, version});
-	},
-
-	openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) {
-		return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => {
-			SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, {
-				softwareProductId,
-				componentId,
-				imageId: image.id,
-				version
-			}).then(() => {
-				SoftwareProductComponentImagesActionHelper.openImageEditor(dispatch, {
-					softwareProductId,
-					componentId,
-					version,
-					isReadOnlyMode,
-					image,
-					data
-				});
-			});
-		});
-	},
-
-	openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) {
-
-		let {id} = image;
-		let title = id ?  i18n('Edit Image') : i18n('Create New Image');
-		let className = id ? 'image-modal-edit' : 'image-modal-new';
-
-		dispatch({
-			type: actionTypes.ImageEditor.OPEN,
-			image: {...data, id}
-		});
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
-				title: title,
-				modalClassName: className,
-				modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode}
-			}
-		});
-
-	},
-
-	closeImageEditor(dispatch) {
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-
-		dispatch({
-			type: actionTypes.ImageEditor.CLOSE
-		});
-
-	},
-
-	loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) {
-		return fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}).then((response) => {
-			ValidationHelper.qDataLoaded(dispatch, {qName: IMAGE_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}});
-		});
-	},
-
-	saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}) {
-		SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
-		if (data !== null && data.id) {
-			// editor in edit mode
-			return Promise.all([
-				saveImageQuestionnaire({softwareProductId, version, componentId, imageId: data.id, qdata}),
-				saveImage({softwareProductId, version, componentId, image: data}).then(() => {
-					return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-				})
-			]);
-		} else {
-			// editor in create mode
-			createImage({softwareProductId, componentId, version, data}).then(() => {
-				return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
-			});
-		}
-	}
+    fetchImagesList(dispatch, { softwareProductId, componentId, version }) {
+        dispatch({
+            type: actionTypes.IMAGES_LIST_UPDATE,
+            response: []
+        });
+
+        return fetchImagesList({
+            softwareProductId,
+            componentId,
+            version
+        }).then(response => {
+            dispatch({
+                type: actionTypes.IMAGES_LIST_UPDATE,
+                response: response.results,
+                componentId: componentId
+            });
+        });
+    },
+
+    deleteImage(
+        dispatch,
+        { softwareProductId, componentId, version, imageId }
+    ) {
+        return destroyImage({
+            softwareProductId,
+            componentId,
+            version,
+            imageId
+        }).then(() => {
+            return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                dispatch,
+                { softwareProductId, componentId, version }
+            );
+        });
+    },
+
+    loadImageData({ softwareProductId, componentId, imageId, version }) {
+        return fetchImage({ softwareProductId, componentId, imageId, version });
+    },
+
+    openEditImageEditor(
+        dispatch,
+        { image, softwareProductId, componentId, version, isReadOnlyMode }
+    ) {
+        return SoftwareProductComponentImagesActionHelper.loadImageData({
+            softwareProductId,
+            componentId,
+            imageId: image.id,
+            version
+        }).then(({ data }) => {
+            SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    componentId,
+                    imageId: image.id,
+                    version
+                }
+            ).then(() => {
+                SoftwareProductComponentImagesActionHelper.openImageEditor(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        componentId,
+                        version,
+                        isReadOnlyMode,
+                        image,
+                        data
+                    }
+                );
+            });
+        });
+    },
+
+    openImageEditor(
+        dispatch,
+        {
+            image = {},
+            data = {},
+            softwareProductId,
+            componentId,
+            version,
+            isReadOnlyMode
+        }
+    ) {
+        let { id } = image;
+        let title = id ? i18n('Edit Image') : i18n('Create New Image');
+        let className = id ? 'image-modal-edit' : 'image-modal-new';
+
+        dispatch({
+            type: actionTypes.ImageEditor.OPEN,
+            image: { ...data, id }
+        });
+
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName:
+                    modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
+                title: title,
+                modalClassName: className,
+                modalComponentProps: {
+                    softwareProductId,
+                    componentId,
+                    version,
+                    isReadOnlyMode
+                }
+            }
+        });
+    },
+
+    closeImageEditor(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+
+        dispatch({
+            type: actionTypes.ImageEditor.CLOSE
+        });
+    },
+
+    loadImageQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, imageId, version }
+    ) {
+        return fetchImageQuestionnaire({
+            softwareProductId,
+            componentId,
+            imageId,
+            version
+        }).then(response => {
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: IMAGE_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            });
+        });
+    },
+
+    saveImageDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, version, data, qdata }
+    ) {
+        SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
+        if (data !== null && data.id) {
+            // editor in edit mode
+            return Promise.all([
+                saveImageQuestionnaire({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    imageId: data.id,
+                    qdata
+                }),
+                saveImage({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    image: data
+                }).then(() => {
+                    return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                        dispatch,
+                        { softwareProductId, componentId, version }
+                    );
+                })
+            ]);
+        } else {
+            // editor in create mode
+            createImage({ softwareProductId, componentId, version, data }).then(
+                () => {
+                    return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+                        dispatch,
+                        { softwareProductId, componentId, version }
+                    );
+                }
+            );
+        }
+    }
 };
 
 export default SoftwareProductComponentImagesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
index 6b6c9a30e5..300b2898e1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
@@ -16,12 +16,12 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	IMAGES_LIST_UPDATE: null,
+    IMAGES_LIST_UPDATE: null,
 
-	ImageEditor: {
-		CLOSE: null,
-		OPEN: null
-	}
+    ImageEditor: {
+        CLOSE: null,
+        OPEN: null
+    }
 });
 
 export const IMAGE_QUESTIONNAIRE = 'image';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
index c5f23e7681..0243a38f1b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
@@ -13,56 +13,93 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js';
 
 export const mapStateToProps = ({
-	softwareProduct,
-	currentScreen: {props: {isReadOnlyMode}}
+    softwareProduct,
+    currentScreen: { props: { isReadOnlyMode } }
 }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
 
-	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
-
-	let {images: {imageEditor = {}}} = softwareProductComponents;
-	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor;
-	let {version, onboardingMethod} = currentSoftwareProduct;
-	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) &&  ValidationHelper.checkFormValid(qgenericFieldInfo);
-
-	return {
-		version,
-		currentSoftwareProduct,
-		isValidityData,
-		data,
-		qdata,
-		dataMap,
-		isFormValid,
-		formReady,
-		genericFieldInfo,
-		qgenericFieldInfo,
-		isReadOnlyMode,
-		isManual: isManual
-	};
+    let { images: { imageEditor = {} } } = softwareProductComponents;
+    let {
+        data,
+        qdata,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        dataMap,
+        formReady
+    } = imageEditor;
+    let { version, onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
+    let isFormValid =
+        ValidationHelper.checkFormValid(genericFieldInfo) &&
+        ValidationHelper.checkFormValid(qgenericFieldInfo);
 
+    return {
+        version,
+        currentSoftwareProduct,
+        isValidityData,
+        data,
+        qdata,
+        dataMap,
+        isFormValid,
+        formReady,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        isReadOnlyMode,
+        isManual: isManual
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}),
-		onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}),
-		onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch),
-		onValidateForm: customValidations => {
-			ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
-			ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations);
-		},
-		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: IMAGE_QUESTIONNAIRE, customValidations}),
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.IMAGE_EDIT_FORM
+            }),
+        onSubmit: ({ data, qdata }) =>
+            SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(
+                dispatch,
+                { softwareProductId, componentId, version, data, qdata }
+            ),
+        onCancel: () =>
+            SoftwareProductComponentsImageActionHelper.closeImageEditor(
+                dispatch
+            ),
+        onValidateForm: customValidations => {
+            ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
+            ValidationHelper.qValidateForm(
+                dispatch,
+                IMAGE_QUESTIONNAIRE,
+                customValidations
+            );
+        },
+        onQDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: IMAGE_QUESTIONNAIRE,
+                customValidations
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsImageEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentsImageEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
index 7c357429e5..3846d45772 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
@@ -13,30 +13,29 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.ImageEditor.CLOSE:
-			return {};
-		case actionTypes.ImageEditor.OPEN:
-			return {
-				...state,
-				data: {
-					...action.image
-				},
-				genericFieldInfo: {
-					'fileName' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				},
-				formName: forms.IMAGE_EDIT_FORM
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.ImageEditor.CLOSE:
+            return {};
+        case actionTypes.ImageEditor.OPEN:
+            return {
+                ...state,
+                data: {
+                    ...action.image
+                },
+                genericFieldInfo: {
+                    fileName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                },
+                formName: forms.IMAGE_EDIT_FORM
+            };
+        default:
+            return state;
+    }
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
index a5ef152e01..3670ab910d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
@@ -21,53 +21,81 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 
 import FileDetails from './imagesEditorComponents/FileDetails.jsx';
 import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
-import {imageCustomValidations} from './ImageValidations.js';
+import { imageCustomValidations } from './ImageValidations.js';
 
 class SoftwareProductComponentsImageEditorView extends React.Component {
-	static propTypes = {
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    static propTypes = {
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	render() {
-		let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, genericFieldInfo, qgenericFieldInfo, dataMap, onDataChanged, isManual, onQDataChanged} = this.props;
-		let {id, fileName} = data;
-		let editingMode = Boolean(id);
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref={(form) => { this.form = form; }}
-					hasButtons={true}
-					onSubmit={ () => this.submit() }
-					onReset={ () => onCancel() }
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					isValid={isFormValid}
-					formReady={formReady}
-					submitButtonText={editingMode ? i18n('Save') : i18n('Create')}
-					onValidateForm={() => onValidateForm(imageCustomValidations) }
-					className='vsp-components-image-editor'>
-					<div className='editor-data'>
-						<FileDetails
-							editingMode={editingMode}
-							genericFieldInfo={genericFieldInfo}
-							qgenericFieldInfo={qgenericFieldInfo}
-							fileName={fileName}
-							onDataChanged={onDataChanged}
-							isManual={isManual}
-							dataMap={dataMap}
-							onQDataChanged={onQDataChanged}/>
-						{editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
-					</div>
-				</Form>}
-			</div>
-		);
-	}
-	submit() {
-		let {data, qdata, onSubmit, version} = this.props;
-		onSubmit({data, qdata, version});
-	}
+    render() {
+        let {
+            onCancel,
+            onValidateForm,
+            isReadOnlyMode,
+            isFormValid,
+            formReady,
+            data = {},
+            genericFieldInfo,
+            qgenericFieldInfo,
+            dataMap,
+            onDataChanged,
+            isManual,
+            onQDataChanged
+        } = this.props;
+        let { id, fileName } = data;
+        let editingMode = Boolean(id);
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        submitButtonText={
+                            editingMode ? i18n('Save') : i18n('Create')
+                        }
+                        onValidateForm={() =>
+                            onValidateForm(imageCustomValidations)
+                        }
+                        className="vsp-components-image-editor">
+                        <div className="editor-data">
+                            <FileDetails
+                                editingMode={editingMode}
+                                genericFieldInfo={genericFieldInfo}
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                fileName={fileName}
+                                onDataChanged={onDataChanged}
+                                isManual={isManual}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            {editingMode && (
+                                <ImageDetails
+                                    dataMap={dataMap}
+                                    qgenericFieldInfo={qgenericFieldInfo}
+                                    onQDataChanged={onQDataChanged}
+                                />
+                            )}
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
+    submit() {
+        let { data, qdata, onSubmit, version } = this.props;
+        onSubmit({ data, qdata, version });
+    }
 }
 
 export default SoftwareProductComponentsImageEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
index d071647058..f3c39c3048 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
@@ -13,73 +13,122 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx';
 import ImageHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsImagesActionHelper from './SoftwareProductComponentsImageActionHelper.js';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        images: { imagesList = [] },
+        componentEditor: {
+            data: componentData,
+            qdata,
+            dataMap,
+            qgenericFieldInfo
+        }
+    } = softwareProductComponents;
+    let { onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
 
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
-	let {onboardingMethod} = currentSoftwareProduct;
-	let isManual =  onboardingMethod === onboardingMethodTypes.MANUAL;
-
-	return {
-		componentData,
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		isValidityData,
-		imagesList,
-		isManual : isManual
-	};
+    return {
+        componentData,
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        isValidityData,
+        imagesList,
+        isManual: isManual
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: COMPONENTS_QUESTIONNAIRE}),
-		onAddImage: (isReadOnlyMode) => {
-			SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch,
-				{isReadOnlyMode, softwareProductId,
-					componentId, version}
-			);},
-		onDeleteImage: (image) => {
-			let shortenedFileName = (image.fileName.length > 40) ? image.fileName.substr(0,40) + '...' : image.fileName;
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data: {
-					msg: i18n('Are you sure you want to delete "{shortenedFileName}"?', {shortenedFileName: shortenedFileName}),
-					onConfirmed: () => ImageHelper.deleteImage(dispatch, {
-						softwareProductId,
-						componentId,
-						version,
-						imageId: image.id
-					})
-				}
-			});
-		},
-		onEditImageClick: (image, isReadOnlyMode) => {
-			SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, {
-				image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'}
-			);
-		},
-		onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
-			{softwareProductId,
-				vspComponentId: componentId,
-				version,
-				qdata});
-		}
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onAddImage: isReadOnlyMode => {
+            SoftwareProductComponentsImagesActionHelper.openImageEditor(
+                dispatch,
+                {
+                    isReadOnlyMode,
+                    softwareProductId,
+                    componentId,
+                    version
+                }
+            );
+        },
+        onDeleteImage: image => {
+            let shortenedFileName =
+                image.fileName.length > 40
+                    ? image.fileName.substr(0, 40) + '...'
+                    : image.fileName;
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n(
+                        'Are you sure you want to delete "{shortenedFileName}"?',
+                        {
+                            shortenedFileName: shortenedFileName
+                        }
+                    ),
+                    onConfirmed: () =>
+                        ImageHelper.deleteImage(dispatch, {
+                            softwareProductId,
+                            componentId,
+                            version,
+                            imageId: image.id
+                        })
+                }
+            });
+        },
+        onEditImageClick: (image, isReadOnlyMode) => {
+            SoftwareProductComponentsImagesActionHelper.openEditImageEditor(
+                dispatch,
+                {
+                    image,
+                    isReadOnlyMode,
+                    softwareProductId,
+                    componentId,
+                    version,
+                    modalClassName: 'image-modal-edit'
+                }
+            );
+        },
+        onSubmit: qdata => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    vspComponentId: componentId,
+                    version,
+                    qdata
+                }
+            );
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsImageListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsImageListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
index 5dd2fb623b..a7c1bfafbe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
@@ -13,14 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-
-		case actionTypes.IMAGES_LIST_UPDATE:
-			return [...action.response];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.IMAGES_LIST_UPDATE:
+            return [...action.response];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
index 004cbebe5d..cb67856caa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
@@ -20,113 +20,152 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class SoftwareProductComponentsImageListView extends React.Component {
-	state = {
-		localFilter: ''
-	};
+    state = {
+        localFilter: ''
+    };
 
-	render() {
-		let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props;
-		return(
-			<div className='vsp-components-image'>
-				<div className='image-data'>
-					<div>
-						{ qgenericFieldInfo && <Form
-							formReady={null}
-							isValid={true}
-							onSubmit={() => this.save()}
-							isReadOnlyMode={isReadOnlyMode}
-							hasButtons={false}>
-
-							<h3 className='section-title'>{i18n('Image')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components'>
-									<div className='single-col'>
-										<Input
-											data-test-id='providedBy'
-											label={i18n('Image provided by')}
-											type='select'
-											isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
-											errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
-											value={dataMap['general/image/providedBy']}
-											onChange={(e) => {
-												const selectedIndex = e.target.selectedIndex;
-												const val = e.target.options[selectedIndex].value;
-												onQDataChanged({'general/image/providedBy' : val});}
-											}>
-											<option key='placeholder' value=''>{i18n('Select...')}</option>
-											{ qgenericFieldInfo['general/image/providedBy'].enum.map(proto =>
-												<option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
-										</Input>
-									</div>
-									<div className='empty-two-col' />
-								</div>
-							</div>
-
-						</Form> }
-					</div>
-				</div>
-	            {this.renderImagesList()}
+    render() {
+        let {
+            dataMap,
+            onQDataChanged,
+            isReadOnlyMode,
+            qgenericFieldInfo
+        } = this.props;
+        return (
+            <div className="vsp-components-image">
+                <div className="image-data">
+                    <div>
+                        {qgenericFieldInfo && (
+                            <Form
+                                formReady={null}
+                                isValid={true}
+                                onSubmit={() => this.save()}
+                                isReadOnlyMode={isReadOnlyMode}
+                                hasButtons={false}>
+                                <h3 className="section-title">
+                                    {i18n('Image')}
+                                </h3>
+                                <div className="rows-section">
+                                    <div className="row-flex-components">
+                                        <div className="single-col">
+                                            <Input
+                                                data-test-id="providedBy"
+                                                label={i18n(
+                                                    'Image provided by'
+                                                )}
+                                                type="select"
+                                                isValid={
+                                                    qgenericFieldInfo[
+                                                        'general/image/providedBy'
+                                                    ].isValid
+                                                }
+                                                errorText={
+                                                    qgenericFieldInfo[
+                                                        'general/image/providedBy'
+                                                    ].errorText
+                                                }
+                                                value={
+                                                    dataMap[
+                                                        'general/image/providedBy'
+                                                    ]
+                                                }
+                                                onChange={e => {
+                                                    const selectedIndex =
+                                                        e.target.selectedIndex;
+                                                    const val =
+                                                        e.target.options[
+                                                            selectedIndex
+                                                        ].value;
+                                                    onQDataChanged({
+                                                        'general/image/providedBy': val
+                                                    });
+                                                }}>
+                                                <option
+                                                    key="placeholder"
+                                                    value="">
+                                                    {i18n('Select...')}
+                                                </option>
+                                                {qgenericFieldInfo[
+                                                    'general/image/providedBy'
+                                                ].enum.map(proto => (
+                                                    <option
+                                                        value={proto.enum}
+                                                        key={proto.enum}>
+                                                        {proto.title}
+                                                    </option>
+                                                ))}
+                                            </Input>
+                                        </div>
+                                        <div className="empty-two-col" />
+                                    </div>
+                                </div>
+                            </Form>
+                        )}
+                    </div>
+                </div>
+                {this.renderImagesList()}
             </div>
-		);
-	};
-
-	renderImagesList() {
-		const {localFilter} = this.state;
-		let {isReadOnlyMode, onAddImage, isManual} = this.props;
-
-		return (
-			<ListEditorView
-				title={i18n('Images')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Images by Name')}
-				isReadOnlyMode={isReadOnlyMode}
-				onFilter={value => this.setState({localFilter: value})}
-				onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
-				plusButtonTitle={i18n('Add Image')}
-				twoColumns>
-				{this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	};
+        );
+    }
 
+    renderImagesList() {
+        const { localFilter } = this.state;
+        let { isReadOnlyMode, onAddImage, isManual } = this.props;
 
-	renderImagesListItem(image, isReadOnlyMode) {
-		let {id, fileName} = image;
-		let {onEditImageClick, isManual, onDeleteImage} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditImageClick(image, isReadOnlyMode)}
-				onDelete={isManual ? () => onDeleteImage(image) : null}>
+        return (
+            <ListEditorView
+                title={i18n('Images')}
+                filterValue={localFilter}
+                placeholder={i18n('Filter Images by Name')}
+                isReadOnlyMode={isReadOnlyMode}
+                onFilter={value => this.setState({ localFilter: value })}
+                onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
+                plusButtonTitle={i18n('Add Image')}
+                twoColumns>
+                {this.filterList().map(image =>
+                    this.renderImagesListItem(image, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-				<ListEditorItemViewField>
-					<div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
+    renderImagesListItem(image, isReadOnlyMode) {
+        let { id, fileName } = image;
+        let { onEditImageClick, isManual, onDeleteImage } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() => onEditImageClick(image, isReadOnlyMode)}
+                onDelete={isManual ? () => onDeleteImage(image) : null}>
+                <ListEditorItemViewField>
+                    <div className="image-filename-cell">
+                        <span className="image-filename">{fileName}</span>
+                    </div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {imagesList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return imagesList.filter(({fileName = ''}) => {
-				return escape(fileName).match(filter);
-			});
-		}
-		else {
-			return imagesList;
-		}
-	}
+    filterList() {
+        let { imagesList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return imagesList.filter(({ fileName = '' }) => {
+                return escape(fileName).match(filter);
+            });
+        } else {
+            return imagesList;
+        }
+    }
 
-	save() {
-		let {onSubmit, qdata} = this.props;
-		return onSubmit(qdata);
-	}
+    save() {
+        let { onSubmit, qdata } = this.props;
+        return onSubmit(qdata);
+    }
 }
 export default SoftwareProductComponentsImageListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
index 64367c00f2..ec173cd988 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
@@ -18,32 +18,64 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 import Format from './Format.jsx';
 import Version from './Version.jsx';
 
-const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => {
-	let fileNameCols = (editingMode) ? 3 : 4;
-	return(
-		<GridSection hasLastColSset>
-			<GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
-				<Input
-					disabled={!isManual}
-					onChange={fileName => onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)}
-					label={i18n('Image Name')}
-					data-test-id='image-filename'
-					value={fileName}
-					isValid={genericFieldInfo.fileName.isValid}
-					errorText={genericFieldInfo.fileName.errorText}
-					isRequired={true}
-					type='text'
-					className='image-filename'/>
-			</GridItem>
-			{!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>}
-			{editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
-			{editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
-		</GridSection>
-	);
+const FileDetails = ({
+    editingMode,
+    fileName,
+    onDataChanged,
+    isManual,
+    dataMap,
+    onQDataChanged,
+    genericFieldInfo,
+    qgenericFieldInfo
+}) => {
+    let fileNameCols = editingMode ? 3 : 4;
+    return (
+        <GridSection hasLastColSset>
+            <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
+                <Input
+                    disabled={!isManual}
+                    onChange={fileName =>
+                        onDataChanged({ fileName }, forms.IMAGE_EDIT_FORM)
+                    }
+                    label={i18n('Image Name')}
+                    data-test-id="image-filename"
+                    value={fileName}
+                    isValid={genericFieldInfo.fileName.isValid}
+                    errorText={genericFieldInfo.fileName.errorText}
+                    isRequired={true}
+                    type="text"
+                    className="image-filename"
+                />
+            </GridItem>
+            {!editingMode && (
+                <div className="note-text">
+                    {i18n(
+                        'After image creation you must go to Edit Image and add File Version'
+                    )}
+                </div>
+            )}
+            {editingMode && (
+                <Version
+                    isManual={isManual}
+                    dataMap={dataMap}
+                    qgenericFieldInfo={qgenericFieldInfo}
+                    onQDataChanged={onQDataChanged}
+                />
+            )}
+            {editingMode && (
+                <Format
+                    isManual={isManual}
+                    qgenericFieldInfo={qgenericFieldInfo}
+                    dataMap={dataMap}
+                    onQDataChanged={onQDataChanged}
+                />
+            )}
+        </GridSection>
+    );
 };
 export default FileDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
index 1f71c6b277..0ee8fb76d0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
@@ -18,30 +18,34 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-
-const Format = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridItem colSpan={2}>
-			<Input
-				disabled={!isManual}
-				data-test-id='image-format'
-				type='select'
-				label={i18n('Format')}
-				className='input-options-select'
-				groupClassName='bootstrap-input-options'
-				isValid={qgenericFieldInfo['format'].isValid}
-				errorText={qgenericFieldInfo['format'].errorText}
-				value={dataMap['format']}
-				onChange={(e) => {
-					const selectedIndex = e.target.selectedIndex;
-					const val = e.target.options[selectedIndex].value;
-					onQDataChanged({'format' : val});}
-				}>
-				<option key='placeholder' value=''>{i18n('Select...')}</option>
-				{qgenericFieldInfo['format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
-			</Input>
-		</GridItem>
-	);
+const Format = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridItem colSpan={2}>
+            <Input
+                disabled={!isManual}
+                data-test-id="image-format"
+                type="select"
+                label={i18n('Format')}
+                className="input-options-select"
+                groupClassName="bootstrap-input-options"
+                isValid={qgenericFieldInfo['format'].isValid}
+                errorText={qgenericFieldInfo['format'].errorText}
+                value={dataMap['format']}
+                onChange={e => {
+                    const selectedIndex = e.target.selectedIndex;
+                    const val = e.target.options[selectedIndex].value;
+                    onQDataChanged({ format: val });
+                }}>
+                <option key="placeholder" value="">
+                    {i18n('Select...')}
+                </option>
+                {qgenericFieldInfo['format'].enum.map(hv => (
+                    <option value={hv.enum} key={hv.enum}>
+                        {hv.title}
+                    </option>
+                ))}
+            </Input>
+        </GridItem>
+    );
 };
 export default Format;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
index 24e54bbbcb..ccf94bc860 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
@@ -19,21 +19,22 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const ImageDetails = ({dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('Image Details')}>
-			<GridItem colSpan={2}>
-				<Input
-					data-test-id='image-md5'
-					className='image-md5'
-					type='text'
-					label={i18n('md5')}
-					onChange={(md5) => onQDataChanged({'md5' : md5})}
-					isValid={qgenericFieldInfo['md5'].isValid}
-					errorText={qgenericFieldInfo['md5'].errorText}
-					value={dataMap['md5']}/>
-			</GridItem>
-		</GridSection>
-	);
+const ImageDetails = ({ dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('Image Details')}>
+            <GridItem colSpan={2}>
+                <Input
+                    data-test-id="image-md5"
+                    className="image-md5"
+                    type="text"
+                    label={i18n('md5')}
+                    onChange={md5 => onQDataChanged({ md5: md5 })}
+                    isValid={qgenericFieldInfo['md5'].isValid}
+                    errorText={qgenericFieldInfo['md5'].errorText}
+                    value={dataMap['md5']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 export default ImageDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
index bd55c5ba91..60454c52e7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
@@ -17,25 +17,29 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {imageCustomValidations} from '../ImageValidations.js';
+import { imageCustomValidations } from '../ImageValidations.js';
 
-
-const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
-	return(
-		<GridItem colSpan={1} lastColInRow>
-			<Input
-				disabled={!isManual}
-				data-test-id='image-version'
-				type='text'
-				className='image-version'
-				label={i18n('Version')}
-				isRequired={true}
-				onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})}
-				isValid={qgenericFieldInfo['version'].isValid}
-				errorText={qgenericFieldInfo['version'].errorText}
-				value={dataMap['version']}/>
-		</GridItem>
-	);
+const Version = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+    return (
+        <GridItem colSpan={1} lastColInRow>
+            <Input
+                disabled={!isManual}
+                data-test-id="image-version"
+                type="text"
+                className="image-version"
+                label={i18n('Version')}
+                isRequired={true}
+                onChange={version =>
+                    onQDataChanged(
+                        { version: version },
+                        { version: imageCustomValidations['version'] }
+                    )
+                }
+                isValid={qgenericFieldInfo['version'].isValid}
+                errorText={qgenericFieldInfo['version'].errorText}
+                value={dataMap['version']}
+            />
+        </GridItem>
+    );
 };
 export default Version;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
index 350e80c0f8..da8b73fbe0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
@@ -13,29 +13,50 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentLoadBalancingView from './SoftwareProductComponentLoadBalancingRefView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
-export const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
-
-	let {componentEditor: {qdata, qgenericFieldInfo: genericFieldInfo, dataMap}} = softwareProductComponents;
-
-	return {
-		qdata,
-		genericFieldInfo,
-		dataMap
-	};
+export const mapStateToProps = ({
+    softwareProduct: { softwareProductComponents }
+}) => {
+    let {
+        componentEditor: { qdata, qgenericFieldInfo: genericFieldInfo, dataMap }
+    } = softwareProductComponents;
 
+    return {
+        qdata,
+        genericFieldInfo,
+        dataMap
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-	return {
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});}
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onSubmit: ({ qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    qdata
+                }
+            );
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentLoadBalancingView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentLoadBalancingView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
index 1cbb9afc5d..4c90fc0be2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
@@ -19,7 +19,7 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import Form from 'nfvo-components/input/validation/Form.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
@@ -27,145 +27,244 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 const prefix = 'highAvailabilityAndLoadBalancing/';
 
 const pointers = [
-	{
-		key: 'failureLoadDistribution',
-		description: 'How is load distributed across live vms in the event of a vm/host failure? please describe'
-	},
-	{
-		key: 'nkModelImplementation',
-		description: 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
-	},
-	{
-		key: 'architectureChoice',
-		description: 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
-		added: 'Will the arrangement be 1-1 or N-M? Please describe.'
-	},
-	{key: 'slaRequirements', description: 'Specify application SLA requirements on Cloud platform.'},
-	{
-		key: 'horizontalScaling',
-		description: 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
-	},
-	{
-		key: 'loadDistributionMechanism',
-		description: 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
-		added: 'Please describe.'
-	}
+    {
+        key: 'failureLoadDistribution',
+        description:
+            'How is load distributed across live vms in the event of a vm/host failure? please describe'
+    },
+    {
+        key: 'nkModelImplementation',
+        description:
+            'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
+    },
+    {
+        key: 'architectureChoice',
+        description:
+            'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
+        added: 'Will the arrangement be 1-1 or N-M? Please describe.'
+    },
+    {
+        key: 'slaRequirements',
+        description: 'Specify application SLA requirements on Cloud platform.'
+    },
+    {
+        key: 'horizontalScaling',
+        description:
+            'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
+    },
+    {
+        key: 'loadDistributionMechanism',
+        description:
+            'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
+        added: 'Please describe.'
+    }
 ];
 //TODO check for buttons
 
-const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
-		<GridItem colSpan={3} key={item.key} >
-			<div className={expanded ? 'title' : 'title add-padding'}
-				 data-test-id={`btn-${item.key}`}
-				 onClick={() => toggle(item.key)}>
-					<SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'}/>
-					<span className='title-text'>{i18n(item.description)}</span>
-					{item.added && <div className='new-line'>{i18n(item.added)}</div>}
-			</div>
-			<div className={expanded ? 'collapse in' : 'collapse'}>
-				<div>
-					<div>
-						<Input
-							data-test-id={`input-${item.key}`}
-							type='textarea'
-							isValid={genericFieldInfo[`${prefix}${item.key}`].isValid}
-							errorText={genericFieldInfo[`${prefix}${item.key}`].errorText}
-							value={dataMap[`${prefix}${item.key}`]}
-							onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} />
-					</div>
-				</div>
-			</div>
-		</GridItem>
+const TextAreaItem = ({
+    item,
+    toggle,
+    expanded,
+    genericFieldInfo,
+    dataMap,
+    onQDataChanged
+}) => (
+    <GridItem colSpan={3} key={item.key}>
+        <div
+            className={expanded ? 'title' : 'title add-padding'}
+            data-test-id={`btn-${item.key}`}
+            onClick={() => toggle(item.key)}>
+            <SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'} />
+            <span className="title-text">{i18n(item.description)}</span>
+            {item.added && <div className="new-line">{i18n(item.added)}</div>}
+        </div>
+        <div className={expanded ? 'collapse in' : 'collapse'}>
+            <div>
+                <div>
+                    <Input
+                        data-test-id={`input-${item.key}`}
+                        type="textarea"
+                        isValid={
+                            genericFieldInfo[`${prefix}${item.key}`].isValid
+                        }
+                        errorText={
+                            genericFieldInfo[`${prefix}${item.key}`].errorText
+                        }
+                        value={dataMap[`${prefix}${item.key}`]}
+                        onChange={val =>
+                            onQDataChanged({ [`${prefix}${item.key}`]: val })
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    </GridItem>
 );
 
 class SoftwareProductComponentLoadBalancingView extends React.Component {
-	static propTypes = {
-		componentId: PropTypes.string.isRequired,
-		softwareProductId: PropTypes.string.isRequired,
-		qdata: PropTypes.object,
-		qschema: PropTypes.object,
-		currentSoftwareProduct: PropTypes.object
-	};
+    static propTypes = {
+        componentId: PropTypes.string.isRequired,
+        softwareProductId: PropTypes.string.isRequired,
+        qdata: PropTypes.object,
+        qschema: PropTypes.object,
+        currentSoftwareProduct: PropTypes.object
+    };
 
-	state = {
-		expanded: {}
-	};
+    state = {
+        expanded: {}
+    };
 
-	render() {
-		let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
-		return (
-			<div className='vsp-components-load-balancing'>
-				<div className='halb-data'>
-					{ genericFieldInfo && <Form
-						formReady={null}
-						isValid={true}
-						onSubmit={() => this.save()}
-						isReadOnlyMode={isReadOnlyMode}
-						hasButtons={false}>
-						<GridSection title={i18n('High Availability & Load Balancing')}>
-							<GridItem colSpan={1}>
-								<Input
-									data-test-id='input-is-component-mandatory'
-									label={i18n('Is Component Mandatory')}
-									type='select'
-									className='input-options-select'
-									groupClassName='bootstrap-input-options'
-									isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid}
-									errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText}
-									value={dataMap[`${prefix}isComponentMandatory`]}
-									onChange={(e) => {
-										const selectedIndex = e.target.selectedIndex;
-										const val = e.target.options[selectedIndex].value;
-										onQDataChanged({[`${prefix}isComponentMandatory`] : val});}
-									}>
-									 <option key='placeholder' value=''>{i18n('Select...')}</option>
-									{ genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) }
-								</Input>
-							</GridItem>
-							<GridItem colSpan={3}/>
-							<GridItem colSpan={1}>
-								<Input
-									data-test-id='input-high-availability-mode'
-									label={i18n('High Availability Mode')}
-									type='select'
-									className='input-options-select'
-									groupClassName='bootstrap-input-options'
-									isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid}
-									errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText}
-									value={dataMap[`${prefix}highAvailabilityMode`]}
-									onChange={(e) => {
-										const selectedIndex = e.target.selectedIndex;
-										const val = e.target.options[selectedIndex].value;
-										onQDataChanged({[`${prefix}highAvailabilityMode`] : val});}
-									}>
-									<option key='placeholder' value=''>{i18n('Select...')}</option>
-									{genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)}
-								</Input>
-							</GridItem>
-							<GridItem colSpan={3}/>
-						</GridSection>
-						<GridSection>
-						{pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged}
-							   genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'}
-							   expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)}
-						</GridSection>
-					</Form> }
-				</div>
-			</div>
-		);
-	}
+    render() {
+        let {
+            dataMap,
+            genericFieldInfo,
+            onQDataChanged,
+            isReadOnlyMode
+        } = this.props;
+        return (
+            <div className="vsp-components-load-balancing">
+                <div className="halb-data">
+                    {genericFieldInfo && (
+                        <Form
+                            formReady={null}
+                            isValid={true}
+                            onSubmit={() => this.save()}
+                            isReadOnlyMode={isReadOnlyMode}
+                            hasButtons={false}>
+                            <GridSection
+                                title={i18n(
+                                    'High Availability & Load Balancing'
+                                )}>
+                                <GridItem colSpan={1}>
+                                    <Input
+                                        data-test-id="input-is-component-mandatory"
+                                        label={i18n('Is Component Mandatory')}
+                                        type="select"
+                                        className="input-options-select"
+                                        groupClassName="bootstrap-input-options"
+                                        isValid={
+                                            genericFieldInfo[
+                                                `${prefix}isComponentMandatory`
+                                            ].isValid
+                                        }
+                                        errorText={
+                                            genericFieldInfo[
+                                                `${prefix}isComponentMandatory`
+                                            ].errorText
+                                        }
+                                        value={
+                                            dataMap[
+                                                `${prefix}isComponentMandatory`
+                                            ]
+                                        }
+                                        onChange={e => {
+                                            const selectedIndex =
+                                                e.target.selectedIndex;
+                                            const val =
+                                                e.target.options[selectedIndex]
+                                                    .value;
+                                            onQDataChanged({
+                                                [`${prefix}isComponentMandatory`]: val
+                                            });
+                                        }}>
+                                        <option key="placeholder" value="">
+                                            {i18n('Select...')}
+                                        </option>
+                                        {genericFieldInfo[
+                                            `${prefix}isComponentMandatory`
+                                        ].enum.map(isMan => (
+                                            <option
+                                                value={isMan.enum}
+                                                key={isMan.enum}>
+                                                {isMan.title}
+                                            </option>
+                                        ))}
+                                    </Input>
+                                </GridItem>
+                                <GridItem colSpan={3} />
+                                <GridItem colSpan={1}>
+                                    <Input
+                                        data-test-id="input-high-availability-mode"
+                                        label={i18n('High Availability Mode')}
+                                        type="select"
+                                        className="input-options-select"
+                                        groupClassName="bootstrap-input-options"
+                                        isValid={
+                                            genericFieldInfo[
+                                                `${prefix}highAvailabilityMode`
+                                            ].isValid
+                                        }
+                                        errorText={
+                                            genericFieldInfo[
+                                                `${prefix}highAvailabilityMode`
+                                            ].errorText
+                                        }
+                                        value={
+                                            dataMap[
+                                                `${prefix}highAvailabilityMode`
+                                            ]
+                                        }
+                                        onChange={e => {
+                                            const selectedIndex =
+                                                e.target.selectedIndex;
+                                            const val =
+                                                e.target.options[selectedIndex]
+                                                    .value;
+                                            onQDataChanged({
+                                                [`${prefix}highAvailabilityMode`]: val
+                                            });
+                                        }}>
+                                        <option key="placeholder" value="">
+                                            {i18n('Select...')}
+                                        </option>
+                                        {genericFieldInfo[
+                                            `${prefix}highAvailabilityMode`
+                                        ].enum.map(hmode => (
+                                            <option
+                                                value={hmode.enum}
+                                                key={hmode.enum}>
+                                                {hmode.title}
+                                            </option>
+                                        ))}
+                                    </Input>
+                                </GridItem>
+                                <GridItem colSpan={3} />
+                            </GridSection>
+                            <GridSection>
+                                {pointers.map(pointer => (
+                                    <TextAreaItem
+                                        onQDataChanged={onQDataChanged}
+                                        genericFieldInfo={genericFieldInfo}
+                                        dataMap={dataMap}
+                                        item={pointer}
+                                        key={pointer.key + 'pKey'}
+                                        expanded={
+                                            this.state.expanded[pointer.key]
+                                        }
+                                        toggle={name => {
+                                            this.toggle(name);
+                                        }}
+                                    />
+                                ))}
+                            </GridSection>
+                        </Form>
+                    )}
+                </div>
+            </div>
+        );
+    }
 
-	toggle(name) {
-		let st = this.state.expanded[name] ? true : false;
-		let newState = {...this.state};
-		newState.expanded[name] = !st;
-		this.setState(newState);
-	}
+    toggle(name) {
+        let st = this.state.expanded[name] ? true : false;
+        let newState = { ...this.state };
+        newState.expanded[name] = !st;
+        this.setState(newState);
+    }
 
-	save() {
-		let {onSubmit, qdata} = this.props;
-		return onSubmit({qdata});
-	}
+    save() {
+        let { onSubmit, qdata } = this.props;
+        return onSubmit({ qdata });
+    }
 }
 
 export default SoftwareProductComponentLoadBalancingView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
index 8871aabbb5..0b0b9ae2d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
@@ -13,51 +13,54 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx';
 import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-
-
-export const mapStateToProps = ({softwareProduct}) => {
-
-	let {softwareProductComponents: {monitoring}} = softwareProduct;
-	return {
-		filenames: monitoring
-	};
-
+export const mapStateToProps = ({ softwareProduct }) => {
+    let { softwareProductComponents: { monitoring } } = softwareProduct;
+    return {
+        filenames: monitoring
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-
-	return {
-		onDropMibFileToUpload: (formData, type) =>
-			SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, {
-				softwareProductId,
-				version,
-				componentId,
-				formData,
-				type
-			}),
-
-		onDeleteFile: type => SoftwareProductComponentsMonitoringAction.deleteFile(dispatch, {
-			softwareProductId,
-			version,
-			componentId,
-			type
-		}),
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onDropMibFileToUpload: (formData, type) =>
+            SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, {
+                softwareProductId,
+                version,
+                componentId,
+                formData,
+                type
+            }),
 
-		onFileUploadError: () => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_ERROR,
-			data: {
-				title: i18n('Upload Failed'),
-				msg: i18n('Expected "zip" file. Please check the provided file type.')
-			}
-		})
-	};
+        onDeleteFile: type =>
+            SoftwareProductComponentsMonitoringAction.deleteFile(dispatch, {
+                softwareProductId,
+                version,
+                componentId,
+                type
+            }),
 
+        onFileUploadError: () =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                data: {
+                    title: i18n('Upload Failed'),
+                    msg: i18n(
+                        'Expected "zip" file. Please check the provided file type.'
+                    )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsMonitoringView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsMonitoringView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
index 3db708bc92..c60bc5f1be 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
@@ -16,61 +16,90 @@
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductComponentsMonitoringConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './SoftwareProductComponentsMonitoringConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 function baseUrl(vspId, version, componentId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`;
 }
 
-let onInvalidFileSizeUpload = (dispatch) => dispatch({
-	type: modalActionTypes.GLOBAL_MODAL_ERROR,
-	data: {
-		title: i18n('Upload Failed'),
-		msg: i18n('no zip file was uploaded or zip file doesn\'t exist')
-	}
-});
+let onInvalidFileSizeUpload = dispatch =>
+    dispatch({
+        type: modalActionTypes.GLOBAL_MODAL_ERROR,
+        data: {
+            title: i18n('Upload Failed'),
+            msg: i18n("no zip file was uploaded or zip file doesn't exist")
+        }
+    });
 
-let uploadFile = (dispatch, {softwareProductId, version, componentId, formData, type}) => {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`, formData).then(()=> dispatch({
-		type: actionTypes.MONITOR_UPLOADED, data: {filename: formData.get('upload').name, type : type}
-	}));
+let uploadFile = (
+    dispatch,
+    { softwareProductId, version, componentId, formData, type }
+) => {
+    return RestAPIUtil.post(
+        `${baseUrl(softwareProductId, version, componentId)}/types/${type}`,
+        formData
+    ).then(() =>
+        dispatch({
+            type: actionTypes.MONITOR_UPLOADED,
+            data: { filename: formData.get('upload').name, type: type }
+        })
+    );
 };
 
-let deleteFile = (dispatch, {softwareProductId, version, componentId, type}) => {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`).then(()=> dispatch({
-		type: actionTypes.MONITOR_DELETED,
-		data : { type: type}
-	}));
+let deleteFile = (
+    dispatch,
+    { softwareProductId, version, componentId, type }
+) => {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/types/${type}`
+    ).then(() =>
+        dispatch({
+            type: actionTypes.MONITOR_DELETED,
+            data: { type: type }
+        })
+    );
 };
 
-
 const SoftwareProductComponentsMonitoringAction = {
+    fetchExistingFiles(dispatch, { softwareProductId, version, componentId }) {
+        return RestAPIUtil.fetch(
+            `${baseUrl(softwareProductId, version, componentId)}`
+        ).then(response =>
+            dispatch({
+                type: actionTypes.MONITOR_FILES_DATA_CHANGE,
+                data: response
+            })
+        );
+    },
 
-	fetchExistingFiles(dispatch, {softwareProductId, version, componentId}){
-		return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`).then(response =>
-			dispatch({
-				type: actionTypes.MONITOR_FILES_DATA_CHANGE,
-				data: response
-			})
-		);
-	},
-
-	uploadFile(dispatch, {softwareProductId, version, componentId, formData, type}){
-		if (formData.get('upload').size) {
-			return uploadFile(dispatch, {softwareProductId, version, componentId, formData, type});
-		}
-		else {
-			onInvalidFileSizeUpload(dispatch);
-		}
-	},
-
-	deleteFile(dispatch, {softwareProductId, version, componentId, type}){
-		return deleteFile(dispatch, {softwareProductId, version, componentId, type});
-	}
+    uploadFile(
+        dispatch,
+        { softwareProductId, version, componentId, formData, type }
+    ) {
+        if (formData.get('upload').size) {
+            return uploadFile(dispatch, {
+                softwareProductId,
+                version,
+                componentId,
+                formData,
+                type
+            });
+        } else {
+            onInvalidFileSizeUpload(dispatch);
+        }
+    },
 
+    deleteFile(dispatch, { softwareProductId, version, componentId, type }) {
+        return deleteFile(dispatch, {
+            softwareProductId,
+            version,
+            componentId,
+            type
+        });
+    }
 };
 
 export default SoftwareProductComponentsMonitoringAction;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
index bf2cbd2a3f..10049d6b57 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
@@ -16,29 +16,26 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-
 export const actionTypes = keyMirror({
-	MONITOR_FILES_DATA_CHANGE: null,
-	MONITOR_UPLOADED: null,
-	MONITOR_DELETED: null
+    MONITOR_FILES_DATA_CHANGE: null,
+    MONITOR_UPLOADED: null,
+    MONITOR_DELETED: null
 });
 
 export const fileTypes = {
-	SNMP_TRAP: 'SNMP_TRAP',
-	SNMP_POLL: 'SNMP_POLL',
-	VES_EVENT: 'VES_EVENTS'
+    SNMP_TRAP: 'SNMP_TRAP',
+    SNMP_POLL: 'SNMP_POLL',
+    VES_EVENT: 'VES_EVENTS'
 };
 
 export const type2Name = {
-	SNMP_TRAP: 'snmpTrap',
-	SNMP_POLL: 'snmpPoll',
-	VES_EVENTS: 'vesEvent'
+    SNMP_TRAP: 'snmpTrap',
+    SNMP_POLL: 'snmpPoll',
+    VES_EVENTS: 'vesEvent'
 };
 
-
 export const type2Title = {
-	SNMP_TRAP : i18n('SNMP Trap'),
-	SNMP_POLL : i18n('SNMP Poll'),
-	VES_EVENTS: i18n('VES')
+    SNMP_TRAP: i18n('SNMP Trap'),
+    SNMP_POLL: i18n('SNMP Poll'),
+    VES_EVENTS: i18n('VES')
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
index f5cfe6f06d..61ad4ec2d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
@@ -13,23 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
+import {
+    actionTypes,
+    type2Name
+} from './SoftwareProductComponentsMonitoringConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.MONITOR_FILES_DATA_CHANGE:
-			return action.data;
-		case actionTypes.MONITOR_UPLOADED:
-			return {
-				...state,
-				[type2Name[action.data.type]]: action.data.filename
-			};
-		case actionTypes.MONITOR_DELETED:
-			return {
-				...state,
-				[type2Name[action.data.type]]: undefined
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.MONITOR_FILES_DATA_CHANGE:
+            return action.data;
+        case actionTypes.MONITOR_UPLOADED:
+            return {
+                ...state,
+                [type2Name[action.data.type]]: action.data.filename
+            };
+        case actionTypes.MONITOR_DELETED:
+            return {
+                ...state,
+                [type2Name[action.data.type]]: undefined
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
index 95d1e4e283..771bca161a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
@@ -13,123 +13,133 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
 import Button from 'sdc-ui/lib/react/Button.js';
 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
-import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
-
-
+import {
+    fileTypes,
+    type2Title,
+    type2Name
+} from './SoftwareProductComponentsMonitoringConstants.js';
 
 class SoftwareProductComponentsMonitoringView extends Component {
-
-	static propTypes = {
-		isReadOnlyMode: PropTypes.bool,
-		filenames: PropTypes.object,
-		softwareProductId: PropTypes.string,
-
-		onDropMibFileToUpload: PropTypes.func,
-		onDeleteSnmpFile: PropTypes.func
-	};
-
-	state = {
-		dragging: false
-	};
-
-
-
-
-	render() {
-		return (
-			<div className='vsp-component-monitoring'>
-				{this.renderDropzoneWithType(fileTypes.VES_EVENT)}
-				{this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
-				{this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
-			</div>
-		);
-	}
-
-	renderDropzoneWithType(type) {
-		let {isReadOnlyMode, filenames} = this.props;
-		let fileByType = type2Name[type];
-		let fileName = (filenames) ? filenames[fileByType] : undefined;
-		let refAndName = `fileInput${type.toString()}`;
-		let typeDisplayName = type2Title[type];
-		return (
-			<Dropzone
-				className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
-				onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
-				onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
-				onDragLeave={() => this.setState({dragging:false})}
-				multiple={false}
-				disableClick={true}
-				ref={refAndName}
-				name={refAndName}
-				accept='.zip'>
-				<div className='draggable-wrapper'>
-					<div className='section-title'>{typeDisplayName}</div>
-					{fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
-				</div>
-			</Dropzone>
-		);
-	}
-
-	renderUploadButton(refAndName) {
-		let {isReadOnlyMode} = this.props;
-		return (
-			<DraggableUploadFileBox
-				dataTestId={`monitoring-upload-${refAndName}`}
-				className='software-product-landing-view-top-block-col-upl'
-				isReadOnlyMode={isReadOnlyMode}
-				onClick={() => this.refs[refAndName].open()}/>
-		);
-	}
-
-	renderUploadedFileName(filename, type, isReadOnlyMode) {
-		return (
-				<div className='monitoring-file'>
-					<Button
-						color='white'
-						disabled={true}
-						className='filename'>
-						{filename}
-					</Button>
-
-					<Button
-						color='gray'
-						data-test-id={`monitoring-delete-${type}`}
-						disabled={isReadOnlyMode}
-						onClick={()=>this.props.onDeleteFile(type)}
-						iconName='close'
-						className='delete'/>
-				</div>
-		);
-	}
-
-
-	handleOnDragEnter(isReadOnlyMode) {
-		if (!isReadOnlyMode) {
-			this.setState({dragging: true});
-		}
-	}
-
-	handleImport(files, rejectedFiles, {isReadOnlyMode, type, refAndName}) {
-		if (isReadOnlyMode) {
-			return;
-		}
-		if (files.length > 0) {
-			this.setState({dragging: false});
-			let file = files[0];
-			let formData = new FormData();
-			formData.append('upload', file);
-			this.refs[refAndName].value = '';
-			this.props.onDropMibFileToUpload(formData, type);
-		} else if (rejectedFiles.length > 0) {
-			this.setState({dragging: false});
-			this.props.onFileUploadError();
-		}
-	}
+    static propTypes = {
+        isReadOnlyMode: PropTypes.bool,
+        filenames: PropTypes.object,
+        softwareProductId: PropTypes.string,
+
+        onDropMibFileToUpload: PropTypes.func,
+        onDeleteSnmpFile: PropTypes.func
+    };
+
+    state = {
+        dragging: false
+    };
+
+    render() {
+        return (
+            <div className="vsp-component-monitoring">
+                {this.renderDropzoneWithType(fileTypes.VES_EVENT)}
+                {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
+                {this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
+            </div>
+        );
+    }
+
+    renderDropzoneWithType(type) {
+        let { isReadOnlyMode, filenames } = this.props;
+        let fileByType = type2Name[type];
+        let fileName = filenames ? filenames[fileByType] : undefined;
+        let refAndName = `fileInput${type.toString()}`;
+        let typeDisplayName = type2Title[type];
+        return (
+            <Dropzone
+                className={`dropzone ${
+                    this.state.dragging ? 'active-dragging' : ''
+                }`}
+                onDrop={(acceptedFiles, rejectedFiles) =>
+                    this.handleImport(acceptedFiles, rejectedFiles, {
+                        isReadOnlyMode,
+                        type,
+                        refAndName
+                    })
+                }
+                onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
+                onDragLeave={() => this.setState({ dragging: false })}
+                multiple={false}
+                disableClick={true}
+                ref={refAndName}
+                name={refAndName}
+                accept=".zip">
+                <div className="draggable-wrapper">
+                    <div className="section-title">{typeDisplayName}</div>
+                    {fileName
+                        ? this.renderUploadedFileName(
+                              fileName,
+                              type,
+                              isReadOnlyMode
+                          )
+                        : this.renderUploadButton(refAndName)}
+                </div>
+            </Dropzone>
+        );
+    }
+
+    renderUploadButton(refAndName) {
+        let { isReadOnlyMode } = this.props;
+        return (
+            <DraggableUploadFileBox
+                dataTestId={`monitoring-upload-${refAndName}`}
+                className="software-product-landing-view-top-block-col-upl"
+                isReadOnlyMode={isReadOnlyMode}
+                onClick={() => this.refs[refAndName].open()}
+            />
+        );
+    }
+
+    renderUploadedFileName(filename, type, isReadOnlyMode) {
+        return (
+            <div className="monitoring-file">
+                <Button color="white" disabled={true} className="filename">
+                    {filename}
+                </Button>
+
+                <Button
+                    color="gray"
+                    data-test-id={`monitoring-delete-${type}`}
+                    disabled={isReadOnlyMode}
+                    onClick={() => this.props.onDeleteFile(type)}
+                    iconName="close"
+                    className="delete"
+                />
+            </div>
+        );
+    }
+
+    handleOnDragEnter(isReadOnlyMode) {
+        if (!isReadOnlyMode) {
+            this.setState({ dragging: true });
+        }
+    }
+
+    handleImport(files, rejectedFiles, { isReadOnlyMode, type, refAndName }) {
+        if (isReadOnlyMode) {
+            return;
+        }
+        if (files.length > 0) {
+            this.setState({ dragging: false });
+            let file = files[0];
+            let formData = new FormData();
+            formData.append('upload', file);
+            this.refs[refAndName].value = '';
+            this.props.onDropMibFileToUpload(formData, type);
+        } else if (rejectedFiles.length > 0) {
+            this.setState({ dragging: false });
+            this.props.onFileUploadError();
+        }
+    }
 }
 
 export default SoftwareProductComponentsMonitoringView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
index d4aaf7cc7e..e705618a65 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
@@ -13,39 +13,55 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import NICCreationActionHelper from './NICCreationActionHelper.js';
 import NICCreationView from './NICCreationView.jsx';
 import SoftwareProductComponentsNetworkActionHelper from '../SoftwareProductComponentsNetworkActionHelper.js';
-import {networkTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js';
+import {
+    networkTypes,
+    NIC_CREATION_FORM_NAME
+} from '../SoftwareProductComponentsNetworkConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct;
-	let {network: {nicCreation = {}}} = softwareProductComponents;
-	let {data, genericFieldInfo, formReady} = nicCreation;
-	data = {...data, networkType: networkTypes.EXTERNAL};
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents
+    } = softwareProduct;
+    let { network: { nicCreation = {} } } = softwareProductComponents;
+    let { data, genericFieldInfo, formReady } = nicCreation;
+    data = { ...data, networkType: networkTypes.EXTERNAL };
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {
-		currentSoftwareProduct,
-		data,
-		genericFieldInfo,
-		isFormValid,
-		formReady
-	};
+    return {
+        currentSoftwareProduct,
+        data,
+        genericFieldInfo,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: NIC_CREATION_FORM_NAME}),
-		onCancel: () => NICCreationActionHelper.close(dispatch),
-		onSubmit: ({nic, componentId}) => {
-			SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {nic, softwareProductId, componentId, version});
-			NICCreationActionHelper.close(dispatch);
-		},
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME)
-	};
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: NIC_CREATION_FORM_NAME
+            }),
+        onCancel: () => NICCreationActionHelper.close(dispatch),
+        onSubmit: ({ nic, componentId }) => {
+            SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {
+                nic,
+                softwareProductId,
+                componentId,
+                version
+            });
+            NICCreationActionHelper.close(dispatch);
+        },
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(NICCreationView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
index a40b32d51a..4f200ce33f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
@@ -13,35 +13,37 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from '../SoftwareProductComponentsNetworkConstants';
+import { actionTypes } from '../SoftwareProductComponentsNetworkConstants';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 
 export default {
+    open(
+        dispatch,
+        { softwareProductId, componentId, modalClassName, version }
+    ) {
+        dispatch({
+            type: actionTypes.NICCreation.OPEN
+        });
 
-	open(dispatch, {softwareProductId, componentId, modalClassName, version}) {
-		dispatch({
-			type: actionTypes.NICCreation.OPEN
-		});
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.NIC_CREATION,
+                title: i18n('Create NEW NIC'),
+                modalClassName,
+                modalComponentProps: { softwareProductId, componentId, version }
+            }
+        });
+    },
 
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.NIC_CREATION,
-				title: i18n('Create NEW NIC'),
-				modalClassName,
-				modalComponentProps: {softwareProductId, componentId, version}
-			}
-		});
-	},
-
-	close(dispatch){
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		dispatch({
-			type: actionTypes.NICCreation.CLEAR_DATA
-		});
-	}
+    close(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({
+            type: actionTypes.NICCreation.CLEAR_DATA
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
index c7e2495b3d..8309c40451 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
@@ -13,37 +13,40 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js';
+import {
+    actionTypes,
+    NIC_CREATION_FORM_NAME
+} from '../SoftwareProductComponentsNetworkConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.NICCreation.OPEN:
-			return {
-				...state,
-				data: {},
-				formName: NIC_CREATION_FORM_NAME,
-				formReady: null,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data : true}]
-					},
-					'networkDescription' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 50}]
-					}
-				}
-			};
-		case actionTypes.NICCreation.CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.NICCreation.OPEN:
+            return {
+                ...state,
+                data: {},
+                formName: NIC_CREATION_FORM_NAME,
+                formReady: null,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    networkDescription: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 50 }]
+                    }
+                }
+            };
+        case actionTypes.NICCreation.CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
index 258876844a..88525c051d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
@@ -22,103 +22,136 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const NICPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	networkId: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    networkId: PropTypes.string
 });
 
 class NICCreationView extends React.Component {
+    static propTypes = {
+        data: NICPropType,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		data: NICPropType,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            genericFieldInfo,
+            isFormValid,
+            onValidateForm,
+            formReady
+        } = this.props;
+        let { name, description, networkDescription } = data;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => (this.form = form)}
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        submitButtonText={
+                            data.id ? i18n('Save') : i18n('Create')
+                        }
+                        onReset={() => this.props.onCancel()}
+                        labledButtons={true}
+                        isValid={isFormValid}
+                        onValidateForm={() => onValidateForm()}
+                        formReady={formReady}>
+                        <GridSection hasLastColSet>
+                            <GridItem colSpan={4} lastColInRow>
+                                <Input
+                                    value={name}
+                                    label={i18n('Name')}
+                                    data-test-id="nic-name"
+                                    onChange={name => onDataChanged({ name })}
+                                    isRequired={true}
+                                    type="text"
+                                    isValid={genericFieldInfo['name'].isValid}
+                                    errorText={
+                                        genericFieldInfo['name'].errorText
+                                    }
+                                    className="field-section"
+                                />
+                                <Input
+                                    value={description}
+                                    label={i18n('Description')}
+                                    data-test-id="nic-description"
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    isValid={
+                                        genericFieldInfo['description'].isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo['description']
+                                            .errorText
+                                    }
+                                    type="textarea"
+                                    className="field-section"
+                                />
+                            </GridItem>
+                        </GridSection>
+                        <GridSection title={i18n('Network')} hasLastColSet>
+                            <GridItem colSpan={2}>
+                                <div className="form-group">
+                                    <label className="control-label">
+                                        {i18n('Network Type')}
+                                    </label>
+                                    <div className="network-type-radio">
+                                        <Input
+                                            label={i18n('Internal')}
+                                            disabled
+                                            checked={false}
+                                            data-test-id="nic-internal"
+                                            className="network-radio disabled"
+                                            type="radio"
+                                        />
+                                        <Input
+                                            label={i18n('External')}
+                                            disabled
+                                            checked={true}
+                                            data-test-id="nic-external"
+                                            className="network-radio disabled"
+                                            type="radio"
+                                        />
+                                    </div>
+                                </div>
+                            </GridItem>
+                            <GridItem colSpan={2} lastColInRow>
+                                <Input
+                                    value={networkDescription}
+                                    label={i18n('Network Description')}
+                                    data-test-id="nic-network-description"
+                                    onChange={networkDescription =>
+                                        onDataChanged({ networkDescription })
+                                    }
+                                    isValid={
+                                        genericFieldInfo['networkDescription']
+                                            .isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo['networkDescription']
+                                            .errorText
+                                    }
+                                    type="text"
+                                    className="field-section"
+                                />
+                            </GridItem>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	render() {
-		let {data = {}, onDataChanged, genericFieldInfo, isFormValid, onValidateForm, formReady} = this.props;
-		let {name, description, networkDescription} = data;
-		return (
-			<div>
-			{genericFieldInfo && <Form
-				ref={(form) => this.form = form}
-				hasButtons={true}
-				onSubmit={ () => this.submit() }
-				submitButtonText={data.id ? i18n('Save') : i18n('Create')}
-				onReset={ () => this.props.onCancel() }
-				labledButtons={true}
-				isValid={isFormValid}
-				onValidateForm={() => onValidateForm()}
-				formReady={formReady} >
-				<GridSection hasLastColSet>
-					<GridItem colSpan={4} lastColInRow>
-						<Input
-							value={name}
-							label={i18n('Name')}
-							data-test-id='nic-name'
-							onChange={name => onDataChanged({name})}
-							isRequired={true}
-							type='text'
-							isValid={genericFieldInfo['name'].isValid}
-							errorText={genericFieldInfo['name'].errorText}
-							className='field-section'/>
-						<Input
-							value={description}
-							label={i18n('Description')}
-							data-test-id='nic-description'
-							onChange={description => onDataChanged({description})}
-							isValid={genericFieldInfo['description'].isValid}
-							errorText={genericFieldInfo['description'].errorText}
-							type='textarea'
-							className='field-section'/>
-					</GridItem>
-				</GridSection>
-				<GridSection title={i18n('Network')} hasLastColSet>
-					<GridItem colSpan={2}>
-						<div className='form-group'>
-							<label className='control-label'>{i18n('Network Type')}</label>
-							<div className='network-type-radio'>
-								<Input
-									label={i18n('Internal')}
-									disabled
-									checked={false}
-									data-test-id='nic-internal'
-									className='network-radio disabled'
-									type='radio'/>
-								<Input
-									label={i18n('External')}
-									disabled
-									checked={true}
-									data-test-id='nic-external'
-									className='network-radio disabled'
-									type='radio'/>
-							</div>
-						</div>
-					</GridItem>
-					<GridItem colSpan={2} lastColInRow>
-						<Input
-							value={networkDescription}
-							label={i18n('Network Description')}
-							data-test-id='nic-network-description'
-							onChange={networkDescription => onDataChanged({networkDescription})}
-							isValid={genericFieldInfo['networkDescription'].isValid}
-							errorText={genericFieldInfo['networkDescription'].errorText}
-							type='text'
-							className='field-section'/>
-					</GridItem>
-				</GridSection>
-			</Form>}
-			</div>
-		);
-	}
-
-
-	submit() {
-		const {data: nic, componentId} = this.props;
-		this.props.onSubmit({nic, componentId});
-	}
+    submit() {
+        const { data: nic, componentId } = this.props;
+        this.props.onSubmit({ nic, componentId });
+    }
 }
 
 export default NICCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
index 93bd0bd67e..d7205b46ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
@@ -13,56 +13,93 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
 import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
 
-export const mapStateToProps = ({softwareProduct, currentScreen}) => {
-
-	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {network: {nicEditor = {}}} = softwareProductComponents;
-	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor;
-	let {props: {isReadOnlyMode}} = currentScreen;
-	let {onboardingMethod} = currentSoftwareProduct;
-	let protocols = [];
-	if(qdata && qdata.protocols && qdata.protocols.protocols && qdata.protocols.protocols.length){
-		protocols = qdata.protocols.protocols;
-	}
-	let {version} = currentSoftwareProduct;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) &&  ValidationHelper.checkFormValid(qgenericFieldInfo);
-
-	return {
-		currentSoftwareProduct,
-		isValidityData,
-		version,
-		data,
-		qdata,
-		dataMap,
-		isFormValid,
-		formReady,
-		genericFieldInfo,
-		qgenericFieldInfo,
-		isReadOnlyMode,
-		protocols,
-		isManual: onboardingMethod === onboardingMethodTypes.MANUAL
-	};
+export const mapStateToProps = ({ softwareProduct, currentScreen }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
+    let { network: { nicEditor = {} } } = softwareProductComponents;
+    let {
+        data,
+        qdata,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        dataMap,
+        formReady
+    } = nicEditor;
+    let { props: { isReadOnlyMode } } = currentScreen;
+    let { onboardingMethod } = currentSoftwareProduct;
+    let protocols = [];
+    if (
+        qdata &&
+        qdata.protocols &&
+        qdata.protocols.protocols &&
+        qdata.protocols.protocols.length
+    ) {
+        protocols = qdata.protocols.protocols;
+    }
+    let { version } = currentSoftwareProduct;
+    let isFormValid =
+        ValidationHelper.checkFormValid(genericFieldInfo) &&
+        ValidationHelper.checkFormValid(qgenericFieldInfo);
 
+    return {
+        currentSoftwareProduct,
+        isValidityData,
+        version,
+        data,
+        qdata,
+        dataMap,
+        isFormValid,
+        formReady,
+        genericFieldInfo,
+        qgenericFieldInfo,
+        isReadOnlyMode,
+        protocols,
+        isManual: onboardingMethod === onboardingMethodTypes.MANUAL
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData,
-			formName: forms.NIC_EDIT_FORM}),
-		onSubmit: ({data, qdata}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}),
-		onCancel: () => SoftwareProductComponentsNetworkActionHelper.closeNICEditor(dispatch),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM),
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: NIC_QUESTIONNAIRE}),
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: forms.NIC_EDIT_FORM
+            }),
+        onSubmit: ({ data, qdata }) =>
+            SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(
+                dispatch,
+                { softwareProductId, version, componentId, data, qdata }
+            ),
+        onCancel: () =>
+            SoftwareProductComponentsNetworkActionHelper.closeNICEditor(
+                dispatch
+            ),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM),
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: NIC_QUESTIONNAIRE
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsNICEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentsNICEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
index dd37135d77..2da9b4b76b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
@@ -13,37 +13,37 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.NICEditor.FILL_DATA:
-			return {
-				...state,
-				data: action.nic,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data : true}]
-					},
-					'networkDescription' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				},
-				formName: forms.NIC_EDIT_FORM
-			};
-		case actionTypes.NICEditor.CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.NICEditor.FILL_DATA:
+            return {
+                ...state,
+                data: action.nic,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    networkDescription: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                },
+                formName: forms.NIC_EDIT_FORM
+            };
+        case actionTypes.NICEditor.CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
index fbb3d53033..df2efbe39e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
@@ -26,48 +26,113 @@ import Protocols from './nicEditorComponents/Protocols.jsx';
 import NameAndPurpose from './nicEditorComponents/NameAndPurpose.jsx';
 
 class SoftwareProductComponentsNetworkEditorView extends React.Component {
+    render() {
+        let {
+            onCancel,
+            onValidateForm,
+            isReadOnlyMode,
+            isFormValid,
+            formReady,
+            data = {},
+            qgenericFieldInfo,
+            dataMap,
+            onDataChanged,
+            protocols,
+            onQDataChanged,
+            isManual,
+            genericFieldInfo
+        } = this.props;
+        let {
+            name,
+            description,
+            networkName,
+            networkType,
+            networkDescription
+        } = data;
+        let netWorkValues = [
+            {
+                enum: networkName,
+                title: networkName
+            }
+        ];
+        return (
+            <div>
+                {qgenericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        onValidateForm={() => onValidateForm()}
+                        className="vsp-components-network-editor">
+                        <div className="editor-data">
+                            <NameAndPurpose
+                                isManual={isManual}
+                                name={name}
+                                description={description}
+                                onDataChanged={onDataChanged}
+                                isReadOnlyMode={isReadOnlyMode}
+                                genericFieldInfo={genericFieldInfo}
+                            />
+                            <Protocols
+                                protocols={protocols}
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <IpConfig
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <Network
+                                networkDescription={networkDescription}
+                                onDataChanged={onDataChanged}
+                                networkValues={netWorkValues}
+                                isReadOnlyMode={isReadOnlyMode}
+                                networkType={networkType}
+                            />
+                            <Sizing
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <InFlowTraffic
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <OutFlowTraffic
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <FlowLength
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                            <Acceptable
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	render() {
-		let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, qgenericFieldInfo,
-			dataMap, onDataChanged, protocols, onQDataChanged, isManual, genericFieldInfo} = this.props;
-		let {name, description, networkName, networkType, networkDescription} = data;
-		let netWorkValues = [{
-			enum: networkName,
-			title: networkName
-		}];
-		return (
-			<div>
-		{qgenericFieldInfo && <Form
-			ref={(form) => { this.form = form; }}
-			hasButtons={true}
-			onSubmit={ () => this.submit() }
-			onReset={ () => onCancel() }
-			labledButtons={true}
-			isReadOnlyMode={isReadOnlyMode}
-			isValid={isFormValid}
-			formReady={formReady}
-			onValidateForm={() => onValidateForm() }
-			className='vsp-components-network-editor'>
-				<div className='editor-data'>
-					<NameAndPurpose isManual={isManual}  name={name} description={description} onDataChanged={onDataChanged} isReadOnlyMode={isReadOnlyMode} genericFieldInfo={genericFieldInfo} />
-					<Protocols protocols={protocols} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<IpConfig dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<Network networkDescription={networkDescription} onDataChanged={onDataChanged} networkValues={netWorkValues}  isReadOnlyMode={isReadOnlyMode} networkType={networkType}  />
-					<Sizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<InFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<OutFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<FlowLength qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-					<Acceptable qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
-				</div>
-			</Form> }
-			</div>
-		);
-	}
-
-	submit() {
-		let {data, qdata, onSubmit} = this.props;
-		onSubmit({data, qdata});
-	}
+    submit() {
+        let { data, qdata, onSubmit } = this.props;
+        onSubmit({ data, qdata });
+    }
 }
 
 export default SoftwareProductComponentsNetworkEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
index 5cfc88bdc9..a2e65142a2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
@@ -13,16 +13,22 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.NIC_LIST_UPDATE:
-			return [...action.response];
-		case actionTypes.NIC_LIST_EDIT:
-			const indexForEdit = state.findIndex(nic => nic.id === action.nic.id);
-			return [...state.slice(0, indexForEdit), action.nic, ...state.slice(indexForEdit + 1)];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.NIC_LIST_UPDATE:
+            return [...action.response];
+        case actionTypes.NIC_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                nic => nic.id === action.nic.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.nic,
+                ...state.slice(indexForEdit + 1)
+            ];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
index 1ffbc5919f..58c816134b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
@@ -17,127 +17,223 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper as modalPagesMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper as modalPagesMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
+import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
 
 function baseUrl(softwareProductId, version, componentId) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`;
 }
 
-function createNIC({nic, vspId, componentId, version}) {
-	return RestAPIUtil.post(baseUrl(vspId, version, componentId), {
-		name: nic.name,
-		description: nic.description,
-		networkDescription: nic.networkDescription,
-		networkType: nic.networkType
-	});
+function createNIC({ nic, vspId, componentId, version }) {
+    return RestAPIUtil.post(baseUrl(vspId, version, componentId), {
+        name: nic.name,
+        description: nic.description,
+        networkDescription: nic.networkDescription,
+        networkType: nic.networkType
+    });
 }
 
-function fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`);
+function fetchNICQuestionnaire({
+    softwareProductId,
+    version,
+    componentId,
+    nicId
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${nicId}/questionnaire`
+    );
 }
 
-function fetchNIC({softwareProductId, version, componentId, nicId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`);
+function fetchNIC({ softwareProductId, version, componentId, nicId }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}/${nicId}`
+    );
 }
 
-function fetchNICsList({softwareProductId, version, componentId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchNICsList({ softwareProductId, version, componentId }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}`
+    );
 }
 
-function deleteNIC({softwareProductId, componentId, nicId, version}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`);
+function deleteNIC({ softwareProductId, componentId, nicId, version }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/${nicId}`
+    );
 }
-function saveNIC({softwareProductId, version, componentId, nic: {id, name, description, networkId, networkType, networkDescription}}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
-		name,
-		description,
-		networkId,
-		networkDescription,
-		networkType
-	});
+function saveNIC({
+    softwareProductId,
+    version,
+    componentId,
+    nic: { id, name, description, networkId, networkType, networkDescription }
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version, componentId)}/${id}`,
+        {
+            name,
+            description,
+            networkId,
+            networkDescription,
+            networkType
+        }
+    );
 }
 
-function saveNICQuestionnaire({softwareProductId, version, componentId, nicId, qdata}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`, qdata);
+function saveNICQuestionnaire({
+    softwareProductId,
+    version,
+    componentId,
+    nicId,
+    qdata
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${nicId}/questionnaire`,
+        qdata
+    );
 }
 
 const SoftwareProductComponentNetworkActionHelper = {
-
-	fetchNICsList(dispatch, {softwareProductId, version, componentId}) {
-		return fetchNICsList({softwareProductId, version, componentId}).then((response) => {
-			dispatch({
-				type: actionTypes.NIC_LIST_UPDATE,
-				response: response.results
-			});
-		});
-	},
-
-	openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName, version}) {
-		dispatch({
-			type: actionTypes.NICEditor.FILL_DATA,
-			nic: {...data, id: nic.id}
-		});
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_SHOW,
-			data: {
-				modalClassName,
-				modalComponentProps: {softwareProductId, componentId, isReadOnlyMode, version},
-				modalComponentName: modalPagesMapper.NIC_EDITOR,
-				title: i18n('Edit NIC')
-			}
-		});
-	},
-
-	closeNICEditor(dispatch) {
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_CLOSE
-		});
-		dispatch({
-			type: actionTypes.NICEditor.CLEAR_DATA
-		});
-	},
-
-	createNIC(dispatch, {nic, softwareProductId, componentId, version}){
-		return createNIC({nic, vspId: softwareProductId, componentId, version}).then(() => {
-			return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
-		});
-	},
-	loadNICData({softwareProductId, version, componentId, nicId}) {
-		return fetchNIC({softwareProductId, version, componentId, nicId});
-	},
-
-	deleteNIC(dispatch, {softwareProductId, componentId, nicId, version}) {
-		return deleteNIC({softwareProductId, componentId, nicId, version}).then(() => {
-			return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
-		});
-	},
-	loadNICQuestionnaire(dispatch, {softwareProductId, version, componentId, nicId}) {
-		return fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}).then((response) => {
-			ValidationHelper.qDataLoaded(dispatch, {qName: NIC_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}});
-		});
-	},
-
-	saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}) {
-		SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch);
-		return Promise.all([
-			saveNICQuestionnaire({softwareProductId, version, componentId, nicId: data.id, qdata}),
-			saveNIC({softwareProductId, version, componentId, nic: data}).then(() => {
-				dispatch({
-					type: actionTypes.NIC_LIST_EDIT,
-					nic: data
-				});
-			})
-		]);
-	}
+    fetchNICsList(dispatch, { softwareProductId, version, componentId }) {
+        return fetchNICsList({ softwareProductId, version, componentId }).then(
+            response => {
+                dispatch({
+                    type: actionTypes.NIC_LIST_UPDATE,
+                    response: response.results
+                });
+            }
+        );
+    },
+
+    openNICEditor(
+        dispatch,
+        {
+            nic = {},
+            data = {},
+            softwareProductId,
+            componentId,
+            isReadOnlyMode,
+            modalClassName,
+            version
+        }
+    ) {
+        dispatch({
+            type: actionTypes.NICEditor.FILL_DATA,
+            nic: { ...data, id: nic.id }
+        });
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_SHOW,
+            data: {
+                modalClassName,
+                modalComponentProps: {
+                    softwareProductId,
+                    componentId,
+                    isReadOnlyMode,
+                    version
+                },
+                modalComponentName: modalPagesMapper.NIC_EDITOR,
+                title: i18n('Edit NIC')
+            }
+        });
+    },
+
+    closeNICEditor(dispatch) {
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({
+            type: actionTypes.NICEditor.CLEAR_DATA
+        });
+    },
+
+    createNIC(dispatch, { nic, softwareProductId, componentId, version }) {
+        return createNIC({
+            nic,
+            vspId: softwareProductId,
+            componentId,
+            version
+        }).then(() => {
+            return SoftwareProductComponentNetworkActionHelper.fetchNICsList(
+                dispatch,
+                { softwareProductId, componentId, version }
+            );
+        });
+    },
+    loadNICData({ softwareProductId, version, componentId, nicId }) {
+        return fetchNIC({ softwareProductId, version, componentId, nicId });
+    },
+
+    deleteNIC(dispatch, { softwareProductId, componentId, nicId, version }) {
+        return deleteNIC({
+            softwareProductId,
+            componentId,
+            nicId,
+            version
+        }).then(() => {
+            return SoftwareProductComponentNetworkActionHelper.fetchNICsList(
+                dispatch,
+                { softwareProductId, componentId, version }
+            );
+        });
+    },
+    loadNICQuestionnaire(
+        dispatch,
+        { softwareProductId, version, componentId, nicId }
+    ) {
+        return fetchNICQuestionnaire({
+            softwareProductId,
+            version,
+            componentId,
+            nicId
+        }).then(response => {
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: NIC_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            });
+        });
+    },
+
+    saveNICDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, version, componentId, data, qdata }
+    ) {
+        SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch);
+        return Promise.all([
+            saveNICQuestionnaire({
+                softwareProductId,
+                version,
+                componentId,
+                nicId: data.id,
+                qdata
+            }),
+            saveNIC({
+                softwareProductId,
+                version,
+                componentId,
+                nic: data
+            }).then(() => {
+                dispatch({
+                    type: actionTypes.NIC_LIST_EDIT,
+                    nic: data
+                });
+            })
+        ]);
+    }
 };
 
 export default SoftwareProductComponentNetworkActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
index 8ef8fe8c18..4e361bb1a9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
@@ -16,23 +16,23 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	NIC_LIST_EDIT: null,
-	NIC_LIST_UPDATE: null,
+    NIC_LIST_EDIT: null,
+    NIC_LIST_UPDATE: null,
 
-	NICEditor: {
-		FILL_DATA: null,
-		CLEAR_DATA: null,
-	},
-	NICCreation: {
-		OPEN: null,
-		CLEAR_DATA: null,
-		DATA_CHANGED: null
-	},
+    NICEditor: {
+        FILL_DATA: null,
+        CLEAR_DATA: null
+    },
+    NICCreation: {
+        OPEN: null,
+        CLEAR_DATA: null,
+        DATA_CHANGED: null
+    }
 });
 
 export const networkTypes = {
-	EXTERNAL: 'External',
-	INTERNAL: 'Internal'
+    EXTERNAL: 'External',
+    INTERNAL: 'Internal'
 };
 export const NIC_QUESTIONNAIRE = 'nic';
 export const NIC_CREATION_FORM_NAME = 'nicCreation';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
index bb256d5d41..ac708524cf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
@@ -13,79 +13,132 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import SoftwareProductComponentsNetworkListView from './SoftwareProductComponentsNetworkListView.jsx';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 import NICCreationActionHelper from './NICCreation/NICCreationActionHelper.js';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
 
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        network: { nicList = [] },
+        componentEditor: {
+            data: componentData,
+            qdata,
+            dataMap,
+            qgenericFieldInfo
+        }
+    } = softwareProductComponents;
+    let { version, onboardingMethod } = currentSoftwareProduct;
+    let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
 
-export const mapStateToProps = ({softwareProduct}) => {
-
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {network: {nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
-	let {version, onboardingMethod} = currentSoftwareProduct;
-	let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
-
-	return {
-		version,
-		componentData,
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		isValidityData,
-		nicList,
-		isManual
-	};
-
+    return {
+        version,
+        componentData,
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        isValidityData,
+        nicList,
+        isManual
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: COMPONENTS_QUESTIONNAIRE}),
-		onAddNic: () => NICCreationActionHelper.open(dispatch, {softwareProductId, componentId, modalClassName: 'network-nic-modal-create', version}),
-		onDeleteNic: (nic) => dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{name}"?', {name: nic.name}),
-				onConfirmed: () => SoftwareProductComponentsNetworkActionHelper.deleteNIC(dispatch, {softwareProductId,
-					componentId, nicId: nic.id, version})
-			}
-		}),
-		onEditNicClick: (nic, isReadOnlyMode) => {
-			Promise.all([
-				SoftwareProductComponentsNetworkActionHelper.loadNICData({
-					softwareProductId,
-					version,
-					componentId,
-					nicId: nic.id
-				}),
-				SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(dispatch, {
-					softwareProductId,
-					version,
-					componentId,
-					nicId: nic.id
-				})
-			]).then(
-				([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data,
-					isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit', version})
-			);
-		},
-		onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
-			{softwareProductId, version,
-			vspComponentId: componentId,
-			qdata});
-		}
-
-
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onAddNic: () =>
+            NICCreationActionHelper.open(dispatch, {
+                softwareProductId,
+                componentId,
+                modalClassName: 'network-nic-modal-create',
+                version
+            }),
+        onDeleteNic: nic =>
+            dispatch({
+                type: GlobalModalActions.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{name}"?', {
+                        name: nic.name
+                    }),
+                    onConfirmed: () =>
+                        SoftwareProductComponentsNetworkActionHelper.deleteNIC(
+                            dispatch,
+                            {
+                                softwareProductId,
+                                componentId,
+                                nicId: nic.id,
+                                version
+                            }
+                        )
+                }
+            }),
+        onEditNicClick: (nic, isReadOnlyMode) => {
+            Promise.all([
+                SoftwareProductComponentsNetworkActionHelper.loadNICData({
+                    softwareProductId,
+                    version,
+                    componentId,
+                    nicId: nic.id
+                }),
+                SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        version,
+                        componentId,
+                        nicId: nic.id
+                    }
+                )
+            ]).then(([{ data }]) =>
+                SoftwareProductComponentsNetworkActionHelper.openNICEditor(
+                    dispatch,
+                    {
+                        nic,
+                        data,
+                        isReadOnlyMode,
+                        softwareProductId,
+                        componentId,
+                        modalClassName: 'network-nic-modal-edit',
+                        version
+                    }
+                )
+            );
+        },
+        onSubmit: ({ qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    qdata
+                }
+            );
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsNetworkListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsNetworkListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
index 4d460c722d..c631fb24c3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
@@ -20,138 +20,203 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
-
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class SoftwareProductComponentsNetworkView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
-
-	render() {
-		let {dataMap, qgenericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
-
-		return(
-			<div className='vsp-components-network'>
-				<div className='network-data'>
-					<div>
-{ qgenericFieldInfo && <Form
-	formReady={null}
-	isValid={true}
-	onSubmit={() => this.save()}
-	isReadOnlyMode={isReadOnlyMode}
-	hasButtons={false}>
-							<h3 className='section-title'>{i18n('Network Capacity')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components'>
-									<div className='single-col'>
-										<Input
-											data-test-id='protocolWithHighestTrafficProfileAcrossAllNICs'
-											label={i18n('Protocol with Highest Traffic Profile across all NICs')}
-											type='select'
-											groupClassName='bootstrap-input-options'
-											className='input-options-select'
-											isValid={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].isValid}
-											errorText={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].errorText}
-											value={dataMap['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs']}
-											onChange={(e) => {
-												const selectedIndex = e.target.selectedIndex;
-												const val = e.target.options[selectedIndex].value;
-												onQDataChanged({'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' : val});}
-											}>
-											<option key='placeholder' value=''>{i18n('Select...')}</option>
-											{ qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].enum.map(proto =>
-												<option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
-										</Input>
-									</div>
-									<div className='single-col add-line-break'>
-										<Input
-											data-test-id='networkTransactionsPerSecond'
-											label={i18n('Network Transactions per Second')}
-											type='number'
-											onChange={(ntps) => onQDataChanged({'network/networkCapacity/networkTransactionsPerSecond' : ntps})}
-											isValid={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].isValid}
-											errorText={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].errorText}
-											value={dataMap['network/networkCapacity/networkTransactionsPerSecond']} />
-									</div>
-									<div className='empty-two-col' />
-								</div>
-							</div>
-
-						</Form> }
-					</div>
-					{this.renderNicList()}
-				</div>
-
-			</div>
-		);
-	}
-
-	renderNicList() {
-		const {localFilter} = this.state;
-		let {isReadOnlyMode, onAddNic, isManual} = this.props;
-		return (
-			<ListEditorView
-				title={i18n('Interfaces')}
-				filterValue={localFilter}
-				placeholder={i18n('Filter NICs by Name')}
-				isReadOnlyMode={isReadOnlyMode}
-				onFilter={value => this.setState({localFilter: value})}
-				onAdd={isManual ? onAddNic : null}
-				plusButtonTitle={i18n('Add NIC')}
-				twoColumns>
-				{this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	}
+    render() {
+        let {
+            dataMap,
+            qgenericFieldInfo,
+            onQDataChanged,
+            isReadOnlyMode
+        } = this.props;
 
-	renderNicListItem(nic, isReadOnlyMode) {
-		let {id, name, description, networkName = ''} = nic;
-		let {onEditNicClick, version, isManual, onDeleteNic} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
-				onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
+        return (
+            <div className="vsp-components-network">
+                <div className="network-data">
+                    <div>
+                        {qgenericFieldInfo && (
+                            <Form
+                                formReady={null}
+                                isValid={true}
+                                onSubmit={() => this.save()}
+                                isReadOnlyMode={isReadOnlyMode}
+                                hasButtons={false}>
+                                <h3 className="section-title">
+                                    {i18n('Network Capacity')}
+                                </h3>
+                                <div className="rows-section">
+                                    <div className="row-flex-components">
+                                        <div className="single-col">
+                                            <Input
+                                                data-test-id="protocolWithHighestTrafficProfileAcrossAllNICs"
+                                                label={i18n(
+                                                    'Protocol with Highest Traffic Profile across all NICs'
+                                                )}
+                                                type="select"
+                                                groupClassName="bootstrap-input-options"
+                                                className="input-options-select"
+                                                isValid={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                    ].isValid
+                                                }
+                                                errorText={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                    ].errorText
+                                                }
+                                                value={
+                                                    dataMap[
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                    ]
+                                                }
+                                                onChange={e => {
+                                                    const selectedIndex =
+                                                        e.target.selectedIndex;
+                                                    const val =
+                                                        e.target.options[
+                                                            selectedIndex
+                                                        ].value;
+                                                    onQDataChanged({
+                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs': val
+                                                    });
+                                                }}>
+                                                <option
+                                                    key="placeholder"
+                                                    value="">
+                                                    {i18n('Select...')}
+                                                </option>
+                                                {qgenericFieldInfo[
+                                                    'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+                                                ].enum.map(proto => (
+                                                    <option
+                                                        value={proto.enum}
+                                                        key={proto.enum}>
+                                                        {proto.title}
+                                                    </option>
+                                                ))}
+                                            </Input>
+                                        </div>
+                                        <div className="single-col add-line-break">
+                                            <Input
+                                                data-test-id="networkTransactionsPerSecond"
+                                                label={i18n(
+                                                    'Network Transactions per Second'
+                                                )}
+                                                type="number"
+                                                onChange={ntps =>
+                                                    onQDataChanged({
+                                                        'network/networkCapacity/networkTransactionsPerSecond': ntps
+                                                    })
+                                                }
+                                                isValid={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/networkTransactionsPerSecond'
+                                                    ].isValid
+                                                }
+                                                errorText={
+                                                    qgenericFieldInfo[
+                                                        'network/networkCapacity/networkTransactionsPerSecond'
+                                                    ].errorText
+                                                }
+                                                value={
+                                                    dataMap[
+                                                        'network/networkCapacity/networkTransactionsPerSecond'
+                                                    ]
+                                                }
+                                            />
+                                        </div>
+                                        <div className="empty-two-col" />
+                                    </div>
+                                </div>
+                            </Form>
+                        )}
+                    </div>
+                    {this.renderNicList()}
+                </div>
+            </div>
+        );
+    }
 
-				<ListEditorItemViewField>
-					<div className='name'>{name}</div>
-				</ListEditorItemViewField>
-				<ListEditorItemViewField>
-					<div className={isManual ? 'details-col' : 'details'}>
-						<div className={isManual ? 'manual-title' : 'title'}>{i18n('Purpose of NIC')}</div>
-						{description && <div className={isManual ? 'description' : ''}>{description}</div>}
-					</div>
-					{!isManual && <div className='details'>
-						<div className='title'>{i18n('Network')}</div>
-						<div className='artifact-name'>{networkName}</div>
-					</div>}
-				</ListEditorItemViewField>
+    renderNicList() {
+        const { localFilter } = this.state;
+        let { isReadOnlyMode, onAddNic, isManual } = this.props;
+        return (
+            <ListEditorView
+                title={i18n('Interfaces')}
+                filterValue={localFilter}
+                placeholder={i18n('Filter NICs by Name')}
+                isReadOnlyMode={isReadOnlyMode}
+                onFilter={value => this.setState({ localFilter: value })}
+                onAdd={isManual ? onAddNic : null}
+                plusButtonTitle={i18n('Add NIC')}
+                twoColumns>
+                {this.filterList().map(nic =>
+                    this.renderNicListItem(nic, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-			</ListEditorItemView>
-		);
-	}
+    renderNicListItem(nic, isReadOnlyMode) {
+        let { id, name, description, networkName = '' } = nic;
+        let { onEditNicClick, version, isManual, onDeleteNic } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
+                onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
+                <ListEditorItemViewField>
+                    <div className="name">{name}</div>
+                </ListEditorItemViewField>
+                <ListEditorItemViewField>
+                    <div className={isManual ? 'details-col' : 'details'}>
+                        <div className={isManual ? 'manual-title' : 'title'}>
+                            {i18n('Purpose of NIC')}
+                        </div>
+                        {description && (
+                            <div className={isManual ? 'description' : ''}>
+                                {description}
+                            </div>
+                        )}
+                    </div>
+                    {!isManual && (
+                        <div className="details">
+                            <div className="title">{i18n('Network')}</div>
+                            <div className="artifact-name">{networkName}</div>
+                        </div>
+                    )}
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {nicList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return nicList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return nicList;
-		}
-	}
+    filterList() {
+        let { nicList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return nicList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return nicList;
+        }
+    }
 
-	save() {
-		let {onSubmit, qdata, version} = this.props;
-		return onSubmit({qdata, version});
-	}
+    save() {
+        let { onSubmit, qdata, version } = this.props;
+        return onSubmit({ qdata, version });
+    }
 }
 
 export default SoftwareProductComponentsNetworkView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
index 0fc7404c56..0b2783ebe7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
@@ -19,57 +19,97 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const Acceptable = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection hasLastColSet>
-			<GridItem colSpan={3}>
-				<div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div>
-			</GridItem>
-			<GridItem lastColInRow>
-				<div className='part-title-small bytes'>{i18n('Allow Packet Loss')}</div>
-			</GridItem>
-			<GridItem>
-				<Input
-					label={i18n('Mean')}
-					type='number'
-					data-test-id='acceptableJitter-mean'
-					isValid={qgenericFieldInfo['sizing/acceptableJitter/mean'].isValid}
-					errorText={qgenericFieldInfo['sizing/acceptableJitter/mean'].errorText}
-					value={dataMap['sizing/acceptableJitter/mean']}
-					onChange={val => onQDataChanged({'sizing/acceptableJitter/mean' : val})} />
-			</GridItem>
-			<GridItem>
-				<Input
-					label={i18n('Max')}
-					type='number'
-					data-test-id='acceptableJitter-max'
-					isValid={qgenericFieldInfo['sizing/acceptableJitter/max'].isValid}
-					errorText={qgenericFieldInfo['sizing/acceptableJitter/max'].errorText}
-					value={dataMap['sizing/acceptableJitter/max']}
-					onChange={val => onQDataChanged({'sizing/acceptableJitter/max' : val})} />
-			</GridItem>
-			<GridItem>
-				<Input
-					label={i18n('Var')}
-					type='number'
-					data-test-id='acceptableJitter-variable'
-					isValid={qgenericFieldInfo['sizing/acceptableJitter/variable'].isValid}
-					errorText={qgenericFieldInfo['sizing/acceptableJitter/variable'].errorText}
-					value={dataMap['sizing/acceptableJitter/variable']}
-					onChange={val => onQDataChanged({'sizing/acceptableJitter/variable' : val})} />
-			</GridItem>
-			<GridItem lastColInRow>
-				<Input
-					label={i18n('In Percent')}
-					type='number'
-					data-test-id='acceptableJitter-acceptablePacketLoss'
-					isValid={qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid}
-					errorText={qgenericFieldInfo['sizing/acceptablePacketLoss'].errorText}
-					value={dataMap['sizing/acceptablePacketLoss']}
-					onChange={val => onQDataChanged({'sizing/acceptablePacketLoss' : val})} />
-			</GridItem>
-		</GridSection>
-	);
+const Acceptable = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <GridSection hasLastColSet>
+            <GridItem colSpan={3}>
+                <div className="part-title-small packets">
+                    {i18n('Acceptable Jitter')}
+                </div>
+            </GridItem>
+            <GridItem lastColInRow>
+                <div className="part-title-small bytes">
+                    {i18n('Allow Packet Loss')}
+                </div>
+            </GridItem>
+            <GridItem>
+                <Input
+                    label={i18n('Mean')}
+                    type="number"
+                    data-test-id="acceptableJitter-mean"
+                    isValid={
+                        qgenericFieldInfo['sizing/acceptableJitter/mean']
+                            .isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['sizing/acceptableJitter/mean']
+                            .errorText
+                    }
+                    value={dataMap['sizing/acceptableJitter/mean']}
+                    onChange={val =>
+                        onQDataChanged({ 'sizing/acceptableJitter/mean': val })
+                    }
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    label={i18n('Max')}
+                    type="number"
+                    data-test-id="acceptableJitter-max"
+                    isValid={
+                        qgenericFieldInfo['sizing/acceptableJitter/max'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['sizing/acceptableJitter/max']
+                            .errorText
+                    }
+                    value={dataMap['sizing/acceptableJitter/max']}
+                    onChange={val =>
+                        onQDataChanged({ 'sizing/acceptableJitter/max': val })
+                    }
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    label={i18n('Var')}
+                    type="number"
+                    data-test-id="acceptableJitter-variable"
+                    isValid={
+                        qgenericFieldInfo['sizing/acceptableJitter/variable']
+                            .isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['sizing/acceptableJitter/variable']
+                            .errorText
+                    }
+                    value={dataMap['sizing/acceptableJitter/variable']}
+                    onChange={val =>
+                        onQDataChanged({
+                            'sizing/acceptableJitter/variable': val
+                        })
+                    }
+                />
+            </GridItem>
+            <GridItem lastColInRow>
+                <Input
+                    label={i18n('In Percent')}
+                    type="number"
+                    data-test-id="acceptableJitter-acceptablePacketLoss"
+                    isValid={
+                        qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['sizing/acceptablePacketLoss']
+                            .errorText
+                    }
+                    value={dataMap['sizing/acceptablePacketLoss']}
+                    onChange={val =>
+                        onQDataChanged({ 'sizing/acceptablePacketLoss': val })
+                    }
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default Acceptable;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
index 3745fc7c2e..32a5516eb4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
@@ -18,18 +18,20 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import PacketsBytes from './PacketsBytes.jsx';
 
 const pointers = [
-		{label: 'Peak', value: 'sizing/flowLength/packets/peak'},
-		{label: 'Avg', value: 'sizing/flowLength/packets/avg'},
-		{label: 'Peak', value: 'sizing/flowLength/bytes/peak'},
-		{label: 'Avg', value: 'sizing/flowLength/bytes/avg'},
+    { label: 'Peak', value: 'sizing/flowLength/packets/peak' },
+    { label: 'Avg', value: 'sizing/flowLength/packets/avg' },
+    { label: 'Peak', value: 'sizing/flowLength/bytes/peak' },
+    { label: 'Avg', value: 'sizing/flowLength/bytes/avg' }
 ];
 
-const  FlowLength = (props) => {
-	return(
-		<PacketsBytes {...props} title={i18n('Flow Length')} pointers={pointers}/>
-	);
+const FlowLength = props => {
+    return (
+        <PacketsBytes
+            {...props}
+            title={i18n('Flow Length')}
+            pointers={pointers}
+        />
+    );
 };
 
 export default FlowLength;
-
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
index 5476ed90e6..150e58af52 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
@@ -18,18 +18,20 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import PacketsBytes from './PacketsBytes.jsx';
 
 const pointers = [
-		{label: 'Peak', value: 'sizing/inflowTrafficPerSecond/packets/peak'},
-		{label: 'Avg', value: 'sizing/inflowTrafficPerSecond/packets/avg'},
-		{label: 'Peak', value: 'sizing/inflowTrafficPerSecond/bytes/peak'},
-		{label: 'Avg', value: 'sizing/inflowTrafficPerSecond/bytes/avg'},
+    { label: 'Peak', value: 'sizing/inflowTrafficPerSecond/packets/peak' },
+    { label: 'Avg', value: 'sizing/inflowTrafficPerSecond/packets/avg' },
+    { label: 'Peak', value: 'sizing/inflowTrafficPerSecond/bytes/peak' },
+    { label: 'Avg', value: 'sizing/inflowTrafficPerSecond/bytes/avg' }
 ];
 
-const InFlowTraffic = (props) => {
-	return(
-		<PacketsBytes {...props} title={i18n('Inflow Traffic per second')} pointers={pointers}/>
-	);
+const InFlowTraffic = props => {
+    return (
+        <PacketsBytes
+            {...props}
+            title={i18n('Inflow Traffic per second')}
+            pointers={pointers}
+        />
+    );
 };
 
 export default InFlowTraffic;
-
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
index b3a5d21625..695835606b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
@@ -19,27 +19,37 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const IpConfig = ({dataMap, onQDataChanged}) => {
-	return (
-		<GridSection title={i18n('IP Configuration')}>
-				<GridItem>
-					<Input
-						label={i18n('IPv4 Required')}
-						type='checkbox'
-						onChange={value => onQDataChanged({'ipConfiguration/ipv4Required' : value})}
-						data-test-id='ipConfiguration-ipv4Required'
-						value={dataMap['ipConfiguration/ipv4Required']} />
-				</GridItem>
-				<GridItem>
-					<Input
-						label={i18n('IPv6 Required')}
-						type='checkbox'
-						data-test-id='ipConfiguration-ipv6Required'
-						onChange={value => onQDataChanged({'ipConfiguration/ipv6Required' : value})}
-						value={dataMap['ipConfiguration/ipv6Required']} />
-				</GridItem>
-		</GridSection>
-	);
+const IpConfig = ({ dataMap, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('IP Configuration')}>
+            <GridItem>
+                <Input
+                    label={i18n('IPv4 Required')}
+                    type="checkbox"
+                    onChange={value =>
+                        onQDataChanged({
+                            'ipConfiguration/ipv4Required': value
+                        })
+                    }
+                    data-test-id="ipConfiguration-ipv4Required"
+                    value={dataMap['ipConfiguration/ipv4Required']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    label={i18n('IPv6 Required')}
+                    type="checkbox"
+                    data-test-id="ipConfiguration-ipv6Required"
+                    onChange={value =>
+                        onQDataChanged({
+                            'ipConfiguration/ipv6Required': value
+                        })
+                    }
+                    value={dataMap['ipConfiguration/ipv6Required']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default IpConfig;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
index 06a2bb445c..5a89239dc6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
@@ -20,40 +20,48 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const NameAndPurpose = ({onDataChanged, genericFieldInfo, isReadOnlyMode, name, description, isManual}) => {
-
-	return (
-		<GridSection hastLastColSet>
-			<GridItem colSpan={2}>
-				<Input
-					label={i18n('Name')}
-					value={name}
-					data-test-id='nic-name'
-					disabled={!isManual}
-					isRequired={true}
-					onChange={name => onDataChanged({name})}
-					isValid={genericFieldInfo['name'].isValid}
-					errorText={genericFieldInfo['name'].errorText}
-					type='text' />
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-				<Input
-					label={i18n('Purpose of NIC')}
-					value={description}
-					data-test-id='nic-description'
-					onChange={description => onDataChanged({description})}
-					disabled={isReadOnlyMode}
-					type='textarea' />
-			</GridItem>
-		</GridSection>
-	);
+const NameAndPurpose = ({
+    onDataChanged,
+    genericFieldInfo,
+    isReadOnlyMode,
+    name,
+    description,
+    isManual
+}) => {
+    return (
+        <GridSection hastLastColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    label={i18n('Name')}
+                    value={name}
+                    data-test-id="nic-name"
+                    disabled={!isManual}
+                    isRequired={true}
+                    onChange={name => onDataChanged({ name })}
+                    isValid={genericFieldInfo['name'].isValid}
+                    errorText={genericFieldInfo['name'].errorText}
+                    type="text"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    label={i18n('Purpose of NIC')}
+                    value={description}
+                    data-test-id="nic-description"
+                    onChange={description => onDataChanged({ description })}
+                    disabled={isReadOnlyMode}
+                    type="textarea"
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 NameAndPurpose.PropTypes = {
-	name: PropTypes.string,
-	description: PropTypes.array,
-	onDataChanged: PropTypes.func,
-	isReadOnlyMode: PropTypes.bool,
+    name: PropTypes.string,
+    description: PropTypes.array,
+    onDataChanged: PropTypes.func,
+    isReadOnlyMode: PropTypes.bool
 };
 
 export default NameAndPurpose;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
index 7e6712cb5e..c440d2fbd3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
@@ -21,56 +21,70 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import { networkTypes } from '../SoftwareProductComponentsNetworkConstants.js';
 
-const Network = ({networkValues, networkType, networkDescription, onDataChanged, isReadOnlyMode}) => {
-	const isExternal = networkType === networkTypes.EXTERNAL;
-	return (
-		<GridSection title={i18n('Network')} hasLastColSet>
-			<GridItem>
-				<Input
-					label={i18n('Internal')}
-					disabled
-					checked={!isExternal}
-					data-test-id='nic-internal'
-					className='network-radio disabled'
-					type='radio' />
-			</GridItem>
-			<GridItem>
-				<Input
-					label={i18n('External')}
-					disabled
-					checked={isExternal}
-					data-test-id='nic-external'
-					className='network-radio disabled'
-					type='radio' />
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-			{
-				isExternal ?
-					<Input
-						label={i18n('Network Description')}
-						value={networkDescription}
-						data-test-id='nic-network-description'
-						onChange={networkDescription => onDataChanged({networkDescription})}
-						disabled={isReadOnlyMode}
-						type='text' />
-				:
-					<Input
-						label={i18n('Network')}
-						data-test-id='nic-network'
-						type='select'
-						className='input-options-select'
-						groupClassName='bootstrap-input-options'
-						disabled={true}>
-						{networkValues.map(val => <option key={val.enum} value={val.enum}>{val.title}</option>)}
-					</Input>
-			}
-			</GridItem>
-		</GridSection>
-	);
+const Network = ({
+    networkValues,
+    networkType,
+    networkDescription,
+    onDataChanged,
+    isReadOnlyMode
+}) => {
+    const isExternal = networkType === networkTypes.EXTERNAL;
+    return (
+        <GridSection title={i18n('Network')} hasLastColSet>
+            <GridItem>
+                <Input
+                    label={i18n('Internal')}
+                    disabled
+                    checked={!isExternal}
+                    data-test-id="nic-internal"
+                    className="network-radio disabled"
+                    type="radio"
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    label={i18n('External')}
+                    disabled
+                    checked={isExternal}
+                    data-test-id="nic-external"
+                    className="network-radio disabled"
+                    type="radio"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                {isExternal ? (
+                    <Input
+                        label={i18n('Network Description')}
+                        value={networkDescription}
+                        data-test-id="nic-network-description"
+                        onChange={networkDescription =>
+                            onDataChanged({ networkDescription })
+                        }
+                        disabled={isReadOnlyMode}
+                        type="text"
+                    />
+                ) : (
+                    <Input
+                        label={i18n('Network')}
+                        data-test-id="nic-network"
+                        type="select"
+                        className="input-options-select"
+                        groupClassName="bootstrap-input-options"
+                        disabled={true}>
+                        {networkValues.map(val => (
+                            <option key={val.enum} value={val.enum}>
+                                {val.title}
+                            </option>
+                        ))}
+                    </Input>
+                )}
+            </GridItem>
+        </GridSection>
+    );
 };
 
 Network.PropTypes = {
-	networkValues: PropTypes.array
+    networkValues: PropTypes.array
 };
 
-export default  Network;
+export default Network;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
index 80a3d1579b..7173294536 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
@@ -18,18 +18,20 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import PacketsBytes from './PacketsBytes.jsx';
 
 const pointers = [
-		{label: 'Peak', value: 'sizing/outflowTrafficPerSecond/packets/peak'},
-		{label: 'Avg', value: 'sizing/outflowTrafficPerSecond/packets/avg'},
-		{label: 'Peak', value: 'sizing/outflowTrafficPerSecond/bytes/peak'},
-		{label: 'Avg', value: 'sizing/outflowTrafficPerSecond/bytes/avg'},
+    { label: 'Peak', value: 'sizing/outflowTrafficPerSecond/packets/peak' },
+    { label: 'Avg', value: 'sizing/outflowTrafficPerSecond/packets/avg' },
+    { label: 'Peak', value: 'sizing/outflowTrafficPerSecond/bytes/peak' },
+    { label: 'Avg', value: 'sizing/outflowTrafficPerSecond/bytes/avg' }
 ];
 
-const OutFlowTraffic = (props) => {
-	return(
-		<PacketsBytes {...props} title={i18n('Outflow Traffic per second')} pointers={pointers}/>
-	);
+const OutFlowTraffic = props => {
+    return (
+        <PacketsBytes
+            {...props}
+            title={i18n('Outflow Traffic per second')}
+            pointers={pointers}
+        />
+    );
 };
 
 export default OutFlowTraffic;
-
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
index f5f28aea59..070ac816ad 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
@@ -20,47 +20,74 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap, lastColInRow}) => {
-	return (
-		<GridItem lastColInRow={lastColInRow}>
-			<Input
-				label={i18n(label)}
-				type='number'
-				data-test-id={`${value}`}
-				isValid={qgenericFieldInfo[value].isValid}
-				errorText={qgenericFieldInfo[value].errorText}
-				value={dataMap[value]}
-				onChange={val => onQDataChanged({[value]: val})} />
-		</GridItem>
-	);
+const PointerInput = ({
+    label,
+    value,
+    onQDataChanged,
+    qgenericFieldInfo,
+    dataMap,
+    lastColInRow
+}) => {
+    return (
+        <GridItem lastColInRow={lastColInRow}>
+            <Input
+                label={i18n(label)}
+                type="number"
+                data-test-id={`${value}`}
+                isValid={qgenericFieldInfo[value].isValid}
+                errorText={qgenericFieldInfo[value].errorText}
+                value={dataMap[value]}
+                onChange={val => onQDataChanged({ [value]: val })}
+            />
+        </GridItem>
+    );
 };
 
 PointerInput.PropTypes = {
-	label: PropTypes.string,
-	value: PropTypes.string
+    label: PropTypes.string,
+    value: PropTypes.string
 };
 
-const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection title={title} hasLastColSet>
-				<GridItem colSpan={2}>
-					<div className='part-title-small packets'>{i18n('Packets')}</div>
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<div className='part-title-small bytes'>{i18n('Bytes')}</div>
-				</GridItem>
-				{pointers.map((pointer, i) => {return (<PointerInput key={i} label={pointer.label} value={pointer.value}
-					qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} lastColInRow={i === 3} />);})}
-		</GridSection>
-	);
+const PacketsBytes = ({
+    title,
+    pointers = [],
+    qgenericFieldInfo,
+    dataMap,
+    onQDataChanged
+}) => {
+    return (
+        <GridSection title={title} hasLastColSet>
+            <GridItem colSpan={2}>
+                <div className="part-title-small packets">
+                    {i18n('Packets')}
+                </div>
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <div className="part-title-small bytes">{i18n('Bytes')}</div>
+            </GridItem>
+            {pointers.map((pointer, i) => {
+                return (
+                    <PointerInput
+                        key={i}
+                        label={pointer.label}
+                        value={pointer.value}
+                        qgenericFieldInfo={qgenericFieldInfo}
+                        onQDataChanged={onQDataChanged}
+                        dataMap={dataMap}
+                        lastColInRow={i === 3}
+                    />
+                );
+            })}
+        </GridSection>
+    );
 };
 
 PacketsBytes.PropTypes = {
-	title: PropTypes.string,
-	pointers: PropTypes.array,
-	onQDataChanged:  PropTypes.function,
-	dataMap: PropTypes.object,
-	qgenericFieldInfo: PropTypes.object
+    title: PropTypes.string,
+    pointers: PropTypes.array,
+    onQDataChanged: PropTypes.function,
+    dataMap: PropTypes.object,
+    qgenericFieldInfo: PropTypes.object
 };
 
 export default PacketsBytes;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
index be4093da59..eb762b11b2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
@@ -21,55 +21,83 @@ import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return (
-		<GridSection title={i18n('Protocols')} hasLastColSet>
-				<GridItem colSpan={2}>
-					<InputOptions
-						data-test-id='nic-protocols'
-						label={i18n('Protocols')}
-						type='select'
-						isMultiSelect={true}
-						isValid={qgenericFieldInfo['protocols/protocols'].isValid}
-						errorText={qgenericFieldInfo['protocols/protocols'].errorText}
-						onInputChange={()=>{}}
-						onEnumChange={protocols => {
-							onQDataChanged({'protocols/protocols' : protocols});}
-						}
-						multiSelectedEnum={dataMap['protocols/protocols']}
-						clearable={false}
-						values={qgenericFieldInfo['protocols/protocols'].enum}/>
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						data-test-id='nic-protocolWithHighestTrafficProfile'
-						label={i18n('Protocol with Highest Traffic Profile')}
-						type='select'
-						groupClassName='bootstrap-input-options'
-						className='input-options-select'
-						isValid={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].isValid}
-						errorText={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].errorText}
-						value={dataMap['protocols/protocolWithHighestTrafficProfile']}
-						onChange={(e) => {
-							const selectedIndex = e.target.selectedIndex;
-							const val = e.target.options[selectedIndex].value;
-							onQDataChanged({'protocols/protocolWithHighestTrafficProfile' : val});}
-						}>
-						{(protocols.length === 0) &&
-							<option key={'You must select protocols first...'} value=''>{i18n('You must select protocols first...')}</option>
-						}
-						{protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
-					</Input>
-				</GridItem>
-		</GridSection>
-	);
+const Protocols = ({
+    protocols,
+    qgenericFieldInfo,
+    dataMap,
+    onQDataChanged
+}) => {
+    return (
+        <GridSection title={i18n('Protocols')} hasLastColSet>
+            <GridItem colSpan={2}>
+                <InputOptions
+                    data-test-id="nic-protocols"
+                    label={i18n('Protocols')}
+                    type="select"
+                    isMultiSelect={true}
+                    isValid={qgenericFieldInfo['protocols/protocols'].isValid}
+                    errorText={
+                        qgenericFieldInfo['protocols/protocols'].errorText
+                    }
+                    onInputChange={() => {}}
+                    onEnumChange={protocols => {
+                        onQDataChanged({ 'protocols/protocols': protocols });
+                    }}
+                    multiSelectedEnum={dataMap['protocols/protocols']}
+                    clearable={false}
+                    values={qgenericFieldInfo['protocols/protocols'].enum}
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    data-test-id="nic-protocolWithHighestTrafficProfile"
+                    label={i18n('Protocol with Highest Traffic Profile')}
+                    type="select"
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={
+                        qgenericFieldInfo[
+                            'protocols/protocolWithHighestTrafficProfile'
+                        ].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo[
+                            'protocols/protocolWithHighestTrafficProfile'
+                        ].errorText
+                    }
+                    value={
+                        dataMap['protocols/protocolWithHighestTrafficProfile']
+                    }
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({
+                            'protocols/protocolWithHighestTrafficProfile': val
+                        });
+                    }}>
+                    {protocols.length === 0 && (
+                        <option
+                            key={'You must select protocols first...'}
+                            value="">
+                            {i18n('You must select protocols first...')}
+                        </option>
+                    )}
+                    {protocols.map(protocol => (
+                        <option key={protocol} value={protocol}>
+                            {protocol}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+        </GridSection>
+    );
 };
 
 Protocols.PropTypes = {
-	protocols: PropTypes.array,
-	onQDataChanged:  PropTypes.function,
-	dataMap: PropTypes.object,
-	qgenericFieldInfo: PropTypes.object
+    protocols: PropTypes.array,
+    onQDataChanged: PropTypes.function,
+    dataMap: PropTypes.object,
+    qgenericFieldInfo: PropTypes.object
 };
 
 export default Protocols;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
index 202d458f25..f9ec7261ac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
@@ -19,21 +19,32 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const Sizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('Sizing')} hasLastColSet>
-			<GridItem colSpan={4} lastColInRow>
-				<Input
-					label={i18n('Describe Quality of Service')}
-					type='textarea'
-					data-test-id='sizing-describeQualityOfService'
-					isValid={qgenericFieldInfo['sizing/describeQualityOfService'].isValid}
-					errorText={qgenericFieldInfo['sizing/describeQualityOfService'].errorText}
-					value={dataMap['sizing/describeQualityOfService']}
-					onChange={val => onQDataChanged({'sizing/describeQualityOfService' : val}) }/>
-			</GridItem>
-		</GridSection>
-	);
+const Sizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('Sizing')} hasLastColSet>
+            <GridItem colSpan={4} lastColInRow>
+                <Input
+                    label={i18n('Describe Quality of Service')}
+                    type="textarea"
+                    data-test-id="sizing-describeQualityOfService"
+                    isValid={
+                        qgenericFieldInfo['sizing/describeQualityOfService']
+                            .isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['sizing/describeQualityOfService']
+                            .errorText
+                    }
+                    value={dataMap['sizing/describeQualityOfService']}
+                    onChange={val =>
+                        onQDataChanged({
+                            'sizing/describeQualityOfService': val
+                        })
+                    }
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default Sizing;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
index b2133ad5d8..52c5cdde3d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
@@ -15,121 +15,184 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+import { actionTypes } from './SoftwareProductComponentProcessesConstants.js';
 
 function baseUrl(softwareProductId, version, componentId) {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${version.id}/components/${componentId}/processes`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${
+        version.id
+    }/components/${componentId}/processes`;
 }
 
-function fetchProcessesList({softwareProductId, version, componentId}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchProcessesList({ softwareProductId, version, componentId }) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version, componentId)}`
+    );
 }
 
-function deleteProcess({softwareProductId, version, componentId, processId}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${processId}`);
+function deleteProcess({ softwareProductId, version, componentId, processId }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version, componentId)}/${processId}`
+    );
 }
 
-function putProcess({softwareProductId, version, componentId, process}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${process.id}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+function putProcess({ softwareProductId, version, componentId, process }) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version, componentId)}/${process.id}`,
+        {
+            name: process.name,
+            description: process.description,
+            type: process.type === '' ? null : process.type
+        }
+    );
 }
 
-function postProcess({softwareProductId, version, componentId, process}) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+function postProcess({ softwareProductId, version, componentId, process }) {
+    return RestAPIUtil.post(
+        `${baseUrl(softwareProductId, version, componentId)}`,
+        {
+            name: process.name,
+            description: process.description,
+            type: process.type === '' ? null : process.type
+        }
+    );
 }
 
-function uploadFileToProcess({softwareProductId, version, processId, componentId, formData}) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/${processId}/upload`, formData);
+function uploadFileToProcess({
+    softwareProductId,
+    version,
+    processId,
+    componentId,
+    formData
+}) {
+    return RestAPIUtil.post(
+        `${baseUrl(
+            softwareProductId,
+            version,
+            componentId
+        )}/${processId}/upload`,
+        formData
+    );
 }
 
-
-
 const SoftwareProductComponentProcessesActionHelper = {
-	fetchProcessesList(dispatch, {softwareProductId, version, componentId}) {
-		dispatch({
-			type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
-			processesList: []
-		});
-
-		return fetchProcessesList({softwareProductId, version, componentId}).then(response => {
-			dispatch({
-				type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
-				processesList: response.results
-			});
-		});
-	},
-
-	deleteProcess(dispatch, {process, softwareProductId, version, componentId}) {
-		return deleteProcess({softwareProductId, version, processId:process.id, componentId}).then(() => {
-			dispatch({
-				type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
-				processId: process.id
-			});
-		});
-
-	},
-
-	saveProcess(dispatch, {softwareProductId, version, componentId, previousProcess, process}) {
-		if (previousProcess) {
-			return putProcess({softwareProductId, version, componentId,  process}).then(() => {
-				if (process.formData && process.formData.name !== previousProcess.artifactName){
-					uploadFileToProcess({softwareProductId, version, processId: process.id, formData: process.formData, componentId});
-				}
-				dispatch({
-					type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
-					process
-				});
-			});
-		}
-		else {
-			return postProcess({softwareProductId, version, componentId, process}).then(response => {
-				if (process.formData) {
-					uploadFileToProcess({softwareProductId, version, processId: response.value, formData: process.formData, componentId});
-				}
-				dispatch({
-					type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
-					process: {
-						...process,
-						id: response.value
-					}
-				});
-			});
-		}
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
-			processToDelete: false
-		});
-	},
-
-	openDeleteProcessesConfirm(dispatch, {process} ) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
-			processToDelete: process
-		});
-	},
-
-	openEditor(dispatch, process = {}) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
-			process
-		});
-	},
-	closeEditor(dispatch) {
-		dispatch({
-			type:actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
-		});
-	}
+    fetchProcessesList(dispatch, { softwareProductId, version, componentId }) {
+        dispatch({
+            type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+            processesList: []
+        });
+
+        return fetchProcessesList({
+            softwareProductId,
+            version,
+            componentId
+        }).then(response => {
+            dispatch({
+                type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+                processesList: response.results
+            });
+        });
+    },
+
+    deleteProcess(
+        dispatch,
+        { process, softwareProductId, version, componentId }
+    ) {
+        return deleteProcess({
+            softwareProductId,
+            version,
+            processId: process.id,
+            componentId
+        }).then(() => {
+            dispatch({
+                type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+                processId: process.id
+            });
+        });
+    },
+
+    saveProcess(
+        dispatch,
+        { softwareProductId, version, componentId, previousProcess, process }
+    ) {
+        if (previousProcess) {
+            return putProcess({
+                softwareProductId,
+                version,
+                componentId,
+                process
+            }).then(() => {
+                if (
+                    process.formData &&
+                    process.formData.name !== previousProcess.artifactName
+                ) {
+                    uploadFileToProcess({
+                        softwareProductId,
+                        version,
+                        processId: process.id,
+                        formData: process.formData,
+                        componentId
+                    });
+                }
+                dispatch({
+                    type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+                    process
+                });
+            });
+        } else {
+            return postProcess({
+                softwareProductId,
+                version,
+                componentId,
+                process
+            }).then(response => {
+                if (process.formData) {
+                    uploadFileToProcess({
+                        softwareProductId,
+                        version,
+                        processId: response.value,
+                        formData: process.formData,
+                        componentId
+                    });
+                }
+                dispatch({
+                    type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+                    process: {
+                        ...process,
+                        id: response.value
+                    }
+                });
+            });
+        }
+    },
+
+    hideDeleteConfirm(dispatch) {
+        dispatch({
+            type:
+                actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+            processToDelete: false
+        });
+    },
+
+    openDeleteProcessesConfirm(dispatch, { process }) {
+        dispatch({
+            type:
+                actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+            processToDelete: process
+        });
+    },
+
+    openEditor(dispatch, process = {}) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
+            process
+        });
+    },
+    closeEditor(dispatch) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
+        });
+    }
 };
 
 export default SoftwareProductComponentProcessesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
index d15432b3fb..e3ce4f8007 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
@@ -16,21 +16,22 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
-	EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
-	DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
-	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
-	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
-	FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
-	SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null
+    ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+    EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+    DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+    SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
+    SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
+    FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
+    SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null
 });
 
 export const optionsInputValues = {
-	PROCESS_TYPE: [
-		{title: 'Select...', enum: ''},
-		{title: 'Lifecycle Operations', enum: 'Lifecycle_Operations'},
-		{title: 'Other', enum: 'Other'}
-	]
+    PROCESS_TYPE: [
+        { title: 'Select...', enum: '' },
+        { title: 'Lifecycle Operations', enum: 'Lifecycle_Operations' },
+        { title: 'Other', enum: 'Other' }
+    ]
 };
 
-export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM = 'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM';
+export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM =
+    'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
index 9502e24b1a..9d2bf34b78 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
@@ -13,44 +13,68 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper';
 import SoftwareProductComponentProcessesEditorView from './SoftwareProductComponentProcessesEditorView.jsx';
-import {SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
+import { SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM } from './SoftwareProductComponentProcessesConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
-	let {processesList = [], processesEditor = {}} = componentProcesses;
-	let {data, genericFieldInfo, formReady} = processesEditor;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductComponents: { componentProcesses = {} }
+    } = softwareProduct;
+    let { processesList = [], processesEditor = {} } = componentProcesses;
+    let { data, genericFieldInfo, formReady } = processesEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let previousData;
-	const processId = data ? data.id : null;
-	if(processId) {
-		previousData = processesList.find(process => process.id === processId);
-	}
+    let previousData;
+    const processId = data ? data.id : null;
+    if (processId) {
+        previousData = processesList.find(process => process.id === processId);
+    }
 
-	return {
-		data,
-		genericFieldInfo,
-		previousData,
-		isFormValid,
-		formReady
-	};
+    return {
+        data,
+        genericFieldInfo,
+        previousData,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM}),
-		onCancel: () => SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
-		onSubmit: ({previousProcess, process}) => {
-			SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
-			SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, componentId, process});
-		},
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM)
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+            }),
+        onCancel: () =>
+            SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
+        onSubmit: ({ previousProcess, process }) => {
+            SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
+            SoftwareProductComponentProcessesActionHelper.saveProcess(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    previousProcess,
+                    componentId,
+                    process
+                }
+            );
+        },
+        onValidateForm: () =>
+            ValidationHelper.validateForm(
+                dispatch,
+                SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+            )
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentProcessesEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductComponentProcessesEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
index 9afaa6d5fd..fd211734df 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
@@ -13,42 +13,48 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
+import {
+    actionTypes,
+    SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+} from './SoftwareProductComponentProcessesConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM,
-				genericFieldInfo: {
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'artifactName' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'type' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				},
-				data: action.process
-			};
-		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    artifactName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    type: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                },
+                data: action.process
+            };
+        case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
index 9841ecbae7..132ebe86fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -14,17 +14,18 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import  {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
+import { optionsInputValues as ComponentProcessesOptionsInputValues } from './SoftwareProductComponentProcessesConstants.js';
 import SoftwareProductProcessesEditorForm from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx';
 
-
 class SoftwareProductProcessesEditorView extends React.Component {
-
-	render() {
-		return (
-			<SoftwareProductProcessesEditorForm optionsInputValues={ComponentProcessesOptionsInputValues} {...this.props}/>
-		);
-	}
+    render() {
+        return (
+            <SoftwareProductProcessesEditorForm
+                optionsInputValues={ComponentProcessesOptionsInputValues}
+                {...this.props}
+            />
+        );
+    }
 }
 
 export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
index 2a7152ef8b..cb6d25a6ac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
@@ -13,45 +13,64 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
 
 import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx';
 
-export const mapStateToProps = ({softwareProduct}) => {
-
-	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
-	let{processesList = [], processesEditor = {}} = componentProcesses;
-	let {data} = processesEditor;
-
-	return {
-		currentSoftwareProduct,
-		isValidityData,
-		processesList,
-		isDisplayModal: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id)
-	};
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct = {},
+            isValidityData = true
+        },
+        softwareProductComponents: { componentProcesses = {} }
+    } = softwareProduct;
+    let { processesList = [], processesEditor = {} } = componentProcesses;
+    let { data } = processesEditor;
 
+    return {
+        currentSoftwareProduct,
+        isValidityData,
+        processesList,
+        isDisplayModal: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {componentId, softwareProductId, version}) => {
-
-	return {
-		onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
-		onEditProcess: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process),
-		onDeleteProcess: (process) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch,
-					{process, softwareProductId, version, componentId})
-			}
-		})
-	};
+const mapActionsToProps = (
+    dispatch,
+    { componentId, softwareProductId, version }
+) => {
+    return {
+        onAddProcess: () =>
+            SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
+        onEditProcess: process =>
+            SoftwareProductComponentProcessesActionHelper.openEditor(
+                dispatch,
+                process
+            ),
+        onDeleteProcess: process =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{name}"?', {
+                        name: process.name
+                    }),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        SoftwareProductComponentProcessesActionHelper.deleteProcess(
+                            dispatch,
+                            { process, softwareProductId, version, componentId }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsProcessesListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductComponentsProcessesListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
index 98e24a9c21..d406f02c19 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
@@ -13,20 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+import { actionTypes } from './SoftwareProductComponentProcessesConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES:
-			return [...action.processesList];
-		case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
-			const indexForEdit = state.findIndex(process => process.id === action.process.id);
-			return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)];
-		case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
-			return [...state, action.process];
-		case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
-			return state.filter(process => process.id !== action.processId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES:
+            return [...action.processesList];
+        case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+            const indexForEdit = state.findIndex(
+                process => process.id === action.process.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.process,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+            return [...state, action.process];
+        case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+            return state.filter(process => process.id !== action.processId);
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
index 27c4b9f429..8fa2bffb27 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
@@ -21,55 +21,73 @@ import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesE
 import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx';
 
 class SoftwareProductProcessesView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    static propTypes = {
+        onAddProcess: PropTypes.func,
+        onEditProcess: PropTypes.func,
+        onDeleteProcess: PropTypes.func,
+        isDisplayModal: PropTypes.bool,
+        isModalInEditMode: PropTypes.bool,
+        onStorageSelect: PropTypes.func,
+        componentId: PropTypes.string,
+        softwareProductId: PropTypes.string,
+        currentSoftwareProduct: PropTypes.object
+    };
 
-	static propTypes = {
-		onAddProcess: PropTypes.func,
-		onEditProcess: PropTypes.func,
-		onDeleteProcess: PropTypes.func,
-		isDisplayModal: PropTypes.bool,
-		isModalInEditMode: PropTypes.bool,
-		onStorageSelect: PropTypes.func,
-		componentId: PropTypes.string,
-		softwareProductId: PropTypes.string,
-		currentSoftwareProduct: PropTypes.object
-	};
-
-	render() {
-		return (
-			<div className='vsp-processes-page'>
-				<div className='software-product-view'>
-					<div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'>
-						{this.renderEditor()}
-						<SoftwareProductProcessListView addButtonTitle={i18n('Add Component Process Details')} {...this.props}/>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	renderEditor() {
-		let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
-		return (
-			<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'>
-				<Modal.Header>
-					<Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
-				</Modal.Header>
-				<Modal.Body className='edit-process-modal'>
-					<SoftwareProductProcessesEditor
-						componentId={componentId}
-						softwareProductId={softwareProductId}
-						version={version}
-						isReadOnlyMode={isReadOnlyMode}/>
-				</Modal.Body>
-			</Modal>
-
-		);
-	}
+    render() {
+        return (
+            <div className="vsp-processes-page">
+                <div className="software-product-view">
+                    <div className="software-product-landing-view-right-side vsp-components-processes-page flex-column">
+                        {this.renderEditor()}
+                        <SoftwareProductProcessListView
+                            addButtonTitle={i18n(
+                                'Add Component Process Details'
+                            )}
+                            {...this.props}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
+    renderEditor() {
+        let {
+            softwareProductId,
+            version,
+            componentId,
+            isReadOnlyMode,
+            isDisplayModal,
+            isModalInEditMode
+        } = this.props;
+        return (
+            <Modal
+                show={isDisplayModal}
+                bsSize="large"
+                animation={true}
+                className="onborading-modal">
+                <Modal.Header>
+                    <Modal.Title>
+                        {isModalInEditMode
+                            ? i18n('Edit Process Details')
+                            : i18n('Create New Process Details')}
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body className="edit-process-modal">
+                    <SoftwareProductProcessesEditor
+                        componentId={componentId}
+                        softwareProductId={softwareProductId}
+                        version={version}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                </Modal.Body>
+            </Modal>
+        );
+    }
 }
 
 export default SoftwareProductProcessesView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
index ca27a76a18..8da9b99a33 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
@@ -13,32 +13,57 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import SoftwareProductComponentStorageView from './SoftwareProductComponentStorageView.jsx';
 
-import {COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from '../SoftwareProductComponentsConstants.js';
 
-const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
-	let {componentEditor: {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents;
+const mapStateToProps = ({
+    softwareProduct: { softwareProductComponents }
+}) => {
+    let {
+        componentEditor: {
+            qdata,
+            qgenericFieldInfo: qGenericFieldInfo,
+            dataMap
+        }
+    } = softwareProductComponents;
 
-	return {
-		qdata,
-		qGenericFieldInfo,
-		dataMap
-	};
+    return {
+        qdata,
+        qGenericFieldInfo,
+        dataMap
+    };
 };
 
-const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
-	return {
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({qdata}) => {
-			return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});
-		}
-	};
+const mapActionToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onSubmit: ({ qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    qdata
+                }
+            );
+        }
+    };
 };
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentStorageView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductComponentStorageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
index 8538dab6bc..ac7e4a8053 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
@@ -22,171 +22,311 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import classnames from 'classnames';
 
-const BackupSection = ({isReadOnlyMode,dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Backup')}>
-		<GridItem>
-			<div className='vertical-flex'>
-				<label key='label' className={classnames('control-label',{'disabled': isReadOnlyMode})}>{i18n('Backup Type')}</label>
-				<div className='radio-options-content-row'>
-					{qgenericFieldInfo['storage/backup/backupType'].enum.map(onSite => (
-						<Input
-							data-test-id='backupType'
-							type='radio'
-							key={onSite.enum}
-							name={'compute/guestOS/bitSize'}
-							className='radio-field'
-							value={onSite.enum}
-							label={onSite.title}
-							onChange={(site) => onQDataChanged({'storage/backup/backupType' :  site})}
-							isValid={qgenericFieldInfo['storage/backup/backupType'].isValid}
-							errorText={qgenericFieldInfo['storage/backup/backupType'].errorText}
-							checked={dataMap['storage/backup/backupType'] === onSite.enum} /> )) }
-				</div>
-			</div>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='backupSolution'
-				onChange={(backupSolution) => onQDataChanged({'storage/backup/backupSolution' : backupSolution})}
-				label={i18n('Backup Solution')}
-				type='text'
-				isValid={qgenericFieldInfo['storage/backup/backupSolution'].isValid}
-				errorText={qgenericFieldInfo['storage/backup/backupSolution'].errorText}
-				value={dataMap['storage/backup/backupSolution']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='backupStorageSize'
-				onChange={(backupStorageSize) => onQDataChanged({'storage/backup/backupStorageSize' : backupStorageSize})}
-				label={i18n('Backup Storage Size (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['storage/backup/backupStorageSize'].isValid}
-				errorText={qgenericFieldInfo['storage/backup/backupStorageSize'].errorText}
-				value={dataMap['storage/backup/backupStorageSize']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='backupNIC'
-				label={i18n('Backup NIC')}
-				type='select'
-				className='input-options-select section-field'
-				groupClassName='bootstrap-input-options'
-				isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid}
-				errorText={qgenericFieldInfo['storage/backup/backupNIC'].errorText}
-				value={dataMap['storage/backup/backupNIC']}
-				onChange={(e) => {
-					const selectedIndex = e.target.selectedIndex;
-					const val = e.target.options[selectedIndex].value;
-					onQDataChanged({'storage/backup/backupNIC' : val});}
-				}>
-				<option key='placeholder' value=''>{i18n('Select...')}</option>
-				{qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
-			</Input>
-		</GridItem>
-	</GridSection>
+const BackupSection = ({
+    isReadOnlyMode,
+    dataMap,
+    onQDataChanged,
+    qgenericFieldInfo
+}) => (
+    <GridSection title={i18n('Backup')}>
+        <GridItem>
+            <div className="vertical-flex">
+                <label
+                    key="label"
+                    className={classnames('control-label', {
+                        disabled: isReadOnlyMode
+                    })}>
+                    {i18n('Backup Type')}
+                </label>
+                <div className="radio-options-content-row">
+                    {qgenericFieldInfo['storage/backup/backupType'].enum.map(
+                        onSite => (
+                            <Input
+                                data-test-id="backupType"
+                                type="radio"
+                                key={onSite.enum}
+                                name={'compute/guestOS/bitSize'}
+                                className="radio-field"
+                                value={onSite.enum}
+                                label={onSite.title}
+                                onChange={site =>
+                                    onQDataChanged({
+                                        'storage/backup/backupType': site
+                                    })
+                                }
+                                isValid={
+                                    qgenericFieldInfo[
+                                        'storage/backup/backupType'
+                                    ].isValid
+                                }
+                                errorText={
+                                    qgenericFieldInfo[
+                                        'storage/backup/backupType'
+                                    ].errorText
+                                }
+                                checked={
+                                    dataMap['storage/backup/backupType'] ===
+                                    onSite.enum
+                                }
+                            />
+                        )
+                    )}
+                </div>
+            </div>
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="backupSolution"
+                onChange={backupSolution =>
+                    onQDataChanged({
+                        'storage/backup/backupSolution': backupSolution
+                    })
+                }
+                label={i18n('Backup Solution')}
+                type="text"
+                isValid={
+                    qgenericFieldInfo['storage/backup/backupSolution'].isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/backup/backupSolution'].errorText
+                }
+                value={dataMap['storage/backup/backupSolution']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="backupStorageSize"
+                onChange={backupStorageSize =>
+                    onQDataChanged({
+                        'storage/backup/backupStorageSize': backupStorageSize
+                    })
+                }
+                label={i18n('Backup Storage Size (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/backup/backupStorageSize']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/backup/backupStorageSize']
+                        .errorText
+                }
+                value={dataMap['storage/backup/backupStorageSize']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="backupNIC"
+                label={i18n('Backup NIC')}
+                type="select"
+                className="input-options-select section-field"
+                groupClassName="bootstrap-input-options"
+                isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid}
+                errorText={
+                    qgenericFieldInfo['storage/backup/backupNIC'].errorText
+                }
+                value={dataMap['storage/backup/backupNIC']}
+                onChange={e => {
+                    const selectedIndex = e.target.selectedIndex;
+                    const val = e.target.options[selectedIndex].value;
+                    onQDataChanged({ 'storage/backup/backupNIC': val });
+                }}>
+                <option key="placeholder" value="">
+                    {i18n('Select...')}
+                </option>
+                {qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => (
+                    <option value={hv.enum} key={hv.enum}>
+                        {hv.title}
+                    </option>
+                ))}
+            </Input>
+        </GridItem>
+    </GridSection>
 );
 
-const SnapshotBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Snapshot Backup')}>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='snapshotFrequency'
-				onChange={(snapshotFrequency) => onQDataChanged({'storage/snapshotBackup/snapshotFrequency' : snapshotFrequency})}
-				label={i18n('Backup Storage Size (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].isValid}
-				errorText={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].errorText}
-				value={dataMap['storage/snapshotBackup/snapshotFrequency']}/>
-		</GridItem>
-	</GridSection>
+const SnapshotBackupSection = ({
+    dataMap,
+    onQDataChanged,
+    qgenericFieldInfo
+}) => (
+    <GridSection title={i18n('Snapshot Backup')}>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="snapshotFrequency"
+                onChange={snapshotFrequency =>
+                    onQDataChanged({
+                        'storage/snapshotBackup/snapshotFrequency': snapshotFrequency
+                    })
+                }
+                label={i18n('Backup Storage Size (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo[
+                        'storage/snapshotBackup/snapshotFrequency'
+                    ].isValid
+                }
+                errorText={
+                    qgenericFieldInfo[
+                        'storage/snapshotBackup/snapshotFrequency'
+                    ].errorText
+                }
+                value={dataMap['storage/snapshotBackup/snapshotFrequency']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
-const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
-	<GridSection title={i18n('Log Backup')}>
-		<GridItem>
-			<Input
-				className='section-field'
-				data-test-id='sizeOfLogFiles'
-				onChange={(sizeOfLogFiles) => onQDataChanged({'storage/logBackup/sizeOfLogFiles' : sizeOfLogFiles})}
-				label={i18n('Backup Storage Size (GB)')}
-				type='number'
-				isValid={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].errorText}
-				value={dataMap['storage/logBackup/sizeOfLogFiles']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				label={i18n('Log Retention Period (days)')}
-				data-test-id='logRetentionPeriod'
-				onChange={(logRetentionPeriod) => onQDataChanged({'storage/logBackup/logRetentionPeriod' : logRetentionPeriod})}
-				type='number'
-				isValid={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].errorText}
-				value={dataMap['storage/logBackup/logRetentionPeriod']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				label={i18n('Log Backup Frequency (days)')}
-				data-test-id='logBackupFrequency'
-				onChange={(logBackupFrequency) => onQDataChanged({'storage/logBackup/logBackupFrequency' : logBackupFrequency})}
-				type='number'
-				isValid={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].errorText}
-				value={dataMap['storage/logBackup/logBackupFrequency']}/>
-		</GridItem>
-		<GridItem>
-			<Input
-				className='section-field'
-				label={i18n('Log File Location')}
-				data-test-id='logFileLocation'
-				onChange={(logFileLocation) => onQDataChanged({'storage/logBackup/logFileLocation' : logFileLocation})}
-				type='text'
-				isValid={qgenericFieldInfo['storage/logBackup/logFileLocation'].isValid}
-				errorText={qgenericFieldInfo['storage/logBackup/logFileLocation'].errorText}
-				value={dataMap['storage/logBackup/logFileLocation']}/>
-		</GridItem>
-	</GridSection>
+const LogBackupSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+    <GridSection title={i18n('Log Backup')}>
+        <GridItem>
+            <Input
+                className="section-field"
+                data-test-id="sizeOfLogFiles"
+                onChange={sizeOfLogFiles =>
+                    onQDataChanged({
+                        'storage/logBackup/sizeOfLogFiles': sizeOfLogFiles
+                    })
+                }
+                label={i18n('Backup Storage Size (GB)')}
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/sizeOfLogFiles']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/sizeOfLogFiles']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/sizeOfLogFiles']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                label={i18n('Log Retention Period (days)')}
+                data-test-id="logRetentionPeriod"
+                onChange={logRetentionPeriod =>
+                    onQDataChanged({
+                        'storage/logBackup/logRetentionPeriod': logRetentionPeriod
+                    })
+                }
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/logRetentionPeriod']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/logRetentionPeriod']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/logRetentionPeriod']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                label={i18n('Log Backup Frequency (days)')}
+                data-test-id="logBackupFrequency"
+                onChange={logBackupFrequency =>
+                    onQDataChanged({
+                        'storage/logBackup/logBackupFrequency': logBackupFrequency
+                    })
+                }
+                type="number"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/logBackupFrequency']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/logBackupFrequency']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/logBackupFrequency']}
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                className="section-field"
+                label={i18n('Log File Location')}
+                data-test-id="logFileLocation"
+                onChange={logFileLocation =>
+                    onQDataChanged({
+                        'storage/logBackup/logFileLocation': logFileLocation
+                    })
+                }
+                type="text"
+                isValid={
+                    qgenericFieldInfo['storage/logBackup/logFileLocation']
+                        .isValid
+                }
+                errorText={
+                    qgenericFieldInfo['storage/logBackup/logFileLocation']
+                        .errorText
+                }
+                value={dataMap['storage/logBackup/logFileLocation']}
+            />
+        </GridItem>
+    </GridSection>
 );
 
 class SoftwareProductComponentStorageView extends React.Component {
+    static propTypes = {
+        componentId: PropTypes.string,
+        onQDataChanged: PropTypes.func,
+        onSubmit: PropTypes.func,
+        isReadOnlyMode: PropTypes.bool
+    };
 
-	static propTypes = {
-		componentId: PropTypes.string,
-		onQDataChanged: PropTypes.func,
-		onSubmit: PropTypes.func,
-		isReadOnlyMode: PropTypes.bool
-	};
+    render() {
+        let {
+            onQDataChanged,
+            dataMap,
+            qGenericFieldInfo,
+            isReadOnlyMode,
+            onSubmit,
+            qdata
+        } = this.props;
 
-	render() {
-		let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} =  this.props;
+        return (
+            <div className="vsp-component-questionnaire-view">
+                {qGenericFieldInfo && (
+                    <Form
+                        ref={form => (this.form = form)}
+                        isValid={true}
+                        formReady={null}
+                        onSubmit={() => onSubmit({ qdata })}
+                        className="component-questionnaire-validation-form"
+                        isReadOnlyMode={isReadOnlyMode}
+                        hasButtons={false}>
+                        <BackupSection
+                            isReadOnlyMode={isReadOnlyMode}
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qGenericFieldInfo}
+                        />
+                        <SnapshotBackupSection
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qGenericFieldInfo}
+                        />
+                        <LogBackupSection
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qGenericFieldInfo}
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return(
-			<div className='vsp-component-questionnaire-view'>
-				{qGenericFieldInfo && <Form
-					ref={form => this.form = form }
-					isValid={true}
-					formReady={null}
-					onSubmit={() => onSubmit({qdata})}
-					className='component-questionnaire-validation-form'
-					isReadOnlyMode={isReadOnlyMode}
-					hasButtons={false}>
-					<BackupSection isReadOnlyMode={isReadOnlyMode} onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-					<SnapshotBackupSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-					<LogBackupSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
-				</Form> }
-			</div>
-		);
-	}
-
-	save(){		
-		const {qdata, onSubmit} = this.props;
-		return onSubmit({qdata});
-	}
+    save() {
+        const { qdata, onSubmit } = this.props;
+        return onSubmit({ qdata });
+    }
 }
 
 export default SoftwareProductComponentStorageView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
index 569b33f999..41584d94e2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
@@ -13,64 +13,96 @@
  * 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 SoftwareProductCreationActionHelper from './SoftwareProductCreationActionHelper.js';
 import SoftwareProductCreationView from './SoftwareProductCreationView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import SoftwareProductActionHelper  from '../SoftwareProductActionHelper.js';
+import SoftwareProductActionHelper from '../SoftwareProductActionHelper.js';
 import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes as versionItemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { itemTypes as versionItemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
 
-export const mapStateToProps = ({finalizedLicenseModelList, users: {usersList}, archivedSoftwareProductList, 
-		softwareProductList, finalizedSoftwareProductList, softwareProduct: {softwareProductCreation, softwareProductCategories} }) => {
-	let {genericFieldInfo} = softwareProductCreation;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({
+    finalizedLicenseModelList,
+    users: { usersList },
+    archivedSoftwareProductList,
+    softwareProductList,
+    finalizedSoftwareProductList,
+    softwareProduct: { softwareProductCreation, softwareProductCategories }
+}) => {
+    let { genericFieldInfo } = softwareProductCreation;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let VSPNames = {};
-	const allVspList = [...softwareProductList, ...finalizedSoftwareProductList, ...archivedSoftwareProductList];
-	allVspList.map(item => {
-		VSPNames[item.name.toLowerCase()] = item.id;
-	});
-	
+    let VSPNames = {};
+    const allVspList = [
+        ...softwareProductList,
+        ...finalizedSoftwareProductList,
+        ...archivedSoftwareProductList
+    ];
+    allVspList.map(item => {
+        VSPNames[item.name.toLowerCase()] = item.id;
+    });
 
-	return {
-		data: softwareProductCreation.data,
-		selectedVendorId: softwareProductCreation.selectedVendorId,
-		disableVendor: softwareProductCreation.disableVendor,
-		softwareProductCategories,
-		finalizedLicenseModelList,
-		isFormValid,
-		formReady: softwareProductCreation.formReady,
-		genericFieldInfo,
-		VSPNames,
-		usersList
-	};
+    return {
+        data: softwareProductCreation.data,
+        selectedVendorId: softwareProductCreation.selectedVendorId,
+        disableVendor: softwareProductCreation.disableVendor,
+        softwareProductCategories,
+        finalizedLicenseModelList,
+        isFormValid,
+        formReady: softwareProductCreation.formReady,
+        genericFieldInfo,
+        VSPNames,
+        usersList
+    };
 };
 
-export const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onCancel: () => SoftwareProductCreationActionHelper.resetData(dispatch),
-		onSubmit: (softwareProduct, usersList) => {
-			SoftwareProductCreationActionHelper.resetData(dispatch);
-			SoftwareProductCreationActionHelper.createSoftwareProduct(dispatch, {softwareProduct}).then(response => {
-				let {itemId, version} = response;
-				SoftwareProductActionHelper.fetchSoftwareProductList(dispatch).then(() =>
-					PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: usersList}).then(() =>
-						VersionsPageActionHelper.fetchVersions(dispatch, {itemType: versionItemTypes.SOFTWARE_PRODUCT, itemId}).then(() =>
-							ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-								props: {softwareProductId: itemId, version}})
-						)
-					)
-				);
-			});
-		},
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
+export const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onCancel: () => SoftwareProductCreationActionHelper.resetData(dispatch),
+        onSubmit: (softwareProduct, usersList) => {
+            SoftwareProductCreationActionHelper.resetData(dispatch);
+            SoftwareProductCreationActionHelper.createSoftwareProduct(
+                dispatch,
+                { softwareProduct }
+            ).then(response => {
+                let { itemId, version } = response;
+                SoftwareProductActionHelper.fetchSoftwareProductList(
+                    dispatch
+                ).then(() =>
+                    PermissionsActionHelper.fetchItemUsers(dispatch, {
+                        itemId,
+                        allUsers: usersList
+                    }).then(() =>
+                        VersionsPageActionHelper.fetchVersions(dispatch, {
+                            itemType: versionItemTypes.SOFTWARE_PRODUCT,
+                            itemId
+                        }).then(() =>
+                            ScreensHelper.loadScreen(dispatch, {
+                                screen:
+                                    enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                                screenType: screenTypes.SOFTWARE_PRODUCT,
+                                props: { softwareProductId: itemId, version }
+                            })
+                        )
+                    )
+                );
+            });
+        },
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductCreationView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductCreationView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
index b19e460497..1b1fd71fef 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
@@ -17,68 +17,68 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-import {actionTypes as modalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes} from './SoftwareProductCreationConstants.js';
+import {
+    actionTypes as modalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductCreationConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 function baseUrl() {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/`;
 }
 
 function createSoftwareProduct(softwareProduct) {
-	return RestAPIUtil.post(baseUrl(), {
-		...softwareProduct,
-		icon: 'icon',
-		licensingData: {}
-	});
+    return RestAPIUtil.post(baseUrl(), {
+        ...softwareProduct,
+        icon: 'icon',
+        licensingData: {}
+    });
 }
 
 const SoftwareProductCreationActionHelper = {
+    open(dispatch, vendorId) {
+        SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
+        dispatch({
+            type: actionTypes.OPEN,
+            selectedVendorId: vendorId
+        });
 
-	open(dispatch, vendorId) {
-		SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
-		dispatch({
-			type: actionTypes.OPEN,
-			selectedVendorId: vendorId
-		});
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName:
+                    modalContentMapper.SOFTWARE_PRODUCT_CREATION,
+                title: i18n('New Software Product'),
+                modalComponentProps: {
+                    vendorId,
+                    size: modalSizes.LARGE
+                }
+            }
+        });
+    },
 
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_CREATION,
-				title: i18n('New Software Product'),
-				modalComponentProps: {
-					vendorId,
-					size: modalSizes.LARGE
-				}
-			}
-		});
+    resetData(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
 
-	},
-
-	resetData(dispatch) {
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-
-		dispatch({
-			type: actionTypes.RESET_DATA
-		});
-	},
-
-	createSoftwareProduct(dispatch, {softwareProduct}) {
-		return createSoftwareProduct(softwareProduct).then(result => {
-			dispatch({
-				type: actionTypes.SOFTWARE_PRODUCT_CREATED,
-				result
-			});
-			return result;
-		});
-	}
+        dispatch({
+            type: actionTypes.RESET_DATA
+        });
+    },
 
+    createSoftwareProduct(dispatch, { softwareProduct }) {
+        return createSoftwareProduct(softwareProduct).then(result => {
+            dispatch({
+                type: actionTypes.SOFTWARE_PRODUCT_CREATED,
+                result
+            });
+            return result;
+        });
+    }
 };
 
 export default SoftwareProductCreationActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
index b941c849cb..ad1034602a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
@@ -16,9 +16,9 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	OPEN: null,
-	RESET_DATA: null,
-	SOFTWARE_PRODUCT_CREATED: null
+    OPEN: null,
+    RESET_DATA: null,
+    SOFTWARE_PRODUCT_CREATED: null
 });
 
 export const SP_CREATION_FORM_NAME = 'SPCREATIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
index a7db2b2357..5f70f18f75 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
@@ -13,56 +13,70 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, SP_CREATION_FORM_NAME} from './SoftwareProductCreationConstants.js';
-
+import {
+    actionTypes,
+    SP_CREATION_FORM_NAME
+} from './SoftwareProductCreationConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.OPEN:
-			return {
-				...state,
-				formName: SP_CREATION_FORM_NAME,
-				disableVendor: action.selectedVendorId ? true : false,
-				data: {
-					vendorId: action.selectedVendorId ? action.selectedVendorId : undefined
-				},
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'freeEnglishText', data: true}, {type: 'maxLength', data: 1000}, {type: 'required', data: true}]
-					},
-					'vendorId' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					'subCategory' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					'category' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}, {type: 'validateName', data: true}]
-					},
-					'onboardingMethod' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'requiredChooseOption', data: true}]
-					}
-				},
-				showModal: true
-			};
-		case actionTypes.RESET_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.OPEN:
+            return {
+                ...state,
+                formName: SP_CREATION_FORM_NAME,
+                disableVendor: action.selectedVendorId ? true : false,
+                data: {
+                    vendorId: action.selectedVendorId
+                        ? action.selectedVendorId
+                        : undefined
+                },
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'freeEnglishText', data: true },
+                            { type: 'maxLength', data: 1000 },
+                            { type: 'required', data: true }
+                        ]
+                    },
+                    vendorId: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    subCategory: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    category: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 25 },
+                            { type: 'validateName', data: true }
+                        ]
+                    },
+                    onboardingMethod: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'requiredChooseOption', data: true }
+                        ]
+                    }
+                },
+                showModal: true
+            };
+        case actionTypes.RESET_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
index e491491f4d..e94087cc80 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
@@ -22,194 +22,308 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-import {SP_CREATION_FORM_NAME} from './SoftwareProductCreationConstants.js';
+import { SP_CREATION_FORM_NAME } from './SoftwareProductCreationConstants.js';
 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
 
 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
-import {onboardingMethod as onboardingMethodConst} from '../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodConst } from '../SoftwareProductConstants.js';
 
 const SoftwareProductPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	category: PropTypes.string,
-	subCategory: PropTypes.string,
-	vendorId: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    category: PropTypes.string,
+    subCategory: PropTypes.string,
+    vendorId: PropTypes.string
 });
 
 class SoftwareProductCreationView extends React.Component {
+    static propTypes = {
+        data: SoftwareProductPropType,
+        finalizedLicenseModelList: PropTypes.array,
+        softwareProductCategories: PropTypes.array,
+        VSPNames: PropTypes.object,
+        usersList: PropTypes.array,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		data: SoftwareProductPropType,
-		finalizedLicenseModelList: PropTypes.array,
-		softwareProductCategories: PropTypes.array,
-		VSPNames: PropTypes.object,
-		usersList: PropTypes.array,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
-
-	render() {
-		let {softwareProductCategories, data = {}, onDataChanged, onCancel, genericFieldInfo, disableVendor} = this.props;
-		let {name, description, vendorId, subCategory, onboardingMethod} = data;
-
-		const vendorList = this.getVendorList();
-		return (
-			<div className='software-product-creation-page'>
-				{ genericFieldInfo && <Form
-					ref={(validationForm) => this.validationForm = validationForm}
-					hasButtons={true}
-					onSubmit={() => this.submit() }
-					onReset={() => onCancel() }
-					labledButtons={true}
-					isValid={this.props.isFormValid}
-					submitButtonText={i18n('Create')}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.validate() }>
-					<GridSection hasLastColSet>
-						<GridItem colSpan='2'>
-							<Input
-								value={name}
-								label={i18n('Name')}
-								isRequired={true}
-								onChange={name => onDataChanged({name},SP_CREATION_FORM_NAME, {name: name => this.validateName(name)})}
-								isValid={genericFieldInfo.name.isValid}
-								errorText={genericFieldInfo.name.errorText}
-								type='text'
-								className='field-section'
-								data-test-id='new-vsp-name' />
-							<Input
-								label={i18n('Vendor')}
-								type='select'
-								value={vendorId}
-								overlayPos='bottom'
-								isRequired={true}
-								disabled={disableVendor}
-								onChange={e => this.onSelectVendor(e)}
-								isValid={genericFieldInfo.vendorId.isValid}
-								errorText={genericFieldInfo.vendorId.errorText}
-								className='input-options-select'
-								groupClassName='bootstrap-input-options'
-								data-test-id='new-vsp-vendor' >
-								{vendorList.map(vendor =>
-								<option key={vendor.title} value={vendor.enum}>{vendor.title}</option>)}
-							</Input>
-							<Input
-								label={i18n('Category')}
-								type='select'
-								value={subCategory}
-								isRequired={true}
-								onChange={e => this.onSelectSubCategory(e)}
-								isValid={genericFieldInfo.subCategory.isValid}
-								errorText={genericFieldInfo.subCategory.errorText}
-								className='input-options-select'
-								groupClassName='bootstrap-input-options'
-								data-test-id='new-vsp-category' >
-								<option key='' value=''>{i18n('please select…')}</option>
-								{softwareProductCategories.map(category =>
-									category.subcategories &&
-									<optgroup
-										key={category.name}
-										label={category.name}>{category.subcategories.map(sub =>
-										<option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
-									</optgroup>)
-								}
-							</Input>
-						</GridItem>
-						<GridItem colSpan='2' stretch lastColInRow>
-							<Input
-								value={description}
-								label={i18n('Description')}
-								isRequired={true}
-								overlayPos='bottom'
-								onChange={description => onDataChanged({description},SP_CREATION_FORM_NAME)}
-								isValid={genericFieldInfo.description.isValid}
-								errorText={genericFieldInfo.description.errorText}
-								type='textarea'
-								className='field-section'
-								data-test-id='new-vsp-description'/>
-						</GridItem>
-					</GridSection>
-					<OnboardingProcedure genericFieldInfo={genericFieldInfo} onboardingMethod={onboardingMethod} onDataChanged={onDataChanged} />
-				</Form>}
-			</div>
-		);
-	}
-
-	getVendorList() {
-		let {finalizedLicenseModelList} =  this.props;
-
-		return [{enum: '', title: i18n('please select...')}].concat(
-			sortByStringProperty(finalizedLicenseModelList, 'name').map(vendor => {
-				return {
-					enum: vendor.id,
-					title: vendor.name
-				};
-			})
-		);
-	}
-
-	onSelectVendor(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const vendorId = e.target.options[selectedIndex].value;
-		this.props.onDataChanged({vendorId},SP_CREATION_FORM_NAME);
-	}
-
-	onSelectSubCategory(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const subCategory = e.target.options[selectedIndex].value;
-		let {softwareProductCategories, onDataChanged} = this.props;
-		let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
-		onDataChanged({category, subCategory},SP_CREATION_FORM_NAME);
-	}
-
-	submit() {
-		let  {data:softwareProduct, finalizedLicenseModelList, usersList} = this.props;
-		softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).name;
-		this.props.onSubmit(softwareProduct, usersList);
-	}
-
-	validateName(value) {
-		const {data: {id}, VSPNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VSPNames});
-
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('Software product by the name \'' + value + '\' already exists. Software product name must be unique')};
-	}
-
-	validate() {
-		this.props.onValidateForm(SP_CREATION_FORM_NAME);
-	}
+    render() {
+        let {
+            softwareProductCategories,
+            data = {},
+            onDataChanged,
+            onCancel,
+            genericFieldInfo,
+            disableVendor
+        } = this.props;
+        let {
+            name,
+            description,
+            vendorId,
+            subCategory,
+            onboardingMethod
+        } = data;
+
+        const vendorList = this.getVendorList();
+        return (
+            <div className="software-product-creation-page">
+                {genericFieldInfo && (
+                    <Form
+                        ref={validationForm =>
+                            (this.validationForm = validationForm)
+                        }
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isValid={this.props.isFormValid}
+                        submitButtonText={i18n('Create')}
+                        formReady={this.props.formReady}
+                        onValidateForm={() => this.validate()}>
+                        <GridSection hasLastColSet>
+                            <GridItem colSpan="2">
+                                <Input
+                                    value={name}
+                                    label={i18n('Name')}
+                                    isRequired={true}
+                                    onChange={name =>
+                                        onDataChanged(
+                                            { name },
+                                            SP_CREATION_FORM_NAME,
+                                            {
+                                                name: name =>
+                                                    this.validateName(name)
+                                            }
+                                        )
+                                    }
+                                    isValid={genericFieldInfo.name.isValid}
+                                    errorText={genericFieldInfo.name.errorText}
+                                    type="text"
+                                    className="field-section"
+                                    data-test-id="new-vsp-name"
+                                />
+                                <Input
+                                    label={i18n('Vendor')}
+                                    type="select"
+                                    value={vendorId}
+                                    overlayPos="bottom"
+                                    isRequired={true}
+                                    disabled={disableVendor}
+                                    onChange={e => this.onSelectVendor(e)}
+                                    isValid={genericFieldInfo.vendorId.isValid}
+                                    errorText={
+                                        genericFieldInfo.vendorId.errorText
+                                    }
+                                    className="input-options-select"
+                                    groupClassName="bootstrap-input-options"
+                                    data-test-id="new-vsp-vendor">
+                                    {vendorList.map(vendor => (
+                                        <option
+                                            key={vendor.title}
+                                            value={vendor.enum}>
+                                            {vendor.title}
+                                        </option>
+                                    ))}
+                                </Input>
+                                <Input
+                                    label={i18n('Category')}
+                                    type="select"
+                                    value={subCategory}
+                                    isRequired={true}
+                                    onChange={e => this.onSelectSubCategory(e)}
+                                    isValid={
+                                        genericFieldInfo.subCategory.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.subCategory.errorText
+                                    }
+                                    className="input-options-select"
+                                    groupClassName="bootstrap-input-options"
+                                    data-test-id="new-vsp-category">
+                                    <option key="" value="">
+                                        {i18n('please select…')}
+                                    </option>
+                                    {softwareProductCategories.map(
+                                        category =>
+                                            category.subcategories && (
+                                                <optgroup
+                                                    key={category.name}
+                                                    label={category.name}>
+                                                    {category.subcategories.map(
+                                                        sub => (
+                                                            <option
+                                                                key={
+                                                                    sub.uniqueId
+                                                                }
+                                                                value={
+                                                                    sub.uniqueId
+                                                                }>{`${
+                                                                sub.name
+                                                            } (${
+                                                                category.name
+                                                            })`}</option>
+                                                        )
+                                                    )}
+                                                </optgroup>
+                                            )
+                                    )}
+                                </Input>
+                            </GridItem>
+                            <GridItem colSpan="2" stretch lastColInRow>
+                                <Input
+                                    value={description}
+                                    label={i18n('Description')}
+                                    isRequired={true}
+                                    overlayPos="bottom"
+                                    onChange={description =>
+                                        onDataChanged(
+                                            { description },
+                                            SP_CREATION_FORM_NAME
+                                        )
+                                    }
+                                    isValid={
+                                        genericFieldInfo.description.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.description.errorText
+                                    }
+                                    type="textarea"
+                                    className="field-section"
+                                    data-test-id="new-vsp-description"
+                                />
+                            </GridItem>
+                        </GridSection>
+                        <OnboardingProcedure
+                            genericFieldInfo={genericFieldInfo}
+                            onboardingMethod={onboardingMethod}
+                            onDataChanged={onDataChanged}
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
+
+    getVendorList() {
+        let { finalizedLicenseModelList } = this.props;
+
+        return [{ enum: '', title: i18n('please select...') }].concat(
+            sortByStringProperty(finalizedLicenseModelList, 'name').map(
+                vendor => {
+                    return {
+                        enum: vendor.id,
+                        title: vendor.name
+                    };
+                }
+            )
+        );
+    }
+
+    onSelectVendor(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const vendorId = e.target.options[selectedIndex].value;
+        this.props.onDataChanged({ vendorId }, SP_CREATION_FORM_NAME);
+    }
+
+    onSelectSubCategory(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const subCategory = e.target.options[selectedIndex].value;
+        let { softwareProductCategories, onDataChanged } = this.props;
+        let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(
+            subCategory,
+            softwareProductCategories
+        );
+        onDataChanged({ category, subCategory }, SP_CREATION_FORM_NAME);
+    }
+
+    submit() {
+        let {
+            data: softwareProduct,
+            finalizedLicenseModelList,
+            usersList
+        } = this.props;
+        softwareProduct.vendorName = finalizedLicenseModelList.find(
+            vendor => vendor.id === softwareProduct.vendorId
+        ).name;
+        this.props.onSubmit(softwareProduct, usersList);
+    }
+
+    validateName(value) {
+        const { data: { id }, VSPNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: VSPNames
+        });
+
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Software product by the name '" +
+                          value +
+                          "' already exists. Software product name must be unique"
+                  )
+              };
+    }
+
+    validate() {
+        this.props.onValidateForm(SP_CREATION_FORM_NAME);
+    }
 }
 
-const OnboardingProcedure = ({onboardingMethod, onDataChanged, genericFieldInfo}) => {
-	return(
-		<GridSection title={i18n('Onboarding procedure')}>
-			<GridItem colSpan={4}>
-				<Input
-					label={i18n('Network Package')}
-					overlayPos='top'
-					isValid={genericFieldInfo.onboardingMethod.isValid}
-					checked={onboardingMethod === onboardingMethodConst.NETWORK_PACKAGE}
-					errorText={genericFieldInfo.onboardingMethod.errorText}
-					onChange={() => onDataChanged({onboardingMethod: onboardingMethodConst.NETWORK_PACKAGE},SP_CREATION_FORM_NAME)}
-					type='radio'
-					data-test-id='new-vsp-creation-procedure-heat' />
-			</GridItem>
-			<GridItem colSpan={4}>
-				<Input
-					label={i18n('Manual')}
-					overlayPos='bottom'
-					checked={onboardingMethod === onboardingMethodConst.MANUAL}
-					isValid={genericFieldInfo.onboardingMethod.isValid}
-					errorText={genericFieldInfo.onboardingMethod.errorText}
-					onChange={() => onDataChanged({onboardingMethod: onboardingMethodConst.MANUAL},SP_CREATION_FORM_NAME)}
-					type='radio'
-					data-test-id='new-vsp-creation-procedure-manual' />
-			</GridItem>
-		</GridSection>
-	);
+const OnboardingProcedure = ({
+    onboardingMethod,
+    onDataChanged,
+    genericFieldInfo
+}) => {
+    return (
+        <GridSection title={i18n('Onboarding procedure')}>
+            <GridItem colSpan={4}>
+                <Input
+                    label={i18n('Network Package')}
+                    overlayPos="top"
+                    isValid={genericFieldInfo.onboardingMethod.isValid}
+                    checked={
+                        onboardingMethod ===
+                        onboardingMethodConst.NETWORK_PACKAGE
+                    }
+                    errorText={genericFieldInfo.onboardingMethod.errorText}
+                    onChange={() =>
+                        onDataChanged(
+                            {
+                                onboardingMethod:
+                                    onboardingMethodConst.NETWORK_PACKAGE
+                            },
+                            SP_CREATION_FORM_NAME
+                        )
+                    }
+                    type="radio"
+                    data-test-id="new-vsp-creation-procedure-heat"
+                />
+            </GridItem>
+            <GridItem colSpan={4}>
+                <Input
+                    label={i18n('Manual')}
+                    overlayPos="bottom"
+                    checked={onboardingMethod === onboardingMethodConst.MANUAL}
+                    isValid={genericFieldInfo.onboardingMethod.isValid}
+                    errorText={genericFieldInfo.onboardingMethod.errorText}
+                    onChange={() =>
+                        onDataChanged(
+                            { onboardingMethod: onboardingMethodConst.MANUAL },
+                            SP_CREATION_FORM_NAME
+                        )
+                    }
+                    type="radio"
+                    data-test-id="new-vsp-creation-procedure-manual"
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default SoftwareProductCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
index 9888087800..1a0c66d70e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
@@ -13,25 +13,48 @@
  * 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 SoftwareProductDependenciesView from './SoftwareProductDependenciesView.jsx';
 import SoftwareProductDependenciesActionHelper from './SoftwareProductDependenciesActionHelper.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct;
-	return {
-		softwareProductDependencies: softwareProductDependencies,
-		componentsOptions: componentsList.map(component => ({value: component.id, label: component.displayName}))
-	};
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductDependencies,
+        softwareProductComponents: { componentsList }
+    } = softwareProduct;
+    return {
+        softwareProductDependencies: softwareProductDependencies,
+        componentsOptions: componentsList.map(component => ({
+            value: component.id,
+            label: component.displayName
+        }))
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDataChanged: (item) => SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {softwareProductId, version, item}),
-		onDeleteDependency: (item) => SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {softwareProductId, version, item}),
-		onAddDependency: (item) => SoftwareProductDependenciesActionHelper.createDependency(dispatch, {softwareProductId, version, item})
-	};
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDataChanged: item =>
+            SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {
+                softwareProductId,
+                version,
+                item
+            }),
+        onDeleteDependency: item =>
+            SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {
+                softwareProductId,
+                version,
+                item
+            }),
+        onAddDependency: item =>
+            SoftwareProductDependenciesActionHelper.createDependency(dispatch, {
+                softwareProductId,
+                version,
+                item
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductDependenciesView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductDependenciesView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
index f04f8faf56..4bbcaa13d5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
@@ -15,83 +15,99 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
+import {
+    actionTypes,
+    NEW_RULE_TEMP_ID
+} from './SoftwareProductDependenciesConstants.js';
 
 function baseUrl(softwareProductId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`;
 }
 
 function fetchDependencies(softwareProductId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
 function addDepencency(softwareProductId, version, item) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
-		sourceId: item.sourceId,
-		targetId: item.targetId,
-		relationType: item.relationType
-	});
+    return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+        sourceId: item.sourceId,
+        targetId: item.targetId,
+        relationType: item.relationType
+    });
 }
 
-
 function updateDepencency(softwareProductId, version, item) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${item.id}`,
-		{
-			sourceId: item.sourceId,
-			targetId: item.targetId,
-			relationType: item.relationType
-		});
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version)}/${item.id}`,
+        {
+            sourceId: item.sourceId,
+            targetId: item.targetId,
+            relationType: item.relationType
+        }
+    );
 }
 
 function removeDependency(softwareProductId, version, item) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${item.id}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version)}/${item.id}`
+    );
 }
 
-
 const SoftwareProductDependenciesActionHelper = {
-	updateDependency(dispatch, {softwareProductId, version, item}) {
-		// if change was made on existing item - we will update the server and refresh the list
-		// if change was made on the 'new' row - we will only fire the event
-		if (item.id !== NEW_RULE_TEMP_ID) {
-			return updateDepencency(softwareProductId, version, item).then(() => {
-				return this.fetchDependencies(dispatch, {softwareProductId, version});
-			});
-		} else {
-			dispatch({
-				type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY,
-				item: item
-			});
-		}
-	},
+    updateDependency(dispatch, { softwareProductId, version, item }) {
+        // if change was made on existing item - we will update the server and refresh the list
+        // if change was made on the 'new' row - we will only fire the event
+        if (item.id !== NEW_RULE_TEMP_ID) {
+            return updateDepencency(softwareProductId, version, item).then(
+                () => {
+                    return this.fetchDependencies(dispatch, {
+                        softwareProductId,
+                        version
+                    });
+                }
+            );
+        } else {
+            dispatch({
+                type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY,
+                item: item
+            });
+        }
+    },
 
-	createDependency(dispatch, {softwareProductId, version, item}) {
-		// removing the temp id
-		delete item.id;
-		// creating the new dependency
-		return addDepencency(softwareProductId, version, item).then(() => {
-			dispatch({
-				type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY
-			});
-			return this.fetchDependencies(dispatch, {softwareProductId, version});
-		});
-	},
+    createDependency(dispatch, { softwareProductId, version, item }) {
+        // removing the temp id
+        delete item.id;
+        // creating the new dependency
+        return addDepencency(softwareProductId, version, item).then(() => {
+            dispatch({
+                type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY
+            });
+            return this.fetchDependencies(dispatch, {
+                softwareProductId,
+                version
+            });
+        });
+    },
 
-	removeDependency(dispatch, {softwareProductId, version, item}) {
-		return removeDependency(softwareProductId, version, item).then( () => {
-			return this.fetchDependencies(dispatch, {softwareProductId, version});
-		});
-	},
+    removeDependency(dispatch, { softwareProductId, version, item }) {
+        return removeDependency(softwareProductId, version, item).then(() => {
+            return this.fetchDependencies(dispatch, {
+                softwareProductId,
+                version
+            });
+        });
+    },
 
-	fetchDependencies(dispatch, {softwareProductId, version}) {
-		return fetchDependencies(softwareProductId, version).then( response => {
-			dispatch({
-				type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE,
-				dependenciesList : response.results
-			});
-		});
-	}
+    fetchDependencies(dispatch, { softwareProductId, version }) {
+        return fetchDependencies(softwareProductId, version).then(response => {
+            dispatch({
+                type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE,
+                dependenciesList: response.results
+            });
+        });
+    }
 };
 
 export default SoftwareProductDependenciesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
index c25561da17..32c7387ca2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
@@ -16,17 +16,17 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null,
-	ADD_SOFTWARE_PRODUCT_DEPENDENCY: null,
-	UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null
+    SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null,
+    ADD_SOFTWARE_PRODUCT_DEPENDENCY: null,
+    UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null
 });
 
 export const relationTypes = {
-	DEPENDS_ON: 'dependsOn'
+    DEPENDS_ON: 'dependsOn'
 };
 
 export const relationTypesOptions = [
-    {value: relationTypes.DEPENDS_ON, label: 'Depends On'}
+    { value: relationTypes.DEPENDS_ON, label: 'Depends On' }
 ];
 
-export const NEW_RULE_TEMP_ID = 'newRuleTempId';
\ No newline at end of file
+export const NEW_RULE_TEMP_ID = 'newRuleTempId';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
index 3edd3b899a..6e028b1ff2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
@@ -1,4 +1,3 @@
-
 /*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
  *
@@ -15,32 +14,47 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, relationTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
-import {checkCyclesAndMarkDependencies} from './SoftwareProductDependenciesUtils.js';
+import {
+    actionTypes,
+    relationTypes,
+    NEW_RULE_TEMP_ID
+} from './SoftwareProductDependenciesConstants.js';
+import { checkCyclesAndMarkDependencies } from './SoftwareProductDependenciesUtils.js';
 
-let newRowObject = {id: NEW_RULE_TEMP_ID, targetId: null, sourceId: null, relationType: relationTypes.DEPENDS_ON};
+let newRowObject = {
+    id: NEW_RULE_TEMP_ID,
+    targetId: null,
+    sourceId: null,
+    relationType: relationTypes.DEPENDS_ON
+};
 
-export default (state = [Object.assign({}, newRowObject) ], action) => {
-	switch (action.type) {
-		case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE:
-			// copying the entity with the data for the row that is in the 'add' mode
-			let newDependency = state.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
-			action.dependenciesList.push(newDependency);
-			// returning list from the server with our 'new entity' row
-			return checkCyclesAndMarkDependencies(action.dependenciesList);
-		case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY :
-			// resetting the entity with the data for the 'add' mode for a new entity
-			let newArray = state.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
-			newArray.push(Object.assign({}, newRowObject));
-			return newArray;
-		case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY :
-			// we really only need this for the 'new' row since we need to change the state to get
-			// everything updated
-			let updateArrayIndex = state.findIndex(dependency => dependency.id === NEW_RULE_TEMP_ID);
-			let updateArray = state.slice();
-			updateArray.splice(updateArrayIndex, 1, action.item);
-			return checkCyclesAndMarkDependencies(updateArray);
-		default:
-			return state;
-	}
+export default (state = [Object.assign({}, newRowObject)], action) => {
+    switch (action.type) {
+        case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE:
+            // copying the entity with the data for the row that is in the 'add' mode
+            let newDependency = state.find(
+                dependency => dependency.id === NEW_RULE_TEMP_ID
+            );
+            action.dependenciesList.push(newDependency);
+            // returning list from the server with our 'new entity' row
+            return checkCyclesAndMarkDependencies(action.dependenciesList);
+        case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY:
+            // resetting the entity with the data for the 'add' mode for a new entity
+            let newArray = state.filter(
+                dependency => dependency.id !== NEW_RULE_TEMP_ID
+            );
+            newArray.push(Object.assign({}, newRowObject));
+            return newArray;
+        case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY:
+            // we really only need this for the 'new' row since we need to change the state to get
+            // everything updated
+            let updateArrayIndex = state.findIndex(
+                dependency => dependency.id === NEW_RULE_TEMP_ID
+            );
+            let updateArray = state.slice();
+            updateArray.splice(updateArrayIndex, 1, action.item);
+            return checkCyclesAndMarkDependencies(updateArray);
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js
index 94d21bd49d..8d5aaf864e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js
@@ -16,49 +16,77 @@
 
 import DirectedGraph from 'nfvo-utils/DirectedGraph.js';
 
-function findCycles(graph, node, id, visited = {}, visitedConnections = {}, recursionStack = {}, connectionsWithCycle = {}) {
-	visited[node] = true;
-	recursionStack[node] = true;
-	if (id) {
-		visitedConnections[id] = true;
-	}
-	for (let edge of graph.getEdges(node)) {
-		if (!visited[edge.target]) {
-			findCycles(graph, edge.target, edge.id, visited, visitedConnections, recursionStack, connectionsWithCycle);
-		} else if (recursionStack[edge.target]) {
-			visitedConnections[edge.id] = true;
-			for (let connection in visitedConnections) {
-				connectionsWithCycle[connection] = true;
-			}
-		}
-	}
-	recursionStack[node] = false;
-	return {visitedNodes: visited, connectionsWithCycle: connectionsWithCycle};
+function findCycles(
+    graph,
+    node,
+    id,
+    visited = {},
+    visitedConnections = {},
+    recursionStack = {},
+    connectionsWithCycle = {}
+) {
+    visited[node] = true;
+    recursionStack[node] = true;
+    if (id) {
+        visitedConnections[id] = true;
+    }
+    for (let edge of graph.getEdges(node)) {
+        if (!visited[edge.target]) {
+            findCycles(
+                graph,
+                edge.target,
+                edge.id,
+                visited,
+                visitedConnections,
+                recursionStack,
+                connectionsWithCycle
+            );
+        } else if (recursionStack[edge.target]) {
+            visitedConnections[edge.id] = true;
+            for (let connection in visitedConnections) {
+                connectionsWithCycle[connection] = true;
+            }
+        }
+    }
+    recursionStack[node] = false;
+    return {
+        visitedNodes: visited,
+        connectionsWithCycle: connectionsWithCycle
+    };
 }
 
 export function checkCyclesAndMarkDependencies(dependenciesList) {
-	let overallVisitedNodes = {};
-	let overallConnectionsWithCycles = {};
+    let overallVisitedNodes = {};
+    let overallConnectionsWithCycles = {};
 
-	let g = new DirectedGraph();
-	for (let dependency of dependenciesList) {
-		if (dependency.sourceId !== null && dependency.targetId !== null) {
-			g.addEdge(dependency.sourceId, dependency.targetId, {id: dependency.id});
-		}
-	}
+    let g = new DirectedGraph();
+    for (let dependency of dependenciesList) {
+        if (dependency.sourceId !== null && dependency.targetId !== null) {
+            g.addEdge(dependency.sourceId, dependency.targetId, {
+                id: dependency.id
+            });
+        }
+    }
 
-	for (let node in g.nodes) {
-		if (!overallVisitedNodes.node) {
-			let {visitedNodes, connectionsWithCycle} = findCycles(g, node, undefined);
-			overallVisitedNodes = {...overallVisitedNodes, ...visitedNodes};
-			overallConnectionsWithCycles = {...overallConnectionsWithCycles, ...connectionsWithCycle};
-		}
-	}
-	return dependenciesList.map(dependency => (
-		{
-			...dependency,
-			 hasCycle: dependency.sourceId && dependency.targetId ? 
-			 	overallConnectionsWithCycles.hasOwnProperty(dependency.id) 
-				 : undefined
-		}));
+    for (let node in g.nodes) {
+        if (!overallVisitedNodes.node) {
+            let { visitedNodes, connectionsWithCycle } = findCycles(
+                g,
+                node,
+                undefined
+            );
+            overallVisitedNodes = { ...overallVisitedNodes, ...visitedNodes };
+            overallConnectionsWithCycles = {
+                ...overallConnectionsWithCycles,
+                ...connectionsWithCycle
+            };
+        }
+    }
+    return dependenciesList.map(dependency => ({
+        ...dependency,
+        hasCycle:
+            dependency.sourceId && dependency.targetId
+                ? overallConnectionsWithCycles.hasOwnProperty(dependency.id)
+                : undefined
+    }));
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
index ed92de7bb1..3ea1f2d5cc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
@@ -20,111 +20,201 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
 import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
 import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
-import {relationTypesOptions, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
+import {
+    relationTypesOptions,
+    NEW_RULE_TEMP_ID
+} from './SoftwareProductDependenciesConstants.js';
 
-
-const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => {
-	return (
-		<SelectActionTableRow
-			key={dependency.id}
-			onAction={onAction}
-			overlayMsg={i18n('There is a loop between selections')}
-			hasError={dependency.hasCycle}
-			hasErrorIndication
-			showAction={showAction}
-			actionIcon={actionIcon}>
-			<SelectActionTableCell
-				options={sourceOptions}
-				selected={dependency.sourceId}
-				placeholder={i18n('Select VFC...')}
-				clearable={false}
-				onChange={newVal =>  {
-					dependency.sourceId = newVal;
-					onDataChanged(dependency);
-				}} />
-			<SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
-			<SelectActionTableCell
-				placeholder={i18n('Select VFC...')}
-				options={targetOptions}
-				selected={dependency.targetId}
-				clearable={false}
-				onChange={newVal =>  {
-					dependency.targetId = newVal;
-					onDataChanged(dependency);
-				}} />
-		</SelectActionTableRow>
-	);
+const TableActionRow = ({
+    onAction,
+    actionIcon,
+    showAction,
+    dependency,
+    sourceOptions,
+    targetOptions,
+    onDataChanged
+}) => {
+    return (
+        <SelectActionTableRow
+            key={dependency.id}
+            onAction={onAction}
+            overlayMsg={i18n('There is a loop between selections')}
+            hasError={dependency.hasCycle}
+            hasErrorIndication
+            showAction={showAction}
+            actionIcon={actionIcon}>
+            <SelectActionTableCell
+                options={sourceOptions}
+                selected={dependency.sourceId}
+                placeholder={i18n('Select VFC...')}
+                clearable={false}
+                onChange={newVal => {
+                    dependency.sourceId = newVal;
+                    onDataChanged(dependency);
+                }}
+            />
+            <SelectActionTableCell
+                options={relationTypesOptions}
+                selected={dependency.relationType}
+                clearable={false}
+            />
+            <SelectActionTableCell
+                placeholder={i18n('Select VFC...')}
+                options={targetOptions}
+                selected={dependency.targetId}
+                clearable={false}
+                onChange={newVal => {
+                    dependency.targetId = newVal;
+                    onDataChanged(dependency);
+                }}
+            />
+        </SelectActionTableRow>
+    );
 };
 
-
 export default class SoftwareProductDependenciesView extends React.Component {
-	filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
-		let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
-		return componentsOptions.filter(component => {
-			if (component.value === selectedTargetId) {
-				return true;
-			} else {
-				return component.value !== selectedSourceId && (isInMap ? sourceToTargetMapping[selectedSourceId].indexOf(component.value) < 0 : true);
-			}
-		});
-	}
-
-	filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
-		return componentsOptions.filter(component => {
-			if (component.value === selectedSourceId) {
-				return true;
-			} else {
-				let isInMap = sourceToTargetMapping.hasOwnProperty(component.value);
-				return component.value !== selectedTargetId && (isInMap ? sourceToTargetMapping[component.value].indexOf(selectedTargetId) < 0 : true);
-			}
-		});
-	}
+    filterTargets({
+        componentsOptions,
+        sourceToTargetMapping,
+        selectedSourceId,
+        selectedTargetId
+    }) {
+        let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
+        return componentsOptions.filter(component => {
+            if (component.value === selectedTargetId) {
+                return true;
+            } else {
+                return (
+                    component.value !== selectedSourceId &&
+                    (isInMap
+                        ? sourceToTargetMapping[selectedSourceId].indexOf(
+                              component.value
+                          ) < 0
+                        : true)
+                );
+            }
+        });
+    }
 
-	render() {
-		let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props;
-		let sourceToTargetMapping = {};
-		softwareProductDependencies.map(dependency => {
-			let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId);
-			if (dependency.targetId) {
-				sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId];
-			}
-		});
-		let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
-		let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
-		return (
-			<div className='software-product-dependencies'>
-				<div className='page-title'>{i18n('Dependencies')}</div>
-				<SelectActionTable
-					columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]}
-					numOfIcons={2}
-					isReadOnlyMode={isReadOnlyMode}>
-					{!isReadOnlyMode && <TableActionRow
-						key={newDependency.id}
-						actionIcon='plusCircle'
-						onAction={() => onAddDependency(newDependency)}
-						dependency={newDependency}
-						componentsOptions={componentsOptions}
-						sourceToTargetMapping={sourceToTargetMapping}
-						onDataChanged={onDataChanged}
-						sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
-						targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
-						showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> }
-					{depList.map(dependency => (
-						<TableActionRow
-							key={dependency.id}
-							actionIcon='trashO'
-							onAction={() => onDeleteDependency(dependency)}
-							dependency={dependency}
-							componentsOptions={componentsOptions}
-							sourceToTargetMapping={sourceToTargetMapping}
-							sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-							targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-							onDataChanged={onDataChanged}
-							showAction={true}/>
-					))}
-				</SelectActionTable>
-			</div>
-		);
-	}
+    filterSources({
+        componentsOptions,
+        sourceToTargetMapping,
+        selectedSourceId,
+        selectedTargetId
+    }) {
+        return componentsOptions.filter(component => {
+            if (component.value === selectedSourceId) {
+                return true;
+            } else {
+                let isInMap = sourceToTargetMapping.hasOwnProperty(
+                    component.value
+                );
+                return (
+                    component.value !== selectedTargetId &&
+                    (isInMap
+                        ? sourceToTargetMapping[component.value].indexOf(
+                              selectedTargetId
+                          ) < 0
+                        : true)
+                );
+            }
+        });
+    }
 
+    render() {
+        let {
+            componentsOptions,
+            softwareProductDependencies,
+            onDataChanged,
+            onAddDependency,
+            onDeleteDependency,
+            isReadOnlyMode
+        } = this.props;
+        let sourceToTargetMapping = {};
+        softwareProductDependencies.map(dependency => {
+            let isInMap = sourceToTargetMapping.hasOwnProperty(
+                dependency.sourceId
+            );
+            if (dependency.targetId) {
+                sourceToTargetMapping[dependency.sourceId] = isInMap
+                    ? [
+                          ...sourceToTargetMapping[dependency.sourceId],
+                          dependency.targetId
+                      ]
+                    : [dependency.targetId];
+            }
+        });
+        let depList = softwareProductDependencies.filter(
+            dependency => dependency.id !== NEW_RULE_TEMP_ID
+        );
+        let newDependency = softwareProductDependencies.find(
+            dependency => dependency.id === NEW_RULE_TEMP_ID
+        );
+        return (
+            <div className="software-product-dependencies">
+                <div className="page-title">{i18n('Dependencies')}</div>
+                <SelectActionTable
+                    columns={[
+                        i18n('Source'),
+                        i18n('Relation Type'),
+                        i18n('Target')
+                    ]}
+                    numOfIcons={2}
+                    isReadOnlyMode={isReadOnlyMode}>
+                    {!isReadOnlyMode && (
+                        <TableActionRow
+                            key={newDependency.id}
+                            actionIcon="plusCircle"
+                            onAction={() => onAddDependency(newDependency)}
+                            dependency={newDependency}
+                            componentsOptions={componentsOptions}
+                            sourceToTargetMapping={sourceToTargetMapping}
+                            onDataChanged={onDataChanged}
+                            sourceOptions={this.filterSources({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: newDependency.sourceId,
+                                selectedTargetId: newDependency.targetId
+                            })}
+                            targetOptions={this.filterTargets({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: newDependency.sourceId,
+                                selectedTargetId: newDependency.targetId
+                            })}
+                            showAction={
+                                newDependency.targetId !== null &&
+                                newDependency.relationType !== null &&
+                                newDependency.sourceId !== null
+                            }
+                        />
+                    )}
+                    {depList.map(dependency => (
+                        <TableActionRow
+                            key={dependency.id}
+                            actionIcon="trashO"
+                            onAction={() => onDeleteDependency(dependency)}
+                            dependency={dependency}
+                            componentsOptions={componentsOptions}
+                            sourceToTargetMapping={sourceToTargetMapping}
+                            sourceOptions={this.filterSources({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: dependency.sourceId,
+                                selectedTargetId: dependency.targetId
+                            })}
+                            targetOptions={this.filterTargets({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: dependency.sourceId,
+                                selectedTargetId: dependency.targetId
+                            })}
+                            onDataChanged={onDataChanged}
+                            showAction={true}
+                        />
+                    ))}
+                </SelectActionTable>
+            </div>
+        );
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
index a5c70068b0..4e03926ac5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
@@ -13,37 +13,70 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductDeploymentView from './SoftwareProductDeploymentView.jsx';
 import SoftwareProductDeploymentActionHelper from './SoftwareProductDeploymentActionHelper.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-export function mapStateToProps({softwareProduct}) {
-	let {softwareProductComponents: {componentsList}, softwareProductDeployment: {deploymentFlavors}} = softwareProduct;
-	return {
-		deploymentFlavors,
-		componentsList
-	};
+export function mapStateToProps({ softwareProduct }) {
+    let {
+        softwareProductComponents: { componentsList },
+        softwareProductDeployment: { deploymentFlavors }
+    } = softwareProduct;
+    return {
+        deploymentFlavors,
+        componentsList
+    };
 }
 
-function mapActionToProps(dispatch, {softwareProductId, version}) {
-	let modalClassName = 'deployment-flavor-editor';
-	return {
-		onAddDeployment: componentsList => SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(dispatch, {softwareProductId, modalClassName, componentsList, version}),
-		onDeleteDeployment: ({id, model}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{model}"?', {model: model}),
-				onConfirmed: () => SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: id, version})
-			}
-		}),
-		onEditDeployment: (deploymentFlavor, componentsList) =>
-			SoftwareProductDeploymentActionHelper.fetchDeploymentFlavor({softwareProductId, deploymentFlavorId: deploymentFlavor.id, version}).then(response =>
-				SoftwareProductDeploymentActionHelper
-					.openDeploymentFlavorEditor(dispatch, {softwareProductId, componentsList, modalClassName, deploymentFlavor: {...response.data, id: response.id}, isEdit: true, version}),
-			)
-	};
+function mapActionToProps(dispatch, { softwareProductId, version }) {
+    let modalClassName = 'deployment-flavor-editor';
+    return {
+        onAddDeployment: componentsList =>
+            SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(
+                dispatch,
+                { softwareProductId, modalClassName, componentsList, version }
+            ),
+        onDeleteDeployment: ({ id, model }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{model}"?', {
+                        model: model
+                    }),
+                    onConfirmed: () =>
+                        SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(
+                            dispatch,
+                            {
+                                softwareProductId,
+                                deploymentFlavorId: id,
+                                version
+                            }
+                        )
+                }
+            }),
+        onEditDeployment: (deploymentFlavor, componentsList) =>
+            SoftwareProductDeploymentActionHelper.fetchDeploymentFlavor({
+                softwareProductId,
+                deploymentFlavorId: deploymentFlavor.id,
+                version
+            }).then(response =>
+                SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(
+                    dispatch,
+                    {
+                        softwareProductId,
+                        componentsList,
+                        modalClassName,
+                        deploymentFlavor: { ...response.data, id: response.id },
+                        isEdit: true,
+                        version
+                    }
+                )
+            )
+    };
 }
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(SoftwareProductDeploymentView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductDeploymentView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
index bd802b38f4..44b25311e0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
@@ -1,101 +1,183 @@
-import {actionTypes} from './SoftwareProductDeploymentConstants.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductDeploymentConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import pickBy from 'lodash/pickBy';
 
 function baseUrl(vspId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/deployment-flavors`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/deployment-flavors`;
 }
 
-function fetchDeploymentFlavorsList({softwareProductId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+function fetchDeploymentFlavorsList({ softwareProductId, version }) {
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-function fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`);
+function fetchDeploymentFlavor({
+    softwareProductId,
+    deploymentFlavorId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`
+    );
 }
 
-function deleteDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`);
+function deleteDeploymentFlavor({
+    softwareProductId,
+    deploymentFlavorId,
+    version
+}) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`
+    );
 }
 
-function createDeploymentFlavor({softwareProductId, data, version}) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, data);
+function createDeploymentFlavor({ softwareProductId, data, version }) {
+    return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, data);
 }
 
-function editDeploymentFlavor({softwareProductId, deploymentFlavorId, data, version}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`, data);
+function editDeploymentFlavor({
+    softwareProductId,
+    deploymentFlavorId,
+    data,
+    version
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`,
+        data
+    );
 }
 
 const SoftwareProductDeploymentActionHelper = {
-	fetchDeploymentFlavorsList(dispatch, {softwareProductId, version}) {
-		return fetchDeploymentFlavorsList({softwareProductId, version}).then(response => {
-			dispatch({
-				type: actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS,
-				deploymentFlavors: response.results
-			});
-		});
-	},
+    fetchDeploymentFlavorsList(dispatch, { softwareProductId, version }) {
+        return fetchDeploymentFlavorsList({ softwareProductId, version }).then(
+            response => {
+                dispatch({
+                    type: actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS,
+                    deploymentFlavors: response.results
+                });
+            }
+        );
+    },
 
-	fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
-		return fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version});
-	},
+    fetchDeploymentFlavor({ softwareProductId, deploymentFlavorId, version }) {
+        return fetchDeploymentFlavor({
+            softwareProductId,
+            deploymentFlavorId,
+            version
+        });
+    },
 
-	deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId, version}) {
-		return deleteDeploymentFlavor({softwareProductId, deploymentFlavorId, version}).then(() => {
-			return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
-		});
-	},
+    deleteDeploymentFlavor(
+        dispatch,
+        { softwareProductId, deploymentFlavorId, version }
+    ) {
+        return deleteDeploymentFlavor({
+            softwareProductId,
+            deploymentFlavorId,
+            version
+        }).then(() => {
+            return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
-	createDeploymentFlavor(dispatch, {softwareProductId, data, version}) {
-		return createDeploymentFlavor({softwareProductId, data, version}).then(() => {
-			return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
-		});
-	},
+    createDeploymentFlavor(dispatch, { softwareProductId, data, version }) {
+        return createDeploymentFlavor({
+            softwareProductId,
+            data,
+            version
+        }).then(() => {
+            return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
-	editDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId, data, version}) {
-		let dataWithoutId = pickBy(data, (val, key) => key !== 'id');
-		return editDeploymentFlavor({softwareProductId, deploymentFlavorId, data: dataWithoutId, version}).then(() => {
-			return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
-		});
-	},
+    editDeploymentFlavor(
+        dispatch,
+        { softwareProductId, deploymentFlavorId, data, version }
+    ) {
+        let dataWithoutId = pickBy(data, (val, key) => key !== 'id');
+        return editDeploymentFlavor({
+            softwareProductId,
+            deploymentFlavorId,
+            data: dataWithoutId,
+            version
+        }).then(() => {
+            return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+                dispatch,
+                { softwareProductId, version }
+            );
+        });
+    },
 
-	closeDeploymentFlavorEditor(dispatch) {
-		dispatch({
-			type: actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA
-		});
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_CLOSE
-		});
-	},
+    closeDeploymentFlavorEditor(dispatch) {
+        dispatch({
+            type:
+                actionTypes.deploymentFlavorEditor
+                    .SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA
+        });
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_CLOSE
+        });
+    },
 
-	openDeploymentFlavorEditor(dispatch, {softwareProductId, modalClassName, deploymentFlavor = {}, componentsList, isEdit = false, version}) {
-		let alteredDeploymentFlavor = {...deploymentFlavor};
-		if (componentsList.length) {
-			alteredDeploymentFlavor = {...alteredDeploymentFlavor, componentComputeAssociations: deploymentFlavor.componentComputeAssociations ?
-				[{...deploymentFlavor.componentComputeAssociations[0], componentId: componentsList[0].id}]
-			 	:
-				[{componentId: componentsList[0].id, computeFlavorId: null}]
-			};
-		}
-		dispatch({
-			type: actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA,
-			deploymentFlavor: alteredDeploymentFlavor
-		});
-		dispatch({
-			type: GlobalModalActions.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.DEPLOYMENT_FLAVOR_EDITOR,
-				modalComponentProps: {softwareProductId, version},
-				modalClassName,
-				title: isEdit ? 'Edit Deployment Flavor' : 'Create a New Deployment Flavor'
-			}
-		});
-	},
+    openDeploymentFlavorEditor(
+        dispatch,
+        {
+            softwareProductId,
+            modalClassName,
+            deploymentFlavor = {},
+            componentsList,
+            isEdit = false,
+            version
+        }
+    ) {
+        let alteredDeploymentFlavor = { ...deploymentFlavor };
+        if (componentsList.length) {
+            alteredDeploymentFlavor = {
+                ...alteredDeploymentFlavor,
+                componentComputeAssociations: deploymentFlavor.componentComputeAssociations
+                    ? [
+                          {
+                              ...deploymentFlavor
+                                  .componentComputeAssociations[0],
+                              componentId: componentsList[0].id
+                          }
+                      ]
+                    : [
+                          {
+                              componentId: componentsList[0].id,
+                              computeFlavorId: null
+                          }
+                      ]
+            };
+        }
+        dispatch({
+            type:
+                actionTypes.deploymentFlavorEditor
+                    .SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA,
+            deploymentFlavor: alteredDeploymentFlavor
+        });
+        dispatch({
+            type: GlobalModalActions.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.DEPLOYMENT_FLAVOR_EDITOR,
+                modalComponentProps: { softwareProductId, version },
+                modalClassName,
+                title: isEdit
+                    ? 'Edit Deployment Flavor'
+                    : 'Create a New Deployment Flavor'
+            }
+        });
+    }
 };
 
-export  default SoftwareProductDeploymentActionHelper;
+export default SoftwareProductDeploymentActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
index 51469b461c..6c0d3efe38 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
@@ -16,13 +16,13 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS: null,
+    FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS: null,
 
-	deploymentFlavorEditor: {
-		DATA_CHANGED: null,
-		SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA: null,
-		SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA: null
-	}
+    deploymentFlavorEditor: {
+        DATA_CHANGED: null,
+        SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA: null,
+        SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA: null
+    }
 });
 
 export const DEPLOYMENT_FLAVORS_FORM_NAME = 'DEPLOYMENT_FLAVORS_FORM_NAME';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
index 8eb91e8fcb..31bf09e945 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductDeploymentConstants.js';
+import { actionTypes } from './SoftwareProductDeploymentConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS:
-			return [...action.deploymentFlavors];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS:
+            return [...action.deploymentFlavors];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
index 860d02c343..e1bdd553a6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
@@ -22,74 +22,82 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
 export default class SoftwareProductDeployment extends React.Component {
-	state = {
-		localFilter: ''
-	};
+    state = {
+        localFilter: ''
+    };
 
-	static propTypes = {
-		onAddDeployment: PropTypes.func.isRequired,
-		onDeleteDeployment: PropTypes.func.isRequired,
-		onEditDeployment: PropTypes.func.isRequired,
-		isReadOnlyMode: PropTypes.bool.isRequired
-	};
+    static propTypes = {
+        onAddDeployment: PropTypes.func.isRequired,
+        onDeleteDeployment: PropTypes.func.isRequired,
+        onEditDeployment: PropTypes.func.isRequired,
+        isReadOnlyMode: PropTypes.bool.isRequired
+    };
 
-	render() {
-		return (
-			<div>
-				{this.renderList()}
-			</div>
-		);
-	}
+    render() {
+        return <div>{this.renderList()}</div>;
+    }
 
-	renderList() {
-		let {onAddDeployment, isReadOnlyMode, componentsList} = this.props;
-		return (
-			<ListEditorView
-				plusButtonTitle={i18n('Add Deployment Flavor')}
-				filterValue={this.state.localFilter}
-				placeholder={i18n('Filter Deployment')}
-				onAdd={() => onAddDeployment(componentsList)}
-				isReadOnlyMode={isReadOnlyMode}
-				title={i18n('Deployment Flavors')}
-				onFilter={value => this.setState({localFilter: value})}
-				twoColumns>
-				{this.filterList().map(deploymentFlavor => this.renderListItem(deploymentFlavor, isReadOnlyMode))}
-			</ListEditorView>
-		);
-	}
+    renderList() {
+        let { onAddDeployment, isReadOnlyMode, componentsList } = this.props;
+        return (
+            <ListEditorView
+                plusButtonTitle={i18n('Add Deployment Flavor')}
+                filterValue={this.state.localFilter}
+                placeholder={i18n('Filter Deployment')}
+                onAdd={() => onAddDeployment(componentsList)}
+                isReadOnlyMode={isReadOnlyMode}
+                title={i18n('Deployment Flavors')}
+                onFilter={value => this.setState({ localFilter: value })}
+                twoColumns>
+                {this.filterList().map(deploymentFlavor =>
+                    this.renderListItem(deploymentFlavor, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-	renderListItem(deploymentFlavor, isReadOnlyMode) {
-		let {id, model, description} = deploymentFlavor;
-		let {onEditDeployment, onDeleteDeployment, componentsList} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditDeployment(deploymentFlavor, componentsList)}
-				onDelete={() => onDeleteDeployment(deploymentFlavor)}>
-				<ListEditorItemViewField>
-					<div className='model'>{model}</div>
-				</ListEditorItemViewField>
-				<ListEditorItemViewField>
-					<div className='description'>{description}</div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
+    renderListItem(deploymentFlavor, isReadOnlyMode) {
+        let { id, model, description } = deploymentFlavor;
+        let {
+            onEditDeployment,
+            onDeleteDeployment,
+            componentsList
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() =>
+                    onEditDeployment(deploymentFlavor, componentsList)
+                }
+                onDelete={() => onDeleteDeployment(deploymentFlavor)}>
+                <ListEditorItemViewField>
+                    <div className="model">{model}</div>
+                </ListEditorItemViewField>
+                <ListEditorItemViewField>
+                    <div className="description">{description}</div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {deploymentFlavors} = this.props;
-		let {localFilter} = this.state;
+    filterList() {
+        let { deploymentFlavors } = this.props;
+        let { localFilter } = this.state;
 
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return deploymentFlavors.filter(({model = '', description = ''}) => {
-				return escape(model).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return deploymentFlavors;
-		}
-	}
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return deploymentFlavors.filter(
+                ({ model = '', description = '' }) => {
+                    return (
+                        escape(model).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return deploymentFlavors;
+        }
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
index c24548b7b9..9392317692 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
@@ -13,77 +13,103 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductDeploymentEditorView from './SoftwareProductDeploymentEditorView.jsx';
 import SoftwareProdcutDeploymentActionHelper from '../SoftwareProductDeploymentActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js';
+import { DEPLOYMENT_FLAVORS_FORM_NAME } from '../SoftwareProductDeploymentConstants.js';
 
 export function mapStateToProps({
-	licenseModel,
-	softwareProduct,
-	currentScreen: {props: {isReadOnlyMode}}
+    licenseModel,
+    softwareProduct,
+    currentScreen: { props: { isReadOnlyMode } }
 }) {
-	let {
-		softwareProductEditor: {
-			data: currentSoftwareProduct = {}
-		},
-		softwareProductComponents: {
-			componentsList,
-			computeFlavor: {
-				computesList
-			}
-		},
-		softwareProductDeployment: {
-			deploymentFlavors,
-			deploymentFlavorEditor: {
-				data = {},
-				genericFieldInfo,
-				formReady
-			}
-		}
-	} = softwareProduct;
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents: {
+            componentsList,
+            computeFlavor: { computesList }
+        },
+        softwareProductDeployment: {
+            deploymentFlavors,
+            deploymentFlavorEditor: { data = {}, genericFieldInfo, formReady }
+        }
+    } = softwareProduct;
 
-	let {
-			featureGroup: {
-				featureGroupsList
-			}
-	} = licenseModel;
+    let { featureGroup: { featureGroupsList } } = licenseModel;
 
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-	let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData ? currentSoftwareProduct.licensingData.featureGroups || [] : [];
-	let selectedFeatureGroupsList = featureGroupsList
-		.filter(featureGroup => selectedFeatureGroupsIds.includes(featureGroup.id))
-		.map(featureGroup => ({value: featureGroup.id, label: featureGroup.name}));
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData
+        ? currentSoftwareProduct.licensingData.featureGroups || []
+        : [];
+    let selectedFeatureGroupsList = featureGroupsList
+        .filter(featureGroup =>
+            selectedFeatureGroupsIds.includes(featureGroup.id)
+        )
+        .map(featureGroup => ({
+            value: featureGroup.id,
+            label: featureGroup.name
+        }));
 
-	let DFNames = {};
+    let DFNames = {};
 
-	deploymentFlavors.map(deployment => {
-		DFNames[deployment.model.toLowerCase()] = deployment.id;
-	});
+    deploymentFlavors.map(deployment => {
+        DFNames[deployment.model.toLowerCase()] = deployment.id;
+    });
 
-	return {
-		data,
-		selectedFeatureGroupsList,
-		genericFieldInfo,
-		DFNames,
-		isFormValid,
-		formReady,
-		isReadOnlyMode,
-		componentsList,
-		computesList,
-		isEdit: Boolean(data.id)
-	};
+    return {
+        data,
+        selectedFeatureGroupsList,
+        genericFieldInfo,
+        DFNames,
+        isFormValid,
+        formReady,
+        isReadOnlyMode,
+        componentsList,
+        computesList,
+        isEdit: Boolean(data.id)
+    };
 }
 
-function mapActionsToProps(dispatch, {softwareProductId, version}) {
-	return {
-		onDataChanged: (deltaData, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: DEPLOYMENT_FLAVORS_FORM_NAME, customValidations}),
-		onClose: () => SoftwareProdcutDeploymentActionHelper.closeDeploymentFlavorEditor(dispatch),
-		onCreate: data =>  SoftwareProdcutDeploymentActionHelper.createDeploymentFlavor(dispatch, {softwareProductId, data, version}),
-		onEdit: data =>  SoftwareProdcutDeploymentActionHelper.editDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: data.id, data, version}),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, DEPLOYMENT_FLAVORS_FORM_NAME)
-	};
+function mapActionsToProps(dispatch, { softwareProductId, version }) {
+    return {
+        onDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: DEPLOYMENT_FLAVORS_FORM_NAME,
+                customValidations
+            }),
+        onClose: () =>
+            SoftwareProdcutDeploymentActionHelper.closeDeploymentFlavorEditor(
+                dispatch
+            ),
+        onCreate: data =>
+            SoftwareProdcutDeploymentActionHelper.createDeploymentFlavor(
+                dispatch,
+                {
+                    softwareProductId,
+                    data,
+                    version
+                }
+            ),
+        onEdit: data =>
+            SoftwareProdcutDeploymentActionHelper.editDeploymentFlavor(
+                dispatch,
+                {
+                    softwareProductId,
+                    deploymentFlavorId: data.id,
+                    data,
+                    version
+                }
+            ),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(
+                dispatch,
+                DEPLOYMENT_FLAVORS_FORM_NAME
+            )
+    };
 }
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductDeploymentEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductDeploymentEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
index 70836e8ff9..16e73d2162 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
@@ -13,32 +13,37 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js';;
+import {
+    actionTypes,
+    DEPLOYMENT_FLAVORS_FORM_NAME
+} from '../SoftwareProductDeploymentConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA:
-			return {
-				...state,
-				data: action.deploymentFlavor,
-				formReady: null,
-				formName: DEPLOYMENT_FLAVORS_FORM_NAME,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 500}]
-					},
-					'model' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				}
-			};
-		case actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.deploymentFlavorEditor
+            .SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA:
+            return {
+                ...state,
+                data: action.deploymentFlavor,
+                formReady: null,
+                formName: DEPLOYMENT_FLAVORS_FORM_NAME,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 500 }]
+                    },
+                    model: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                }
+            };
+        case actionTypes.deploymentFlavorEditor
+            .SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
index 7c9ae438d9..e44d2bd966 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
@@ -11,127 +11,240 @@ import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.j
 import Validator from 'nfvo-utils/Validator.js';
 
 export default class SoftwareProductDeploymentEditorView extends React.Component {
-	render() {
-		let {data, isEdit, onClose, onDataChanged, isReadOnlyMode, selectedFeatureGroupsList, componentsList, computesList, genericFieldInfo} = this.props;
-		let {model, description, featureGroupId, componentComputeAssociations = []} = data;
-		let featureGroupsExist = selectedFeatureGroupsList.length > 0;
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref='validationForm'
-					hasButtons={true}
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					onSubmit={ () => this.submit() }
-					submitButtonText={isEdit ? i18n('Save') : i18n('Create')}
-					onReset={ () => onClose() }
-					onValidateForm={() => this.validate() }
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					className='vsp-deployment-editor'>
-					<GridSection hasLastColSet>
-						<GridItem colSpan={1}>
-							<Input
-								onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})}
-								label={i18n('Model')}
-								value={model}
-								data-test-id='deployment-model'
-								isValid={genericFieldInfo.model.isValid}
-								errorText={genericFieldInfo.model.errorText}
-								isRequired={true}
-								type='text'/>
-						</GridItem>
-						<GridItem colSpan={3} lastColInRow>
-							<Input
-								onChange={description => onDataChanged({description})}
-								label={i18n('Description')}
-								value={description}
-								data-test-id='deployment-description'
-								isValid={genericFieldInfo.description.isValid}
-								errorText={genericFieldInfo.description.errorText}
-								type='text'/>
-						</GridItem>
-					</GridSection>
-					<GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')} hasLastColSet>
-						<GridItem colSpan={1}>
-							<SelectInput
-								data-test-id='deployment-feature-groups'
-								label={i18n('Feature Group')}
-								value={featureGroupId}
-								onChange={featureGroup => onDataChanged({featureGroupId: featureGroup ? featureGroup.value : null})}
-								type='select'
-								clearable={true}
-								disabled={isReadOnlyMode || !featureGroupsExist}
-								className='field-section'
-								options={selectedFeatureGroupsList}/>
-						</GridItem>
-					</GridSection>
-					{!featureGroupsExist && <GridSection className='deployment-feature-group-warning-section'>
-						<GridItem colSpan={3}>
-							<span>{i18n('Please assign Feature Groups in VSP General')}</span>
-						</GridItem>
-					</GridSection>}
-					<GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table' hasLastColSet>
-						<GridItem colSpan={4} lastColInRow>
-							<SelectActionTable
-								columns={['Virtual Function Components', 'Compute Flavors']}
-								numOfIcons={0}>
-								{componentComputeAssociations.map( (association, index) =>
-									<SelectActionTableRow key={association.componentId}>
-										<SelectActionTableCell
-											options={
-												componentsList
-												.map(component => ({value: component.id, label: component.displayName}) )
-											}
-											selected={association.componentId}
-											onChange={componentId => {
-												let newAssociations = [...componentComputeAssociations];
-												newAssociations[index] = {...newAssociations[index], componentId};
-												onDataChanged({componentComputeAssociations: newAssociations});
-											}}
-											disabled={true}/>
-										<SelectActionTableCell
-											options={
-												computesList
-												.filter(compute => compute.componentId === association.componentId)
-												.map(compute => ({value: compute.computeFlavorId, label: compute.name}) )
-											}
-											selected={association.computeFlavorId}
-											onChange={computeFlavorId => {
-												let newAssociations = [...componentComputeAssociations];
-												newAssociations[index] = {...newAssociations[index], computeFlavorId};
-												onDataChanged({componentComputeAssociations: newAssociations});
-											}}
-											disabled={isReadOnlyMode}/>
-									</SelectActionTableRow>
-								)}
-							</SelectActionTable>
-						</GridItem>
-					</GridSection>
-				</Form>}
-			</div>
-		);
-	}
+    render() {
+        let {
+            data,
+            isEdit,
+            onClose,
+            onDataChanged,
+            isReadOnlyMode,
+            selectedFeatureGroupsList,
+            componentsList,
+            computesList,
+            genericFieldInfo
+        } = this.props;
+        let {
+            model,
+            description,
+            featureGroupId,
+            componentComputeAssociations = []
+        } = data;
+        let featureGroupsExist = selectedFeatureGroupsList.length > 0;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        onSubmit={() => this.submit()}
+                        submitButtonText={
+                            isEdit ? i18n('Save') : i18n('Create')
+                        }
+                        onReset={() => onClose()}
+                        onValidateForm={() => this.validate()}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        className="vsp-deployment-editor">
+                        <GridSection hasLastColSet>
+                            <GridItem colSpan={1}>
+                                <Input
+                                    onChange={model =>
+                                        onDataChanged(
+                                            { model },
+                                            {
+                                                model: model =>
+                                                    this.validateName(model)
+                                            }
+                                        )
+                                    }
+                                    label={i18n('Model')}
+                                    value={model}
+                                    data-test-id="deployment-model"
+                                    isValid={genericFieldInfo.model.isValid}
+                                    errorText={genericFieldInfo.model.errorText}
+                                    isRequired={true}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={3} lastColInRow>
+                                <Input
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    label={i18n('Description')}
+                                    value={description}
+                                    data-test-id="deployment-description"
+                                    isValid={
+                                        genericFieldInfo.description.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.description.errorText
+                                    }
+                                    type="text"
+                                />
+                            </GridItem>
+                        </GridSection>
+                        <GridSection
+                            className={`deployment-feature-groups-section${
+                                !featureGroupsExist ? ' no-feature-groups' : ''
+                            }`}
+                            title={i18n('License Details')}
+                            hasLastColSet>
+                            <GridItem colSpan={1}>
+                                <SelectInput
+                                    data-test-id="deployment-feature-groups"
+                                    label={i18n('Feature Group')}
+                                    value={featureGroupId}
+                                    onChange={featureGroup =>
+                                        onDataChanged({
+                                            featureGroupId: featureGroup
+                                                ? featureGroup.value
+                                                : null
+                                        })
+                                    }
+                                    type="select"
+                                    clearable={true}
+                                    disabled={
+                                        isReadOnlyMode || !featureGroupsExist
+                                    }
+                                    className="field-section"
+                                    options={selectedFeatureGroupsList}
+                                />
+                            </GridItem>
+                        </GridSection>
+                        {!featureGroupsExist && (
+                            <GridSection className="deployment-feature-group-warning-section">
+                                <GridItem colSpan={3}>
+                                    <span>
+                                        {i18n(
+                                            'Please assign Feature Groups in VSP General'
+                                        )}
+                                    </span>
+                                </GridItem>
+                            </GridSection>
+                        )}
+                        <GridSection
+                            title={i18n('Assign VFCs and Compute Flavors')}
+                            className="vfc-table"
+                            hasLastColSet>
+                            <GridItem colSpan={4} lastColInRow>
+                                <SelectActionTable
+                                    columns={[
+                                        'Virtual Function Components',
+                                        'Compute Flavors'
+                                    ]}
+                                    numOfIcons={0}>
+                                    {componentComputeAssociations.map(
+                                        (association, index) => (
+                                            <SelectActionTableRow
+                                                key={association.componentId}>
+                                                <SelectActionTableCell
+                                                    options={componentsList.map(
+                                                        component => ({
+                                                            value: component.id,
+                                                            label:
+                                                                component.displayName
+                                                        })
+                                                    )}
+                                                    selected={
+                                                        association.componentId
+                                                    }
+                                                    onChange={componentId => {
+                                                        let newAssociations = [
+                                                            ...componentComputeAssociations
+                                                        ];
+                                                        newAssociations[
+                                                            index
+                                                        ] = {
+                                                            ...newAssociations[
+                                                                index
+                                                            ],
+                                                            componentId
+                                                        };
+                                                        onDataChanged({
+                                                            componentComputeAssociations: newAssociations
+                                                        });
+                                                    }}
+                                                    disabled={true}
+                                                />
+                                                <SelectActionTableCell
+                                                    options={computesList
+                                                        .filter(
+                                                            compute =>
+                                                                compute.componentId ===
+                                                                association.componentId
+                                                        )
+                                                        .map(compute => ({
+                                                            value:
+                                                                compute.computeFlavorId,
+                                                            label: compute.name
+                                                        }))}
+                                                    selected={
+                                                        association.computeFlavorId
+                                                    }
+                                                    onChange={computeFlavorId => {
+                                                        let newAssociations = [
+                                                            ...componentComputeAssociations
+                                                        ];
+                                                        newAssociations[
+                                                            index
+                                                        ] = {
+                                                            ...newAssociations[
+                                                                index
+                                                            ],
+                                                            computeFlavorId
+                                                        };
+                                                        onDataChanged({
+                                                            componentComputeAssociations: newAssociations
+                                                        });
+                                                    }}
+                                                    disabled={isReadOnlyMode}
+                                                />
+                                            </SelectActionTableRow>
+                                        )
+                                    )}
+                                </SelectActionTable>
+                            </GridItem>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	validateName(value) {
-		const {data: {id = ''}, DFNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: DFNames});
+    validateName(value) {
+        const { data: { id = '' }, DFNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: DFNames
+        });
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('Deployment flavor by the name \'' + value + '\' already exists. Deployment flavor name must be unique')};
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Deployment flavor by the name '" +
+                          value +
+                          "' already exists. Deployment flavor name must be unique"
+                  )
+              };
+    }
 
-	submit(){
-		let {isEdit, onCreate, onEdit, onClose, data} = this.props;
-		if (isEdit) {
-			onEdit(data);
-		} else {
-			onCreate(data);
-		}
-		onClose();
-	}
+    submit() {
+        let { isEdit, onCreate, onEdit, onClose, data } = this.props;
+        if (isEdit) {
+            onEdit(data);
+        } else {
+            onCreate(data);
+        }
+        onClose();
+    }
 
-	validate() {
-		this.props.onValidateForm();
-	}
+    validate() {
+        this.props.onValidateForm();
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
index 0973537d43..8a3279a02c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
@@ -13,80 +13,140 @@
  * 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import SoftwareProductDetailsView from './SoftwareProductDetailsView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {PRODUCT_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-import {actionTypes as modalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { PRODUCT_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import {
+    actionTypes as modalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
 export const mapStateToProps = ({
-	finalizedLicenseModelList,
-	archivedLicenseModelList,
-	softwareProduct,
-	licenseModel: {licenseAgreement, featureGroup}
+    finalizedLicenseModelList,
+    archivedLicenseModelList,
+    softwareProduct,
+    licenseModel: { licenseAgreement, featureGroup }
 }) => {
+    let {
+        softwareProductEditor: {
+            data: currentSoftwareProduct,
+            licensingVersionsList = [],
+            genericFieldInfo
+        },
+        softwareProductCategories,
+        softwareProductQuestionnaire
+    } = softwareProduct;
+    let { licensingData = {}, licensingVersion } = currentSoftwareProduct;
+    let licenseAgreementList = [],
+        filteredFeatureGroupsList = [];
+    licenseAgreementList = licensingVersion
+        ? licenseAgreement.licenseAgreementList
+        : [];
+    if (licensingVersion && licensingData && licensingData.licenseAgreement) {
+        let selectedLicenseAgreement = licenseAgreementList.find(
+            la => la.id === licensingData.licenseAgreement
+        );
+        if (selectedLicenseAgreement) {
+            let featureGroupsList = featureGroup.featureGroupsList.filter(
+                ({ referencingLicenseAgreements }) =>
+                    referencingLicenseAgreements.includes(
+                        selectedLicenseAgreement.id
+                    )
+            );
+            if (featureGroupsList.length) {
+                filteredFeatureGroupsList = featureGroupsList.map(
+                    featureGroup => ({
+                        enum: featureGroup.id,
+                        title: featureGroup.name
+                    })
+                );
+            }
+        }
+    }
+    let {
+        qdata,
+        qgenericFieldInfo: qGenericFieldInfo,
+        dataMap
+    } = softwareProductQuestionnaire;
 
-	let {softwareProductEditor: {data: currentSoftwareProduct, licensingVersionsList = [], genericFieldInfo}, softwareProductCategories, softwareProductQuestionnaire} = softwareProduct;
-	let {licensingData = {}, licensingVersion} = currentSoftwareProduct;
-	let licenseAgreementList = [], filteredFeatureGroupsList = [];
-	licenseAgreementList = licensingVersion ?
-		licenseAgreement.licenseAgreementList : [];
-	if(licensingVersion && licensingData && licensingData.licenseAgreement) {
-		let selectedLicenseAgreement = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement);
-		if (selectedLicenseAgreement) {
-			let featureGroupsList = featureGroup.featureGroupsList.filter(({referencingLicenseAgreements}) => referencingLicenseAgreements.includes(selectedLicenseAgreement.id));
-			if (featureGroupsList.length) {
-				filteredFeatureGroupsList = featureGroupsList.map(featureGroup => ({enum: featureGroup.id, title: featureGroup.name}));
-			}
-		}
-	}
-	let {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap} = softwareProductQuestionnaire;
-
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-	const isVendorArchived = archivedLicenseModelList.find(item => item.id === currentSoftwareProduct.vendorId);
-	return {
-		currentSoftwareProduct,
-		softwareProductCategories,
-		licenseAgreementList,
-		licensingVersionsList,
-		featureGroupsList: filteredFeatureGroupsList,
-		finalizedLicenseModelList,
-		qdata,
-		isFormValid,
-		genericFieldInfo,
-		qGenericFieldInfo,
-		dataMap,
-		isVendorArchived: !!isVendorArchived
-	};
-
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    const isVendorArchived = archivedLicenseModelList.find(
+        item => item.id === currentSoftwareProduct.vendorId
+    );
+    return {
+        currentSoftwareProduct,
+        softwareProductCategories,
+        licenseAgreementList,
+        licensingVersionsList,
+        featureGroupsList: filteredFeatureGroupsList,
+        finalizedLicenseModelList,
+        qdata,
+        isFormValid,
+        genericFieldInfo,
+        qGenericFieldInfo,
+        dataMap,
+        isVendorArchived: !!isVendorArchived
+    };
 };
 
-export const mapActionsToProps = (dispatch, {version}) => {
-	return {
-		onDataChanged: (deltaData, formName) => ValidationHelper.dataChanged(dispatch, {deltaData, formName}),
-		onVendorParamChanged: (deltaData, formName) => SoftwareProductActionHelper.softwareProductEditorVendorChanged(dispatch, {deltaData, formName}),
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: PRODUCT_QUESTIONNAIRE}),
-		onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData}),
-		onSubmit: (softwareProduct, qdata) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version}),
-		onArchivedVendorRemove: ({onVendorParamChanged, finalizedLicenseModelList, vendorName}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data:{
-				title: i18n('Change Archived VLM'),
-				modalComponentName: modalContentMapper.VENDOR_SELECTOR,
-				modalComponentProps: {
-					size: modalSizes.MEDIUM,
-					finalizedLicenseModelList,
-					vendorName,
-					onClose: () => dispatch({type: modalActionTypes.GLOBAL_MODAL_CLOSE}),
-					onConfirm: (vendorId) => onVendorParamChanged({vendorId}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)
-				}
-			}
-		})
-	};
+export const mapActionsToProps = (dispatch, { version }) => {
+    return {
+        onDataChanged: (deltaData, formName) =>
+            ValidationHelper.dataChanged(dispatch, { deltaData, formName }),
+        onVendorParamChanged: (deltaData, formName) =>
+            SoftwareProductActionHelper.softwareProductEditorVendorChanged(
+                dispatch,
+                { deltaData, formName }
+            ),
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: PRODUCT_QUESTIONNAIRE
+            }),
+        onValidityChanged: isValidityData =>
+            SoftwareProductActionHelper.setIsValidityData(dispatch, {
+                isValidityData
+            }),
+        onSubmit: (softwareProduct, qdata) =>
+            SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
+                softwareProduct,
+                qdata,
+                version
+            }),
+        onArchivedVendorRemove: ({
+            onVendorParamChanged,
+            finalizedLicenseModelList,
+            vendorName
+        }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    title: i18n('Change Archived VLM'),
+                    modalComponentName: modalContentMapper.VENDOR_SELECTOR,
+                    modalComponentProps: {
+                        size: modalSizes.MEDIUM,
+                        finalizedLicenseModelList,
+                        vendorName,
+                        onClose: () =>
+                            dispatch({
+                                type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                            }),
+                        onConfirm: vendorId =>
+                            onVendorParamChanged(
+                                { vendorId },
+                                forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+                            )
+                    }
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductDetailsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductDetailsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
index 1a293264c3..1e4a0df787 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
@@ -13,49 +13,56 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import {
+    actionTypes,
+    forms
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED:
-			return {
-				...state,
-				isValidityData: action.isValidityData
-			};
-		case actionTypes.SOFTWARE_PRODUCT_LOADED:
-			return {
-				...state,
-				formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS,
-				genericFieldInfo: {
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'validateName', data: true}, {type: 'maxLength', data: 25}, {type: 'required', data: true}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				},
-				data: action.response
-			};
-		case actionTypes.TOGGLE_NAVIGATION_ITEM:
-			return {
-				...state,
-				mapOfExpandedIds: action.mapOfExpandedIds
-			};
-		case actionTypes.LOAD_LICENSING_VERSIONS_LIST:
-			return {
-				...state,
-				licensingVersionsList: action.licensingVersionsList
-			};
-		case actionTypes.CANDIDATE_IN_PROCESS: 
-			return {
-				...state,
-				data: {...state.data, candidateOnboardingOrigin: true}				
-			};	
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED:
+            return {
+                ...state,
+                isValidityData: action.isValidityData
+            };
+        case actionTypes.SOFTWARE_PRODUCT_LOADED:
+            return {
+                ...state,
+                formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'validateName', data: true },
+                            { type: 'maxLength', data: 25 },
+                            { type: 'required', data: true }
+                        ]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                },
+                data: action.response
+            };
+        case actionTypes.TOGGLE_NAVIGATION_ITEM:
+            return {
+                ...state,
+                mapOfExpandedIds: action.mapOfExpandedIds
+            };
+        case actionTypes.LOAD_LICENSING_VERSIONS_LIST:
+            return {
+                ...state,
+                licensingVersionsList: action.licensingVersionsList
+            };
+        case actionTypes.CANDIDATE_IN_PROCESS:
+            return {
+                ...state,
+                data: { ...state.data, candidateOnboardingOrigin: true }
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
index c2a3e0bd02..9c20723689 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
@@ -22,57 +22,77 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
 
 class VendorSelector extends React.Component {
-	static propTypes = {
-		finalizedLicenseModelList: PropTypes.array,
-		vendorName: PropTypes.string,
-		onClose: PropTypes.func.isRequired,
-		onConfirm: PropTypes.func.isRequired
-	}
-	constructor(props){
-		super(props);
-		const selectedValue = props.finalizedLicenseModelList.length ? props.finalizedLicenseModelList[0].id : '';
-		this.state = {
-			selectedValue
-		};
-	}
-	submit() {
-		const vendor = this.props.finalizedLicenseModelList.find(item => item.id === this.state.selectedValue);
-		this.props.onConfirm(vendor.id);
-		this.props.onClose();
-	}
-	render() {
-		const {finalizedLicenseModelList, vendorName, onClose} =  this.props;
-		const {selectedValue} = this.state;		
-		return (
-			<div className='vsp-details-vendor-select'>
-				<Form 
-					onSubmit={() => this.submit()}
-					onReset={() => onClose()}
-					isValid = {!!selectedValue}
-					submitButtonText={i18n('Save')}
-					hasButtons={true}>
-						<div className='vendor-selector-modal-title'>{`${i18n('The VLM')} '${vendorName}' ${i18n('assigned to this VSP is archived')}.`}</div>
-						<div className='vendor-selector-modal-additional-text'>{i18n('If you select a different VLM you will not be able to reselect the archived VLM.')}</div>
-						<Input
-							data-test-id='vsp-vendor-name-select'
-							label={i18n('Vendor')}
-							type='select'
-							onChange={e => {this.setState({
-								selectedValue: e.target.options[e.target.selectedIndex].value
-							});}} 
-							value={selectedValue}>
-							<option key='emtyVendor' value=''>{i18n('please select...')}</option>
-							{sortByStringProperty(
-								finalizedLicenseModelList,
-								'name'
-							).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>)
-							}
-						</Input>
-				</Form>
-			</div>
-		);
-	}
+    static propTypes = {
+        finalizedLicenseModelList: PropTypes.array,
+        vendorName: PropTypes.string,
+        onClose: PropTypes.func.isRequired,
+        onConfirm: PropTypes.func.isRequired
+    };
+    constructor(props) {
+        super(props);
+        const selectedValue = props.finalizedLicenseModelList.length
+            ? props.finalizedLicenseModelList[0].id
+            : '';
+        this.state = {
+            selectedValue
+        };
+    }
+    submit() {
+        const vendor = this.props.finalizedLicenseModelList.find(
+            item => item.id === this.state.selectedValue
+        );
+        this.props.onConfirm(vendor.id);
+        this.props.onClose();
+    }
+    render() {
+        const { finalizedLicenseModelList, vendorName, onClose } = this.props;
+        const { selectedValue } = this.state;
+        return (
+            <div className="vsp-details-vendor-select">
+                <Form
+                    onSubmit={() => this.submit()}
+                    onReset={() => onClose()}
+                    isValid={!!selectedValue}
+                    submitButtonText={i18n('Save')}
+                    hasButtons={true}>
+                    <div className="vendor-selector-modal-title">{`${i18n(
+                        'The VLM'
+                    )} '${vendorName}' ${i18n(
+                        'assigned to this VSP is archived'
+                    )}.`}</div>
+                    <div className="vendor-selector-modal-additional-text">
+                        {i18n(
+                            'If you select a different VLM you will not be able to reselect the archived VLM.'
+                        )}
+                    </div>
+                    <Input
+                        data-test-id="vsp-vendor-name-select"
+                        label={i18n('Vendor')}
+                        type="select"
+                        onChange={e => {
+                            this.setState({
+                                selectedValue:
+                                    e.target.options[e.target.selectedIndex]
+                                        .value
+                            });
+                        }}
+                        value={selectedValue}>
+                        <option key="emtyVendor" value="">
+                            {i18n('please select...')}
+                        </option>
+                        {sortByStringProperty(
+                            finalizedLicenseModelList,
+                            'name'
+                        ).map(lm => (
+                            <option key={lm.id} value={lm.id}>
+                                {lm.name}
+                            </option>
+                        ))}
+                    </Input>
+                </Form>
+            </div>
+        );
+    }
 }
 
 export default VendorSelector;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
index 24aa319c24..12b1eadc86 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.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 PropTypes from 'prop-types';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -24,427 +24,642 @@ import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
-const DeprecatedVlmInfo = ({vendorName, onVendorRemove}) => {
-	return (
-		<div className='depricated-vlm-info'>
-			<Input
-				data-test-id='vsp-vendor-name'
-				isRequired={true}
-				onClick={() => onVendorRemove()}
-				label={i18n('Vendor')}
-				type='select'
-				value={`${vendorName} (Archived)`}>
-				<option key={vendorName} value={`${vendorName} (Archived)`}>{`${vendorName} (Archived)`}</option>
-			</Input>
-		</div>
-	);
+const DeprecatedVlmInfo = ({ vendorName, onVendorRemove }) => {
+    return (
+        <div className="depricated-vlm-info">
+            <Input
+                data-test-id="vsp-vendor-name"
+                isRequired={true}
+                onClick={() => onVendorRemove()}
+                label={i18n('Vendor')}
+                type="select"
+                value={`${vendorName} (Archived)`}>
+                <option
+                    key={vendorName}
+                    value={`${vendorName} (Archived)`}>{`${vendorName} (Archived)`}</option>
+            </Input>
+        </div>
+    );
 };
 
 class GeneralSection extends React.Component {
-	static propTypes = {
-		vendorId: PropTypes.string,
-		name: PropTypes.string,
-		description: PropTypes.string,
-		subCategory: PropTypes.string,
-		softwareProductCategories: PropTypes.array,
-		finalizedLicenseModelList: PropTypes.array,
-		onDataChanged: PropTypes.func.isRequired,
-		onVendorParamChanged: PropTypes.func.isRequired,
-		onSelectSubCategory: PropTypes.func.isRequired,
-		isVendorArchived: PropTypes.bool,
-		onArchivedVendorRemove: PropTypes.func
-	};
+    static propTypes = {
+        vendorId: PropTypes.string,
+        name: PropTypes.string,
+        description: PropTypes.string,
+        subCategory: PropTypes.string,
+        softwareProductCategories: PropTypes.array,
+        finalizedLicenseModelList: PropTypes.array,
+        onDataChanged: PropTypes.func.isRequired,
+        onVendorParamChanged: PropTypes.func.isRequired,
+        onSelectSubCategory: PropTypes.func.isRequired,
+        isVendorArchived: PropTypes.bool,
+        onArchivedVendorRemove: PropTypes.func
+    };
 
-	onVendorParamChanged(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const vendorId = e.target.options[selectedIndex].value;
-		this.props.onVendorParamChanged({vendorId}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
+    onVendorParamChanged(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const vendorId = e.target.options[selectedIndex].value;
+        this.props.onVendorParamChanged(
+            { vendorId },
+            forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+        );
+    }
 
-	}
+    onSelectSubCategory(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const subCategory = e.target.options[selectedIndex].value;
+        this.props.onSelectSubCategory(subCategory);
+    }
+    onVendorRemove() {
+        const {
+            finalizedLicenseModelList,
+            vendorName,
+            onVendorParamChanged
+        } = this.props;
+        this.props.onArchivedVendorRemove({
+            finalizedLicenseModelList,
+            onVendorParamChanged,
+            vendorName
+        });
+    }
 
-	onSelectSubCategory(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const subCategory = e.target.options[selectedIndex].value;
-		this.props.onSelectSubCategory(subCategory);
-	}
-	onVendorRemove() {
-		const {finalizedLicenseModelList, vendorName, onVendorParamChanged} = this.props;
-		this.props.onArchivedVendorRemove({finalizedLicenseModelList, onVendorParamChanged, vendorName});
-	}
-
-	render (){
-		let {genericFieldInfo} = this.props;
-		return (
-			<div>
-			{genericFieldInfo && <GridSection title={i18n('General')} className='grid-section-general'>
-			<GridItem>
-				<Input
-					data-test-id='vsp-name'
-					label={i18n('Name')}
-					type='text'
-					value={this.props.name}
-					isRequired={true}
-					errorText={genericFieldInfo.name.errorText}
-					isValid={genericFieldInfo.name.isValid}
-					onChange={name => name.length <= 25 && this.props.onDataChanged({name}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/>
-				{this.props.isVendorArchived ? 
-					<DeprecatedVlmInfo  onVendorRemove={()=>this.onVendorRemove()} vendorName={this.props.vendorName} /> :	
-					<Input
-						data-test-id='vsp-vendor-name'
-						label={i18n('Vendor')}
-						type='select'
-						value={this.props.vendorId}
-						onChange={e => this.onVendorParamChanged(e)}>
-						{sortByStringProperty(
-							this.props.finalizedLicenseModelList,
-							'name'
-						).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>)
-						}
-					</Input>
-				}
-				<Input
-					data-test-id='vsp-category-name'
-					label={i18n('Category')}
-					type='select'
-					value={this.props.subCategory}
-					onChange={e => this.onSelectSubCategory(e)}>
-					{
-						this.props.softwareProductCategories.map(category =>
-							category.subcategories &&
-							<optgroup
-								key={category.name}
-								label={category.name}>{category.subcategories.map(sub =>
-								<option
-									key={sub.uniqueId}
-									value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
-							</optgroup>
-						)
-					}
-				</Input>
-			</GridItem>
-			<GridItem colSpan={2} stretch>
-				<Input
-					data-test-id='vsp-description'
-					label={i18n('Description')}
-					type='textarea'
-					isRequired={true}
-					isValid={genericFieldInfo.description.isValid}
-					errorText={genericFieldInfo.description.errorText}
-					value={this.props.description}
-					onChange={description => this.props.onDataChanged({description}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/>
-			</GridItem>
-		</GridSection>}
-		</div>);
-	}
+    render() {
+        let { genericFieldInfo } = this.props;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <GridSection
+                        title={i18n('General')}
+                        className="grid-section-general">
+                        <GridItem>
+                            <Input
+                                data-test-id="vsp-name"
+                                label={i18n('Name')}
+                                type="text"
+                                value={this.props.name}
+                                isRequired={true}
+                                errorText={genericFieldInfo.name.errorText}
+                                isValid={genericFieldInfo.name.isValid}
+                                onChange={name =>
+                                    name.length <= 25 &&
+                                    this.props.onDataChanged(
+                                        { name },
+                                        forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+                                    )
+                                }
+                            />
+                            {this.props.isVendorArchived ? (
+                                <DeprecatedVlmInfo
+                                    onVendorRemove={() => this.onVendorRemove()}
+                                    vendorName={this.props.vendorName}
+                                />
+                            ) : (
+                                <Input
+                                    data-test-id="vsp-vendor-name"
+                                    label={i18n('Vendor')}
+                                    type="select"
+                                    value={this.props.vendorId}
+                                    onChange={e =>
+                                        this.onVendorParamChanged(e)
+                                    }>
+                                    {sortByStringProperty(
+                                        this.props.finalizedLicenseModelList,
+                                        'name'
+                                    ).map(lm => (
+                                        <option key={lm.id} value={lm.id}>
+                                            {lm.name}
+                                        </option>
+                                    ))}
+                                </Input>
+                            )}
+                            <Input
+                                data-test-id="vsp-category-name"
+                                label={i18n('Category')}
+                                type="select"
+                                value={this.props.subCategory}
+                                onChange={e => this.onSelectSubCategory(e)}>
+                                {this.props.softwareProductCategories.map(
+                                    category =>
+                                        category.subcategories && (
+                                            <optgroup
+                                                key={category.name}
+                                                label={category.name}>
+                                                {category.subcategories.map(
+                                                    sub => (
+                                                        <option
+                                                            key={sub.uniqueId}
+                                                            value={
+                                                                sub.uniqueId
+                                                            }>{`${sub.name} (${
+                                                            category.name
+                                                        })`}</option>
+                                                    )
+                                                )}
+                                            </optgroup>
+                                        )
+                                )}
+                            </Input>
+                        </GridItem>
+                        <GridItem colSpan={2} stretch>
+                            <Input
+                                data-test-id="vsp-description"
+                                label={i18n('Description')}
+                                type="textarea"
+                                isRequired={true}
+                                isValid={genericFieldInfo.description.isValid}
+                                errorText={
+                                    genericFieldInfo.description.errorText
+                                }
+                                value={this.props.description}
+                                onChange={description =>
+                                    this.props.onDataChanged(
+                                        { description },
+                                        forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+                                    )
+                                }
+                            />
+                        </GridItem>
+                    </GridSection>
+                )}
+            </div>
+        );
+    }
 }
 class LicensesSection extends React.Component {
-	static propTypes = {
-		onVendorParamChanged: PropTypes.func.isRequired,
-		vendorId: PropTypes.string,
-		licensingVersion: PropTypes.string,
-		licensingVersionsList: PropTypes.array,
-		licensingData: PropTypes.shape({
-			licenceAgreement: PropTypes.string,
-			featureGroups: PropTypes.array
-		}),
-		onFeatureGroupsChanged: PropTypes.func.isRequired,
-		onLicensingDataChanged: PropTypes.func.isRequired,
-		featureGroupsList: PropTypes.array,
-		licenseAgreementList: PropTypes.array, 
-		isVendorArchived: PropTypes.bool
-	};
+    static propTypes = {
+        onVendorParamChanged: PropTypes.func.isRequired,
+        vendorId: PropTypes.string,
+        licensingVersion: PropTypes.string,
+        licensingVersionsList: PropTypes.array,
+        licensingData: PropTypes.shape({
+            licenceAgreement: PropTypes.string,
+            featureGroups: PropTypes.array
+        }),
+        onFeatureGroupsChanged: PropTypes.func.isRequired,
+        onLicensingDataChanged: PropTypes.func.isRequired,
+        featureGroupsList: PropTypes.array,
+        licenseAgreementList: PropTypes.array,
+        isVendorArchived: PropTypes.bool
+    };
 
-	onVendorParamChanged(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const licensingVersion = e.target.options[selectedIndex].value;
-		this.props.onVendorParamChanged({vendorId: this.props.vendorId, licensingVersion}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
-	}
+    onVendorParamChanged(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const licensingVersion = e.target.options[selectedIndex].value;
+        this.props.onVendorParamChanged(
+            { vendorId: this.props.vendorId, licensingVersion },
+            forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+        );
+    }
 
-	onLicensingDataChanged(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const licenseAgreement = e.target.options[selectedIndex].value;
-		this.props.onLicensingDataChanged({licenseAgreement, featureGroups: []});
-	}
+    onLicensingDataChanged(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const licenseAgreement = e.target.options[selectedIndex].value;
+        this.props.onLicensingDataChanged({
+            licenseAgreement,
+            featureGroups: []
+        });
+    }
 
-	render(){
-		return (
-			<GridSection title={i18n('Licenses')}>
-				<GridItem>
-					<Input
-						data-test-id='vsp-licensing-version'
-						onChange={e => this.onVendorParamChanged(e)}
-						value={this.props.licensingVersion || ''}
-						label={i18n('Licensing Version')}
-						disabled={this.props.isVendorArchived}
-						type='select'>
-						{this.props.licensingVersionsList.map(version =>
-							<option
-								key={version.enum}
-								value={version.enum}>{version.title}
-							</option>
-						)}
-					</Input>
-				</GridItem>
-				<GridItem>
-					<Input
-						data-test-id='vsp-license-agreement'
-						label={i18n('License Agreement')}
-						type='select'
-						disabled={this.props.isVendorArchived}
-						value={this.props.licensingData.licenseAgreement ? this.props.licensingData.licenseAgreement : '' }
-						onChange={(e) => this.onLicensingDataChanged(e)}>
-						<option key='placeholder' value=''>{i18n('Select...')}</option>
-						{this.props.licenseAgreementList.map(la => <option value={la.id} key={la.id}>{la.name}</option>)}
-					</Input>
-				</GridItem>
-				<GridItem>
-					{this.props.licensingData.licenseAgreement && (
-						<InputOptions
-							data-test-id='vsp-feature-group'
-							type='select'
-							isMultiSelect={true}
-							onInputChange={()=>{}}
-							disabled={this.props.isVendorArchived}
-							onEnumChange={featureGroups => this.props.onFeatureGroupsChanged({featureGroups})}
-							multiSelectedEnum={this.props.licensingData.featureGroups}
-							name='feature-groups'
-							label={i18n('Feature Groups')}
-							clearable={false}
-							values={this.props.featureGroupsList}/>)
-					}
-				</GridItem>
-			</GridSection>
-		);
-	}
+    render() {
+        return (
+            <GridSection title={i18n('Licenses')}>
+                <GridItem>
+                    <Input
+                        data-test-id="vsp-licensing-version"
+                        onChange={e => this.onVendorParamChanged(e)}
+                        value={this.props.licensingVersion || ''}
+                        label={i18n('Licensing Version')}
+                        disabled={this.props.isVendorArchived}
+                        type="select">
+                        {this.props.licensingVersionsList.map(version => (
+                            <option key={version.enum} value={version.enum}>
+                                {version.title}
+                            </option>
+                        ))}
+                    </Input>
+                </GridItem>
+                <GridItem>
+                    <Input
+                        data-test-id="vsp-license-agreement"
+                        label={i18n('License Agreement')}
+                        type="select"
+                        disabled={this.props.isVendorArchived}
+                        value={
+                            this.props.licensingData.licenseAgreement
+                                ? this.props.licensingData.licenseAgreement
+                                : ''
+                        }
+                        onChange={e => this.onLicensingDataChanged(e)}>
+                        <option key="placeholder" value="">
+                            {i18n('Select...')}
+                        </option>
+                        {this.props.licenseAgreementList.map(la => (
+                            <option value={la.id} key={la.id}>
+                                {la.name}
+                            </option>
+                        ))}
+                    </Input>
+                </GridItem>
+                <GridItem>
+                    {this.props.licensingData.licenseAgreement && (
+                        <InputOptions
+                            data-test-id="vsp-feature-group"
+                            type="select"
+                            isMultiSelect={true}
+                            onInputChange={() => {}}
+                            disabled={this.props.isVendorArchived}
+                            onEnumChange={featureGroups =>
+                                this.props.onFeatureGroupsChanged({
+                                    featureGroups
+                                })
+                            }
+                            multiSelectedEnum={
+                                this.props.licensingData.featureGroups
+                            }
+                            name="feature-groups"
+                            label={i18n('Feature Groups')}
+                            clearable={false}
+                            values={this.props.featureGroupsList}
+                        />
+                    )}
+                </GridItem>
+            </GridSection>
+        );
+    }
 }
-const AvailabilitySection = (props) => (
-	<GridSection title={i18n('Availability')}>
-		<GridItem colSpan={2}>
-			<Input
-				data-test-id='vsp-use-availability-zone'
-				label={i18n('Use Availability Zones for High Availability')}
-				type='checkbox'
-				checked={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']}
-				value={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']}
-				onChange={(aZone) => props.onQDataChanged({'general/availability/useAvailabilityZonesForHighAvailability' : aZone})} />
-		</GridItem>
-	</GridSection>
+const AvailabilitySection = props => (
+    <GridSection title={i18n('Availability')}>
+        <GridItem colSpan={2}>
+            <Input
+                data-test-id="vsp-use-availability-zone"
+                label={i18n('Use Availability Zones for High Availability')}
+                type="checkbox"
+                checked={
+                    props.dataMap[
+                        'general/availability/useAvailabilityZonesForHighAvailability'
+                    ]
+                }
+                value={
+                    props.dataMap[
+                        'general/availability/useAvailabilityZonesForHighAvailability'
+                    ]
+                }
+                onChange={aZone =>
+                    props.onQDataChanged({
+                        'general/availability/useAvailabilityZonesForHighAvailability': aZone
+                    })
+                }
+            />
+        </GridItem>
+    </GridSection>
 );
-const RegionsSection = (props) => (
-	<GridSection title={i18n('Regions')}>
-		<GridItem>
-			<InputOptions
-				data-test-id='vsp-regions'
-				type='select'
-				isMultiSelect={true}
-				onInputChange={()=>{}}
-				onEnumChange={(regions) => props.onQDataChanged({'general/regionsData/regions' : regions})}
-				multiSelectedEnum={props.dataMap['general/regionsData/regions']}
-				name='vsp-regions'
-				clearable={false}
-				values={props.genericFieldInfo['general/regionsData/regions'].enum} />
-		</GridItem>
-	</GridSection>
+const RegionsSection = props => (
+    <GridSection title={i18n('Regions')}>
+        <GridItem>
+            <InputOptions
+                data-test-id="vsp-regions"
+                type="select"
+                isMultiSelect={true}
+                onInputChange={() => {}}
+                onEnumChange={regions =>
+                    props.onQDataChanged({
+                        'general/regionsData/regions': regions
+                    })
+                }
+                multiSelectedEnum={props.dataMap['general/regionsData/regions']}
+                name="vsp-regions"
+                clearable={false}
+                values={
+                    props.genericFieldInfo['general/regionsData/regions'].enum
+                }
+            />
+        </GridItem>
+    </GridSection>
 );
-const StorageDataReplicationSection = (props) => (
-	<GridSection title={i18n('Storage Data Replication')}>
-		<GridItem>
-			<Input
-				data-test-id='vsp-storage-rep-size'
-				label={i18n('Storage Replication Size (GB)')}
-				type='number'
-				isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationSize'].isValid}
-				errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationSize'].errorText}
-				value={props.dataMap['general/storageDataReplication/storageReplicationSize']}
-				onChange={(sRep) => props.onQDataChanged({'general/storageDataReplication/storageReplicationSize' : sRep})} />
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='vsp-storage-rep-source'
-				label={i18n('Storage Replication Source')}
-				type='text'
-				isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationSource'].isValid}
-				errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationSource'].errorText}
-				value={props.dataMap['general/storageDataReplication/storageReplicationSource']}
-				onChange={(sRepSource) => props.onQDataChanged({'general/storageDataReplication/storageReplicationSource' : sRepSource})} />
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='vsp-storage-rep-freq'
-				label={i18n('Storage Replication Freq. (min)')}
-				type='number'
-				isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationFrequency'].isValid}
-				errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationFrequency'].errorText}
-				value={props.dataMap['general/storageDataReplication/storageReplicationFrequency']}
-				onChange={(sRepFreq) => props.onQDataChanged({'general/storageDataReplication/storageReplicationFrequency' : sRepFreq})} />
-		</GridItem>
-		<GridItem>
-			<Input
-				data-test-id='vsp-storage-rep-dest'
-				label={i18n('Storage Replication Destination')}
-				type='text'
-				isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationDestination'].isValid}
-				errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationDestination'].errorText}
-				value={props.dataMap['general/storageDataReplication/storageReplicationDestination']}
-				onChange={(sRepDest) => props.onQDataChanged({'general/storageDataReplication/storageReplicationDestination' : sRepDest})} />
-		</GridItem>
-	</GridSection>
+const StorageDataReplicationSection = props => (
+    <GridSection title={i18n('Storage Data Replication')}>
+        <GridItem>
+            <Input
+                data-test-id="vsp-storage-rep-size"
+                label={i18n('Storage Replication Size (GB)')}
+                type="number"
+                isValid={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationSize'
+                    ].isValid
+                }
+                errorText={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationSize'
+                    ].errorText
+                }
+                value={
+                    props.dataMap[
+                        'general/storageDataReplication/storageReplicationSize'
+                    ]
+                }
+                onChange={sRep =>
+                    props.onQDataChanged({
+                        'general/storageDataReplication/storageReplicationSize': sRep
+                    })
+                }
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="vsp-storage-rep-source"
+                label={i18n('Storage Replication Source')}
+                type="text"
+                isValid={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationSource'
+                    ].isValid
+                }
+                errorText={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationSource'
+                    ].errorText
+                }
+                value={
+                    props.dataMap[
+                        'general/storageDataReplication/storageReplicationSource'
+                    ]
+                }
+                onChange={sRepSource =>
+                    props.onQDataChanged({
+                        'general/storageDataReplication/storageReplicationSource': sRepSource
+                    })
+                }
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="vsp-storage-rep-freq"
+                label={i18n('Storage Replication Freq. (min)')}
+                type="number"
+                isValid={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationFrequency'
+                    ].isValid
+                }
+                errorText={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationFrequency'
+                    ].errorText
+                }
+                value={
+                    props.dataMap[
+                        'general/storageDataReplication/storageReplicationFrequency'
+                    ]
+                }
+                onChange={sRepFreq =>
+                    props.onQDataChanged({
+                        'general/storageDataReplication/storageReplicationFrequency': sRepFreq
+                    })
+                }
+            />
+        </GridItem>
+        <GridItem>
+            <Input
+                data-test-id="vsp-storage-rep-dest"
+                label={i18n('Storage Replication Destination')}
+                type="text"
+                isValid={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationDestination'
+                    ].isValid
+                }
+                errorText={
+                    props.genericFieldInfo[
+                        'general/storageDataReplication/storageReplicationDestination'
+                    ].errorText
+                }
+                value={
+                    props.dataMap[
+                        'general/storageDataReplication/storageReplicationDestination'
+                    ]
+                }
+                onChange={sRepDest =>
+                    props.onQDataChanged({
+                        'general/storageDataReplication/storageReplicationDestination': sRepDest
+                    })
+                }
+            />
+        </GridItem>
+    </GridSection>
 );
 
 class SoftwareProductDetails extends Component {
+    static propTypes = {
+        vendorName: PropTypes.string,
+        currentSoftwareProduct: PropTypes.shape({
+            id: PropTypes.string,
+            name: PropTypes.string,
+            description: PropTypes.string,
+            category: PropTypes.string,
+            subCategory: PropTypes.string,
+            vendorId: PropTypes.string,
+            vendorName: PropTypes.string,
+            licensingVersion: PropTypes.string,
+            licensingData: PropTypes.shape({
+                licenceAgreement: PropTypes.string,
+                featureGroups: PropTypes.array
+            })
+        }),
+        softwareProductCategories: PropTypes.array,
+        finalizedLicenseModelList: PropTypes.array,
+        licenseAgreementList: PropTypes.array,
+        featureGroupsList: PropTypes.array,
+        onSubmit: PropTypes.func.isRequired,
+        onDataChanged: PropTypes.func.isRequired,
+        onValidityChanged: PropTypes.func.isRequired,
+        qdata: PropTypes.object.isRequired,
+        onQDataChanged: PropTypes.func.isRequired,
+        onVendorParamChanged: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		vendorName: PropTypes.string,
-		currentSoftwareProduct: PropTypes.shape({
-			id: PropTypes.string,
-			name: PropTypes.string,
-			description: PropTypes.string,
-			category: PropTypes.string,
-			subCategory: PropTypes.string,
-			vendorId: PropTypes.string,
-			vendorName: PropTypes.string,
-			licensingVersion: PropTypes.string,
-			licensingData: PropTypes.shape({
-				licenceAgreement: PropTypes.string,
-				featureGroups: PropTypes.array
-			})
-		}),
-		softwareProductCategories: PropTypes.array,
-		finalizedLicenseModelList: PropTypes.array,
-		licenseAgreementList: PropTypes.array,
-		featureGroupsList: PropTypes.array,
-		onSubmit: PropTypes.func.isRequired,
-		onDataChanged: PropTypes.func.isRequired,
-		onValidityChanged: PropTypes.func.isRequired,
-		qdata: PropTypes.object.isRequired,
-		onQDataChanged: PropTypes.func.isRequired,
-		onVendorParamChanged: PropTypes.func.isRequired
-	};
-
-	prepareDataForGeneralSection(){
-		let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, currentSoftwareProduct, genericFieldInfo, isVendorArchived, onArchivedVendorRemove} = this.props;
-		let {name, description, vendorId, subCategory, vendorName} = currentSoftwareProduct;		
-		return {
-			name,
-			description,
-			vendorId,
-			subCategory,
-			softwareProductCategories,
-			finalizedLicenseModelList,
-			onDataChanged,
-			onVendorParamChanged: args => this.onVendorParamChanged(args),
-			onSelectSubCategory: args => this.onSelectSubCategory(args),
-			genericFieldInfo,
-			vendorName,
-			isVendorArchived,
-			onArchivedVendorRemove
-		};
-
-	}
+    prepareDataForGeneralSection() {
+        let {
+            softwareProductCategories,
+            finalizedLicenseModelList,
+            onDataChanged,
+            currentSoftwareProduct,
+            genericFieldInfo,
+            isVendorArchived,
+            onArchivedVendorRemove
+        } = this.props;
+        let {
+            name,
+            description,
+            vendorId,
+            subCategory,
+            vendorName
+        } = currentSoftwareProduct;
+        return {
+            name,
+            description,
+            vendorId,
+            subCategory,
+            softwareProductCategories,
+            finalizedLicenseModelList,
+            onDataChanged,
+            onVendorParamChanged: args => this.onVendorParamChanged(args),
+            onSelectSubCategory: args => this.onSelectSubCategory(args),
+            genericFieldInfo,
+            vendorName,
+            isVendorArchived,
+            onArchivedVendorRemove
+        };
+    }
 
-	prepareDataForLicensesSection(){
-		let { featureGroupsList, licenseAgreementList, currentSoftwareProduct, isVendorArchived} = this.props;
-		let {vendorId, licensingVersion, licensingData = {}} = currentSoftwareProduct;
-		return {
-			onVendorParamChanged: args => this.onVendorParamChanged(args),
-			vendorId,
-			licensingVersion,
-			licensingVersionsList: this.buildLicensingVersionsListItems(),
-			licensingData,
-			onFeatureGroupsChanged: args => this.onFeatureGroupsChanged(args),
-			onLicensingDataChanged: args => this.onLicensingDataChanged(args),
-			featureGroupsList,
-			licenseAgreementList,
-			isVendorArchived
-		};
+    prepareDataForLicensesSection() {
+        let {
+            featureGroupsList,
+            licenseAgreementList,
+            currentSoftwareProduct,
+            isVendorArchived
+        } = this.props;
+        let {
+            vendorId,
+            licensingVersion,
+            licensingData = {}
+        } = currentSoftwareProduct;
+        return {
+            onVendorParamChanged: args => this.onVendorParamChanged(args),
+            vendorId,
+            licensingVersion,
+            licensingVersionsList: this.buildLicensingVersionsListItems(),
+            licensingData,
+            onFeatureGroupsChanged: args => this.onFeatureGroupsChanged(args),
+            onLicensingDataChanged: args => this.onLicensingDataChanged(args),
+            featureGroupsList,
+            licenseAgreementList,
+            isVendorArchived
+        };
+    }
 
-	}
+    render() {
+        let { currentSoftwareProduct } = this.props;
+        let { qdata, onQDataChanged, dataMap, qGenericFieldInfo } = this.props;
+        let { isReadOnlyMode } = this.props;
 
-	render() {
-		let {currentSoftwareProduct} = this.props;
-		let {qdata, onQDataChanged, dataMap, qGenericFieldInfo} = this.props;
-		let {isReadOnlyMode} = this.props;
+        return (
+            <div className="vsp-details-page">
+                <Form
+                    ref={validationForm =>
+                        (this.validationForm = validationForm)
+                    }
+                    className="vsp-general-tab"
+                    hasButtons={false}
+                    formReady={null}
+                    isValid={this.props.isFormValid}
+                    onSubmit={() =>
+                        this.props.onSubmit(currentSoftwareProduct, qdata)
+                    }
+                    onValidityChanged={isValidityData =>
+                        this.props.onValidityChanged(isValidityData)
+                    }
+                    isReadOnlyMode={isReadOnlyMode}>
+                    <GeneralSection {...this.prepareDataForGeneralSection()} />
+                    <LicensesSection
+                        {...this.prepareDataForLicensesSection()}
+                    />
+                    <AvailabilitySection
+                        onQDataChanged={onQDataChanged}
+                        dataMap={dataMap}
+                    />
+                    <RegionsSection
+                        onQDataChanged={onQDataChanged}
+                        dataMap={dataMap}
+                        genericFieldInfo={qGenericFieldInfo}
+                    />
+                    <StorageDataReplicationSection
+                        onQDataChanged={onQDataChanged}
+                        dataMap={dataMap}
+                        genericFieldInfo={qGenericFieldInfo}
+                    />
+                </Form>
+            </div>
+        );
+    }
 
-		return (
-		<div className='vsp-details-page'>
-				<Form
-					ref={(validationForm) => this.validationForm = validationForm}
-					className='vsp-general-tab'
-					hasButtons={false}
-					formReady={null}
-					isValid={this.props.isFormValid}
-					onSubmit={() => this.props.onSubmit(currentSoftwareProduct, qdata)}
-					onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
-					isReadOnlyMode={isReadOnlyMode}>
-					<GeneralSection {...this.prepareDataForGeneralSection()}/>
-					<LicensesSection {...this.prepareDataForLicensesSection()}/>
-					<AvailabilitySection onQDataChanged={onQDataChanged} dataMap={dataMap} />
-					<RegionsSection onQDataChanged={onQDataChanged} dataMap={dataMap} genericFieldInfo={qGenericFieldInfo} />
-					<StorageDataReplicationSection onQDataChanged={onQDataChanged} dataMap={dataMap} genericFieldInfo={qGenericFieldInfo} />
-				</Form>
-			</div>
-		);
-	}
+    onVendorParamChanged({ vendorId, licensingVersion }) {
+        let { finalizedLicenseModelList, onVendorParamChanged } = this.props;
+        if (!licensingVersion) {
+            const licensingVersionsList = this.buildLicensingVersionsListItems();
+            licensingVersion = licensingVersionsList[0].enum;
+        }
 
-	onVendorParamChanged({vendorId, licensingVersion}) {
-		
-		let {finalizedLicenseModelList, onVendorParamChanged} = this.props;
-		if(!licensingVersion) {
-			const licensingVersionsList = this.buildLicensingVersionsListItems();
-			licensingVersion = licensingVersionsList[0].enum;
-		}
-		
-		if (!vendorId) {
-			 vendorId = finalizedLicenseModelList[0].id;
-		}
-		
-		let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).name || '';
-		let deltaData = {
-			vendorId,
-			vendorName,
-			licensingVersion,
-			licensingData: {}
-		};
+        if (!vendorId) {
+            vendorId = finalizedLicenseModelList[0].id;
+        }
 
-		onVendorParamChanged(deltaData, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
+        let vendorName =
+            finalizedLicenseModelList.find(
+                licenseModelItem => licenseModelItem.id === vendorId
+            ).name || '';
+        let deltaData = {
+            vendorId,
+            vendorName,
+            licensingVersion,
+            licensingData: {}
+        };
 
-	}
+        onVendorParamChanged(deltaData, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
+    }
 
-	buildLicensingVersionsListItems() {
-		let {licensingVersionsList} = this.props;
+    buildLicensingVersionsListItems() {
+        let { licensingVersionsList } = this.props;
 
-		let licensingVersionsListItems = [{
-			enum: '',
-			title: i18n('Select...')
-		}];
+        let licensingVersionsListItems = [
+            {
+                enum: '',
+                title: i18n('Select...')
+            }
+        ];
 
-		return licensingVersionsListItems.concat(licensingVersionsList.map(version => ({enum: version.id, title: version.name})));
-	}
+        return licensingVersionsListItems.concat(
+            licensingVersionsList.map(version => ({
+                enum: version.id,
+                title: version.name
+            }))
+        );
+    }
 
-	onFeatureGroupsChanged({featureGroups}) {
-		this.onLicensingDataChanged({featureGroups});
-	}
+    onFeatureGroupsChanged({ featureGroups }) {
+        this.onLicensingDataChanged({ featureGroups });
+    }
 
-	onLicensingDataChanged(deltaData) {
-		this.props.onDataChanged({
-			licensingData: {
-				...this.props.currentSoftwareProduct.licensingData,
-				...deltaData
-			}
-		}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
-	}
+    onLicensingDataChanged(deltaData) {
+        this.props.onDataChanged(
+            {
+                licensingData: {
+                    ...this.props.currentSoftwareProduct.licensingData,
+                    ...deltaData
+                }
+            },
+            forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+        );
+    }
 
-	onSelectSubCategory(subCategory) {
-		let {softwareProductCategories, onDataChanged} = this.props;
-		let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
-		onDataChanged({category, subCategory}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
-	}
+    onSelectSubCategory(subCategory) {
+        let { softwareProductCategories, onDataChanged } = this.props;
+        let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(
+            subCategory,
+            softwareProductCategories
+        );
+        onDataChanged(
+            { category, subCategory },
+            forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+        );
+    }
 
-	save(){
-		return this.validationForm.handleFormSubmit(new Event('dummy'));
-	}
+    save() {
+        return this.validationForm.handleFormSubmit(new Event('dummy'));
+    }
 }
 
 export default SoftwareProductDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
index 64e0d562ce..34bfceec24 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
@@ -13,106 +13,134 @@
  * 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import LandingPageView from './SoftwareProductLandingPageView.jsx';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {onboardingMethod} from '../SoftwareProductConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { onboardingMethod } from '../SoftwareProductConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 export const mapStateToProps = ({
-	softwareProduct,
-	licenseModel: {licenseAgreement},
+    softwareProduct,
+    licenseModel: { licenseAgreement }
 }) => {
-	let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = [], } = softwareProduct;
-	let {licensingData = {}} = currentSoftwareProduct;
-	let {licenseAgreementList} = licenseAgreement;
-	let {componentsList} = softwareProductComponents;
-	let licenseAgreementName = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement);
-	if (licenseAgreementName) {
-		licenseAgreementName = licenseAgreementName.name;
-	} else if (licenseAgreementList.length === 0) { // otherwise the state of traingle svgicon will be updated post unmounting
-		licenseAgreementName = null;
-	}
-
-	let categoryName = '', subCategoryName = '', fullCategoryDisplayName = '';
-	const category = softwareProductCategories.find(ca => ca.uniqueId === currentSoftwareProduct.category);
-	if (category) {
-		categoryName = category.name;
-		const subcategories = category.subcategories || [];
-		const subcat = subcategories.find(sc => sc.uniqueId === currentSoftwareProduct.subCategory);
-		subCategoryName = subcat && subcat.name ? subcat.name : '';
-	}
-	fullCategoryDisplayName = `${subCategoryName} (${categoryName})`;
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents,
+        softwareProductCategories = []
+    } = softwareProduct;
+    let { licensingData = {} } = currentSoftwareProduct;
+    let { licenseAgreementList } = licenseAgreement;
+    let { componentsList } = softwareProductComponents;
+    let licenseAgreementName = licenseAgreementList.find(
+        la => la.id === licensingData.licenseAgreement
+    );
+    if (licenseAgreementName) {
+        licenseAgreementName = licenseAgreementName.name;
+    } else if (licenseAgreementList.length === 0) {
+        // otherwise the state of traingle svgicon will be updated post unmounting
+        licenseAgreementName = null;
+    }
 
+    let categoryName = '',
+        subCategoryName = '',
+        fullCategoryDisplayName = '';
+    const category = softwareProductCategories.find(
+        ca => ca.uniqueId === currentSoftwareProduct.category
+    );
+    if (category) {
+        categoryName = category.name;
+        const subcategories = category.subcategories || [];
+        const subcat = subcategories.find(
+            sc => sc.uniqueId === currentSoftwareProduct.subCategory
+        );
+        subCategoryName = subcat && subcat.name ? subcat.name : '';
+    }
+    fullCategoryDisplayName = `${subCategoryName} (${categoryName})`;
 
-	return {
-		currentSoftwareProduct: {
-			...currentSoftwareProduct,
-			licenseAgreementName,
-			fullCategoryDisplayName						
-		},		
-		componentsList,
-		isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        currentSoftwareProduct: {
+            ...currentSoftwareProduct,
+            licenseAgreementName,
+            fullCategoryDisplayName
+        },
+        componentsList,
+        isManual:
+            currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-const mapActionsToProps = (dispatch, {version}) => {
-	return {
-		onDetailsSelect: ({id: softwareProductId}) =>
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, screenType: screenTypes.SOFTWARE_PRODUCT,
-				props: {softwareProductId, version}
-			}),
-		onCandidateInProcess: (softwareProductId) => ScreensHelper.loadScreen(dispatch, {
-			screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT,
-			props: {softwareProductId, version}
-		}),	
-		onUpload: (softwareProductId, formData) =>
-			SoftwareProductActionHelper.uploadFile(dispatch, {
-				softwareProductId,
-				formData,
-				failedNotificationTitle: i18n('Upload validation failed'),
-				version
-			}),
+const mapActionsToProps = (dispatch, { version }) => {
+    return {
+        onDetailsSelect: ({ id: softwareProductId }) =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version }
+            }),
+        onCandidateInProcess: softwareProductId =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version }
+            }),
+        onUpload: (softwareProductId, formData) =>
+            SoftwareProductActionHelper.uploadFile(dispatch, {
+                softwareProductId,
+                formData,
+                failedNotificationTitle: i18n('Upload validation failed'),
+                version
+            }),
 
-		onUploadConfirmation: (softwareProductId, formData) =>
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data:{
-					msg: i18n('Upload will erase existing data. Do you want to continue?'),
-					confirmationButtonText: i18n('Continue'),
-					title: i18n('Warning'),
-					onConfirmed: ()=>SoftwareProductActionHelper.uploadFile(dispatch, {
-						softwareProductId,
-						formData,
-						failedNotificationTitle: i18n('Upload validation failed'),
-						version
-					}),
-					onDeclined: () => dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_CLOSE
-					})
-				}
-			}),
+        onUploadConfirmation: (softwareProductId, formData) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n(
+                        'Upload will erase existing data. Do you want to continue?'
+                    ),
+                    confirmationButtonText: i18n('Continue'),
+                    title: i18n('Warning'),
+                    onConfirmed: () =>
+                        SoftwareProductActionHelper.uploadFile(dispatch, {
+                            softwareProductId,
+                            formData,
+                            failedNotificationTitle: i18n(
+                                'Upload validation failed'
+                            ),
+                            version
+                        }),
+                    onDeclined: () =>
+                        dispatch({
+                            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                        })
+                }
+            }),
 
-		onInvalidFileSizeUpload: () => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_ERROR,
-			data: {
-				title: i18n('Upload Failed'),
-				confirmationButtonText: i18n('Continue'),
-				msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist')
-			}
-		}),
-		onComponentSelect: ({id: softwareProductId, componentId}) => ScreensHelper.loadScreen(dispatch, {
-			screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT,
-			props: {softwareProductId, version, componentId}
-		}),
-		/** for the next version */
-		onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch)
-	};
+        onInvalidFileSizeUpload: () =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                data: {
+                    title: i18n('Upload Failed'),
+                    confirmationButtonText: i18n('Continue'),
+                    msg: i18n(
+                        "no zip or csar file was uploaded or expected file doesn't exist"
+                    )
+                }
+            }),
+        onComponentSelect: ({ id: softwareProductId, componentId }) =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version, componentId }
+            }),
+        /** for the next version */
+        onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(LandingPageView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(LandingPageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index a73a849a08..bc8a2be646 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -18,7 +18,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Dropzone from 'react-dropzone';
 
-
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 
@@ -26,192 +25,237 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import SoftwareProductComponentsList from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js';
 
 const SoftwareProductPropType = PropTypes.shape({
-	name: PropTypes.string,
-	description: PropTypes.string,
-	version: PropTypes.string,
-	id: PropTypes.string,
-	categoryId: PropTypes.string,
-	vendorId: PropTypes.string,
-	status: PropTypes.string,
-	licensingData: PropTypes.object,
-	validationData: PropTypes.object
+    name: PropTypes.string,
+    description: PropTypes.string,
+    version: PropTypes.string,
+    id: PropTypes.string,
+    categoryId: PropTypes.string,
+    vendorId: PropTypes.string,
+    status: PropTypes.string,
+    licensingData: PropTypes.object,
+    validationData: PropTypes.object
 });
 
 const ComponentPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	displayName: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    displayName: PropTypes.string,
+    description: PropTypes.string
 });
 
 class SoftwareProductLandingPageView extends React.Component {
+    state = {
+        fileName: '',
+        dragging: false,
+        files: []
+    };
+
+    static propTypes = {
+        currentSoftwareProduct: SoftwareProductPropType,
+        isReadOnlyMode: PropTypes.bool,
+        componentsList: PropTypes.arrayOf(ComponentPropType),
+        version: PropTypes.object,
+        onDetailsSelect: PropTypes.func,
+        onUpload: PropTypes.func,
+        onUploadConfirmation: PropTypes.func,
+        onInvalidFileSizeUpload: PropTypes.func,
+        onComponentSelect: PropTypes.func,
+        onAddComponent: PropTypes.func
+    };
+    componentDidMount() {
+        const { onCandidateInProcess, currentSoftwareProduct } = this.props;
+        if (currentSoftwareProduct.candidateOnboardingOrigin) {
+            onCandidateInProcess(currentSoftwareProduct.id);
+        }
+    }
+    render() {
+        let {
+            currentSoftwareProduct,
+            isReadOnlyMode,
+            isManual,
+            onDetailsSelect
+        } = this.props;
+        return (
+            <div className="software-product-landing-wrapper">
+                <Dropzone
+                    className={classnames('software-product-landing-view', {
+                        'active-dragging': this.state.dragging
+                    })}
+                    onDrop={files =>
+                        this.handleImportSubmit(files, isReadOnlyMode, isManual)
+                    }
+                    onDragEnter={() =>
+                        this.handleOnDragEnter(isReadOnlyMode, isManual)
+                    }
+                    onDragLeave={() => this.setState({ dragging: false })}
+                    multiple={false}
+                    disableClick={true}
+                    ref="fileInput"
+                    name="fileInput"
+                    accept=".zip, .csar">
+                    <div className="draggable-wrapper">
+                        <div className="software-product-landing-view-top">
+                            <div className="row">
+                                <ProductSummary
+                                    currentSoftwareProduct={
+                                        currentSoftwareProduct
+                                    }
+                                    onDetailsSelect={onDetailsSelect}
+                                />
+                                {this.renderProductDetails(
+                                    isManual,
+                                    isReadOnlyMode
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </Dropzone>
+                <SoftwareProductComponentsList />
+            </div>
+        );
+    }
+
+    handleOnDragEnter(isReadOnlyMode, isManual) {
+        if (!isReadOnlyMode && !isManual) {
+            this.setState({ dragging: true });
+        }
+    }
+
+    renderProductDetails(isManual, isReadOnlyMode) {
+        return (
+            <div className="details-panel">
+                {!isManual && (
+                    <div>
+                        <div className="software-product-landing-view-heading-title">
+                            {i18n('Software Product Attachments')}
+                        </div>
+                        <DraggableUploadFileBox
+                            dataTestId="upload-btn"
+                            isReadOnlyMode={isReadOnlyMode}
+                            className={classnames(
+                                'software-product-landing-view-top-block-col-upl',
+                                { disabled: isReadOnlyMode }
+                            )}
+                            onClick={() => this.refs.fileInput.open()}
+                        />
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    handleImportSubmit(files, isReadOnlyMode, isManual) {
+        if (isReadOnlyMode || isManual) {
+            return;
+        }
+        if (files[0] && files[0].size) {
+            this.setState({
+                fileName: files[0].name,
+                dragging: false,
+                complete: '0'
+            });
+            this.startUploading(files);
+        } else {
+            this.setState({
+                dragging: false
+            });
+            this.props.onInvalidFileSizeUpload();
+        }
+    }
 
-	state = {
-
-		fileName: '',
-		dragging: false,
-		files: []
-	};
-
-	static propTypes = {
-		currentSoftwareProduct: SoftwareProductPropType,
-		isReadOnlyMode: PropTypes.bool,
-		componentsList: PropTypes.arrayOf(ComponentPropType),
-		version: PropTypes.object,
-		onDetailsSelect: PropTypes.func,
-		onUpload: PropTypes.func,
-		onUploadConfirmation: PropTypes.func,
-		onInvalidFileSizeUpload: PropTypes.func,
-		onComponentSelect: PropTypes.func,
-		onAddComponent: PropTypes.func
-	};
-	componentDidMount() {
-		const {onCandidateInProcess, currentSoftwareProduct} = this.props;
-		if (currentSoftwareProduct.candidateOnboardingOrigin) {
-			onCandidateInProcess(currentSoftwareProduct.id);
-		}
-	}
-	render() {
-		let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect} =  this.props;
-		return (
-			<div className='software-product-landing-wrapper'>
-				<Dropzone
-					className={classnames('software-product-landing-view', {'active-dragging': this.state.dragging})}
-					onDrop={files => this.handleImportSubmit(files, isReadOnlyMode, isManual)}
-					onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode, isManual)}
-					onDragLeave={() => this.setState({dragging:false})}
-					multiple={false}
-					disableClick={true}
-					ref='fileInput'
-					name='fileInput'
-					accept='.zip, .csar'>
-					<div className='draggable-wrapper'>
-						<div className='software-product-landing-view-top'>
-							<div className='row'>
-								<ProductSummary currentSoftwareProduct={currentSoftwareProduct} onDetailsSelect={onDetailsSelect} />
-								{this.renderProductDetails(isManual, isReadOnlyMode)}
-							</div>
-						</div>
-					</div>
-				</Dropzone>
-				<SoftwareProductComponentsList/>
-			</div>
-		);
-	}
-
-	handleOnDragEnter(isReadOnlyMode, isManual) {
-		if (!isReadOnlyMode && !isManual) {
-			this.setState({dragging: true});
-		}
-	}
-
-	renderProductDetails(isManual, isReadOnlyMode) {
-		return (
-			<div className='details-panel'>
-				{ !isManual && <div>
-					<div className='software-product-landing-view-heading-title'>{i18n('Software Product Attachments')}</div>
-						<DraggableUploadFileBox
-							dataTestId='upload-btn'
-							isReadOnlyMode={isReadOnlyMode}
-							className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}
-							onClick={() => this.refs.fileInput.open()}/>
-					</div>
-				}
-			</div>
-		);
-	}
-
-	handleImportSubmit(files, isReadOnlyMode, isManual) {
-		if (isReadOnlyMode || isManual) {
-			return;
-		}
-		if (files[0] && files[0].size) {
-			this.setState({
-				fileName: files[0].name,
-				dragging: false,
-				complete: '0',
-			});
-			this.startUploading(files);
-		}
-		else {
-			this.setState({
-				dragging: false
-			});
-			this.props.onInvalidFileSizeUpload();
-		}
-
-	}
-
-	startUploading(files) {
-		let {onUpload, currentSoftwareProduct, onUploadConfirmation} = this.props;
-
-		let {validationData} = currentSoftwareProduct;
-
-		if (!(files && files.length)) {
-			return;
-		}
-		let file = files[0];
-		let formData = new FormData();
-		formData.append('upload', file);
-		this.refs.fileInput.value = '';
-
-		if (validationData) {
-			onUploadConfirmation(currentSoftwareProduct.id, formData);
-		}else {
-			onUpload(currentSoftwareProduct.id, formData);
-		}
-
-	}
+    startUploading(files) {
+        let {
+            onUpload,
+            currentSoftwareProduct,
+            onUploadConfirmation
+        } = this.props;
+
+        let { validationData } = currentSoftwareProduct;
+
+        if (!(files && files.length)) {
+            return;
+        }
+        let file = files[0];
+        let formData = new FormData();
+        formData.append('upload', file);
+        this.refs.fileInput.value = '';
+
+        if (validationData) {
+            onUploadConfirmation(currentSoftwareProduct.id, formData);
+        } else {
+            onUpload(currentSoftwareProduct.id, formData);
+        }
+    }
 }
 
-const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => {
-	let {name = '', description = '', vendorName = '', fullCategoryDisplayName = '', licenseAgreementName = ''}  = currentSoftwareProduct;
-	return (
-		<div className='details-panel'>
-			<div className='software-product-landing-view-heading-title'>{i18n('Software Product Details')}</div>
-			<div
-				className='software-product-landing-view-top-block clickable'
-				onClick={() => onDetailsSelect(currentSoftwareProduct)}>
-				<div className='details-container'>
-					<div className='single-detail-section title-section'>
-						<div className='single-detail-section title-text'>
-							{name}
-						</div>
-					</div>
-					<div className='details-section'>
-						<div className='multiple-details-section'>
-							<div className='detail-col' >
-								<div className='title'>{i18n('Vendor')}</div>
-								<div className='description'>{vendorName}</div>
-							</div>
-							<div className='detail-col'>
-								<div className='title'>{i18n('Category')}</div>
-								<div className='description'>{fullCategoryDisplayName}</div>
-							</div>
-							<div className='detail-col'>
-								<div className='title extra-large'>{i18n('License Agreement')}</div>
-								<div className='description'>
-									<LicenseAgreement licenseAgreementName={licenseAgreementName}/>
-								</div>
-							</div>
-						</div>
-						<div className='single-detail-section'>
-							<div className='title'>{i18n('Description')}</div>
-							<div className='description'>{description}</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+const ProductSummary = ({ currentSoftwareProduct, onDetailsSelect }) => {
+    let {
+        name = '',
+        description = '',
+        vendorName = '',
+        fullCategoryDisplayName = '',
+        licenseAgreementName = ''
+    } = currentSoftwareProduct;
+    return (
+        <div className="details-panel">
+            <div className="software-product-landing-view-heading-title">
+                {i18n('Software Product Details')}
+            </div>
+            <div
+                className="software-product-landing-view-top-block clickable"
+                onClick={() => onDetailsSelect(currentSoftwareProduct)}>
+                <div className="details-container">
+                    <div className="single-detail-section title-section">
+                        <div className="single-detail-section title-text">
+                            {name}
+                        </div>
+                    </div>
+                    <div className="details-section">
+                        <div className="multiple-details-section">
+                            <div className="detail-col">
+                                <div className="title">{i18n('Vendor')}</div>
+                                <div className="description">{vendorName}</div>
+                            </div>
+                            <div className="detail-col">
+                                <div className="title">{i18n('Category')}</div>
+                                <div className="description">
+                                    {fullCategoryDisplayName}
+                                </div>
+                            </div>
+                            <div className="detail-col">
+                                <div className="title extra-large">
+                                    {i18n('License Agreement')}
+                                </div>
+                                <div className="description">
+                                    <LicenseAgreement
+                                        licenseAgreementName={
+                                            licenseAgreementName
+                                        }
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className="single-detail-section">
+                            <div className="title">{i18n('Description')}</div>
+                            <div className="description">{description}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 };
 
-
-const LicenseAgreement = ({licenseAgreementName}) => {
-	if (!licenseAgreementName) {
-		return (<div className='missing-license'><SVGIcon color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>);
-	}
-	return <div>{licenseAgreementName}</div>;
+const LicenseAgreement = ({ licenseAgreementName }) => {
+    if (!licenseAgreementName) {
+        return (
+            <div className="missing-license">
+                <SVGIcon color="warning" name="exclamationTriangleFull" />
+                <div className="warning-text">{i18n('Missing')}</div>
+            </div>
+        );
+    }
+    return <div>{licenseAgreementName}</div>;
 };
 
 export default SoftwareProductLandingPageView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js
index 6161eadba9..27dd471a00 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js
@@ -13,13 +13,14 @@
  * 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 SoftwareProductNetworksView from './SoftwareProductNetworksView.jsx';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductNetworks: {networksList = []}} = softwareProduct;
-	return {networksList};
+export const mapStateToProps = ({ softwareProduct }) => {
+    let { softwareProductNetworks: { networksList = [] } } = softwareProduct;
+    return { networksList };
 };
 
-export default connect(mapStateToProps, null, null, {withRef: true})(SoftwareProductNetworksView);
-
+export default connect(mapStateToProps, null, null, { withRef: true })(
+    SoftwareProductNetworksView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js
index 4cb460ecc6..388c641b46 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js
@@ -13,30 +13,29 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductNetworksConstants.js';
+import { actionTypes } from './SoftwareProductNetworksConstants.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
 function baseUrl(vspId, version) {
-	let {id: versionId} = version;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/networks`;
+    let { id: versionId } = version;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/networks`;
 }
 
-
 function fetchNetworksList(softwareProductId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
 const SoftwareProductNetworksActionHelper = {
-	fetchNetworksList(dispatch, {softwareProductId, version}) {
-		return fetchNetworksList(softwareProductId, version).then(response => {
-			dispatch({
-				type: actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS,
-				networksList: response.results
-			});
-		});
-	}
+    fetchNetworksList(dispatch, { softwareProductId, version }) {
+        return fetchNetworksList(softwareProductId, version).then(response => {
+            dispatch({
+                type: actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS,
+                networksList: response.results
+            });
+        });
+    }
 };
 
-export  default SoftwareProductNetworksActionHelper;
+export default SoftwareProductNetworksActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js
index a3d5578dc4..17e4bdfe8d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js
@@ -16,5 +16,5 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	FETCH_SOFTWARE_PRODUCT_NETWORKS: null,
+    FETCH_SOFTWARE_PRODUCT_NETWORKS: null
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js
index e7c2fcb045..796de822df 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js
@@ -13,13 +13,13 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductNetworksConstants.js';
+import { actionTypes } from './SoftwareProductNetworksConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS:
-			return [...action.networksList];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS:
+            return [...action.networksList];
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
index e8c365f124..458f3192f4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
@@ -22,73 +22,76 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
 class SoftwareProductNetworksView extends React.Component {
+    static propTypes = {
+        networksList: PropTypes.arrayOf(
+            PropTypes.shape({
+                id: PropTypes.string.isRequired,
+                name: PropTypes.string.isRequired,
+                dhcp: PropTypes.bool.isRequired
+            })
+        ).isRequired,
+        isReadOnlyMode: PropTypes.bool.isRequired
+    };
 
-	static propTypes = {
-		networksList: PropTypes.arrayOf(PropTypes.shape({
-			id: PropTypes.string.isRequired,
-			name: PropTypes.string.isRequired,
-			dhcp: PropTypes.bool.isRequired
-		})).isRequired,
-		isReadOnlyMode: PropTypes.bool.isRequired
-	};
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    render() {
+        const { localFilter } = this.state;
+        const { isReadOnlyMode } = this.props;
 
-	render() {
-		const {localFilter} = this.state;
-		const {isReadOnlyMode} = this.props;
+        return (
+            <div className="vsp-networks-page">
+                <ListEditorView
+                    title={i18n('Networks')}
+                    filterValue={localFilter}
+                    placeholder={i18n('Filter Networks')}
+                    onFilter={value => this.setState({ localFilter: value })}
+                    twoColumns>
+                    {this.filterList().map(network =>
+                        this.renderNetworksListItem({ network, isReadOnlyMode })
+                    )}
+                </ListEditorView>
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-networks-page'>
-				<ListEditorView
-					title={i18n('Networks')}
-					filterValue={localFilter}
-					placeholder={i18n('Filter Networks')}
-					onFilter={value => this.setState({localFilter: value})}
-					twoColumns>
-					{this.filterList().map(network => this.renderNetworksListItem({network, isReadOnlyMode}))}
-				</ListEditorView>
-			</div>
-		);
-	}
+    renderNetworksListItem({ network, isReadOnlyMode }) {
+        let { id, name, dhcp } = network;
+        return (
+            <ListEditorItemView
+                key={id}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}>
+                <ListEditorItemViewField>
+                    <div className="name">{name}</div>
+                </ListEditorItemViewField>
+                <ListEditorItemViewField>
+                    <div className="details">
+                        <div className="title">{i18n('DHCP')}</div>
+                        <div className="artifact-name">
+                            {dhcp ? i18n('YES') : i18n('NO')}
+                        </div>
+                    </div>
+                </ListEditorItemViewField>
+            </ListEditorItemView>
+        );
+    }
 
-	renderNetworksListItem({network, isReadOnlyMode}) {
-		let {id, name, dhcp} = network;
-		return (
-			<ListEditorItemView
-				key={id}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}>
+    filterList() {
+        let { networksList } = this.props;
 
-				<ListEditorItemViewField>
-					<div className='name'>{name}</div>
-				</ListEditorItemViewField>
-				<ListEditorItemViewField>
-					<div className='details'>
-						<div className='title'>{i18n('DHCP')}</div>
-						<div className='artifact-name'>{dhcp ? i18n('YES') : i18n('NO')}</div>
-					</div>
-				</ListEditorItemViewField>
-			</ListEditorItemView>
-		);
-	}
-
-	filterList() {
-		let {networksList} = this.props;
-
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return networksList.filter(({name = ''}) => {
-				return escape(name).match(filter);
-			});
-		}
-		else {
-			return networksList;
-		}
-	}
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return networksList.filter(({ name = '' }) => {
+                return escape(name).match(filter);
+            });
+        } else {
+            return networksList;
+        }
+    }
 }
 
 export default SoftwareProductNetworksView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
index aa39c87dd0..cee46abc69 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
@@ -20,80 +20,86 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
-
 class SoftwareProductProcessesListView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
-
-	static propTypes = {
-		onAddProcess: PropTypes.func.isRequired,
-		onEditProcess: PropTypes.func.isRequired,
-		onDeleteProcess: PropTypes.func.isRequired,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		currentSoftwareProduct:PropTypes.object,
-		addButtonTitle: PropTypes.string
-	};
-
-	render() {
-		const {localFilter} = this.state;
-		let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props;
+    static propTypes = {
+        onAddProcess: PropTypes.func.isRequired,
+        onEditProcess: PropTypes.func.isRequired,
+        onDeleteProcess: PropTypes.func.isRequired,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        currentSoftwareProduct: PropTypes.object,
+        addButtonTitle: PropTypes.string
+    };
 
-		return (
-			<ListEditorView
-				plusButtonTitle={addButtonTitle}
-				filterValue={localFilter}
-				placeholder={i18n('Filter Process')}
-				onAdd={onAddProcess}
-				isReadOnlyMode={isReadOnlyMode}
-				title={i18n('Process Details')}
-				onFilter={value => this.setState({localFilter: value})}>
-				{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
-			</ListEditorView>);
-	}
+    render() {
+        const { localFilter } = this.state;
+        let { onAddProcess, isReadOnlyMode, addButtonTitle } = this.props;
 
-	renderProcessListItem(process, isReadOnlyMode) {
-		let {id, name, description, artifactName = ''} = process;
-		let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} =  this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}
-				onSelect={() => onEditProcess(process)}
-				onDelete={() => onDeleteProcess(process, version)}>
+        return (
+            <ListEditorView
+                plusButtonTitle={addButtonTitle}
+                filterValue={localFilter}
+                placeholder={i18n('Filter Process')}
+                onAdd={onAddProcess}
+                isReadOnlyMode={isReadOnlyMode}
+                title={i18n('Process Details')}
+                onFilter={value => this.setState({ localFilter: value })}>
+                {this.filterList().map(processes =>
+                    this.renderProcessListItem(processes, isReadOnlyMode)
+                )}
+            </ListEditorView>
+        );
+    }
 
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='name'>{name}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Artifact name')}</div>
-					<div className='artifact-name'>{artifactName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Notes')}</div>
-					<div className='description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
+    renderProcessListItem(process, isReadOnlyMode) {
+        let { id, name, description, artifactName = '' } = process;
+        let {
+            currentSoftwareProduct: { version },
+            onEditProcess,
+            onDeleteProcess
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}
+                onSelect={() => onEditProcess(process)}
+                onDelete={() => onDeleteProcess(process, version)}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="name">{name}</div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Artifact name')}</div>
+                    <div className="artifact-name">{artifactName}</div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Notes')}</div>
+                    <div className="description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
 
-	filterList() {
-		let {processesList} = this.props;
-		let {localFilter} = this.state;
+    filterList() {
+        let { processesList } = this.props;
+        let { localFilter } = this.state;
 
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return processesList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return processesList;
-		}
-	}
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return processesList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return processesList;
+        }
+    }
 }
 
 export default SoftwareProductProcessesListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
index b0403abde5..fb44530dae 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
@@ -13,40 +13,57 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
 import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
-	let {data} = processesEditor;
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductProcesses: { processesList, processesEditor }
+    } = softwareProduct;
+    let { data } = processesEditor;
 
-	return {
-		currentSoftwareProduct,
-		processesList,
-		isDisplayEditor: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id)
-	};
+    return {
+        currentSoftwareProduct,
+        processesList,
+        isDisplayEditor: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch),
-		onEditProcess: (process) => SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
-		onDeleteProcess: (process) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch,
-					{process, softwareProductId, version})
-			}
-		})
-	};
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onAddProcess: () =>
+            SoftwareProductProcessesActionHelper.openEditor(dispatch),
+        onEditProcess: process =>
+            SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
+        onDeleteProcess: process =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{name}"?', {
+                        name: process.name
+                    }),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        SoftwareProductProcessesActionHelper.deleteProcess(
+                            dispatch,
+                            {
+                                process,
+                                softwareProductId,
+                                version
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductProcessesView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductProcessesView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
index 8fd370b6cc..7c72c5b892 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
@@ -13,127 +13,145 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
 function baseUrl(vspId, version) {
-	let {id: versionId} = version;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
+    let { id: versionId } = version;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
 }
 
 function putProcess(softwareProductId, version, process) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${process.id}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, version)}/${process.id}`,
+        {
+            name: process.name,
+            description: process.description,
+            type: process.type === '' ? null : process.type
+        }
+    );
 }
 
 function postProcess(softwareProductId, version, process) {
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
-		name: process.name,
-		description: process.description,
-		type: process.type === '' ? null : process.type
-	});
+    return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+        name: process.name,
+        description: process.description,
+        type: process.type === '' ? null : process.type
+    });
 }
 
 function deleteProcess(softwareProductId, version, processId) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${processId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, version)}/${processId}`
+    );
 }
 
-function uploadFileToProcess(softwareProductId, version, processId, formData)
-{
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}/${processId}/upload`, formData);
+function uploadFileToProcess(softwareProductId, version, processId, formData) {
+    return RestAPIUtil.post(
+        `${baseUrl(softwareProductId, version)}/${processId}/upload`,
+        formData
+    );
 }
 
 function fetchProcesses(softwareProductId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
 const SoftwareProductActionHelper = {
-
-	fetchProcessesList(dispatch, {softwareProductId, version}) {
-
-		dispatch({
-			type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
-			processesList: []
-		});
-
-		return fetchProcesses(softwareProductId, version).then(response => {
-			dispatch({
-				type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
-				processesList: response.results
-			});
-		});
-	},
-	openEditor(dispatch, process = {}) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
-			process
-		});
-	},
-
-	deleteProcess(dispatch, {process, softwareProductId, version}) {
-		return deleteProcess(softwareProductId, version, process.id).then(() => {
-			dispatch({
-				type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
-				processId: process.id
-			});
-		});
-
-	},
-
-	closeEditor(dispatch) {
-		dispatch({
-			type:actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
-		});
-	},
-
-	saveProcess(dispatch, {softwareProductId, version, previousProcess, process}) {
-		if (previousProcess) {
-			return putProcess(softwareProductId, version, process).then(() => {
-				if (process.formData){
-					uploadFileToProcess(softwareProductId, version, process.id, process.formData);
-				}
-				dispatch({
-					type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
-					process
-				});
-			});
-		}
-		else {
-			return postProcess(softwareProductId, version, process).then(response => {
-				if (process.formData) {
-					uploadFileToProcess(softwareProductId, version, response.value, process.formData);
-				}
-				dispatch({
-					type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
-					process: {
-						...process,
-						id: response.value
-					}
-				});
-			});
-		}
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
-			processToDelete: false
-		});
-	},
-
-	openDeleteProcessesConfirm(dispatch, {process} ) {
-		dispatch({
-			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
-			processToDelete: process
-		});
-	}
-
+    fetchProcessesList(dispatch, { softwareProductId, version }) {
+        dispatch({
+            type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+            processesList: []
+        });
+
+        return fetchProcesses(softwareProductId, version).then(response => {
+            dispatch({
+                type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+                processesList: response.results
+            });
+        });
+    },
+    openEditor(dispatch, process = {}) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
+            process
+        });
+    },
+
+    deleteProcess(dispatch, { process, softwareProductId, version }) {
+        return deleteProcess(softwareProductId, version, process.id).then(
+            () => {
+                dispatch({
+                    type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
+                    processId: process.id
+                });
+            }
+        );
+    },
+
+    closeEditor(dispatch) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
+        });
+    },
+
+    saveProcess(
+        dispatch,
+        { softwareProductId, version, previousProcess, process }
+    ) {
+        if (previousProcess) {
+            return putProcess(softwareProductId, version, process).then(() => {
+                if (process.formData) {
+                    uploadFileToProcess(
+                        softwareProductId,
+                        version,
+                        process.id,
+                        process.formData
+                    );
+                }
+                dispatch({
+                    type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
+                    process
+                });
+            });
+        } else {
+            return postProcess(softwareProductId, version, process).then(
+                response => {
+                    if (process.formData) {
+                        uploadFileToProcess(
+                            softwareProductId,
+                            version,
+                            response.value,
+                            process.formData
+                        );
+                    }
+                    dispatch({
+                        type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
+                        process: {
+                            ...process,
+                            id: response.value
+                        }
+                    });
+                }
+            );
+        }
+    },
+
+    hideDeleteConfirm(dispatch) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+            processToDelete: false
+        });
+    },
+
+    openDeleteProcessesConfirm(dispatch, { process }) {
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+            processToDelete: process
+        });
+    }
 };
 
 export default SoftwareProductActionHelper;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
index 6eee24cdde..7f09ea8e73 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
@@ -16,20 +16,20 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	ADD_SOFTWARE_PRODUCT_PROCESS: null,
-	EDIT_SOFTWARE_PRODUCT_PROCESS: null,
-	DELETE_SOFTWARE_PRODUCT_PROCESS: null,
-	SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
-	SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
-	FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
-	SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
+    ADD_SOFTWARE_PRODUCT_PROCESS: null,
+    EDIT_SOFTWARE_PRODUCT_PROCESS: null,
+    DELETE_SOFTWARE_PRODUCT_PROCESS: null,
+    SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
+    SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
+    FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
+    SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
 });
 
 export const optionsInputValues = {
-	PROCESS_TYPE: [
-		{title: 'Select...', enum: ''},
-		{title: 'Other', enum: 'Other'}
-	]
+    PROCESS_TYPE: [
+        { title: 'Select...', enum: '' },
+        { title: 'Other', enum: 'Other' }
+    ]
 };
 
 export const VSP_PROCESS_FORM = 'VSPPROCESSFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
index fc194fac13..58cc894a21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
@@ -13,41 +13,56 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper';
 import SoftwareProductProcessesEditorView from './SoftwareProductProcessesEditorView.jsx';
-import {VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import { VSP_PROCESS_FORM } from './SoftwareProductProcessesConstants.js';
 
-export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
-	let {data, genericFieldInfo, formReady} = processesEditor;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-	let previousData;
-	const processId = data ? data.id : null;
-	if(processId) {
-		previousData = processesList.find(process => process.id === processId);
-	}
+export const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductProcesses: { processesList, processesEditor }
+    } = softwareProduct;
+    let { data, genericFieldInfo, formReady } = processesEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    let previousData;
+    const processId = data ? data.id : null;
+    if (processId) {
+        previousData = processesList.find(process => process.id === processId);
+    }
 
-	return {
-		data,
-		genericFieldInfo,
-		previousData,
-		isFormValid,
-		formReady
-	};
+    return {
+        data,
+        genericFieldInfo,
+        previousData,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VSP_PROCESS_FORM}),
-		onSubmit: ({previousProcess, process}) => {
-			SoftwareProductProcessesActionHelper.closeEditor(dispatch);
-			SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process});
-		},
-		onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
-	};
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: VSP_PROCESS_FORM
+            }),
+        onSubmit: ({ previousProcess, process }) => {
+            SoftwareProductProcessesActionHelper.closeEditor(dispatch);
+            SoftwareProductProcessesActionHelper.saveProcess(dispatch, {
+                softwareProductId,
+                version,
+                previousProcess,
+                process
+            });
+        },
+        onCancel: () =>
+            SoftwareProductProcessesActionHelper.closeEditor(dispatch),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductProcessesEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    SoftwareProductProcessesEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
index d1bd602683..6e8254f65b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -25,157 +25,212 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const SoftwareProductProcessEditorPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	artifactName: PropTypes.string,
-	type: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    artifactName: PropTypes.string,
+    type: PropTypes.string
 });
 
-
-
 class SoftwareProductProcessesEditorForm extends React.Component {
+    static propTypes = {
+        data: SoftwareProductProcessEditorPropType,
+        previousData: SoftwareProductProcessEditorPropType,
+        isReadOnlyMode: PropTypes.bool,
+        onDataChanged: PropTypes.func,
+        onSubmit: PropTypes.func,
+        onCancel: PropTypes.func
+    };
+    state = {
+        dragging: false,
+        files: []
+    };
 
+    render() {
+        let {
+            data = {},
+            isReadOnlyMode,
+            onDataChanged,
+            onCancel,
+            genericFieldInfo,
+            optionsInputValues
+        } = this.props;
+        let { name, description, artifactName, type } = data;
 
-	static propTypes = {
-		data: SoftwareProductProcessEditorPropType,
-		previousData: SoftwareProductProcessEditorPropType,
-		isReadOnlyMode: PropTypes.bool,
-		onDataChanged: PropTypes.func,
-		onSubmit: PropTypes.func,
-		onCancel: PropTypes.func
-	};
-	state = {
-		dragging: false,
-		files: []
-	};
-
-	render() {
-		let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props;
-		let {name, description, artifactName, type} = data;
-
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					ref='validationForm'
-					hasButtons={true}
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					onSubmit={ () => this.submit() }
-					onReset={ () => onCancel() }
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.props.onValidateForm() }
-					className='vsp-processes-editor'>
-					<div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
-						<Dropzone
-							className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
-							onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
-							onDragEnter={() => this.setState({dragging: true})}
-							onDragLeave={() => this.setState({dragging: false})}
-							multiple={false}
-							disableClick={true}
-							ref='processEditorFileInput'
-							name='processEditorFileInput'>
-							<GridSection hasLastColSet={true}>
-								<GridItem colSpan={2}>
-									<Input
-										onChange={name => onDataChanged({name})}
-										isValid={genericFieldInfo.name.isValid}
-										isRequired={true}
-										data-test-id='name'
-										errorText={genericFieldInfo.name.errorText}
-										label={i18n('Name')}
-										value={name}
-										type='text'/>
-								</GridItem>
-								<GridItem colSpan={2} lastColInRow={true}>
-									<label>&nbsp;</label>
-									<DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/>
-								</GridItem>
-							</GridSection>
-							<GridSection hasLastColSet={true}>
-								<GridItem colSpan={2}>
-									<Input
-										name='vsp-process-description'
-										groupClassName='vsp-process-description'
-										onChange={description => onDataChanged({description})}
-										isValid={genericFieldInfo.description.isValid}
-										errorText={genericFieldInfo.description.errorText}
-										label={i18n('Notes')}
-										value={description}
-										data-test-id='vsp-process-description'
-										type='textarea'/>
-								</GridItem>
-								<GridItem colSpan={2} lastColInRow={true}>
-									<Input
-										label={i18n('Artifacts')}
-										value={artifactName}
-										type='text'
-										disabled/>
-									<Input
-										onChange={e => {
-											// setting the unit to the correct value
-											const selectedIndex = e.target.selectedIndex;
-											const val = e.target.options[selectedIndex].value;
-											onDataChanged({type: val});}
-										}
-										value={type}
-										label={i18n('Process Type')}
-										className='process-type'
-										data-test-id='process-type'
-										isValid={genericFieldInfo.type.isValid}
-										errorText={genericFieldInfo.type.errorText}
-										type='select'>
-										{optionsInputValues.PROCESS_TYPE.map(mtype =>
-											<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-									</Input>
-								</GridItem>
-							</GridSection>
-						</Dropzone>
-					</div>
-				</Form>}
-			</div>
-		);
-	}
-
-	submit() {
-		const {data: process, previousData: previousProcess} = this.props;
-		let {files} = this.state;
-		let formData = false;
-		if (files.length) {
-			let file = files[0];
-			formData = new FormData();
-			formData.append('upload', file);
-		}
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        onSubmit={() => this.submit()}
+                        onReset={() => onCancel()}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() => this.props.onValidateForm()}
+                        className="vsp-processes-editor">
+                        <div
+                            className={`vsp-processes-editor-data${
+                                isReadOnlyMode ? ' disabled' : ''
+                            }`}>
+                            <Dropzone
+                                className={`vsp-process-dropzone-view ${
+                                    this.state.dragging ? 'active-dragging' : ''
+                                }`}
+                                onDrop={(acceptedFiles, rejectedFiles) =>
+                                    this.handleImportSubmit(
+                                        acceptedFiles,
+                                        rejectedFiles
+                                    )
+                                }
+                                onDragEnter={() =>
+                                    this.setState({ dragging: true })
+                                }
+                                onDragLeave={() =>
+                                    this.setState({ dragging: false })
+                                }
+                                multiple={false}
+                                disableClick={true}
+                                ref="processEditorFileInput"
+                                name="processEditorFileInput">
+                                <GridSection hasLastColSet={true}>
+                                    <GridItem colSpan={2}>
+                                        <Input
+                                            onChange={name =>
+                                                onDataChanged({ name })
+                                            }
+                                            isValid={
+                                                genericFieldInfo.name.isValid
+                                            }
+                                            isRequired={true}
+                                            data-test-id="name"
+                                            errorText={
+                                                genericFieldInfo.name.errorText
+                                            }
+                                            label={i18n('Name')}
+                                            value={name}
+                                            type="text"
+                                        />
+                                    </GridItem>
+                                    <GridItem colSpan={2} lastColInRow={true}>
+                                        <label>&nbsp;</label>
+                                        <DraggableUploadFileBox
+                                            className="process-editor-file-box"
+                                            isReadOnlyMode={isReadOnlyMode}
+                                            onClick={() =>
+                                                this.refs.processEditorFileInput.open()
+                                            }
+                                        />
+                                    </GridItem>
+                                </GridSection>
+                                <GridSection hasLastColSet={true}>
+                                    <GridItem colSpan={2}>
+                                        <Input
+                                            name="vsp-process-description"
+                                            groupClassName="vsp-process-description"
+                                            onChange={description =>
+                                                onDataChanged({ description })
+                                            }
+                                            isValid={
+                                                genericFieldInfo.description
+                                                    .isValid
+                                            }
+                                            errorText={
+                                                genericFieldInfo.description
+                                                    .errorText
+                                            }
+                                            label={i18n('Notes')}
+                                            value={description}
+                                            data-test-id="vsp-process-description"
+                                            type="textarea"
+                                        />
+                                    </GridItem>
+                                    <GridItem colSpan={2} lastColInRow={true}>
+                                        <Input
+                                            label={i18n('Artifacts')}
+                                            value={artifactName}
+                                            type="text"
+                                            disabled
+                                        />
+                                        <Input
+                                            onChange={e => {
+                                                // setting the unit to the correct value
+                                                const selectedIndex =
+                                                    e.target.selectedIndex;
+                                                const val =
+                                                    e.target.options[
+                                                        selectedIndex
+                                                    ].value;
+                                                onDataChanged({ type: val });
+                                            }}
+                                            value={type}
+                                            label={i18n('Process Type')}
+                                            className="process-type"
+                                            data-test-id="process-type"
+                                            isValid={
+                                                genericFieldInfo.type.isValid
+                                            }
+                                            errorText={
+                                                genericFieldInfo.type.errorText
+                                            }
+                                            type="select">
+                                            {optionsInputValues.PROCESS_TYPE.map(
+                                                mtype => (
+                                                    <option
+                                                        key={mtype.enum}
+                                                        value={mtype.enum}>{`${
+                                                        mtype.title
+                                                    }`}</option>
+                                                )
+                                            )}
+                                        </Input>
+                                    </GridItem>
+                                </GridSection>
+                            </Dropzone>
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		let updatedProcess = {
-			...process,
-			formData
-		};
-		this.props.onSubmit({process: updatedProcess, previousProcess});
-	}
+    submit() {
+        const { data: process, previousData: previousProcess } = this.props;
+        let { files } = this.state;
+        let formData = false;
+        if (files.length) {
+            let file = files[0];
+            formData = new FormData();
+            formData.append('upload', file);
+        }
 
+        let updatedProcess = {
+            ...process,
+            formData
+        };
+        this.props.onSubmit({ process: updatedProcess, previousProcess });
+    }
 
-	handleImportSubmit(files, rejectedFiles) {
-		if (files.length > 0) {
-			let {onDataChanged} = this.props;
-			this.setState({
-				dragging: false,
-				complete: '0',
-				files
-			});
-			onDataChanged({artifactName: files[0].name});
-		}
-		else if (rejectedFiles.length > 0) {
-			this.setState({
-				dragging: false
-			});
-			if (DEBUG) {
-				console.log('file was rejected.' + rejectedFiles[0].name);
-			}
-		}
-	}
+    handleImportSubmit(files, rejectedFiles) {
+        if (files.length > 0) {
+            let { onDataChanged } = this.props;
+            this.setState({
+                dragging: false,
+                complete: '0',
+                files
+            });
+            onDataChanged({ artifactName: files[0].name });
+        } else if (rejectedFiles.length > 0) {
+            this.setState({
+                dragging: false
+            });
+            if (DEBUG) {
+                console.log('file was rejected.' + rejectedFiles[0].name);
+            }
+        }
+    }
 }
 
 export default SoftwareProductProcessesEditorForm;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
index 11b89b17c2..a8731fd163 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
@@ -13,43 +13,49 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import {
+    actionTypes,
+    VSP_PROCESS_FORM
+} from './SoftwareProductProcessesConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: VSP_PROCESS_FORM,
-				genericFieldInfo: {
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'artifactName' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'type' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				},
-				data: action.process
-			};
-		case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE:
-			return {};
+    switch (action.type) {
+        case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: VSP_PROCESS_FORM,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    artifactName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    type: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                },
+                data: action.process
+            };
+        case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE:
+            return {};
 
-		default:
-			return state;
-	}
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
index 9ce690a1ca..867090bb31 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -15,16 +15,18 @@
  */
 import React from 'react';
 
-import  {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
+import { optionsInputValues as ProcessesOptionsInputValues } from './SoftwareProductProcessesConstants.js';
 import SoftwareProductProcessesEditorForm from './SoftwareProductProcessesEditorForm.jsx';
 
-
 class SoftwareProductProcessesEditorView extends React.Component {
-	render() {
-		return (
-			<SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/>
-		);
-	}
+    render() {
+        return (
+            <SoftwareProductProcessesEditorForm
+                optionsInputValues={ProcessesOptionsInputValues}
+                {...this.props}
+            />
+        );
+    }
 }
 
 export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
index 20390d1f60..0e4d94650e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
@@ -13,20 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
-			return [...action.processesList];
-		case actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS:
-			const indexForEdit = state.findIndex(process => process.id === action.process.id);
-			return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)];
-		case actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS:
-			return [...state, action.process];
-		case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
-			return state.filter(process => process.id !== action.processId);
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
+            return [...action.processesList];
+        case actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS:
+            const indexForEdit = state.findIndex(
+                process => process.id === action.process.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.process,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS:
+            return [...state, action.process];
+        case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
+            return state.filter(process => process.id !== action.processId);
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
index b0da767a2b..1357c31e12 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -20,45 +20,63 @@ import Modal from 'nfvo-components/modal/Modal.jsx';
 import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
 import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';
 
-
 class SoftwareProductProcessesView extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
-
-	static propTypes = {
-		onAddProcess: PropTypes.func.isRequired,
-		onEditProcess: PropTypes.func.isRequired,
-		onDeleteProcess: PropTypes.func.isRequired,
-		isDisplayEditor: PropTypes.bool.isRequired,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		currentSoftwareProduct:PropTypes.object
-	};
-
-	render() {
-		return (
-			<div className='software-product-landing-view-right-side vsp-processes-page'>
-				{this.renderEditor()}
-				<SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/>
-			</div>
-		);
-	}
+    static propTypes = {
+        onAddProcess: PropTypes.func.isRequired,
+        onEditProcess: PropTypes.func.isRequired,
+        onDeleteProcess: PropTypes.func.isRequired,
+        isDisplayEditor: PropTypes.bool.isRequired,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        currentSoftwareProduct: PropTypes.object
+    };
 
-	renderEditor() {
-		let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
-		return (
+    render() {
+        return (
+            <div className="software-product-landing-view-right-side vsp-processes-page">
+                {this.renderEditor()}
+                <SoftwareProductProcessListView
+                    addButtonTitle={i18n('Add Process Details')}
+                    {...this.props}
+                />
+            </div>
+        );
+    }
 
-			<Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'>
-				<Modal.Header>
-					<Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
-				</Modal.Header>
-				<Modal.Body className='edit-process-modal'>
-					<SoftwareProductProcessesEditor softwareProductId={id} version={version} isReadOnlyMode={isReadOnlyMode}/>
-				</Modal.Body>
-			</Modal>
-		);
-	}
+    renderEditor() {
+        let {
+            currentSoftwareProduct: { id },
+            version,
+            isModalInEditMode,
+            isReadOnlyMode,
+            isDisplayEditor
+        } = this.props;
+        return (
+            <Modal
+                show={isDisplayEditor}
+                bsSize="large"
+                animation={true}
+                className="onborading-modal">
+                <Modal.Header>
+                    <Modal.Title>
+                        {isModalInEditMode
+                            ? i18n('Edit Process Details')
+                            : i18n('Create New Process Details')}
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body className="edit-process-modal">
+                    <SoftwareProductProcessesEditor
+                        softwareProductId={id}
+                        version={version}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                </Modal.Body>
+            </Modal>
+        );
+    }
 }
 
 export default SoftwareProductProcessesView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js
index 2c3442ee68..a3004995d7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js
@@ -14,59 +14,66 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './UserNotificationsConstants.js';
+import { actionTypes } from './UserNotificationsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.NOTIFICATION:
-			let list = (state.notificationsList) ? state.notificationsList : [];
-			const {notifications, lastScanned} = action.data;
-			return {
-				...state,
-				lastScanned,
-				notificationsList: [...notifications, ...list],
-				numOfNotSeenNotifications: state.numOfNotSeenNotifications + notifications.length
-			};
-		case actionTypes.LOAD_NOTIFICATIONS:
-			return {
-				...state,
-				...action.result,
-				notificationsList: action.result.notifications,
-				notifications: undefined
-			};
-		case actionTypes.LOAD_PREV_NOTIFICATIONS:
-			const {notifications: prevNotifications, endOfPage: newEndOfPage} = action.result;
-			return {
-				...state,
-				notificationsList: [
-					...state.notificationsList,
-					...prevNotifications
-				],
-				endOfPage: newEndOfPage
-			};
-		case actionTypes.UPDATE_READ_NOTIFICATION:
-			let {notificationForUpdate} = action;
-			notificationForUpdate = {...notificationForUpdate, read: true};
-			const indexForEdit = state.notificationsList.findIndex(notification => notification.eventId === notificationForUpdate.eventId);
-			return {
-				...state,
-				notificationsList: [
-					...state.notificationsList.slice(0, indexForEdit),
-					notificationForUpdate,
-					...state.notificationsList.slice(indexForEdit + 1)
-				]
-			};
-		case actionTypes.RESET_NEW_NOTIFICATIONS:
-			return {
-				...state,
-				numOfNotSeenNotifications: 0
-			};
-		case actionTypes.TOGGLE_OVERLAY:
-			return {
-				...state,
-				showNotificationsOverlay: action.showNotificationsOverlay
-			};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.NOTIFICATION:
+            let list = state.notificationsList ? state.notificationsList : [];
+            const { notifications, lastScanned } = action.data;
+            return {
+                ...state,
+                lastScanned,
+                notificationsList: [...notifications, ...list],
+                numOfNotSeenNotifications:
+                    state.numOfNotSeenNotifications + notifications.length
+            };
+        case actionTypes.LOAD_NOTIFICATIONS:
+            return {
+                ...state,
+                ...action.result,
+                notificationsList: action.result.notifications,
+                notifications: undefined
+            };
+        case actionTypes.LOAD_PREV_NOTIFICATIONS:
+            const {
+                notifications: prevNotifications,
+                endOfPage: newEndOfPage
+            } = action.result;
+            return {
+                ...state,
+                notificationsList: [
+                    ...state.notificationsList,
+                    ...prevNotifications
+                ],
+                endOfPage: newEndOfPage
+            };
+        case actionTypes.UPDATE_READ_NOTIFICATION:
+            let { notificationForUpdate } = action;
+            notificationForUpdate = { ...notificationForUpdate, read: true };
+            const indexForEdit = state.notificationsList.findIndex(
+                notification =>
+                    notification.eventId === notificationForUpdate.eventId
+            );
+            return {
+                ...state,
+                notificationsList: [
+                    ...state.notificationsList.slice(0, indexForEdit),
+                    notificationForUpdate,
+                    ...state.notificationsList.slice(indexForEdit + 1)
+                ]
+            };
+        case actionTypes.RESET_NEW_NOTIFICATIONS:
+            return {
+                ...state,
+                numOfNotSeenNotifications: 0
+            };
+        case actionTypes.TOGGLE_OVERLAY:
+            return {
+                ...state,
+                showNotificationsOverlay: action.showNotificationsOverlay
+            };
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
index de105d23a7..7f5b334586 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
@@ -18,89 +18,155 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import enhanceWithClickOutside from 'react-click-outside';
 import classnames from 'classnames';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Overlay from 'nfvo-components/overlay/Overlay.jsx';
 import UserNotifications from 'sdc-app/onboarding/userNotifications/UserNotifications.jsx';
 import UserNotificationsActionHelper from 'sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js';
-import {actionTypes} from './UserNotificationsConstants.js';
+import { actionTypes } from './UserNotificationsConstants.js';
 import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
 
-const mapStateToProps = ({currentScreen, notifications, users: {usersList}}) => {
-	return {currentScreen, notifications, usersList};
+const mapStateToProps = ({
+    currentScreen,
+    notifications,
+    users: { usersList }
+}) => {
+    return { currentScreen, notifications, usersList };
 };
 
-const mapActionToProps = (dispatch) => {
-	return {
-		resetNewNotifications: notificationId => UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {notificationId}),
-		toggleOverlay: ({showNotificationsOverlay}) => dispatch({type: actionTypes.TOGGLE_OVERLAY, showNotificationsOverlay}),
-		onLoadPrevNotifications: (lastScanned, endOfPage) => UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {lastScanned, endOfPage}),
-		onSync: ({itemId, itemName, versionId, versionName, currentScreen}) =>  UserNotificationsActionHelper.syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}),
-		updateNotification: notificationForUpdate => UserNotificationsActionHelper.updateNotification(dispatch, {notificationForUpdate}),
-		onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
-	};
+const mapActionToProps = dispatch => {
+    return {
+        resetNewNotifications: notificationId =>
+            UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {
+                notificationId
+            }),
+        toggleOverlay: ({ showNotificationsOverlay }) =>
+            dispatch({
+                type: actionTypes.TOGGLE_OVERLAY,
+                showNotificationsOverlay
+            }),
+        onLoadPrevNotifications: (lastScanned, endOfPage) =>
+            UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {
+                lastScanned,
+                endOfPage
+            }),
+        onSync: ({ itemId, itemName, versionId, versionName, currentScreen }) =>
+            UserNotificationsActionHelper.syncItem(dispatch, {
+                itemId,
+                itemName,
+                versionId,
+                versionName,
+                currentScreen
+            }),
+        updateNotification: notificationForUpdate =>
+            UserNotificationsActionHelper.updateNotification(dispatch, {
+                notificationForUpdate
+            }),
+        onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
+    };
 };
 
-
 class NotificationsView extends React.Component {
+    static propTypes = {
+        currentScreen: PropTypes.object,
+        notifications: PropTypes.object,
+        resetNewNotifications: PropTypes.func,
+        toggleOverlay: PropTypes.func,
+        onLoadPrevNotifications: PropTypes.func,
+        onSync: PropTypes.func,
+        updateNotification: PropTypes.func,
+        onLoadItemsLists: PropTypes.func
+    };
 
-	static propTypes = {
-		currentScreen: PropTypes.object,
-		notifications: PropTypes.object,
-		resetNewNotifications: PropTypes.func,
-		toggleOverlay: PropTypes.func,
-		onLoadPrevNotifications: PropTypes.func,
-		onSync: PropTypes.func,
-		updateNotification: PropTypes.func,
-		onLoadItemsLists: PropTypes.func
-	};
-
-	render() {
-		const {usersList, notifications, onLoadPrevNotifications, onSync, updateNotification, onLoadItemsLists, currentScreen} = this.props;
-		const {notificationsList, numOfNotSeenNotifications, showNotificationsOverlay, lastScanned, endOfPage} = notifications;
+    render() {
+        const {
+            usersList,
+            notifications,
+            onLoadPrevNotifications,
+            onSync,
+            updateNotification,
+            onLoadItemsLists,
+            currentScreen
+        } = this.props;
+        const {
+            notificationsList,
+            numOfNotSeenNotifications,
+            showNotificationsOverlay,
+            lastScanned,
+            endOfPage
+        } = notifications;
 
-		return (
-			<div className='onboarding-notifications'>
-				<div className='notifications-icon' onClick={() => this.onNotificationIconClick()}>
-					<SVGIcon name={numOfNotSeenNotifications > 0 ? 'notificationFullBell' : 'notificationBell'} color={numOfNotSeenNotifications > 0 ? 'primary' : ''}/>
-					<div className={classnames('notifications-count', {'hidden-count': numOfNotSeenNotifications === 0})}>
-							{numOfNotSeenNotifications}
-					</div>
-				</div>
-				{showNotificationsOverlay &&
-					<Overlay>
-						<UserNotifications notificationsList={notificationsList} usersList={usersList} lastScanned={lastScanned} endOfPage={endOfPage}
-							onLoadPrevNotifications={onLoadPrevNotifications} onSync={onSync} updateNotification={updateNotification} onLoadItemsLists={onLoadItemsLists}
-							currentScreen={currentScreen}/>
-					</Overlay>
-				}
-			</div>
-		);
-	}
+        return (
+            <div className="onboarding-notifications">
+                <div
+                    className="notifications-icon"
+                    onClick={() => this.onNotificationIconClick()}>
+                    <SVGIcon
+                        name={
+                            numOfNotSeenNotifications > 0
+                                ? 'notificationFullBell'
+                                : 'notificationBell'
+                        }
+                        color={numOfNotSeenNotifications > 0 ? 'primary' : ''}
+                    />
+                    <div
+                        className={classnames('notifications-count', {
+                            'hidden-count': numOfNotSeenNotifications === 0
+                        })}>
+                        {numOfNotSeenNotifications}
+                    </div>
+                </div>
+                {showNotificationsOverlay && (
+                    <Overlay>
+                        <UserNotifications
+                            notificationsList={notificationsList}
+                            usersList={usersList}
+                            lastScanned={lastScanned}
+                            endOfPage={endOfPage}
+                            onLoadPrevNotifications={onLoadPrevNotifications}
+                            onSync={onSync}
+                            updateNotification={updateNotification}
+                            onLoadItemsLists={onLoadItemsLists}
+                            currentScreen={currentScreen}
+                        />
+                    </Overlay>
+                )}
+            </div>
+        );
+    }
 
-	handleClickOutside() {
-		const {notifications: {showNotificationsOverlay}} = this.props;
-		if(showNotificationsOverlay) {
-			this.onCloseOverlay();
-		}
-	}
+    handleClickOutside() {
+        const { notifications: { showNotificationsOverlay } } = this.props;
+        if (showNotificationsOverlay) {
+            this.onCloseOverlay();
+        }
+    }
 
-	onNotificationIconClick() {
-		const {notifications: {showNotificationsOverlay}, toggleOverlay} = this.props;
-		if (showNotificationsOverlay) {
-			this.onCloseOverlay();
-		} else {
-			toggleOverlay({showNotificationsOverlay: true});
-		}
-	}
+    onNotificationIconClick() {
+        const {
+            notifications: { showNotificationsOverlay },
+            toggleOverlay
+        } = this.props;
+        if (showNotificationsOverlay) {
+            this.onCloseOverlay();
+        } else {
+            toggleOverlay({ showNotificationsOverlay: true });
+        }
+    }
 
-	onCloseOverlay() {
-		const {notifications: {numOfNotSeenNotifications, lastScanned}, resetNewNotifications, toggleOverlay} = this.props;
-		if (numOfNotSeenNotifications) {
-			resetNewNotifications(lastScanned);
-		}
-		toggleOverlay({showNotificationsOverlay: false});
-	}
+    onCloseOverlay() {
+        const {
+            notifications: { numOfNotSeenNotifications, lastScanned },
+            resetNewNotifications,
+            toggleOverlay
+        } = this.props;
+        if (numOfNotSeenNotifications) {
+            resetNewNotifications(lastScanned);
+        }
+        toggleOverlay({ showNotificationsOverlay: false });
+    }
 }
 
-export default connect(mapStateToProps, mapActionToProps)(enhanceWithClickOutside(NotificationsView));
+export default connect(mapStateToProps, mapActionToProps)(
+    enhanceWithClickOutside(NotificationsView)
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
index fd5c04db92..01ca50cd4f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
@@ -19,126 +19,193 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {notificationType} from './UserNotificationsConstants.js';
+import { notificationType } from './UserNotificationsConstants.js';
 import ShowMore from 'react-show-more';
 
-const Notification = ({notification, users, onActionClicked, getNotificationTypeDesc}) => {
-	const {eventType, read, eventAttributes, dateTime} = notification;
-	const {itemName, userId, description, versionName, permission, granted} = eventAttributes;
-	const {fullName: userName} = users.find(user => user.userId === userId);
-	return (
-		<div className={classnames('notification', {'unread': !read})}>
-			<div className='notification-data'>
-				<div className='item-name'>
-					{itemName}
-					{versionName && <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>}
-					{!read && <div className='unread-circle-icon'></div> }
-				</div>
-				<div className='flex-items'>
-					<div className='type'>{getNotificationTypeDesc(eventType, permission, granted)}</div>
-					<div className='separator'/>
-					<div className='user-name'>{`${i18n('By')} ${userName}`}</div>
-				</div>
-				{(description || versionName) && <div className='description'>
-					{description && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
-						{description}
-					</ShowMore>}
-					{eventType === notificationType.ITEM_CHANGED.SUBMIT &&
-						<div>
-							<div>{i18n('Version {versionName} was submitted.', {versionName: versionName})}</div>
-						</div>
-					}
-				</div>
-				}
-				<div className='date'>{dateTime}</div>
-			</div>
-			<div className='notification-action'>
-				<div className={classnames('action-button', {'hidden': read})} onClick={() => onActionClicked(notification)}>
-					{eventType === notificationType.PERMISSION_CHANGED
-						|| eventType === notificationType.ITEM_DELETED
-						|| eventType === notificationType.ITEM_ARCHIVED
-						|| eventType === notificationType.ITEM_RESTORED ? i18n('OK') : i18n('Sync')}
-				</div>
-			</div>
-		</div>
-	);
+const Notification = ({
+    notification,
+    users,
+    onActionClicked,
+    getNotificationTypeDesc
+}) => {
+    const { eventType, read, eventAttributes, dateTime } = notification;
+    const {
+        itemName,
+        userId,
+        description,
+        versionName,
+        permission,
+        granted
+    } = eventAttributes;
+    const { fullName: userName } = users.find(user => user.userId === userId);
+    return (
+        <div className={classnames('notification', { unread: !read })}>
+            <div className="notification-data">
+                <div className="item-name">
+                    {itemName}
+                    {versionName && (
+                        <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>
+                    )}
+                    {!read && <div className="unread-circle-icon" />}
+                </div>
+                <div className="flex-items">
+                    <div className="type">
+                        {getNotificationTypeDesc(
+                            eventType,
+                            permission,
+                            granted
+                        )}
+                    </div>
+                    <div className="separator" />
+                    <div className="user-name">{`${i18n(
+                        'By'
+                    )} ${userName}`}</div>
+                </div>
+                {(description || versionName) && (
+                    <div className="description">
+                        {description && (
+                            <ShowMore
+                                anchorClass="more-less"
+                                lines={2}
+                                more={i18n('More')}
+                                less={i18n('Less')}>
+                                {description}
+                            </ShowMore>
+                        )}
+                        {eventType === notificationType.ITEM_CHANGED.SUBMIT && (
+                            <div>
+                                <div>
+                                    {i18n(
+                                        'Version {versionName} was submitted.',
+                                        { versionName: versionName }
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+                <div className="date">{dateTime}</div>
+            </div>
+            <div className="notification-action">
+                <div
+                    className={classnames('action-button', { hidden: read })}
+                    onClick={() => onActionClicked(notification)}>
+                    {eventType === notificationType.PERMISSION_CHANGED ||
+                    eventType === notificationType.ITEM_DELETED ||
+                    eventType === notificationType.ITEM_ARCHIVED ||
+                    eventType === notificationType.ITEM_RESTORED
+                        ? i18n('OK')
+                        : i18n('Sync')}
+                </div>
+            </div>
+        </div>
+    );
 };
 
 function getNotificationTypeDesc(eventType, permission, granted) {
-	switch (eventType) {
-		case notificationType.PERMISSION_CHANGED:
-			const grantedStr = granted ? i18n('Granted') : i18n('Taken');
-			return `${i18n('Permission')} ${grantedStr}: ${permission}`;			
-		case notificationType.ITEM_CHANGED.COMMIT:
-			return i18n('Your Copy Is Out Of Sync');
-		case notificationType.ITEM_CHANGED.SUBMIT:
-			return i18n('Version Submitted');
-		case notificationType.ITEM_DELETED:
-			return i18n('Item was deleted');
-		case notificationType.ITEM_ARCHIVED:
-			return i18n('Item was archived');
-		case notificationType.ITEM_RESTORED:
-			return i18n('Item was restored from archive');
-	}
+    switch (eventType) {
+        case notificationType.PERMISSION_CHANGED:
+            const grantedStr = granted ? i18n('Granted') : i18n('Taken');
+            return `${i18n('Permission')} ${grantedStr}: ${permission}`;
+        case notificationType.ITEM_CHANGED.COMMIT:
+            return i18n('Your Copy Is Out Of Sync');
+        case notificationType.ITEM_CHANGED.SUBMIT:
+            return i18n('Version Submitted');
+        case notificationType.ITEM_DELETED:
+            return i18n('Item was deleted');
+        case notificationType.ITEM_ARCHIVED:
+            return i18n('Item was archived');
+        case notificationType.ITEM_RESTORED:
+            return i18n('Item was restored from archive');
+    }
 }
 
 class UserNotifications extends React.Component {
+    static propTypes = {
+        currentScreen: PropTypes.object,
+        notificationsList: PropTypes.array,
+        usersList: PropTypes.array,
+        lastScanned: PropTypes.string,
+        endOfPage: PropTypes.string,
+        onLoadPrevNotifications: PropTypes.func,
+        onSync: PropTypes.func,
+        updateNotification: PropTypes.func,
+        onLoadItemsLists: PropTypes.func
+    };
 
-	static propTypes = {
-		currentScreen: PropTypes.object,
-		notificationsList: PropTypes.array,
-		usersList: PropTypes.array,
-		lastScanned: PropTypes.string,
-		endOfPage:PropTypes.string,
-		onLoadPrevNotifications: PropTypes.func,
-		onSync: PropTypes.func,
-		updateNotification: PropTypes.func,
-		onLoadItemsLists: PropTypes.func
-	};
+    render() {
+        const {
+            notificationsList = [],
+            usersList,
+            lastScanned,
+            endOfPage
+        } = this.props;
 
-	render() {
-		const {notificationsList = [], usersList, lastScanned, endOfPage} = this.props;
+        return (
+            <div className="user-notifications">
+                <div className="notifications-title">
+                    {i18n('Notifications')}
+                </div>
+                <div
+                    className="notifications-list"
+                    ref="notificationList"
+                    onScroll={() =>
+                        this.loadPrevNotifications(lastScanned, endOfPage)
+                    }>
+                    {notificationsList.map(notification => (
+                        <Notification
+                            key={notification.eventId}
+                            notification={notification}
+                            users={usersList}
+                            onActionClicked={notification =>
+                                this.onActionClicked(notification)
+                            }
+                            getNotificationTypeDesc={getNotificationTypeDesc}
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
 
-		return (
-			<div className='user-notifications'>
-				<div className='notifications-title'>{i18n('Notifications')}</div>
-				<div className='notifications-list' ref='notificationList' onScroll={() => this.loadPrevNotifications(lastScanned, endOfPage)}>
-				{
-					notificationsList.map(notification => (
-						<Notification key={notification.eventId} notification={notification} users={usersList}
-							onActionClicked={notification => this.onActionClicked(notification)}
-							getNotificationTypeDesc={getNotificationTypeDesc}/>))
-				}
-				</div>
-			</div>
-		);
-	}
+    onActionClicked(notification) {
+        const {
+            onSync,
+            updateNotification,
+            currentScreen,
+            onLoadItemsLists
+        } = this.props;
+        const {
+            eventType,
+            eventAttributes: { itemId, itemName, versionId, versionName }
+        } = notification;
+        if (
+            eventType !== notificationType.PERMISSION_CHANGED &&
+            eventType !== notificationType.ITEM_DELETED &&
+            eventType !== notificationType.ITEM_ARCHIVED &&
+            eventType !== notificationType.ITEM_RESTORED
+        ) {
+            onSync({ itemId, itemName, versionId, versionName, currentScreen });
+        } else {
+            onLoadItemsLists();
+        }
+        updateNotification(notification);
+    }
 
-	onActionClicked(notification) {
-		const {onSync, updateNotification, currentScreen, onLoadItemsLists} = this.props;
-		const {eventType, eventAttributes: {itemId, itemName, versionId, versionName}} = notification;		
-		if(eventType !== notificationType.PERMISSION_CHANGED &&
-			eventType !== notificationType.ITEM_DELETED &&
-			eventType !== notificationType.ITEM_ARCHIVED &&
-			eventType !== notificationType.ITEM_RESTORED) {
-			onSync({itemId, itemName, versionId, versionName, currentScreen});
-		}
-		else {
-			onLoadItemsLists();
-		}
-		updateNotification(notification);
-	}
+    loadPrevNotifications(lastScanned, endOfPage) {
+        if (endOfPage && lastScanned) {
+            let element = ReactDOM.findDOMNode(this.refs['notificationList']);
+            const { onLoadPrevNotifications } = this.props;
 
-	loadPrevNotifications(lastScanned, endOfPage) {
-		if(endOfPage && lastScanned) {
-			let element = ReactDOM.findDOMNode(this.refs['notificationList']);
-			const {onLoadPrevNotifications} = this.props;
-
-			if (element && element.clientHeight + element.scrollTop === element.scrollHeight) {
-				onLoadPrevNotifications(lastScanned, endOfPage);
-			}
-		}
-	}
+            if (
+                element &&
+                element.clientHeight + element.scrollTop ===
+                    element.scrollHeight
+            ) {
+                onLoadPrevNotifications(lastScanned, endOfPage);
+            }
+        }
+    }
 }
 
-export default UserNotifications;
\ No newline at end of file
+export default UserNotifications;
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js
index 574aa0f3fc..f8693e15be 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js
@@ -1,123 +1,175 @@
-import {actionTypes} from './UserNotificationsConstants.js';
+import { actionTypes } from './UserNotificationsConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
-import WebSocketUtil, {websocketUrl} from 'nfvo-utils/WebSocketUtil.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import WebSocketUtil, { websocketUrl } from 'nfvo-utils/WebSocketUtil.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
 import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { SyncStates } from 'sdc-app/common/merge/MergeEditorConstants.js';
 
 function baseUrl() {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/notifications`;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/notifications`;
 }
 
 function fetch() {
-	return RestAPIUtil.fetch(baseUrl());
+    return RestAPIUtil.fetch(baseUrl());
 }
 
 function updateNotification(notificationId) {
-	return RestAPIUtil.put(`${baseUrl()}/${notificationId}`);
+    return RestAPIUtil.put(`${baseUrl()}/${notificationId}`);
 }
 
 function updateLastSeenNotification(notificationId) {
-	return RestAPIUtil.put(`${baseUrl()}/last-seen/${notificationId}`);
+    return RestAPIUtil.put(`${baseUrl()}/last-seen/${notificationId}`);
 }
 
 function loadPrevNotifications(lastScanned, endOfPage) {
-	return RestAPIUtil.fetch(`${baseUrl()}?LAST_DELIVERED_EVENT_ID=${lastScanned}&END_OF_PAGE_EVENT_ID=${endOfPage}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl()}?LAST_DELIVERED_EVENT_ID=${lastScanned}&END_OF_PAGE_EVENT_ID=${endOfPage}`
+    );
 }
 
 const INITIAL_LAST_SCANNED = '00000000-0000-1000-8080-808080808080';
 
 const UserNotificationsActionHelper = {
-	notificationsFirstHandling(dispatch) {
-		console.log('Websocket Url: ', websocketUrl);
-		UserNotificationsActionHelper.fetchUserNotificationsList(dispatch).then(({lastScanned}) => {
-			WebSocketUtil.open(websocketUrl, {lastScanned: lastScanned || INITIAL_LAST_SCANNED});
-		});
-	},
+    notificationsFirstHandling(dispatch) {
+        console.log('Websocket Url: ', websocketUrl);
+        UserNotificationsActionHelper.fetchUserNotificationsList(dispatch).then(
+            ({ lastScanned }) => {
+                WebSocketUtil.open(websocketUrl, {
+                    lastScanned: lastScanned || INITIAL_LAST_SCANNED
+                });
+            }
+        );
+    },
 
-	fetchUserNotificationsList(dispatch) {
-		return fetch().then(result => {
-			dispatch({
-				type: actionTypes.LOAD_NOTIFICATIONS,
-				result
-			});
-			return Promise.resolve({lastScanned: result.lastScanned});
-		});
-	},
+    fetchUserNotificationsList(dispatch) {
+        return fetch().then(result => {
+            dispatch({
+                type: actionTypes.LOAD_NOTIFICATIONS,
+                result
+            });
+            return Promise.resolve({ lastScanned: result.lastScanned });
+        });
+    },
 
-	loadPreviousNotifications(dispatch, {lastScanned, endOfPage}) {
-		loadPrevNotifications(lastScanned, endOfPage).then(result => dispatch({
-			type: actionTypes.LOAD_PREV_NOTIFICATIONS,
-			result
-		}));
-	},
+    loadPreviousNotifications(dispatch, { lastScanned, endOfPage }) {
+        loadPrevNotifications(lastScanned, endOfPage).then(result =>
+            dispatch({
+                type: actionTypes.LOAD_PREV_NOTIFICATIONS,
+                result
+            })
+        );
+    },
 
-	notifyAboutConflicts(dispatch, {itemId, itemName, version, currentScreen}) {
-		let {props} = currentScreen;
-		let currentItemId = props.softwareProductId || props.licenseModelId;
-		let currentVersion = props.version;
-		if(currentItemId === itemId && currentVersion.id === version.id) {
-			MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId, version}).then(() => ScreensHelper.loadScreen(dispatch, currentScreen));
-		}
-		else {
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data: {
-					title: i18n('Conflicts'),
-					msg: i18n('There are conflicts in {itemName} version {versionName} that you have to resolve', {itemName: itemName.toUpperCase(), versionName: version.versionName}),
-					cancelButtonText: i18n('OK')
-				}
-			});
-		}
-	},
+    notifyAboutConflicts(
+        dispatch,
+        { itemId, itemName, version, currentScreen }
+    ) {
+        let { props } = currentScreen;
+        let currentItemId = props.softwareProductId || props.licenseModelId;
+        let currentVersion = props.version;
+        if (currentItemId === itemId && currentVersion.id === version.id) {
+            MergeEditorActionHelper.analyzeSyncResult(dispatch, {
+                itemId,
+                version
+            }).then(() => ScreensHelper.loadScreen(dispatch, currentScreen));
+        } else {
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    title: i18n('Conflicts'),
+                    msg: i18n(
+                        'There are conflicts in {itemName} version {versionName} that you have to resolve',
+                        {
+                            itemName: itemName.toUpperCase(),
+                            versionName: version.versionName
+                        }
+                    ),
+                    cancelButtonText: i18n('OK')
+                }
+            });
+        }
+    },
 
-	syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}) {
-		let version = {id: versionId, versionName};
-		ItemsHelper.fetchVersion({itemId, versionId}).then(response => {
-			let inMerge = response && response.state && response.state.synchronizationState === SyncStates.MERGE;
-			if (!inMerge) {
-				ItemsHelper.performVCAction({itemId, version, action: VersionControllerActionsEnum.SYNC}).then(() => {
-					return ItemsHelper.fetchVersion({itemId, versionId}).then(response => {
-						let inMerge = response && response.state && response.state.synchronizationState === SyncStates.MERGE;
-						if (!inMerge) {
-							return ScreensHelper.loadScreen(dispatch, currentScreen);
-						}
-						else {
-							return this.notifyAboutConflicts(dispatch, {itemId, itemName, version, currentScreen});
-						}
-					});
-				});
-			}
-			else {
-				this.notifyAboutConflicts(dispatch, {itemId, itemName, version, currentScreen});
-			}
-		});
-	},
+    syncItem(
+        dispatch,
+        { itemId, itemName, versionId, versionName, currentScreen }
+    ) {
+        let version = { id: versionId, versionName };
+        ItemsHelper.fetchVersion({ itemId, versionId }).then(response => {
+            let inMerge =
+                response &&
+                response.state &&
+                response.state.synchronizationState === SyncStates.MERGE;
+            if (!inMerge) {
+                ItemsHelper.performVCAction({
+                    itemId,
+                    version,
+                    action: VersionControllerActionsEnum.SYNC
+                }).then(() => {
+                    return ItemsHelper.fetchVersion({ itemId, versionId }).then(
+                        response => {
+                            let inMerge =
+                                response &&
+                                response.state &&
+                                response.state.synchronizationState ===
+                                    SyncStates.MERGE;
+                            if (!inMerge) {
+                                return ScreensHelper.loadScreen(
+                                    dispatch,
+                                    currentScreen
+                                );
+                            } else {
+                                return this.notifyAboutConflicts(dispatch, {
+                                    itemId,
+                                    itemName,
+                                    version,
+                                    currentScreen
+                                });
+                            }
+                        }
+                    );
+                });
+            } else {
+                this.notifyAboutConflicts(dispatch, {
+                    itemId,
+                    itemName,
+                    version,
+                    currentScreen
+                });
+            }
+        });
+    },
 
-	updateNotification(dispatch, {notificationForUpdate}) {
-		updateNotification(notificationForUpdate.eventId).then(response => {
-			if(response.status === 'Success' && Object.keys(response.errors).length === 0) {
-				dispatch({
-					type: actionTypes.UPDATE_READ_NOTIFICATION,
-					notificationForUpdate
-				});
-			}
-		});
-	},
+    updateNotification(dispatch, { notificationForUpdate }) {
+        updateNotification(notificationForUpdate.eventId).then(response => {
+            if (
+                response.status === 'Success' &&
+                Object.keys(response.errors).length === 0
+            ) {
+                dispatch({
+                    type: actionTypes.UPDATE_READ_NOTIFICATION,
+                    notificationForUpdate
+                });
+            }
+        });
+    },
 
-	updateLastSeenNotification(dispatch, {notificationId}) {
-		updateLastSeenNotification(notificationId).then(response => {
-			if (response.status === 'Success' && Object.keys(response.errors).length === 0) {
-				dispatch({type: actionTypes.RESET_NEW_NOTIFICATIONS});
-			}
-		});
-	}
+    updateLastSeenNotification(dispatch, { notificationId }) {
+        updateLastSeenNotification(notificationId).then(response => {
+            if (
+                response.status === 'Success' &&
+                Object.keys(response.errors).length === 0
+            ) {
+                dispatch({ type: actionTypes.RESET_NEW_NOTIFICATIONS });
+            }
+        });
+    }
 };
 
 export default UserNotificationsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js
index a8e92e29fd..b2466f19af 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js
@@ -1,22 +1,21 @@
-
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	NOTIFICATION: null,
-	LOAD_NOTIFICATIONS: null,
-	LOAD_PREV_NOTIFICATIONS: null,
-	UPDATE_READ_NOTIFICATION: null,
-	RESET_NEW_NOTIFICATIONS: null,
-	TOGGLE_OVERLAY: null
+    NOTIFICATION: null,
+    LOAD_NOTIFICATIONS: null,
+    LOAD_PREV_NOTIFICATIONS: null,
+    UPDATE_READ_NOTIFICATION: null,
+    RESET_NEW_NOTIFICATIONS: null,
+    TOGGLE_OVERLAY: null
 });
 
 export const notificationType = keyMirror({
-	PERMISSION_CHANGED: 'PermissionChanged',
-	ITEM_CHANGED: {
-		COMMIT: 'commit',
-		SUBMIT: 'submit'
-	},
-	ITEM_DELETED: 'delete',
-	ITEM_ARCHIVED: 'archive',
-	ITEM_RESTORED: 'restore'
-});
\ No newline at end of file
+    PERMISSION_CHANGED: 'PermissionChanged',
+    ITEM_CHANGED: {
+        COMMIT: 'commit',
+        SUBMIT: 'submit'
+    },
+    ITEM_DELETED: 'delete',
+    ITEM_ARCHIVED: 'archive',
+    ITEM_RESTORED: 'restore'
+});
diff --git a/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js
index a2e92fe0bc..98bce1ce56 100644
--- a/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js
@@ -16,46 +16,41 @@
 
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './UsersConstants.js';
+import { actionTypes } from './UsersConstants.js';
 
 function getUserId() {
-	let catalogApiHeaders = Configuration.get('CatalogApiHeaders');
-	let User = catalogApiHeaders && catalogApiHeaders.userId;
-	let userId = User && User.value ? User.value : '';
-	return userId;
+    let catalogApiHeaders = Configuration.get('CatalogApiHeaders');
+    let User = catalogApiHeaders && catalogApiHeaders.userId;
+    let userId = User && User.value ? User.value : '';
+    return userId;
 }
 
 function baseUrl() {
-	const restCatalogPrefix = Configuration.get('restCatalogPrefix');
-	return `${restCatalogPrefix}`;
+    const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+    return `${restCatalogPrefix}`;
 }
 
-
 function fetchUsersList() {
-	const url = '/v1/user/users';
-	return  RestAPIUtil.fetch(`${baseUrl()}${url}`);
+    const url = '/v1/user/users';
+    return RestAPIUtil.fetch(`${baseUrl()}${url}`);
 }
 
-
-
 const UsersActionHelper = {
-	fetchUsersList(dispatch) {
-		fetchUsersList().then(response => {
-			dispatch({
-				type: actionTypes.USERS_LIST_LOADED,
-				usersList: response
-			});
-
-			let userId = getUserId();
-			let userInfo = response.find(user => user.userId === userId);
-			dispatch({
-				type: actionTypes.GOT_USER_INFO,
-				userInfo
-			});
-
-		});
-
-	}
+    fetchUsersList(dispatch) {
+        fetchUsersList().then(response => {
+            dispatch({
+                type: actionTypes.USERS_LIST_LOADED,
+                usersList: response
+            });
+
+            let userId = getUserId();
+            let userInfo = response.find(user => user.userId === userId);
+            dispatch({
+                type: actionTypes.GOT_USER_INFO,
+                userInfo
+            });
+        });
+    }
 };
 
 export default UsersActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js b/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js
index fdcf4b179b..216d28ad47 100644
--- a/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js
@@ -17,6 +17,6 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	USERS_LIST_LOADED: null,
-	GOT_USER_INFO: null
+    USERS_LIST_LOADED: null,
+    GOT_USER_INFO: null
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js b/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js
index 6bd72e3b3c..89a04d2a8b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js
+++ b/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js
@@ -14,29 +14,28 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './UsersConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes } from './UsersConstants.js';
+import { combineReducers } from 'redux';
 
-function usersList (state = [], action) {
-	switch (action.type) {
-		case (actionTypes.USERS_LIST_LOADED):
-			return [...action.usersList];
-		default:
-			return state;
-	}
-};
-
-function userInfo (state = {}, action) {
-	switch (action.type) {
-		case (actionTypes.GOT_USER_INFO):
-			return action.userInfo;
-		default:
-			return state;
-	}
+function usersList(state = [], action) {
+    switch (action.type) {
+        case actionTypes.USERS_LIST_LOADED:
+            return [...action.usersList];
+        default:
+            return state;
+    }
 }
 
+function userInfo(state = {}, action) {
+    switch (action.type) {
+        case actionTypes.GOT_USER_INFO:
+            return action.userInfo;
+        default:
+            return state;
+    }
+}
 
 export default combineReducers({
-	usersList: usersList,
-	userInfo: userInfo
-});
\ No newline at end of file
+    usersList: usersList,
+    userInfo: userInfo
+});
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
index 0fd0eabd86..457d096219 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
@@ -14,76 +14,100 @@
  * permissions and limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import VersionsPageActionHelper from './VersionsPageActionHelper.js';
 import VersionsPageCreationActionHelper from './creation/VersionsPageCreationActionHelper.js';
 import PermissionsActionHelper from '../permissions/PermissionsActionHelper.js';
-import {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodType } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 import VersionsPageView from './VersionsPage.jsx';
 
 export const mapStateToProps = ({
-	users: {userInfo},
-	versionsPage: {permissions, versionsList},
-	currentScreen: {itemPermission: {isCollaborator, isArchived}, props: {itemId}},
-	softwareProductList = []
+    users: { userInfo },
+    versionsPage: { permissions, versionsList },
+    currentScreen: {
+        itemPermission: { isCollaborator, isArchived },
+        props: { itemId }
+    },
+    softwareProductList = []
 }) => {
+    let { versions = [], selectedVersion } = versionsList;
+    let { owner, contributors, viewers } = permissions;
 
-	let {versions = [], selectedVersion} = versionsList;
-	let {owner, contributors, viewers} = permissions;
-
-	// sorting the version list
-	versions.sort((a,b) => {
-		let statusCompare = b.status.localeCompare(a.status);
-		if (statusCompare === 0) {
-			return b.modificationTime - a.modificationTime;
-		} else {
-			return statusCompare;
-		}
-
-	});	
-	const curentSoftwareProduct = softwareProductList.find(item => item.id === itemId);
-	return {
-		versions,
-		contributors,
-		viewers,
-		owner,
-		currentUser: userInfo,
-		selectedVersion,
-		isCollaborator,
-		isManual: curentSoftwareProduct && curentSoftwareProduct.onboardingMethod === onboardingMethodType.MANUAL,
-		isArchived
-	};
-
+    // sorting the version list
+    versions.sort((a, b) => {
+        let statusCompare = b.status.localeCompare(a.status);
+        if (statusCompare === 0) {
+            return b.modificationTime - a.modificationTime;
+        } else {
+            return statusCompare;
+        }
+    });
+    const curentSoftwareProduct = softwareProductList.find(
+        item => item.id === itemId
+    );
+    return {
+        versions,
+        contributors,
+        viewers,
+        owner,
+        currentUser: userInfo,
+        selectedVersion,
+        isCollaborator,
+        isManual:
+            curentSoftwareProduct &&
+            curentSoftwareProduct.onboardingMethod ===
+                onboardingMethodType.MANUAL,
+        isArchived
+    };
 };
 
-export const mapActionsToProps = (dispatch, {itemType, itemId, additionalProps}) => {
-	return {
-		onNavigateToVersion({version}) {
-			VersionsPageActionHelper.onNavigateToVersion(dispatch, {version, itemId, itemType, additionalProps});
-		},
+export const mapActionsToProps = (
+    dispatch,
+    { itemType, itemId, additionalProps }
+) => {
+    return {
+        onNavigateToVersion({ version }) {
+            VersionsPageActionHelper.onNavigateToVersion(dispatch, {
+                version,
+                itemId,
+                itemType,
+                additionalProps
+            });
+        },
 
-		onSelectVersion({version}) {
-			VersionsPageActionHelper.selectVersion(dispatch, {version});
-		},
+        onSelectVersion({ version }) {
+            VersionsPageActionHelper.selectVersion(dispatch, { version });
+        },
 
-		onCreateVersion({version}) {
-			VersionsPageCreationActionHelper.open(dispatch, {baseVersion: version, itemId, itemType, additionalProps});
-		},
+        onCreateVersion({ version }) {
+            VersionsPageCreationActionHelper.open(dispatch, {
+                baseVersion: version,
+                itemId,
+                itemType,
+                additionalProps
+            });
+        },
 
-		onManagePermissions() {
-			PermissionsActionHelper.openPermissonsManager(dispatch, {itemId, askForRights: false});
-		},
+        onManagePermissions() {
+            PermissionsActionHelper.openPermissonsManager(dispatch, {
+                itemId,
+                askForRights: false
+            });
+        },
 
-		onTreeFullScreen(treeProps) {
-			VersionsPageActionHelper.openTree(dispatch, treeProps);
-		},
+        onTreeFullScreen(treeProps) {
+            VersionsPageActionHelper.openTree(dispatch, treeProps);
+        },
 
-		onModalNodeClick({version}) {
-			VersionsPageActionHelper.selectVersionFromModal(dispatch, {version});
-		},
-		onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId),
-		onRestore: () => VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId)
-	};
+        onModalNodeClick({ version }) {
+            VersionsPageActionHelper.selectVersionFromModal(dispatch, {
+                version
+            });
+        },
+        onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId),
+        onRestore: () =>
+            VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(VersionsPageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
index f8417fafbf..7f7af8130f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
@@ -22,81 +22,144 @@ import Button from 'sdc-ui/lib/react/Button.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
 
-const DepricateButton = ({depricateAction, title}) => (
-	<div className='depricate-btn-wrapper'>
-		<Button data-test-id='depricate-action-btn'	className='depricate-btn' onClick={depricateAction}>{title}</Button>
-	</div>
+const DepricateButton = ({ depricateAction, title }) => (
+    <div className="depricate-btn-wrapper">
+        <Button
+            data-test-id="depricate-action-btn"
+            className="depricate-btn"
+            onClick={depricateAction}>
+            {title}
+        </Button>
+    </div>
 );
 
-const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);	
+const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
 
-const VersionPageTitle = ({itemName, depricatedTitle, isArchived, onRestore, onArchive}) => {
-	return (
-		<div className='version-page-header'>
-			<div className='versions-page-title'>{`${i18n('Available Versions')} - ${itemName}  ${depricatedTitle}`}</div>			
-			<FeatureDepricatedButton depricateAction={isArchived ? () => onRestore() : () => onArchive() }  title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}/>
-		</div>
-	);
+const VersionPageTitle = ({
+    itemName,
+    depricatedTitle,
+    isArchived,
+    onRestore,
+    onArchive
+}) => {
+    return (
+        <div className="version-page-header">
+            <div className="versions-page-title">{`${i18n(
+                'Available Versions'
+            )} - ${itemName}  ${depricatedTitle}`}</div>
+            <FeatureDepricatedButton
+                depricateAction={
+                    isArchived ? () => onRestore() : () => onArchive()
+                }
+                title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}
+            />
+        </div>
+    );
 };
 
 class VersionsPage extends React.Component {
-	state = {
-		showExpanded : false
-	}
-	render() {
-		let { versions, owner, contributors, currentUser, isCollaborator, itemName = '', viewers, onSelectVersion, onNavigateToVersion,
-		onTreeFullScreen, onManagePermissions, onCreateVersion, selectedVersion, onModalNodeClick, isManual, isArchived, onArchive, onRestore} = this.props;		
-		const depricatedTitle = isArchived ? i18n('(Archived)') : '';
-		return (
-			<div className='versions-page-view'>
-				<VersionPageTitle 
-					itemName={itemName} 
-					depricatedTitle={depricatedTitle} 					
-					onArchive={onArchive}
-					isArchived={isArchived}
-					onRestore={onRestore}/>
-				<PermissionsView
-					owner={owner}
-					contributors={contributors}
-					viewers={viewers}
-					currentUser={currentUser}
-					isManual={isManual}
-					onManagePermissions={onManagePermissions}/>
-				<div className='versions-page-list-and-tree'>
-					<div className='version-tree-wrapper'>
-						<div className='version-tree-title-container'>
-							<div className='version-tree-title'>{i18n('Version Tree')}</div>
-							{this.state.showExpanded && <SVGIcon name='expand' className='version-tree-full-screen' onClick={() => onTreeFullScreen({
-								name: 'versions-tree-popup',
-								width: 798,
-								height: 500,
-								nodes: versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''})),
-								onNodeClick: (version) => onModalNodeClick({version}),
-								selectedNodeId: selectedVersion,
-								scrollable: true,
-								toWiden: true
-							})} />}
-						</div>
-						<Tree
-							name={'versions-tree'}
-							width={200}
-							allowScaleWidth={false}
-							nodes={versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''}))}
-							onNodeClick={version => onSelectVersion({version})}
-							onRenderedBeyondWidth={() => {this.setState({showExpanded : true});}}
-							selectedNodeId={selectedVersion}/>
-					</div>
-					<VersionList
-						versions={versions}
-						onSelectVersion={onSelectVersion}
-						onNavigateToVersion={onNavigateToVersion}
-						onCreateVersion={isArchived ? false : onCreateVersion}
-						selectedVersion={selectedVersion}
-						isCollaborator={isCollaborator} />
-				</div>
-			</div>
-		);
-	}
+    state = {
+        showExpanded: false
+    };
+    render() {
+        let {
+            versions,
+            owner,
+            contributors,
+            currentUser,
+            isCollaborator,
+            itemName = '',
+            viewers,
+            onSelectVersion,
+            onNavigateToVersion,
+            onTreeFullScreen,
+            onManagePermissions,
+            onCreateVersion,
+            selectedVersion,
+            onModalNodeClick,
+            isManual,
+            isArchived,
+            onArchive,
+            onRestore
+        } = this.props;
+        const depricatedTitle = isArchived ? i18n('(Archived)') : '';
+        return (
+            <div className="versions-page-view">
+                <VersionPageTitle
+                    itemName={itemName}
+                    depricatedTitle={depricatedTitle}
+                    onArchive={onArchive}
+                    isArchived={isArchived}
+                    onRestore={onRestore}
+                />
+                <PermissionsView
+                    owner={owner}
+                    contributors={contributors}
+                    viewers={viewers}
+                    currentUser={currentUser}
+                    isManual={isManual}
+                    onManagePermissions={onManagePermissions}
+                />
+                <div className="versions-page-list-and-tree">
+                    <div className="version-tree-wrapper">
+                        <div className="version-tree-title-container">
+                            <div className="version-tree-title">
+                                {i18n('Version Tree')}
+                            </div>
+                            {this.state.showExpanded && (
+                                <SVGIcon
+                                    name="expand"
+                                    className="version-tree-full-screen"
+                                    onClick={() =>
+                                        onTreeFullScreen({
+                                            name: 'versions-tree-popup',
+                                            width: 798,
+                                            height: 500,
+                                            nodes: versions.map(version => ({
+                                                id: version.id,
+                                                name: version.name,
+                                                parent: version.baseId || ''
+                                            })),
+                                            onNodeClick: version =>
+                                                onModalNodeClick({ version }),
+                                            selectedNodeId: selectedVersion,
+                                            scrollable: true,
+                                            toWiden: true
+                                        })
+                                    }
+                                />
+                            )}
+                        </div>
+                        <Tree
+                            name={'versions-tree'}
+                            width={200}
+                            allowScaleWidth={false}
+                            nodes={versions.map(version => ({
+                                id: version.id,
+                                name: version.name,
+                                parent: version.baseId || ''
+                            }))}
+                            onNodeClick={version =>
+                                onSelectVersion({ version })
+                            }
+                            onRenderedBeyondWidth={() => {
+                                this.setState({ showExpanded: true });
+                            }}
+                            selectedNodeId={selectedVersion}
+                        />
+                    </div>
+                    <VersionList
+                        versions={versions}
+                        onSelectVersion={onSelectVersion}
+                        onNavigateToVersion={onNavigateToVersion}
+                        onCreateVersion={isArchived ? false : onCreateVersion}
+                        selectedVersion={selectedVersion}
+                        isCollaborator={isCollaborator}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
 export default VersionsPage;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
index d475c03c31..606b17b897 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
@@ -14,94 +14,96 @@
  * permissions and limitations under the License.
  */
 import ItemsHelper from '../../common/helpers/ItemsHelper.js';
-import {actionTypes} from './VersionsPageConstants.js';
-import {itemTypes} from './VersionsPageConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './VersionsPageConstants.js';
+import { itemTypes } from './VersionsPageConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 const VersionsPageActionHelper = {
-	fetchVersions(dispatch, {itemType, itemId}) {
-		return ItemsHelper.fetchVersions({itemId}).then(response => {
-			dispatch({
-				type: actionTypes.VERSIONS_LOADED,
-				versions: response.results,
-				itemType,
-				itemId
-			});
-			return Promise.resolve(response);
-		});
-	},
+    fetchVersions(dispatch, { itemType, itemId }) {
+        return ItemsHelper.fetchVersions({ itemId }).then(response => {
+            dispatch({
+                type: actionTypes.VERSIONS_LOADED,
+                versions: response.results,
+                itemType,
+                itemId
+            });
+            return Promise.resolve(response);
+        });
+    },
 
-	selectVersion(dispatch, {version}) {
-		dispatch({
-			type: actionTypes.SELECT_VERSION,
-			versionId: version.id
-		});
-	},
+    selectVersion(dispatch, { version }) {
+        dispatch({
+            type: actionTypes.SELECT_VERSION,
+            versionId: version.id
+        });
+    },
 
-	selectNone(dispatch) {
-		dispatch({ type: actionTypes.SELECT_NONE });
-	},
+    selectNone(dispatch) {
+        dispatch({ type: actionTypes.SELECT_NONE });
+    },
 
-	onNavigateToVersion(dispatch, {version, itemId, itemType}) {
-		switch (itemType) {
-			case itemTypes.LICENSE_MODEL:
-				ScreensHelper.loadScreen(dispatch, {
-					screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL,
-					props: {licenseModelId: itemId, version}
-				});
-				break;
-			case itemTypes.SOFTWARE_PRODUCT:
-				ScreensHelper.loadScreen(dispatch, {
-					screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-					props: {softwareProductId: itemId, version}
-				});
-				break;
-		}
-	},
+    onNavigateToVersion(dispatch, { version, itemId, itemType }) {
+        switch (itemType) {
+            case itemTypes.LICENSE_MODEL:
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+                    screenType: screenTypes.LICENSE_MODEL,
+                    props: { licenseModelId: itemId, version }
+                });
+                break;
+            case itemTypes.SOFTWARE_PRODUCT:
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+                    screenType: screenTypes.SOFTWARE_PRODUCT,
+                    props: { softwareProductId: itemId, version }
+                });
+                break;
+        }
+    },
 
-	openTree(dispatch, treeProps) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.VERSION_TREE,
-				modalComponentProps: treeProps,
-				onDeclined: () => dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_CLOSE
-				}),
-				modalClassName: 'versions-tree-modal',
-				cancelButtonText: i18n('Close'),
-				title: i18n('Version Tree')
-			}
-		});
-	},
+    openTree(dispatch, treeProps) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.VERSION_TREE,
+                modalComponentProps: treeProps,
+                onDeclined: () =>
+                    dispatch({
+                        type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                    }),
+                modalClassName: 'versions-tree-modal',
+                cancelButtonText: i18n('Close'),
+                title: i18n('Version Tree')
+            }
+        });
+    },
 
-	selectVersionFromModal(dispatch, {version}) {
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		this.selectVersion(dispatch, {version});
-	},
+    selectVersionFromModal(dispatch, { version }) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        this.selectVersion(dispatch, { version });
+    },
 
-	archiveItem(dispatch, itemId) {
-		ItemsHelper.archiveItem(itemId).then(() => {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.ONBOARDING_CATALOG
-			});
-		});	
-	},
+    archiveItem(dispatch, itemId) {
+        ItemsHelper.archiveItem(itemId).then(() => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.ONBOARDING_CATALOG
+            });
+        });
+    },
 
-	restoreItemFromArchive(dispatch, itemId) {
-		ItemsHelper.restoreItem(itemId).then(() => {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.ONBOARDING_CATALOG
-			});
-		});
-	}
+    restoreItemFromArchive(dispatch, itemId) {
+        ItemsHelper.restoreItem(itemId).then(() => {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.ONBOARDING_CATALOG
+            });
+        });
+    }
 };
 
 export default VersionsPageActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
index 983ab79a14..3a3879ddb3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
@@ -16,12 +16,12 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	VERSIONS_LOADED: null,
-	SELECT_VERSION: null,
-	SELECT_NONE: null
+    VERSIONS_LOADED: null,
+    SELECT_VERSION: null,
+    SELECT_NONE: null
 });
 
 export const itemTypes = {
-	LICENSE_MODEL: 'vendor-license-models',
-	SOFTWARE_PRODUCT: 'vendor-software-products'
+    LICENSE_MODEL: 'vendor-license-models',
+    SOFTWARE_PRODUCT: 'vendor-software-products'
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
index 9b6fa9f803..c270278f21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
@@ -13,30 +13,34 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './VersionsPageConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes } from './VersionsPageConstants.js';
+import { combineReducers } from 'redux';
 import VersionsPageCreationReducer from './creation/VersionsPageCreationReducer.js';
 import PermissionsReducer from '../permissions/PermissionsReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
 
 function VersionsListReducer(state = {}, action) {
-	switch (action.type) {
-		case actionTypes.VERSIONS_LOADED:
-			let {versions, itemType = state.itemType, itemId} = action;
-			return {...state, versions, itemType, itemId};
-		case actionTypes.SELECT_VERSION:
-			return {...state, selectedVersion: action.versionId === state.selectedVersion ? null : action.versionId};
-		case actionTypes.SELECT_NONE:
-			return {...state, selectedVersion: null};
-		default:
-			return state;
-	}
-};
-
-
+    switch (action.type) {
+        case actionTypes.VERSIONS_LOADED:
+            let { versions, itemType = state.itemType, itemId } = action;
+            return { ...state, versions, itemType, itemId };
+        case actionTypes.SELECT_VERSION:
+            return {
+                ...state,
+                selectedVersion:
+                    action.versionId === state.selectedVersion
+                        ? null
+                        : action.versionId
+            };
+        case actionTypes.SELECT_NONE:
+            return { ...state, selectedVersion: null };
+        default:
+            return state;
+    }
+}
 
 export default combineReducers({
-	versionCreation: createPlainDataReducer(VersionsPageCreationReducer),
-	versionsList: VersionsListReducer,
-	permissions: PermissionsReducer
+    versionCreation: createPlainDataReducer(VersionsPageCreationReducer),
+    versionsList: VersionsListReducer,
+    permissions: PermissionsReducer
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
index 26f8450f4c..74d88f0b52 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
@@ -22,61 +22,108 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 
 const maxContributors = 6;
 
-function extraUsersTooltip (extraUsers) {
-	return (
-		<Tooltip className='extra-users-tooltip' id='extra-users-tooltip-id'>
-			{extraUsers.map(extraUser => <div key={extraUser.userId} className='extra-user'>{extraUser.fullName}</div>)}
-		</Tooltip>
-	);
+function extraUsersTooltip(extraUsers) {
+    return (
+        <Tooltip className="extra-users-tooltip" id="extra-users-tooltip-id">
+            {extraUsers.map(extraUser => (
+                <div key={extraUser.userId} className="extra-user">
+                    {extraUser.fullName}
+                </div>
+            ))}
+        </Tooltip>
+    );
 }
 
-const User = ({user, isCurrentUser, dataTestId}) => (
-	<SVGIcon className={`user-view ${isCurrentUser ? 'current-user' : ''}`} name='user' label={user.fullName} labelPosition='right' color='primary'
-		data-test-id={dataTestId}/>
+const User = ({ user, isCurrentUser, dataTestId }) => (
+    <SVGIcon
+        className={`user-view ${isCurrentUser ? 'current-user' : ''}`}
+        name="user"
+        label={user.fullName}
+        labelPosition="right"
+        color="primary"
+        data-test-id={dataTestId}
+    />
 );
 
-const Owner = ({owner, isCurrentUser}) => (
-	<div className='owner-view'>
-		<div className='permissions-view-title'>{i18n('Owner')}</div>
-		<User user={owner} isCurrentUser={isCurrentUser} dataTestId='owner'/>
-	</div>
+const Owner = ({ owner, isCurrentUser }) => (
+    <div className="owner-view">
+        <div className="permissions-view-title">{i18n('Owner')}</div>
+        <User user={owner} isCurrentUser={isCurrentUser} dataTestId="owner" />
+    </div>
 );
 
-const Contributors = ({contributors, owner, currentUser, onManagePermissions, isManual}) => {
-	let extraUsers = contributors.length - maxContributors;
-	return (
-		<div className='contributors-view'>
-			<div className='permissions-view-title'>{i18n('Contributors')}</div>
-			{contributors.slice(0, maxContributors).map(contributor =>
-				<User key={contributor.userId} user={contributor} isCurrentUser={contributor.userId === currentUser.userId} dataTestId='contributor'/>
-			)}
-			{extraUsers > 0 &&
-				<OverlayTrigger placement='bottom' overlay={extraUsersTooltip(contributors.slice(maxContributors))}>
-					<div className='extra-contributors'>{`+${extraUsers}`}</div>
-				</OverlayTrigger>
-			}
-			{currentUser.userId === owner.userId && !isManual &&
-				<span
-					className='manage-permissions'
-					onClick={onManagePermissions}
-					data-test-id='versions-page-manage-permissions'>
-					{i18n('Manage Permissions')}
-				</span>
-			}
-	</div>
-	);
+const Contributors = ({
+    contributors,
+    owner,
+    currentUser,
+    onManagePermissions,
+    isManual
+}) => {
+    let extraUsers = contributors.length - maxContributors;
+    return (
+        <div className="contributors-view">
+            <div className="permissions-view-title">{i18n('Contributors')}</div>
+            {contributors
+                .slice(0, maxContributors)
+                .map(contributor => (
+                    <User
+                        key={contributor.userId}
+                        user={contributor}
+                        isCurrentUser={
+                            contributor.userId === currentUser.userId
+                        }
+                        dataTestId="contributor"
+                    />
+                ))}
+            {extraUsers > 0 && (
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={extraUsersTooltip(
+                        contributors.slice(maxContributors)
+                    )}>
+                    <div className="extra-contributors">{`+${extraUsers}`}</div>
+                </OverlayTrigger>
+            )}
+            {currentUser.userId === owner.userId &&
+                !isManual && (
+                    <span
+                        className="manage-permissions"
+                        onClick={onManagePermissions}
+                        data-test-id="versions-page-manage-permissions">
+                        {i18n('Manage Permissions')}
+                    </span>
+                )}
+        </div>
+    );
 };
 
-const PermissionsView = ({owner, contributors, currentUser = {}, onManagePermissions, isManual}) => (
-	<div className='versions-page-permissions-view-wrapper'>
-		<div className='permissions-view-wrapper-title'>{i18n('Permissions')}</div>
-		<div className='permissions-view-content'>
-			<div className='permissions-view'>
-				<Owner owner={owner} isCurrentUser={owner.userId === currentUser.userId} />
-				<Contributors owner={owner} contributors={contributors} currentUser={currentUser} onManagePermissions={onManagePermissions} isManual={isManual}/>
-			</div>
-		</div>
-	</div>
+const PermissionsView = ({
+    owner,
+    contributors,
+    currentUser = {},
+    onManagePermissions,
+    isManual
+}) => (
+    <div className="versions-page-permissions-view-wrapper">
+        <div className="permissions-view-wrapper-title">
+            {i18n('Permissions')}
+        </div>
+        <div className="permissions-view-content">
+            <div className="permissions-view">
+                <Owner
+                    owner={owner}
+                    isCurrentUser={owner.userId === currentUser.userId}
+                />
+                <Contributors
+                    owner={owner}
+                    contributors={contributors}
+                    currentUser={currentUser}
+                    onManagePermissions={onManagePermissions}
+                    isManual={isManual}
+                />
+            </div>
+        </div>
+    </div>
 );
 
 export default PermissionsView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
index 47255eb9dc..d74805eccc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
@@ -20,108 +20,177 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-const formatTime = (time) => {
-	if (!time) { return ''; }
+const formatTime = time => {
+    if (!time) {
+        return '';
+    }
 
-	const date = new Date(time);
-	const options = {
-		year: 'numeric',
-		month: 'short',
-		day: 'numeric',
-		hour: '2-digit',
-		minute: '2-digit'
-	};
-	const newDate = date.toLocaleTimeString('en-US', options);
+    const date = new Date(time);
+    const options = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+    const newDate = date.toLocaleTimeString('en-US', options);
 
-	return newDate;
+    return newDate;
 };
 
 const DescriptionField = ({ className, text, useTooltip }) => {
-	if (useTooltip) {
-		return (
-			<div className={className}>
-				<OverlayTrigger
-					placement='bottom'
-					overlay={<Tooltip className='version-description-tooltip' id='version-description-tooltip'>{text}</Tooltip>}>
-					<div className='description-text'>{text}</div>
-				</OverlayTrigger>
-			</div>
-		);
-	}
-	return <div className={className}>{text}</div>;
+    if (useTooltip) {
+        return (
+            <div className={className}>
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={
+                        <Tooltip
+                            className="version-description-tooltip"
+                            id="version-description-tooltip">
+                            {text}
+                        </Tooltip>
+                    }>
+                    <div className="description-text">{text}</div>
+                </OverlayTrigger>
+            </div>
+        );
+    }
+    return <div className={className}>{text}</div>;
 };
 
-const VersionListItem = ({ data, onSelectVersion, onNavigateToVersion, onCreateVersion, isHeader, isSelected, isCollaborator }) => {
+const VersionListItem = ({
+    data,
+    onSelectVersion,
+    onNavigateToVersion,
+    onCreateVersion,
+    isHeader,
+    isSelected,
+    isCollaborator
+}) => {
+    let { modificationTime, name, status, description, additionalInfo } = data;
+    const modificationText = !isHeader
+        ? formatTime(modificationTime)
+        : i18n('Last Edited On');
 
-	let {modificationTime, name, status, description, additionalInfo} = data;
-	const modificationText = !isHeader ? formatTime(modificationTime) : i18n('Last Edited On');
-
-	return (
-		<div
-			data-test-id='version-item-row'
-			className={`version-item-row ${isHeader ? 'header-row' : 'clickable'} ${isSelected ? 'selected' : ''}`}
-			onClick={e => {
-				e.stopPropagation();
-				onSelectVersion();
-				onNavigateToVersion();
-			}}>
-			<div className={`version-item-field ${isHeader ? 'header-field item-version' : 'item-version'}`}>{name}</div>
-			<div className={`version-item-field ${isHeader ? 'header-field item-status' : 'item-status'}`}>{status}</div>
-			<div className={`version-item-field ${isHeader ? 'header-field' : 'item-last-edited'}`}>{modificationText}</div>
-			<DescriptionField
-				className={`version-item-field ${isHeader ? 'header-field header-description' : 'item-description'}`}
-				useTooltip={!isHeader && description}
-				text={description} />
-
-				{
-					isHeader ?
-						<div className='version-item-field header-field actions'>{i18n('Actions')}</div>
-					:
-						<div className='version-item-field item-actions'>
-							<div className='version-item-field item-select'>
-								<SVGIcon
-									name='check-circle'
-									data-test-id='versions-page-select-version'
-									onClick={e => {e.stopPropagation(); onNavigateToVersion();}}
-									label={i18n('Go to this Version')}
-									labelPosition='right' />
-							</div>
-							<div className='version-item-field item-create'>
-								{!isHeader && isCollaborator && additionalInfo.OptionalCreationMethods.length > 0 && onCreateVersion &&
-									<SVGIcon
-										name='plus-circle'
-										data-test-id='versions-page-create-version'
-										onClick={e => { e.stopPropagation(); onCreateVersion(); }}
-										label={i18n('Create New Version')}
-										labelPosition='right'
-										disabled={!isCollaborator || !onCreateVersion} />
-								}
-							</div>
-						</div>
-				}
-		</div>
-	);
+    return (
+        <div
+            data-test-id="version-item-row"
+            className={`version-item-row ${
+                isHeader ? 'header-row' : 'clickable'
+            } ${isSelected ? 'selected' : ''}`}
+            onClick={e => {
+                e.stopPropagation();
+                onSelectVersion();
+                onNavigateToVersion();
+            }}>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field item-version' : 'item-version'
+                }`}>
+                {name}
+            </div>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field item-status' : 'item-status'
+                }`}>
+                {status}
+            </div>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field' : 'item-last-edited'
+                }`}>
+                {modificationText}
+            </div>
+            <DescriptionField
+                className={`version-item-field ${
+                    isHeader
+                        ? 'header-field header-description'
+                        : 'item-description'
+                }`}
+                useTooltip={!isHeader && description}
+                text={description}
+            />
 
+            {isHeader ? (
+                <div className="version-item-field header-field actions">
+                    {i18n('Actions')}
+                </div>
+            ) : (
+                <div className="version-item-field item-actions">
+                    <div className="version-item-field item-select">
+                        <SVGIcon
+                            name="check-circle"
+                            data-test-id="versions-page-select-version"
+                            onClick={e => {
+                                e.stopPropagation();
+                                onNavigateToVersion();
+                            }}
+                            label={i18n('Go to this Version')}
+                            labelPosition="right"
+                        />
+                    </div>
+                    <div className="version-item-field item-create">
+                        {!isHeader &&
+                            isCollaborator &&
+                            additionalInfo.OptionalCreationMethods.length > 0 &&
+                            onCreateVersion && (
+                                <SVGIcon
+                                    name="plus-circle"
+                                    data-test-id="versions-page-create-version"
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onCreateVersion();
+                                    }}
+                                    label={i18n('Create New Version')}
+                                    labelPosition="right"
+                                    disabled={
+                                        !isCollaborator || !onCreateVersion
+                                    }
+                                />
+                            )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
 };
 
-const VersionList = ({ versions, onSelectVersion, onNavigateToVersion, onCreateVersion, selectedVersion, isCollaborator }) => (
-	<div className='version-list'>
-		<VersionListItem
-			data={{ name: i18n('Version'), status: i18n('Status'), description: i18n('Description') }}
-			isHeader />
-		<div className='version-list-items'>
-			{versions.map(version =>
-				<VersionListItem
-					key={version.id}
-					data={version}
-					onSelectVersion={() => onSelectVersion({version})}
-					onNavigateToVersion={() => onNavigateToVersion({version})}
-					onCreateVersion={onCreateVersion ? () => onCreateVersion({version}) : false}
-					isSelected={selectedVersion === version.id}
-					isCollaborator={isCollaborator} />
-			)}
-		</div>
-	</div>
+const VersionList = ({
+    versions,
+    onSelectVersion,
+    onNavigateToVersion,
+    onCreateVersion,
+    selectedVersion,
+    isCollaborator
+}) => (
+    <div className="version-list">
+        <VersionListItem
+            data={{
+                name: i18n('Version'),
+                status: i18n('Status'),
+                description: i18n('Description')
+            }}
+            isHeader
+        />
+        <div className="version-list-items">
+            {versions.map(version => (
+                <VersionListItem
+                    key={version.id}
+                    data={version}
+                    onSelectVersion={() => onSelectVersion({ version })}
+                    onNavigateToVersion={() => onNavigateToVersion({ version })}
+                    onCreateVersion={
+                        onCreateVersion
+                            ? () => onCreateVersion({ version })
+                            : false
+                    }
+                    isSelected={selectedVersion === version.id}
+                    isCollaborator={isCollaborator}
+                />
+            ))}
+        </div>
+    </div>
 );
 
 export default VersionList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
index 66c1c79be5..e0cb925df4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
@@ -13,32 +13,52 @@
  * 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 VersionsPageCreationActionHelper from './VersionsPageCreationActionHelper.js';
 import VersionsPageActionHelper from '../VersionsPageActionHelper.js';
 import VersionsPageCreationView from './VersionsPageCreationView.jsx';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {VERSION_CREATION_FORM_NAME} from './VersionsPageCreationConstants.js';
+import { VERSION_CREATION_FORM_NAME } from './VersionsPageCreationConstants.js';
 
-export const mapStateToProps = ({versionsPage: {versionCreation}}) => {
-	let {genericFieldInfo} = versionCreation;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ versionsPage: { versionCreation } }) => {
+    let { genericFieldInfo } = versionCreation;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {...versionCreation, isFormValid};
+    return { ...versionCreation, isFormValid };
 };
 
-export const mapActionsToProps = (dispatch, {itemId, itemType, additionalProps}) => {
-	return {
-		onDataChanged: (deltaData, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VERSION_CREATION_FORM_NAME, customValidations}),
-		onCancel: () => VersionsPageCreationActionHelper.close(dispatch),
-		onSubmit: ({baseVersion, payload}) => {
-			VersionsPageCreationActionHelper.close(dispatch);
-			VersionsPageCreationActionHelper.createVersion(dispatch, {baseVersion, itemId, payload}).then(response => {
-				VersionsPageActionHelper.onNavigateToVersion(dispatch, {version: response, itemId, itemType, additionalProps});
-			});
-		},
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME)
-	};
+export const mapActionsToProps = (
+    dispatch,
+    { itemId, itemType, additionalProps }
+) => {
+    return {
+        onDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: VERSION_CREATION_FORM_NAME,
+                customValidations
+            }),
+        onCancel: () => VersionsPageCreationActionHelper.close(dispatch),
+        onSubmit: ({ baseVersion, payload }) => {
+            VersionsPageCreationActionHelper.close(dispatch);
+            VersionsPageCreationActionHelper.createVersion(dispatch, {
+                baseVersion,
+                itemId,
+                payload
+            }).then(response => {
+                VersionsPageActionHelper.onNavigateToVersion(dispatch, {
+                    version: response,
+                    itemId,
+                    itemType,
+                    additionalProps
+                });
+            });
+        },
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(VersionsPageCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    VersionsPageCreationView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
index bc038689a4..6e3be705c0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
@@ -15,65 +15,76 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './VersionsPageCreationConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './VersionsPageCreationConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
-import {actionTypes as VersionsPageActionTypes} from '../VersionsPageConstants.js';
+import { actionTypes as VersionsPageActionTypes } from '../VersionsPageConstants.js';
 
-function baseUrl({itemId, baseVersion}) {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`;
+function baseUrl({ itemId, baseVersion }) {
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`;
 }
 
-function createVersion({itemId, baseVersion, payload: {description, creationMethod} }) {
-	return RestAPIUtil.post(baseUrl({itemId, baseVersion}), {description, creationMethod});
+function createVersion({
+    itemId,
+    baseVersion,
+    payload: { description, creationMethod }
+}) {
+    return RestAPIUtil.post(baseUrl({ itemId, baseVersion }), {
+        description,
+        creationMethod
+    });
 }
 
-
 export default {
+    open(dispatch, { itemType, itemId, additionalProps, baseVersion }) {
+        dispatch({
+            type: actionTypes.OPEN
+        });
 
-	open(dispatch, {itemType, itemId, additionalProps, baseVersion}) {
-		dispatch({
-			type: actionTypes.OPEN
-		});
-
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.VERSION_CREATION,
-				modalComponentProps: {itemType, itemId, additionalProps, baseVersion},
-				title: i18n('New Version - From {name}', {name: baseVersion.name})
-			}
-		});
-	},
-
-	close(dispatch){
-		dispatch({
-			type: actionTypes.CLOSE
-		});
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.VERSION_CREATION,
+                modalComponentProps: {
+                    itemType,
+                    itemId,
+                    additionalProps,
+                    baseVersion
+                },
+                title: i18n('New Version - From {name}', {
+                    name: baseVersion.name
+                })
+            }
+        });
+    },
 
-		dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-	},
+    close(dispatch) {
+        dispatch({
+            type: actionTypes.CLOSE
+        });
 
-	createVersion(dispatch, {itemId, baseVersion, payload}){
-		return createVersion({itemId, baseVersion, payload}).then(result => {
-			return ItemsHelper.fetchVersions({itemId}).then(response => {
-				dispatch({
-					type: VersionsPageActionTypes.VERSIONS_LOADED,
-					versions: response.results,
-					itemId
-				});
-				dispatch({
-					type: actionTypes.VERSION_CREATED,
-					result
-				});
-				return result;
-			});
-		});
-	}
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+    },
 
+    createVersion(dispatch, { itemId, baseVersion, payload }) {
+        return createVersion({ itemId, baseVersion, payload }).then(result => {
+            return ItemsHelper.fetchVersions({ itemId }).then(response => {
+                dispatch({
+                    type: VersionsPageActionTypes.VERSIONS_LOADED,
+                    versions: response.results,
+                    itemId
+                });
+                dispatch({
+                    type: actionTypes.VERSION_CREATED,
+                    result
+                });
+                return result;
+            });
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
index 4ce381d4de..e761232443 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
@@ -16,13 +16,13 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	OPEN: null,
-	CLOSE: null,
-	VERSION_CREATED: null
+    OPEN: null,
+    CLOSE: null,
+    VERSION_CREATED: null
 });
 
 export const VERSION_CREATION_FORM_NAME = 'VCREATIONFORM';
 
 export const defaultState = {
-	creationMethod: 'major'
-};
\ No newline at end of file
+    creationMethod: 'major'
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
index 620cf4717f..a762e4d338 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
@@ -13,32 +13,39 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, VERSION_CREATION_FORM_NAME, defaultState} from './VersionsPageCreationConstants.js';
+import {
+    actionTypes,
+    VERSION_CREATION_FORM_NAME,
+    defaultState
+} from './VersionsPageCreationConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.OPEN:
-			return {
-				...state,
-				formReady: null,
-				formName: VERSION_CREATION_FORM_NAME,
-				data: {...defaultState},
-				genericFieldInfo: {
-					description: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					creationMethod: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				}
-			};
-		case actionTypes.CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.OPEN:
+            return {
+                ...state,
+                formReady: null,
+                formName: VERSION_CREATION_FORM_NAME,
+                data: { ...defaultState },
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    creationMethod: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                }
+            };
+        case actionTypes.CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
index caa85fe107..ba92d26067 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
@@ -20,125 +20,116 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 
 const VersionPropType = PropTypes.shape({
-	name: PropTypes.string,
-	description: PropTypes.string,
-	creationMethod: PropTypes.string
+    name: PropTypes.string,
+    description: PropTypes.string,
+    creationMethod: PropTypes.string
 });
 
 class VersionsPageCreationView extends React.Component {
-
-	static propTypes = {
-		data: VersionPropType,
-		availableMethods: PropTypes.array,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
-
-	render() {
-		let {data = {}, genericFieldInfo, baseVersion, onDataChanged, onCancel} = this.props;
-		let {additionalInfo: {OptionalCreationMethods}} = baseVersion;
-		let {description, creationMethod} = data;
-
-		return (
-			<div className='version-creation-page'>
-				{ genericFieldInfo && <Form
-					ref={(validationForm) => this.validationForm = validationForm}
-					hasButtons={true}
-					onSubmit={() => this.submit()}
-					submitButtonText={i18n('Create')}
-					onReset={() => onCancel()}
-					labledButtons={true}
-					isValid={this.props.isFormValid}
-					formReady={this.props.formReady}
-					onValidateForm={() => this.validate()}>
-
-					<div className='version-form-row'>
-						<Input
-							label={i18n('Version Category')}
-							value={creationMethod}
-							onChange={e => this.onSelectMethod(e)}
-							type='select'
-							overlayPos='bottom'
-							data-test-id='new-version-category'
-							isValid={genericFieldInfo.creationMethod.isValid}
-							errorText={genericFieldInfo.creationMethod.errorText}
-							isRequired>
-							<option key='' value=''>{i18n('Please select…')}</option>
-							{OptionalCreationMethods.map(method => <option key={method} value={method}>{i18n(method)}</option>)}
-						</Input>
-					</div>
-
-					<div className='version-form-row'>
-						<Input
-							label={i18n('Description')}
-							value={description}
-							type='text'
-							overlayPos='bottom'
-							data-test-id='new-version-description'
-							isValid={genericFieldInfo.description.isValid}
-							errorText={genericFieldInfo.description.errorText}
-							onChange={description => onDataChanged({description})}
-							isRequired />
-					</div>
-
-				</Form> }
-			</div>
-		);
-	}
-
-	onSelectMethod(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const creationMethod = e.target.options[selectedIndex].value;
-		this.props.onDataChanged({creationMethod});
-	}
-
-	submit() {
-		let {baseVersion, data: {description, creationMethod}} = this.props;
-		this.props.onSubmit({baseVersion, payload: {description, creationMethod}});
-	}
-
-	validate() {
-		this.props.onValidateForm();
-	}
-
+    static propTypes = {
+        data: VersionPropType,
+        availableMethods: PropTypes.array,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
+
+    render() {
+        let {
+            data = {},
+            genericFieldInfo,
+            baseVersion,
+            onDataChanged,
+            onCancel
+        } = this.props;
+        let { additionalInfo: { OptionalCreationMethods } } = baseVersion;
+        let { description, creationMethod } = data;
+
+        return (
+            <div className="version-creation-page">
+                {genericFieldInfo && (
+                    <Form
+                        ref={validationForm =>
+                            (this.validationForm = validationForm)
+                        }
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        submitButtonText={i18n('Create')}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() => this.validate()}>
+                        <div className="version-form-row">
+                            <Input
+                                label={i18n('Version Category')}
+                                value={creationMethod}
+                                onChange={e => this.onSelectMethod(e)}
+                                type="select"
+                                overlayPos="bottom"
+                                data-test-id="new-version-category"
+                                isValid={
+                                    genericFieldInfo.creationMethod.isValid
+                                }
+                                errorText={
+                                    genericFieldInfo.creationMethod.errorText
+                                }
+                                isRequired>
+                                <option key="" value="">
+                                    {i18n('Please select…')}
+                                </option>
+                                {OptionalCreationMethods.map(method => (
+                                    <option key={method} value={method}>
+                                        {i18n(method)}
+                                    </option>
+                                ))}
+                            </Input>
+                        </div>
+
+                        <div className="version-form-row">
+                            <Input
+                                label={i18n('Description')}
+                                value={description}
+                                type="text"
+                                overlayPos="bottom"
+                                data-test-id="new-version-description"
+                                isValid={genericFieldInfo.description.isValid}
+                                errorText={
+                                    genericFieldInfo.description.errorText
+                                }
+                                onChange={description =>
+                                    onDataChanged({ description })
+                                }
+                                isRequired
+                            />
+                        </div>
+                    </Form>
+                )}
+            </div>
+        );
+    }
+
+    onSelectMethod(e) {
+        const selectedIndex = e.target.selectedIndex;
+        const creationMethod = e.target.options[selectedIndex].value;
+        this.props.onDataChanged({ creationMethod });
+    }
+
+    submit() {
+        let { baseVersion, data: { description, creationMethod } } = this.props;
+        this.props.onSubmit({
+            baseVersion,
+            payload: { description, creationMethod }
+        });
+    }
+
+    validate() {
+        this.props.onValidateForm();
+    }
 }
 
 export default VersionsPageCreationView;
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 /*
 						<div className='software-product-inline-section'>
 							<Input
diff --git a/openecomp-ui/src/sdc-app/sdc.app.jsx b/openecomp-ui/src/sdc-app/sdc.app.jsx
index b467e3ca9d..b759ffd259 100644
--- a/openecomp-ui/src/sdc-app/sdc.app.jsx
+++ b/openecomp-ui/src/sdc-app/sdc.app.jsx
@@ -25,9 +25,18 @@ import Application from './Application.jsx';
 import Modules from './ModulesOptions.jsx';
 
 //chrome 48 remove svg method which is used in jointjs core -> https://github.com/cpettitt/dagre-d3/issues/202 --> http://jointjs.com/blog/get-transform-to-element-polyfill.html
-SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
-	return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
-};
-
-ReactDOM.render(<Application><Modules/></Application>, document.getElementById('sdc-app'));
+SVGElement.prototype.getTransformToElement =
+    SVGElement.prototype.getTransformToElement ||
+    function(toElement) {
+        return toElement
+            .getScreenCTM()
+            .inverse()
+            .multiply(this.getScreenCTM());
+    };
 
+ReactDOM.render(
+    <Application>
+        <Modules />
+    </Application>,
+    document.getElementById('sdc-app')
+);