Adding Prettier and fixing up eslint version

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

19 files changed, 2177 insertions, 1563 deletions

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
 });