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, 1109 insertions, 768 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
index 54941aaaf0..2b10e426d1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
@@ -13,161 +13,214 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
 import LicenseModelOverviewView from './LicenseModelOverviewView.jsx';
-import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+import {
+    overviewEditorHeaders,
+    selectedButton
+} from './LicenseModelOverviewConstants.js';
 import licenseModelOverviewActionHelper from './licenseModelOverviewActionHelper.js';
 
 export const mapStateToProps = ({
-	licenseModel: {
-		licenseModelEditor,
-		entitlementPool,
-		licenseAgreement,
-		featureGroup,
-		licenseKeyGroup,
-		licenseModelOverview
-	}
+    licenseModel: {
+        licenseModelEditor,
+        entitlementPool,
+        licenseAgreement,
+        featureGroup,
+        licenseKeyGroup,
+        licenseModelOverview
+    }
 }) => {
-
-	let modalHeader, licensingDataList;
-	let isDisplayModal = false;
-
-	const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => {
-		let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(item => {return item.id === licenseKeyGroupId;});
-		if (curLicenseKeyGroup) {
-			accum.push({
-				...curLicenseKeyGroup,
-				itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
-			});
-		}
-		return accum;
-	};
-
-	const reduceEntitlementPools = (accum, entitlementPoolId) => {
-		let curEntitlementPool = entitlementPool.entitlementPoolsList.find(item => {return item.id === entitlementPoolId;});
-		if (curEntitlementPool) {
-			accum.push ({
-				...curEntitlementPool,
-				itemType: overviewEditorHeaders.ENTITLEMENT_POOL
-			});
-		}
-		return accum;
-	};
-
-	const reduceFeatureGroups = (accum, featureGroupId) => {
-		let curFeatureGroup = featureGroup.featureGroupsList.find(item => {return item.id === featureGroupId;});
-		if (curFeatureGroup) {
-			let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = curFeatureGroup;
-			accum.push({
-				...curFeatureGroup,
-				itemType: overviewEditorHeaders.FEATURE_GROUP,
-				children: [
-					...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
-					...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
-				]
-			});
-		}
-		return accum;
-	};
-
-
-	const checkEP  = (accum, elem) => {
-		if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
-			accum.push({
-				...elem,
-				itemType: overviewEditorHeaders.ENTITLEMENT_POOL
-			});
-		}
-		return accum;
-	};
-
-	const checkLG = (accum, elem) => {
-		if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
-			accum.push({
-				...elem,
-				itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
-			});
-		}
-		return accum;
-	};
-
-	const checkFG = (accum, elem) => {
-		if (!elem.referencingLicenseAgreements || !elem.referencingLicenseAgreements.length) {
-			let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = elem;
-			accum.push({
-				...elem,
-				itemType: overviewEditorHeaders.FEATURE_GROUP,
-
-				children: [
-					...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
-					...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
-				]
-
-			});
-		}
-		return accum;
-	};
-
-
-
-	const mapLicenseAgreementData = licenseAgreement => {
-		let {featureGroupsIds = []} = licenseAgreement;
-		return {
-			...licenseAgreement,
-			itemType: overviewEditorHeaders.LICENSE_AGREEMENT,
-			children: featureGroupsIds.length ? featureGroupsIds.reduce(reduceFeatureGroups, []) : []
-		};
-	};
-
-	if (entitlementPool.entitlementPoolEditor && entitlementPool.entitlementPoolEditor.data) {
-		modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL;
-		isDisplayModal = true;
-	}else
-	if (licenseAgreement.licenseAgreementEditor && licenseAgreement.licenseAgreementEditor.data) {
-		modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT;
-		isDisplayModal = true;
-	}else
-	if (featureGroup.featureGroupEditor && featureGroup.featureGroupEditor.data) {
-		modalHeader = overviewEditorHeaders.FEATURE_GROUP;
-		isDisplayModal = true;
-	}else
-	if (licenseKeyGroup.licenseKeyGroupsEditor && licenseKeyGroup.licenseKeyGroupsEditor.data) {
-		modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP;
-		isDisplayModal = true;
-	}
-
-	let orphanDataList = [
-		...featureGroup.featureGroupsList.reduce(checkFG, []),
-		...entitlementPool.entitlementPoolsList.reduce(checkEP, []),
-		...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, [])
-	];
-
-	licensingDataList = licenseAgreement.licenseAgreementList && licenseAgreement.licenseAgreementList.length ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData) : [];
-	let selectedTab = licenseModelOverview.selectedTab;
-	// on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans
-	if (selectedTab === null) {
-		selectedTab = (licensingDataList.length) ? selectedButton.VLM_LIST_VIEW : selectedButton.NOT_IN_USE;
-	}
-
-	return {
-		isDisplayModal,
-		modalHeader,
-		licenseModelId: licenseModelEditor.data.id,
-		version: licenseModelEditor.data.version,
-		licensingDataList,
-		orphanDataList,
-		selectedTab
-	};
+    let modalHeader, licensingDataList;
+    let isDisplayModal = false;
+
+    const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => {
+        let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(
+            item => {
+                return item.id === licenseKeyGroupId;
+            }
+        );
+        if (curLicenseKeyGroup) {
+            accum.push({
+                ...curLicenseKeyGroup,
+                itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+            });
+        }
+        return accum;
+    };
+
+    const reduceEntitlementPools = (accum, entitlementPoolId) => {
+        let curEntitlementPool = entitlementPool.entitlementPoolsList.find(
+            item => {
+                return item.id === entitlementPoolId;
+            }
+        );
+        if (curEntitlementPool) {
+            accum.push({
+                ...curEntitlementPool,
+                itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+            });
+        }
+        return accum;
+    };
+
+    const reduceFeatureGroups = (accum, featureGroupId) => {
+        let curFeatureGroup = featureGroup.featureGroupsList.find(item => {
+            return item.id === featureGroupId;
+        });
+        if (curFeatureGroup) {
+            let {
+                entitlementPoolsIds = [],
+                licenseKeyGroupsIds = []
+            } = curFeatureGroup;
+            accum.push({
+                ...curFeatureGroup,
+                itemType: overviewEditorHeaders.FEATURE_GROUP,
+                children: [
+                    ...(entitlementPoolsIds.length
+                        ? entitlementPoolsIds.reduce(reduceEntitlementPools, [])
+                        : []),
+                    ...(licenseKeyGroupsIds.length
+                        ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, [])
+                        : [])
+                ]
+            });
+        }
+        return accum;
+    };
+
+    const checkEP = (accum, elem) => {
+        if (
+            !elem.referencingFeatureGroups ||
+            !elem.referencingFeatureGroups.length
+        ) {
+            accum.push({
+                ...elem,
+                itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+            });
+        }
+        return accum;
+    };
+
+    const checkLG = (accum, elem) => {
+        if (
+            !elem.referencingFeatureGroups ||
+            !elem.referencingFeatureGroups.length
+        ) {
+            accum.push({
+                ...elem,
+                itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+            });
+        }
+        return accum;
+    };
+
+    const checkFG = (accum, elem) => {
+        if (
+            !elem.referencingLicenseAgreements ||
+            !elem.referencingLicenseAgreements.length
+        ) {
+            let { entitlementPoolsIds = [], licenseKeyGroupsIds = [] } = elem;
+            accum.push({
+                ...elem,
+                itemType: overviewEditorHeaders.FEATURE_GROUP,
+
+                children: [
+                    ...(entitlementPoolsIds.length
+                        ? entitlementPoolsIds.reduce(reduceEntitlementPools, [])
+                        : []),
+                    ...(licenseKeyGroupsIds.length
+                        ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, [])
+                        : [])
+                ]
+            });
+        }
+        return accum;
+    };
+
+    const mapLicenseAgreementData = licenseAgreement => {
+        let { featureGroupsIds = [] } = licenseAgreement;
+        return {
+            ...licenseAgreement,
+            itemType: overviewEditorHeaders.LICENSE_AGREEMENT,
+            children: featureGroupsIds.length
+                ? featureGroupsIds.reduce(reduceFeatureGroups, [])
+                : []
+        };
+    };
+
+    if (
+        entitlementPool.entitlementPoolEditor &&
+        entitlementPool.entitlementPoolEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL;
+        isDisplayModal = true;
+    } else if (
+        licenseAgreement.licenseAgreementEditor &&
+        licenseAgreement.licenseAgreementEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT;
+        isDisplayModal = true;
+    } else if (
+        featureGroup.featureGroupEditor &&
+        featureGroup.featureGroupEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.FEATURE_GROUP;
+        isDisplayModal = true;
+    } else if (
+        licenseKeyGroup.licenseKeyGroupsEditor &&
+        licenseKeyGroup.licenseKeyGroupsEditor.data
+    ) {
+        modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP;
+        isDisplayModal = true;
+    }
+
+    let orphanDataList = [
+        ...featureGroup.featureGroupsList.reduce(checkFG, []),
+        ...entitlementPool.entitlementPoolsList.reduce(checkEP, []),
+        ...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, [])
+    ];
+
+    licensingDataList =
+        licenseAgreement.licenseAgreementList &&
+        licenseAgreement.licenseAgreementList.length
+            ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData)
+            : [];
+    let selectedTab = licenseModelOverview.selectedTab;
+    // on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans
+    if (selectedTab === null) {
+        selectedTab = licensingDataList.length
+            ? selectedButton.VLM_LIST_VIEW
+            : selectedButton.NOT_IN_USE;
+    }
+
+    return {
+        isDisplayModal,
+        modalHeader,
+        licenseModelId: licenseModelEditor.data.id,
+        version: licenseModelEditor.data.version,
+        licensingDataList,
+        orphanDataList,
+        selectedTab
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId}) => {
-	return {
-		onCallVCAction: action => {
-			LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action});
-		},
-		onTabSelect: (buttonTab) => licenseModelOverviewActionHelper.selectVLMListView(dispatch,{buttonTab})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId }) => {
+    return {
+        onCallVCAction: action => {
+            LicenseModelActionHelper.performVCAction(dispatch, {
+                licenseModelId,
+                action
+            });
+        },
+        onTabSelect: buttonTab =>
+            licenseModelOverviewActionHelper.selectVLMListView(dispatch, {
+                buttonTab
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseModelOverviewView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseModelOverviewView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
index 56b23384a7..b05da582f4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
@@ -16,27 +16,27 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const overviewItems = keyMirror({
-	LICENSE_AGREEMENTS: 'License Agreements',
-	FEATURE_GROUPS: 'Feature Groups',
-	ENTITLEMENT_POOLS: 'Entitlement Pools',
-	LICENSE_KEY_GROUPS: 'License Key Groups'
+    LICENSE_AGREEMENTS: 'License Agreements',
+    FEATURE_GROUPS: 'Feature Groups',
+    ENTITLEMENT_POOLS: 'Entitlement Pools',
+    LICENSE_KEY_GROUPS: 'License Key Groups'
 });
 
 export const overviewEditorHeaders = keyMirror({
-	LICENSE_AGREEMENT: 'License Agreement',
-	FEATURE_GROUP: 'Feature Group',
-	ENTITLEMENT_POOL: 'Entitlement Pool',
-	LICENSE_KEY_GROUP: 'License Key Group'
+    LICENSE_AGREEMENT: 'License Agreement',
+    FEATURE_GROUP: 'Feature Group',
+    ENTITLEMENT_POOL: 'Entitlement Pool',
+    LICENSE_KEY_GROUP: 'License Key Group'
 });
 
 export const actionTypes = keyMirror({
-	LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null,
-	LM_DATA_CHANGED: null
+    LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null,
+    LM_DATA_CHANGED: null
 });
 
 export const selectedButton = {
-	VLM_LIST_VIEW: 'VLM_LIST_VIEW',
-	NOT_IN_USE: 'NOT_IN_USE'
+    VLM_LIST_VIEW: 'VLM_LIST_VIEW',
+    NOT_IN_USE: 'NOT_IN_USE'
 };
 
 export const VLM_DESCRIPTION_FORM = 'VLMDEWSCRIPTIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
index 39109af9a3..6899360597 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
@@ -23,87 +23,137 @@ import EntitlementPoolsEditor from '../entitlementPools/EntitlementPoolsEditor.j
 import FeatureGroupEditor from '../featureGroups/FeatureGroupEditor.js';
 import LicenseAgreementEditor from '../licenseAgreement/LicenseAgreementEditor.js';
 import LicenseKeyGroupsEditor from '../licenseKeyGroups/LicenseKeyGroupsEditor.js';
-import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+import {
+    overviewEditorHeaders,
+    selectedButton
+} from './LicenseModelOverviewConstants.js';
 
 import SummaryView from './SummaryView.jsx';
 import VLMListView from './VLMListView.jsx';
 import ListButtons from './summary/ListButtons.jsx';
 
-
-const setModalClassName = (modalHeader) => {
-	switch (modalHeader) {
-		case overviewEditorHeaders.ENTITLEMENT_POOL:
-			return 'entitlement-pools-modal';
-		case overviewEditorHeaders.LICENSE_AGREEMENT:
-			return 'license-agreement-modal';
-		case overviewEditorHeaders.FEATURE_GROUP:
-			return 'feature-group-modal';
-		case overviewEditorHeaders.LICENSE_KEY_GROUP:
-			return 'license-key-groups-modal';
-		default:
-			return '';
-	}
+const setModalClassName = modalHeader => {
+    switch (modalHeader) {
+        case overviewEditorHeaders.ENTITLEMENT_POOL:
+            return 'entitlement-pools-modal';
+        case overviewEditorHeaders.LICENSE_AGREEMENT:
+            return 'license-agreement-modal';
+        case overviewEditorHeaders.FEATURE_GROUP:
+            return 'feature-group-modal';
+        case overviewEditorHeaders.LICENSE_KEY_GROUP:
+            return 'license-key-groups-modal';
+        default:
+            return '';
+    }
 };
 
 class LicenseModelOverviewView extends React.Component {
+    static propTypes = {
+        isDisplayModal: PropTypes.bool,
+        isReadOnlyMode: PropTypes.bool,
+        licenseModelId: PropTypes.string,
+        licensingDataList: PropTypes.array,
+        orphanDataList: PropTypes.array,
+        modalHeader: PropTypes.string,
+        selectedTab: PropTypes.string,
+        onTabSelect: PropTypes.func,
+        onCallVCAction: PropTypes.func,
+        onClose: PropTypes.func
+    };
 
-	static propTypes = {
-		isDisplayModal: PropTypes.bool,
-		isReadOnlyMode: PropTypes.bool,
-		licenseModelId: PropTypes.string,
-		licensingDataList: PropTypes.array,
-		orphanDataList: PropTypes.array,
-		modalHeader: PropTypes.string,
-		selectedTab: PropTypes.string,
-		onTabSelect: PropTypes.func,
-		onCallVCAction: PropTypes.func,
-		onClose: PropTypes.func
-	};
-
-	render() {
-		let {isDisplayModal, modalHeader, licensingDataList, selectedTab, onTabSelect, orphanDataList, isReadOnlyMode} = this.props;
-		let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE;
-		let dataList = selectedInUse ? licensingDataList : orphanDataList;
-		return(
-			<div className='license-model-overview'>
-				<SummaryView  isReadOnlyMode={isReadOnlyMode}/>
-				<div className={classNames('overview-list-section ', !selectedInUse ? 'overview-list-orphans' : '' )}>
-					<div className='vlm-list-tab-panel'>
-						<ListButtons onTabSelect={onTabSelect}
-							 selectedTab={selectedTab}
-							 hasOrphans={orphanDataList.length > 0}
-							 hasLicensing={licensingDataList.length > 0}/>
-					</div>
-					<VLMListView licensingDataList={dataList} showInUse={selectedInUse}/>
-				</div>
-				{
-					isDisplayModal &&
-					<Modal show={isDisplayModal} bsSize='large' animation={true} className={classNames('onborading-modal license-model-modal', setModalClassName(modalHeader))}>
-						<Modal.Header>
-							<Modal.Title>{`${i18n('Create New ')}${i18n(modalHeader)}`}</Modal.Title>
-						</Modal.Header>
-						<Modal.Body>
-							{this.renderModalBody(modalHeader)}
-						</Modal.Body>
-					</Modal>
-				}
-			</div>
-		);
-	}
+    render() {
+        let {
+            isDisplayModal,
+            modalHeader,
+            licensingDataList,
+            selectedTab,
+            onTabSelect,
+            orphanDataList,
+            isReadOnlyMode
+        } = this.props;
+        let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE;
+        let dataList = selectedInUse ? licensingDataList : orphanDataList;
+        return (
+            <div className="license-model-overview">
+                <SummaryView isReadOnlyMode={isReadOnlyMode} />
+                <div
+                    className={classNames(
+                        'overview-list-section ',
+                        !selectedInUse ? 'overview-list-orphans' : ''
+                    )}>
+                    <div className="vlm-list-tab-panel">
+                        <ListButtons
+                            onTabSelect={onTabSelect}
+                            selectedTab={selectedTab}
+                            hasOrphans={orphanDataList.length > 0}
+                            hasLicensing={licensingDataList.length > 0}
+                        />
+                    </div>
+                    <VLMListView
+                        licensingDataList={dataList}
+                        showInUse={selectedInUse}
+                    />
+                </div>
+                {isDisplayModal && (
+                    <Modal
+                        show={isDisplayModal}
+                        bsSize="large"
+                        animation={true}
+                        className={classNames(
+                            'onborading-modal license-model-modal',
+                            setModalClassName(modalHeader)
+                        )}>
+                        <Modal.Header>
+                            <Modal.Title>{`${i18n('Create New ')}${i18n(
+                                modalHeader
+                            )}`}</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            {this.renderModalBody(modalHeader)}
+                        </Modal.Body>
+                    </Modal>
+                )}
+            </div>
+        );
+    }
 
-	renderModalBody(modalHeader) {
-		let {licenseModelId, version, isReadOnlyMode} = this.props;
-		switch (modalHeader) {
-			case overviewEditorHeaders.ENTITLEMENT_POOL:
-				return <EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-			case overviewEditorHeaders.LICENSE_AGREEMENT:
-				return <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-			case overviewEditorHeaders.FEATURE_GROUP:
-				return <FeatureGroupEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-			case overviewEditorHeaders.LICENSE_KEY_GROUP:
-				return <LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
-		}
-	}
+    renderModalBody(modalHeader) {
+        let { licenseModelId, version, isReadOnlyMode } = this.props;
+        switch (modalHeader) {
+            case overviewEditorHeaders.ENTITLEMENT_POOL:
+                return (
+                    <EntitlementPoolsEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+            case overviewEditorHeaders.LICENSE_AGREEMENT:
+                return (
+                    <LicenseAgreementEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+            case overviewEditorHeaders.FEATURE_GROUP:
+                return (
+                    <FeatureGroupEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+            case overviewEditorHeaders.LICENSE_KEY_GROUP:
+                return (
+                    <LicenseKeyGroupsEditor
+                        version={version}
+                        licenseModelId={licenseModelId}
+                        isReadOnlyMode={isReadOnlyMode}
+                    />
+                );
+        }
+    }
 }
 
-export default  LicenseModelOverviewView;
+export default LicenseModelOverviewView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
index 4053f14ced..f416b0a07f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
@@ -13,24 +13,24 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {default as VendorDataView} from './summary/VendorDataView.js';
-import {default as SummaryCountList} from './summary/SummaryCountList.js';
+import { default as VendorDataView } from './summary/VendorDataView.js';
+import { default as SummaryCountList } from './summary/SummaryCountList.js';
 
 class SummaryView extends Component {
-	render() {
-		const {isReadOnlyMode} = this.props;
-		return(
-			<div className='overview-top-section'>
-				<div className='page-title'>{i18n('overview')}</div>
-				<div className='license-model-overview-top'>
-					<VendorDataView isReadOnlyMode={isReadOnlyMode}/>
-					<SummaryCountList isReadOnlyMode={isReadOnlyMode}/>
-				</div>
-			</div>
-		);
-	}
+    render() {
+        const { isReadOnlyMode } = this.props;
+        return (
+            <div className="overview-top-section">
+                <div className="page-title">{i18n('overview')}</div>
+                <div className="license-model-overview-top">
+                    <VendorDataView isReadOnlyMode={isReadOnlyMode} />
+                    <SummaryCountList isReadOnlyMode={isReadOnlyMode} />
+                </div>
+            </div>
+        );
+    }
 }
 
 export default SummaryView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
index 012bd6e158..d91960e6a3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
@@ -13,114 +13,130 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {Collapse} from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
 import LicenseAgreement from './listItems/LicenseAgreement.jsx';
 import EntitlementPool from './listItems/EntitlementPool.jsx';
 import FeatureGroup from './listItems/FeatureGroup.jsx';
 import LicenseKeyGroup from './listItems/LicenseKeyGroup.jsx';
-import {overviewEditorHeaders} from './LicenseModelOverviewConstants.js';
+import { overviewEditorHeaders } from './LicenseModelOverviewConstants.js';
 
 class VLMListView extends Component {
+    static propTypes = {
+        licensingDataList: PropTypes.array,
+        showInUse: PropTypes.bool
+    };
 
-	static propTypes = {
-		licensingDataList: PropTypes.array,
-		showInUse: PropTypes.bool
-	};
+    state = {};
 
-	state = {
+    render() {
+        let { licensingDataList = [] } = this.props;
+        return (
+            <div className="vlm-list-view">
+                <div>
+                    <ul className="vlm-list" data-test-id="vlm-list">
+                        {licensingDataList.map(item =>
+                            this.renderLicensingItem(item)
+                        )}
+                    </ul>
+                </div>
+            </div>
+        );
+    }
 
-	};
+    renderLicensingItem(item) {
+        switch (item.itemType) {
+            case overviewEditorHeaders.LICENSE_AGREEMENT:
+                return this.renderLicenseAgreementItem(item);
+            case overviewEditorHeaders.FEATURE_GROUP:
+                return this.renderFeatureGroupItem(item);
+            case overviewEditorHeaders.LICENSE_KEY_GROUP:
+                return this.renderLicenseKeyGroupItem(item);
+            case overviewEditorHeaders.ENTITLEMENT_POOL:
+                return this.renderEntitlementPoolItem(item);
+            default:
+                return;
+        }
+    }
 
-	render() {
-		let {licensingDataList = []} = this.props;
-		return (
-			<div className='vlm-list-view'>
-				<div>
-					<ul className='vlm-list' data-test-id='vlm-list'>
-						{licensingDataList.map(item => this.renderLicensingItem(item))}
-					</ul>
-				</div>
-			</div>
-		);
-	}
+    renderLicenseAgreementItem(licenseAgreement) {
+        return (
+            <li key={licenseAgreement.id}>
+                <LicenseAgreement
+                    laData={licenseAgreement}
+                    isCollapsed={this.state[licenseAgreement.id]}
+                    onClick={event =>
+                        this.updateCollapsable(event, licenseAgreement.id)
+                    }
+                    isOrphan={!this.props.showInUse}
+                />
+                <Collapse in={this.state[licenseAgreement.id]}>
+                    <ul>
+                        {licenseAgreement.children &&
+                            licenseAgreement.children.map(item =>
+                                this.renderLicensingItem(item)
+                            )}
+                    </ul>
+                </Collapse>
+            </li>
+        );
+    }
 
-	renderLicensingItem(item) {
-		switch (item.itemType) {
-			case overviewEditorHeaders.LICENSE_AGREEMENT :
-				return this.renderLicenseAgreementItem(item);
-			case overviewEditorHeaders.FEATURE_GROUP :
-				return this.renderFeatureGroupItem(item);
-			case overviewEditorHeaders.LICENSE_KEY_GROUP :
-				return this.renderLicenseKeyGroupItem(item);
-			case overviewEditorHeaders.ENTITLEMENT_POOL:
-				return this.renderEntitlementPoolItem(item);
-			default:
-				return;
-		}
-	}
+    renderFeatureGroupItem(featureGroup) {
+        const { showInUse } = this.props;
+        return (
+            <li key={featureGroup.id}>
+                <FeatureGroup
+                    fgData={featureGroup}
+                    isCollapsed={this.state[featureGroup.id]}
+                    onClick={event =>
+                        this.updateCollapsable(event, featureGroup.id)
+                    }
+                    isOrphan={!this.props.showInUse}
+                />
+                {showInUse && (
+                    <Collapse in={this.state[featureGroup.id]}>
+                        <ul>
+                            {featureGroup.children &&
+                                featureGroup.children.map(item =>
+                                    this.renderLicensingItem(item)
+                                )}
+                        </ul>
+                    </Collapse>
+                )}
+            </li>
+        );
+    }
 
-	renderLicenseAgreementItem(licenseAgreement) {
-		return (
-			<li  key={licenseAgreement.id}>
-				<LicenseAgreement
-					laData={licenseAgreement}
-					isCollapsed={this.state[licenseAgreement.id]}
-					onClick={event => this.updateCollapsable(event, licenseAgreement.id) }
-					isOrphan={!this.props.showInUse}/>
-				<Collapse in={this.state[licenseAgreement.id]}>
-					<ul>
-						{licenseAgreement.children && licenseAgreement.children.map(item => this.renderLicensingItem(item))}
-					</ul>
-				</Collapse>
-			</li>
-		);
-	}
+    renderEntitlementPoolItem(entitlementPool) {
+        return (
+            <li key={entitlementPool.id}>
+                <EntitlementPool
+                    epData={entitlementPool}
+                    isOrphan={!this.props.showInUse}
+                />
+            </li>
+        );
+    }
 
-	renderFeatureGroupItem(featureGroup) {
-		const {showInUse} = this.props;
-		return (
-			<li key={featureGroup.id}>
-				<FeatureGroup
-					fgData={featureGroup}
-					isCollapsed={this.state[featureGroup.id]}
-					onClick={event=> this.updateCollapsable(event, featureGroup.id) }
-					isOrphan={!this.props.showInUse}/>
-				{
-					showInUse && <Collapse in={this.state[featureGroup.id]}>
-					<ul>
-						{featureGroup.children && featureGroup.children.map(item => this.renderLicensingItem(item))}
+    renderLicenseKeyGroupItem(licenseKeyGroup) {
+        return (
+            <li key={licenseKeyGroup.id}>
+                <LicenseKeyGroup
+                    lkgData={licenseKeyGroup}
+                    isOrphan={!this.props.showInUse}
+                />
+            </li>
+        );
+    }
 
-					</ul>
-				</Collapse>
-				}
-			</li>
-		);
-	}
-
-	renderEntitlementPoolItem(entitlementPool) {
-		return (
-			<li key={entitlementPool.id}>
-				<EntitlementPool epData={entitlementPool} isOrphan={!this.props.showInUse}/>
-			</li>
-		);
-	}
-
-	renderLicenseKeyGroupItem(licenseKeyGroup) {
-		return (
-			<li key={licenseKeyGroup.id}>
-				<LicenseKeyGroup lkgData={licenseKeyGroup} isOrphan={!this.props.showInUse}/>
-			</li>
-		);
-	}
-
-	updateCollapsable(event, id) {
-		event.stopPropagation();
-		let obj = {};
-		obj[id] = !this.state[id];
-		this.setState(obj);
-	}
+    updateCollapsable(event, id) {
+        event.stopPropagation();
+        let obj = {};
+        obj[id] = !this.state[id];
+        this.setState(obj);
+    }
 }
 
 export default VLMListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
index af9bc22b07..0e9fca7b4a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
@@ -13,27 +13,27 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './LicenseModelOverviewConstants.js';
+import { actionTypes } from './LicenseModelOverviewConstants.js';
 
 export default {
-	selectVLMListView(dispatch, {buttonTab}) {
-		dispatch({
-			type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED,
-			buttonTab
-		});
-	},
+    selectVLMListView(dispatch, { buttonTab }) {
+        dispatch({
+            type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED,
+            buttonTab
+        });
+    },
 
-	editDescriptionOpen(dispatch, {description}) {
-		dispatch({
-			type: actionTypes.LM_DATA_CHANGED,
-			description
-		});
-	},
+    editDescriptionOpen(dispatch, { description }) {
+        dispatch({
+            type: actionTypes.LM_DATA_CHANGED,
+            description
+        });
+    },
 
-	editDescriptionClose(dispatch) {
-		dispatch({
-			type: actionTypes.LM_DATA_CHANGED,
-			description: undefined
-		});
-	}
+    editDescriptionClose(dispatch) {
+        dispatch({
+            type: actionTypes.LM_DATA_CHANGED,
+            description: undefined
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
index 34d2ee6db5..60eba401c7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
@@ -13,33 +13,46 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {extractUnits} from '../../entitlementPools/EntitlementPoolsConstants.js';
+import { extractUnits } from '../../entitlementPools/EntitlementPoolsConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class EntitlementPool extends Component {
-	render() {
-		let {epData: {name, description, thresholdValue, thresholdUnits}, isOrphan} = this.props;
-		return (
-			<div className={`vlm-list-item vlm-list-item-ep ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-ep'>
-				{!isOrphan && <ArrowCol/>}
-				<IconCol className='ep-icon' text='EP'/>
-				<ItemInfo name={name} description={description}/>
-				<AdditionalDataCol>
-					{thresholdValue && <AdditionalDataElement
-						className='vlm-list-item-entitlement-metric'
-						name={i18n('Entitlement')}
-						value={`${thresholdValue} ${extractUnits(thresholdUnits)}`}/>
-					}
-				</AdditionalDataCol>
-			</div>
-		);
-	}
-
+    render() {
+        let {
+            epData: { name, description, thresholdValue, thresholdUnits },
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                className={`vlm-list-item vlm-list-item-ep ${
+                    isOrphan ? 'orphan-list-item' : ''
+                }`}
+                data-test-id="vlm-list-item-ep">
+                {!isOrphan && <ArrowCol />}
+                <IconCol className="ep-icon" text="EP" />
+                <ItemInfo name={name} description={description} />
+                <AdditionalDataCol>
+                    {thresholdValue && (
+                        <AdditionalDataElement
+                            className="vlm-list-item-entitlement-metric"
+                            name={i18n('Entitlement')}
+                            value={`${thresholdValue} ${extractUnits(
+                                thresholdUnits
+                            )}`}
+                        />
+                    )}
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 }
 
 export default EntitlementPool;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
index 6d97dea358..df1d813408 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
@@ -13,49 +13,83 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
-import {overviewEditorHeaders} from '../LicenseModelOverviewConstants.js';
+import React, { Component } from 'react';
+import { overviewEditorHeaders } from '../LicenseModelOverviewConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class FeatureGroup extends Component {
-	render() {
-		let {fgData: {name, manufacturerReferenceNumber, description, children = []}, isCollapsed, onClick, isOrphan} = this.props;
-		return (
-			<div 
-				onClick={e => onClick(e)} 
-				className={`vlm-list-item vlm-list-item-fg ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''}`} data-test-id='vlm-list-item-fg'>
-				{!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />}
-				<IconCol className='fg-icon' text='FG'/>
-				<ItemInfo name={name} description={description}>
-					<div className='children-count'>
-						<span className='count-value'>
-							{i18n('Entitlement Pools: ')}
-							<span data-test-id='vlm-list-ep-count-value'>
-								{`${children.filter(child => child.itemType === overviewEditorHeaders.ENTITLEMENT_POOL).length}`}
-							</span>
-						</span>
-						<span className='fg-pipeline-separator'>|</span>
-						<span className='count-value'>
-								{i18n('License Key Groups: ')}
-								<span data-test-id='vlm-list-lkg-count-value'>
-									{`${children.filter(child => child.itemType === overviewEditorHeaders.LICENSE_KEY_GROUP).length}`}
-								</span>
-						</span>
-					</div>
-				</ItemInfo>
-				<AdditionalDataCol>
-					<AdditionalDataElement
-						name={i18n('Manufacturer Reference Number')}
-						value={manufacturerReferenceNumber}
-						className='vlm-list-item-sku'/>
-				</AdditionalDataCol>
-			</div>
-		);
-	}
+    render() {
+        let {
+            fgData: {
+                name,
+                manufacturerReferenceNumber,
+                description,
+                children = []
+            },
+            isCollapsed,
+            onClick,
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                onClick={e => onClick(e)}
+                className={`vlm-list-item vlm-list-item-fg ${
+                    isOrphan ? 'orphan-list-item' : ''
+                } ${children.length && !isOrphan ? 'clickable' : ''}`}
+                data-test-id="vlm-list-item-fg">
+                {!isOrphan && (
+                    <ArrowCol
+                        isCollapsed={isCollapsed}
+                        length={children.length}
+                    />
+                )}
+                <IconCol className="fg-icon" text="FG" />
+                <ItemInfo name={name} description={description}>
+                    <div className="children-count">
+                        <span className="count-value">
+                            {i18n('Entitlement Pools: ')}
+                            <span data-test-id="vlm-list-ep-count-value">
+                                {`${
+                                    children.filter(
+                                        child =>
+                                            child.itemType ===
+                                            overviewEditorHeaders.ENTITLEMENT_POOL
+                                    ).length
+                                }`}
+                            </span>
+                        </span>
+                        <span className="fg-pipeline-separator">|</span>
+                        <span className="count-value">
+                            {i18n('License Key Groups: ')}
+                            <span data-test-id="vlm-list-lkg-count-value">
+                                {`${
+                                    children.filter(
+                                        child =>
+                                            child.itemType ===
+                                            overviewEditorHeaders.LICENSE_KEY_GROUP
+                                    ).length
+                                }`}
+                            </span>
+                        </span>
+                    </div>
+                </ItemInfo>
+                <AdditionalDataCol>
+                    <AdditionalDataElement
+                        name={i18n('Manufacturer Reference Number')}
+                        value={manufacturerReferenceNumber}
+                        className="vlm-list-item-sku"
+                    />
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 }
 
 export default FeatureGroup;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
index dfbbe20d69..b409776c27 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
@@ -13,44 +13,73 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-import {optionsInputValues} from '../../licenseAgreement/LicenseAgreementConstants.js';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { optionsInputValues } from '../../licenseAgreement/LicenseAgreementConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class LicenseAgreement extends Component {
-	render() {
-		let {laData: {name, description, licenseTerm, children = []}, isCollapsed, onClick, isOrphan} = this.props;
-		return (
-			<div 
-				onClick={e => onClick(e)} 
-				className={`vlm-list-item vlm-list-item-la ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''} `} 
-				data-test-id='vlm-list-la-item'>
-				{!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />}
-				<IconCol className='la-icon' text='LA'/>
-				<ItemInfo name={name} description={description}>
-					<div className='children-count'>
-						<span className='count-value'>{i18n('Feature Groups: ')}<span data-test-id='vlm-list-fg-count-value'>{`${children.length}`}</span></span>
-					</div>
-				</ItemInfo>
-				<AdditionalDataCol>
-					<AdditionalDataElement
-						name={i18n('License Model Type')}
-						value={this.extractValue(licenseTerm)}/>
-				</AdditionalDataCol>
-			</div>
-		);
-	}
+    render() {
+        let {
+            laData: { name, description, licenseTerm, children = [] },
+            isCollapsed,
+            onClick,
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                onClick={e => onClick(e)}
+                className={`vlm-list-item vlm-list-item-la ${
+                    isOrphan ? 'orphan-list-item' : ''
+                } ${children.length && !isOrphan ? 'clickable' : ''} `}
+                data-test-id="vlm-list-la-item">
+                {!isOrphan && (
+                    <ArrowCol
+                        isCollapsed={isCollapsed}
+                        length={children.length}
+                    />
+                )}
+                <IconCol className="la-icon" text="LA" />
+                <ItemInfo name={name} description={description}>
+                    <div className="children-count">
+                        <span className="count-value">
+                            {i18n('Feature Groups: ')}
+                            <span data-test-id="vlm-list-fg-count-value">{`${
+                                children.length
+                            }`}</span>
+                        </span>
+                    </div>
+                </ItemInfo>
+                <AdditionalDataCol>
+                    <AdditionalDataElement
+                        name={i18n('License Model Type')}
+                        value={this.extractValue(licenseTerm)}
+                    />
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 
-	extractValue(item) {
-		if (item === undefined) {return '';} //TODO fix it later
+    extractValue(item) {
+        if (item === undefined) {
+            return '';
+        } //TODO fix it later
 
-		return  item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
-	}
+        return item
+            ? item.choice === optionInputOther.OTHER
+              ? item.other
+              : InputOptions.getTitleByName(optionsInputValues, item.choice)
+            : '';
+    }
 }
 
 export default LicenseAgreement;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
index b1036aae23..555acf8dbe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
@@ -13,36 +13,53 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {extractValue, getOperationalScopes} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js';
+import {
+    extractValue,
+    getOperationalScopes
+} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js';
 import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+    AdditionalDataCol,
+    AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
 
 class LicenseKeyGroup extends Component {
-	render() {
-		let {lkgData: {name, description, operationalScope, type}, isOrphan} = this.props;
-		return (
-			<div className={`vlm-list-item vlm-list-item-lkg ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-lkg'>
-				{!isOrphan && <ArrowCol/>}
-				<IconCol className='lkg-icon' text='LKG'/>
-				<ItemInfo name={name} description={description}/>
-				<AdditionalDataCol>
-					{operationalScope && operationalScope.choices && <AdditionalDataElement
-						className='vlm-list-item-operational-scope'
-						name={i18n('Operational Scope')}
-						value={getOperationalScopes(operationalScope)}/>}
-					<AdditionalDataElement
-						className='vlm-list-item-group-type'
-						name={i18n('Type')}
-						value={extractValue(type)}/>
-				</AdditionalDataCol>
-			</div>
-		);
-	}
-
+    render() {
+        let {
+            lkgData: { name, description, operationalScope, type },
+            isOrphan
+        } = this.props;
+        return (
+            <div
+                className={`vlm-list-item vlm-list-item-lkg ${
+                    isOrphan ? 'orphan-list-item' : ''
+                }`}
+                data-test-id="vlm-list-item-lkg">
+                {!isOrphan && <ArrowCol />}
+                <IconCol className="lkg-icon" text="LKG" />
+                <ItemInfo name={name} description={description} />
+                <AdditionalDataCol>
+                    {operationalScope &&
+                        operationalScope.choices && (
+                            <AdditionalDataElement
+                                className="vlm-list-item-operational-scope"
+                                name={i18n('Operational Scope')}
+                                value={getOperationalScopes(operationalScope)}
+                            />
+                        )}
+                    <AdditionalDataElement
+                        className="vlm-list-item-group-type"
+                        name={i18n('Type')}
+                        value={extractValue(type)}
+                    />
+                </AdditionalDataCol>
+            </div>
+        );
+    }
 }
 
 export default LicenseKeyGroup;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
index ffc0991354..0f9c783eac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
@@ -16,37 +16,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function AdditionalDataCol({children}) {
-	return (
-		<div className='list-item-section list-item-additional-data-col'>
-			<div className='additional-data-col-border'></div>
-			<div className='additional-data'>
-				{children}
-			</div>
-		</div>
-	);
+function AdditionalDataCol({ children }) {
+    return (
+        <div className="list-item-section list-item-additional-data-col">
+            <div className="additional-data-col-border" />
+            <div className="additional-data">{children}</div>
+        </div>
+    );
 }
 
 AdditionalDataCol.propTypes = {
-	children: PropTypes.oneOfType([
-		PropTypes.arrayOf(PropTypes.node),
-		PropTypes.node
-	])
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
 };
 
-function AdditionalDataElement({className, name, value}) {
-	return (
-		<div className={className}>
-			<span className='additional-data-name'>{name}: </span>
-			<span className='additional-data-value'>{value}</span>
-		</div>
-	);
+function AdditionalDataElement({ className, name, value }) {
+    return (
+        <div className={className}>
+            <span className="additional-data-name">{name}: </span>
+            <span className="additional-data-value">{value}</span>
+        </div>
+    );
 }
 
 AdditionalDataElement.propTypes = {
-	name: PropTypes.string,
-	value: PropTypes.string,
-	className: PropTypes.string
+    name: PropTypes.string,
+    value: PropTypes.string,
+    className: PropTypes.string
 };
 
-export {AdditionalDataCol, AdditionalDataElement};
+export { AdditionalDataCol, AdditionalDataElement };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
index 29aec64bdd..de12eae7d5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
@@ -17,20 +17,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-function ArrowCol ({isCollapsed, length}) {
-	return (
-		<div className='list-item-section list-item-arrow-col'>
-			<div className={classNames('arrow-icon', {'chevron': length > 0},
-				{'down': (length > 0 && isCollapsed)},
-				{'right': (length > 0 && (!isCollapsed))})} >
-			</div>
-		</div>
-	);
+function ArrowCol({ isCollapsed, length }) {
+    return (
+        <div className="list-item-section list-item-arrow-col">
+            <div
+                className={classNames(
+                    'arrow-icon',
+                    { chevron: length > 0 },
+                    { down: length > 0 && isCollapsed },
+                    { right: length > 0 && !isCollapsed }
+                )}
+            />
+        </div>
+    );
 }
 
 ArrowCol.propTypes = {
-	isCollapsed: PropTypes.bool,
-	length: PropTypes.number
+    isCollapsed: PropTypes.bool,
+    length: PropTypes.number
 };
 
 export default ArrowCol;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
index 826248e510..61eeb03496 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
@@ -15,12 +15,14 @@
  */
 import React from 'react';
 
-function IconCol({className, text}) {
-	return (
-		<div className='list-item-section list-item-icon-col'>
-			<div className={`overview-list-icon ${className ? className : ''}`}>{text}</div>
-		</div>
-	);
+function IconCol({ className, text }) {
+    return (
+        <div className="list-item-section list-item-icon-col">
+            <div className={`overview-list-icon ${className ? className : ''}`}>
+                {text}
+            </div>
+        </div>
+    );
 }
 
 export default IconCol;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
index 95ae123974..2d2cc8f754 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
@@ -16,25 +16,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function ItemInfo({name, description, children}) {
-	return (
-		<div className='list-item-section vlm-item-info'>
-			<div className='vlm-list-item-title'>
-				<div className='item-name' data-test-id='vlm-list-item-name'>{name}</div>
-				{children}
-			</div>
-			<div className='vlm-list-item-description'>{description}</div>
-		</div>
-	);
+function ItemInfo({ name, description, children }) {
+    return (
+        <div className="list-item-section vlm-item-info">
+            <div className="vlm-list-item-title">
+                <div className="item-name" data-test-id="vlm-list-item-name">
+                    {name}
+                </div>
+                {children}
+            </div>
+            <div className="vlm-list-item-description">{description}</div>
+        </div>
+    );
 }
 
 ItemInfo.propTypes = {
-	name: PropTypes.string,
-	description: PropTypes.string,
-	children: PropTypes.oneOfType([
-		PropTypes.arrayOf(PropTypes.node),
-		PropTypes.node
-	])
+    name: PropTypes.string,
+    description: PropTypes.string,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
 };
 
 export default ItemInfo;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
index af759f1206..04a00177d3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
@@ -18,42 +18,54 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class LicenseModelDescriptionEdit extends React.Component {
-	render() {
-		//TODO check if buttons
-		let {onDataChanged, description, genericFieldInfo} = this.props;
-		let {isValid, errorText} = genericFieldInfo.description;
-		let saveButtonClassName = isValid ? 'description-save' : 'description-save disabled';
-		return(
-			<div className='vendor-description-edit'>
+    render() {
+        //TODO check if buttons
+        let { onDataChanged, description, genericFieldInfo } = this.props;
+        let { isValid, errorText } = genericFieldInfo.description;
+        let saveButtonClassName = isValid
+            ? 'description-save'
+            : 'description-save disabled';
+        return (
+            <div className="vendor-description-edit">
+                <Input
+                    onChange={description => onDataChanged({ description })}
+                    value={description}
+                    isValid={isValid}
+                    errorText={errorText}
+                    className="description-edit-textarea"
+                    type="textarea"
+                />
+                <div className="buttons-row">
+                    <div className="buttons-wrapper">
+                        <div
+                            onClick={() => this.submit()}
+                            className={saveButtonClassName}
+                            data-test-id="vlm-summary-vendor-desc-save-btn">
+                            {i18n('Save')}
+                        </div>
+                        <div
+                            onClick={() => this.onClose()}
+                            className="description-button"
+                            data-test-id="vlm-summary-vendor-desc-cancel-btn">
+                            {i18n('Cancel')}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
-				<Input
-					onChange={description => onDataChanged({description})}
-					value={description}
-					isValid={isValid}
-					errorText={errorText}
-					className='description-edit-textarea'
-					type='textarea'/>
-				<div className='buttons-row'>
-					<div className='buttons-wrapper'>
-						<div onClick={() => this.submit()}  className={saveButtonClassName} data-test-id='vlm-summary-vendor-desc-save-btn'>{i18n('Save')}</div>
-						<div onClick={() => this.onClose()} className='description-button' data-test-id='vlm-summary-vendor-desc-cancel-btn'>{i18n('Cancel')}</div>
-					</div>
-				</div>
-			</div>
-		);
-	}
+    onClose() {
+        this.props.onClose();
+    }
 
-	onClose() {
-		this.props.onClose();
-	}
-
-	submit() {
-		let {onSubmit, data, description} = this.props;
-		onSubmit({
-			...data,
-			description: description.trim()
-		});
-	}
+    submit() {
+        let { onSubmit, data, description } = this.props;
+        onSubmit({
+            ...data,
+            description: description.trim()
+        });
+    }
 }
 
 export default LicenseModelDescriptionEdit;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
index 3fcac3c1d8..d422d5d4b2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
@@ -15,37 +15,39 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {selectedButton} from '../LicenseModelOverviewConstants.js';
+import { selectedButton } from '../LicenseModelOverviewConstants.js';
 import Tabs from 'sdc-ui/lib/react/Tabs.js';
 import Tab from 'sdc-ui/lib/react/Tab.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-function ListButtons ({onTabSelect, selectedTab, hasOrphans, hasLicensing}) {
-	// no data, no tabs
-	if (!hasLicensing && !hasOrphans) {
-		return null;
-	}
-	return (
-		<Tabs 
-			onTabClick={(tabId) => onTabSelect(tabId)}
-			activeTab={selectedTab}
-			className='overview-buttons-section'
-			type='header' >
-			<Tab
-				tabId={selectedButton.VLM_LIST_VIEW}
-				title={i18n('Connections List')}
-				data-test-id='vlm-overview-vlmlist-tab' />
-			<Tab
-				tabId={selectedButton.NOT_IN_USE}
-				title={i18n('Orphans List')}
-				data-test-id='vlm-overview-orphans-tab' />
-		</Tabs>
-	);
+function ListButtons({ onTabSelect, selectedTab, hasOrphans, hasLicensing }) {
+    // no data, no tabs
+    if (!hasLicensing && !hasOrphans) {
+        return null;
+    }
+    return (
+        <Tabs
+            onTabClick={tabId => onTabSelect(tabId)}
+            activeTab={selectedTab}
+            className="overview-buttons-section"
+            type="header">
+            <Tab
+                tabId={selectedButton.VLM_LIST_VIEW}
+                title={i18n('Connections List')}
+                data-test-id="vlm-overview-vlmlist-tab"
+            />
+            <Tab
+                tabId={selectedButton.NOT_IN_USE}
+                title={i18n('Orphans List')}
+                data-test-id="vlm-overview-orphans-tab"
+            />
+        </Tabs>
+    );
 }
 
 ListButtons.propTypes = {
-	onTabSelect: PropTypes.func,
-	selectedInUse: PropTypes.bool
+    onTabSelect: PropTypes.func,
+    selectedInUse: PropTypes.bool
 };
 
 export default ListButtons;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
index 50c547e042..144d9bcc1b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
@@ -16,19 +16,43 @@
 import React from 'react';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-function  SummaryCountItem ({name, counter, onAdd, onNavigate, isReadOnlyMode}) {
-	//TODO check for buttons
-	return(
-		<div className='summary-count-item'>
-			<div className='summary-name-and-count' onClick={onNavigate}>
-				<span className='item-name' onClick={onNavigate}>{name}</span>
-				<span className='item-count' onClick={onNavigate} data-test-id={'vlm-summary-vendor-counter-' + name.toLowerCase().replace(/\s/g,'-')}>({counter})</span>
-			</div>
-			<SVGIcon name='plusCircle' disabled={isReadOnlyMode} className={isReadOnlyMode ? 'disabled' : ''}
-				color='secondary' onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/>
-		</div>
-	);
+function SummaryCountItem({
+    name,
+    counter,
+    onAdd,
+    onNavigate,
+    isReadOnlyMode
+}) {
+    //TODO check for buttons
+    return (
+        <div className="summary-count-item">
+            <div className="summary-name-and-count" onClick={onNavigate}>
+                <span className="item-name" onClick={onNavigate}>
+                    {name}
+                </span>
+                <span
+                    className="item-count"
+                    onClick={onNavigate}
+                    data-test-id={
+                        'vlm-summary-vendor-counter-' +
+                        name.toLowerCase().replace(/\s/g, '-')
+                    }>
+                    ({counter})
+                </span>
+            </div>
+            <SVGIcon
+                name="plusCircle"
+                disabled={isReadOnlyMode}
+                className={isReadOnlyMode ? 'disabled' : ''}
+                color="secondary"
+                onClick={onAdd}
+                data-test-id={
+                    'vlm-summary-vendor-add-btn-' +
+                    name.toLowerCase().replace(/\s/g, '-')
+                }
+            />
+        </div>
+    );
 }
 
 export default SummaryCountItem;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
index 15b6649543..711bb7a374 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
@@ -14,123 +14,158 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 import EntitlementPoolsActionHelper from '../../entitlementPools/EntitlementPoolsActionHelper.js';
 import LicenseAgreementActionHelper from '../../licenseAgreement/LicenseAgreementActionHelper.js';
 import LicenseKeyGroupsActionHelper from '../../licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
 import FeatureGroupsActionHelper from '../../featureGroups/FeatureGroupsActionHelper.js';
 
-import {overviewItems} from '../LicenseModelOverviewConstants.js';
+import { overviewItems } from '../LicenseModelOverviewConstants.js';
 import SummaryCountItem from './SummaryCountItem.jsx';
 
 export const mapStateToProps = ({
-	licenseModel: {
-		licenseModelEditor,
-		licenseAgreement: {licenseAgreementList},
-		featureGroup: {featureGroupsList},
-		entitlementPool: {entitlementPoolsList},
-		licenseKeyGroup: {licenseKeyGroupsList}
-	}
+    licenseModel: {
+        licenseModelEditor,
+        licenseAgreement: { licenseAgreementList },
+        featureGroup: { featureGroupsList },
+        entitlementPool: { entitlementPoolsList },
+        licenseKeyGroup: { licenseKeyGroupsList }
+    }
 }) => {
+    let { vendorName, description, id, version } = licenseModelEditor.data;
+    let counts = [
+        {
+            name: overviewItems.LICENSE_AGREEMENTS,
+            count: licenseAgreementList.length
+        },
+        { name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length },
+        {
+            name: overviewItems.ENTITLEMENT_POOLS,
+            count: entitlementPoolsList.length
+        },
+        {
+            name: overviewItems.LICENSE_KEY_GROUPS,
+            count: licenseKeyGroupsList.length
+        }
+    ];
 
-	let {vendorName, description, id, version} = licenseModelEditor.data;
-	let counts = [
-		{name: overviewItems.LICENSE_AGREEMENTS, count: licenseAgreementList.length},
-		{name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length},
-		{name: overviewItems.ENTITLEMENT_POOLS, count: entitlementPoolsList.length},
-		{name: overviewItems.LICENSE_KEY_GROUPS, count: licenseKeyGroupsList.length},
-	];
-
-	return {
-		vendorName,
-		licenseModelId: id,
-		description,
-		counts,
-		version
-	};
-
+    return {
+        vendorName,
+        licenseModelId: id,
+        description,
+        counts,
+        version
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onEditorOpenClick: (name, licenseModelId, version) => {
-			switch (name) {
-				case overviewItems.ENTITLEMENT_POOLS:
-					EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch);
-					break;
-				case overviewItems.FEATURE_GROUPS:
-					FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version});
-					break;
-				case overviewItems.LICENSE_AGREEMENTS:
-					LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version});
-					break;
-				case overviewItems.LICENSE_KEY_GROUPS:
-					LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch);
-					break;
-				default:
-					break;
-			}
-		},
-		onNavigateClick: ({name, licenseModelId, version}) => {
-			let screenToNavigate;
-			switch (name) {
-				case overviewItems.ENTITLEMENT_POOLS:
-					screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS;
-					break;
-				case overviewItems.FEATURE_GROUPS:
-					screenToNavigate = enums.SCREEN.FEATURE_GROUPS;
-					break;
-				case overviewItems.LICENSE_AGREEMENTS:
-					screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS;
-					break;
-				case overviewItems.LICENSE_KEY_GROUPS:
-					screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS;
-					break;
-				default:
-					break;
-			}
-			ScreensHelper.loadScreen(dispatch, {
-				screen: screenToNavigate, screenType: screenTypes.LICENSE_MODEL,
-				props: {licenseModelId, version}
-			});
-		}
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onEditorOpenClick: (name, licenseModelId, version) => {
+            switch (name) {
+                case overviewItems.ENTITLEMENT_POOLS:
+                    EntitlementPoolsActionHelper.openEntitlementPoolsEditor(
+                        dispatch
+                    );
+                    break;
+                case overviewItems.FEATURE_GROUPS:
+                    FeatureGroupsActionHelper.openFeatureGroupsEditor(
+                        dispatch,
+                        {
+                            licenseModelId,
+                            version
+                        }
+                    );
+                    break;
+                case overviewItems.LICENSE_AGREEMENTS:
+                    LicenseAgreementActionHelper.openLicenseAgreementEditor(
+                        dispatch,
+                        {
+                            licenseModelId,
+                            version
+                        }
+                    );
+                    break;
+                case overviewItems.LICENSE_KEY_GROUPS:
+                    LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(
+                        dispatch
+                    );
+                    break;
+                default:
+                    break;
+            }
+        },
+        onNavigateClick: ({ name, licenseModelId, version }) => {
+            let screenToNavigate;
+            switch (name) {
+                case overviewItems.ENTITLEMENT_POOLS:
+                    screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS;
+                    break;
+                case overviewItems.FEATURE_GROUPS:
+                    screenToNavigate = enums.SCREEN.FEATURE_GROUPS;
+                    break;
+                case overviewItems.LICENSE_AGREEMENTS:
+                    screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS;
+                    break;
+                case overviewItems.LICENSE_KEY_GROUPS:
+                    screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS;
+                    break;
+                default:
+                    break;
+            }
+            ScreensHelper.loadScreen(dispatch, {
+                screen: screenToNavigate,
+                screenType: screenTypes.LICENSE_MODEL,
+                props: { licenseModelId, version }
+            });
+        }
+    };
 };
 
 export class SummaryCountList extends React.Component {
+    render() {
+        let { counts } = this.props;
+        return (
+            <div className="summary-count-list">
+                {counts.map(item => this.renderItem(item))}
+            </div>
+        );
+    }
 
-	render() {
-		let {counts} = this.props;
-		return(
-			<div className='summary-count-list'>
-				{counts.map(item => this.renderItem(item))}
-			</div>
-		);
-	}
-
-	renderItem(item){
-		const {name, count} = item;
-		const {isReadOnlyMode} = this.props;
-		return(
-			<SummaryCountItem isReadOnlyMode={isReadOnlyMode} name={name} counter={count} onNavigate={() => this.onNavigate(name)} onAdd={() => this.onAdd(name)} key={name} />
-		);
-	}
+    renderItem(item) {
+        const { name, count } = item;
+        const { isReadOnlyMode } = this.props;
+        return (
+            <SummaryCountItem
+                isReadOnlyMode={isReadOnlyMode}
+                name={name}
+                counter={count}
+                onNavigate={() => this.onNavigate(name)}
+                onAdd={() => this.onAdd(name)}
+                key={name}
+            />
+        );
+    }
 
-	onAdd(name) {
-		let {onEditorOpenClick, licenseModelId, isReadOnlyMode, version} = this.props;
-		if (!isReadOnlyMode) {
-			onEditorOpenClick(name, licenseModelId, version);
-		}
-	}
+    onAdd(name) {
+        let {
+            onEditorOpenClick,
+            licenseModelId,
+            isReadOnlyMode,
+            version
+        } = this.props;
+        if (!isReadOnlyMode) {
+            onEditorOpenClick(name, licenseModelId, version);
+        }
+    }
 
-	onNavigate(name) {
-		let {onNavigateClick, licenseModelId, version} = this.props;
-		onNavigateClick({licenseModelId, name, version});
-	}
+    onNavigate(name) {
+        let { onNavigateClick, licenseModelId, version } = this.props;
+        onNavigateClick({ licenseModelId, name, version });
+    }
 }
 
 export default connect(mapStateToProps, mapActionsToProps)(SummaryCountList);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
index 616355de41..62fc2c3cb3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
@@ -13,8 +13,8 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
@@ -23,89 +23,139 @@ import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
 import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
 import LicenseModelDescriptionEdit from './LicenseModelDescriptionEdit.jsx';
-import {VLM_DESCRIPTION_FORM} from '../LicenseModelOverviewConstants.js';
+import { VLM_DESCRIPTION_FORM } from '../LicenseModelOverviewConstants.js';
 
 export const mapStateToProps = ({
-	licenseModel: {
-		licenseModelEditor: {data},
-		licenseModelOverview: {descriptionEditor: {data: descriptionData = {}, genericFieldInfo}}
-	}
+    licenseModel: {
+        licenseModelEditor: { data },
+        licenseModelOverview: {
+            descriptionEditor: { data: descriptionData = {}, genericFieldInfo }
+        }
+    }
 }) => {
-	let {description} = descriptionData;
-	return {
-		data,
-		description,
-		genericFieldInfo
-	};
+    let { description } = descriptionData;
+    return {
+        data,
+        description,
+        genericFieldInfo
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VLM_DESCRIPTION_FORM}),
-		onCancel: () => licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
-		onSubmit: (licenseModel) => {
-			licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
-			LicenseModelActionHelper.saveLicenseModel(dispatch, {licenseModel});
-		},
-		onVendorDescriptionEdit: description => licenseModelOverviewActionHelper.editDescriptionOpen(dispatch,{description})
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: VLM_DESCRIPTION_FORM
+            }),
+        onCancel: () =>
+            licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
+        onSubmit: licenseModel => {
+            licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
+            LicenseModelActionHelper.saveLicenseModel(dispatch, {
+                licenseModel
+            });
+        },
+        onVendorDescriptionEdit: description =>
+            licenseModelOverviewActionHelper.editDescriptionOpen(dispatch, {
+                description
+            })
+    };
 };
 
 export class VendorDataView extends Component {
-	render() {
-		let {data: {vendorName}, description, isReadOnlyMode} = this.props;
-		return (
-			<div className='vendor-data-view'>
-				<div className='vendor-title'>vendor</div>
-				<div className='vendor-name' data-test-id='vlm-summary-vendor-name'>{vendorName}</div>
-				{
-					description !== undefined && !isReadOnlyMode ? this.renderDescriptionEdit() : this.renderDescription()
-				}
-			</div>
-		);
-	}
+    render() {
+        let { data: { vendorName }, description, isReadOnlyMode } = this.props;
+        return (
+            <div className="vendor-data-view">
+                <div className="vendor-title">vendor</div>
+                <div
+                    className="vendor-name"
+                    data-test-id="vlm-summary-vendor-name">
+                    {vendorName}
+                </div>
+                {description !== undefined && !isReadOnlyMode
+                    ? this.renderDescriptionEdit()
+                    : this.renderDescription()}
+            </div>
+        );
+    }
 
-	componentWillUnmount() {
-		this.props.onCancel();
-	}
+    componentWillUnmount() {
+        this.props.onCancel();
+    }
 
+    renderDescription() {
+        let {
+            data: { description },
+            onVendorDescriptionEdit,
+            isReadOnlyMode
+        } = this.props;
+        return (
+            <div
+                onClick={() => {
+                    if (!isReadOnlyMode) {
+                        onVendorDescriptionEdit(description);
+                    }
+                }}
+                className={
+                    !isReadOnlyMode
+                        ? 'vendor-description'
+                        : 'vendor-description-readonly'
+                }>
+                {this.renderOverlay(
+                    <div
+                        className="description-data"
+                        data-test-id="vlm-summary-vendor-description">
+                        {description}
+                        {!isReadOnlyMode && <SVGIcon name="pencil" />}
+                    </div>
+                )}
+            </div>
+        );
+    }
 
-	renderDescription() {
-		let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props;
-		return (
-			<div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
-				{this.renderOverlay(
-					<div className='description-data' data-test-id='vlm-summary-vendor-description'>
-						{description}
-						{!isReadOnlyMode && <SVGIcon name='pencil'/>}
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	renderDescriptionEdit() {
-		let {onCancel, onDataChanged, onSubmit, description, genericFieldInfo, data} = this.props;
-		return(
-			<LicenseModelDescriptionEdit onClose={onCancel} onDataChanged={onDataChanged} onSubmit={onSubmit} data={data} genericFieldInfo={genericFieldInfo} description={description}/>
-		);
-	}
-
-	renderOverlay(children) {
-		let {data: {description}, isReadOnlyMode} = this.props;
-		if (isReadOnlyMode) {
-			return (
-				<OverlayTrigger
-					placement='bottom'
-					overlay={<Tooltip className='vendor-description-tooltip' id='tooltip-bottom'>{description}</Tooltip>}
-					delayShow={400}>
-					{children}
-				</OverlayTrigger>
-			);
-		}
-		return children;
-	}
+    renderDescriptionEdit() {
+        let {
+            onCancel,
+            onDataChanged,
+            onSubmit,
+            description,
+            genericFieldInfo,
+            data
+        } = this.props;
+        return (
+            <LicenseModelDescriptionEdit
+                onClose={onCancel}
+                onDataChanged={onDataChanged}
+                onSubmit={onSubmit}
+                data={data}
+                genericFieldInfo={genericFieldInfo}
+                description={description}
+            />
+        );
+    }
 
+    renderOverlay(children) {
+        let { data: { description }, isReadOnlyMode } = this.props;
+        if (isReadOnlyMode) {
+            return (
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={
+                        <Tooltip
+                            className="vendor-description-tooltip"
+                            id="tooltip-bottom">
+                            {description}
+                        </Tooltip>
+                    }
+                    delayShow={400}>
+                    {children}
+                </OverlayTrigger>
+            );
+        }
+        return children;
+    }
 }
 
 export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);