Adding Prettier and fixing up eslint version

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

9 files changed, 1250 insertions, 825 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
index 674c329515..ebbe84abd3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
@@ -15,191 +15,268 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as licenseKeyGroupsConstants} from './LicenseKeyGroupsConstants.js';
-import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
-import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js';
+import { actionTypes as licenseKeyGroupsConstants } from './LicenseKeyGroupsConstants.js';
+import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
+import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
 
 function baseUrl(licenseModelId, version) {
-	const restPrefix = Configuration.get('restPrefix');
-	const {id: versionId} = version;
-	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`;
+    const restPrefix = Configuration.get('restPrefix');
+    const { id: versionId } = version;
+    return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`;
 }
 
 function fetchLicenseKeyGroupsList(licenseModelId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+    return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
 }
 
 function deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}`
+    );
 }
 
 function postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
-	return RestAPIUtil.post(baseUrl(licenseModelId, version), {
-		name: licenseKeyGroup.name,
-		description: licenseKeyGroup.description,
-		operationalScope: getValue(licenseKeyGroup.operationalScope),
-		type: licenseKeyGroup.type,
-		increments: licenseKeyGroup.increments,
-		thresholdValue: licenseKeyGroup.thresholdValue,
-		thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
-		startDate: licenseKeyGroup.startDate,
-		expiryDate: licenseKeyGroup.expiryDate
-	});
+    return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+        name: licenseKeyGroup.name,
+        description: licenseKeyGroup.description,
+        operationalScope: getValue(licenseKeyGroup.operationalScope),
+        type: licenseKeyGroup.type,
+        increments: licenseKeyGroup.increments,
+        thresholdValue: licenseKeyGroup.thresholdValue,
+        thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
+        startDate: licenseKeyGroup.startDate,
+        expiryDate: licenseKeyGroup.expiryDate
+    });
 }
 
 function putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`, {
-		name: licenseKeyGroup.name,
-		description: licenseKeyGroup.description,
-		operationalScope: getValue(licenseKeyGroup.operationalScope),
-		type: licenseKeyGroup.type,
-		increments: licenseKeyGroup.increments,
-		thresholdValue: licenseKeyGroup.thresholdValue,
-		thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
-		startDate: licenseKeyGroup.startDate,
-		expiryDate: licenseKeyGroup.expiryDate
-	});
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`,
+        {
+            name: licenseKeyGroup.name,
+            description: licenseKeyGroup.description,
+            operationalScope: getValue(licenseKeyGroup.operationalScope),
+            type: licenseKeyGroup.type,
+            increments: licenseKeyGroup.increments,
+            thresholdValue: licenseKeyGroup.thresholdValue,
+            thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
+            startDate: licenseKeyGroup.startDate,
+            expiryDate: licenseKeyGroup.expiryDate
+        }
+    );
 }
 
 function fetchLimitsList(licenseModelId, licenseKeyGroupId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`
+    );
 }
 
 function deleteLimit(licenseModelId, licenseKeyGroupId, version, limitId) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limitId}`);
+    return RestAPIUtil.destroy(
+        `${baseUrl(
+            licenseModelId,
+            version
+        )}/${licenseKeyGroupId}/limits/${limitId}`
+    );
 }
 
 function postLimit(licenseModelId, licenseKeyGroupId, version, limit) {
-	return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`, {
-		name: limit.name,
-		type: limit.type,
-		description: limit.description,
-		metric: getStrValue(limit.metric),
-		value: limit.value,
-		unit: getStrValue(limit.unit),
-		aggregationFunction: getValue(limit.aggregationFunction),
-		time: getValue(limit.time)
-	});
+    return RestAPIUtil.post(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`,
+        {
+            name: limit.name,
+            type: limit.type,
+            description: limit.description,
+            metric: getStrValue(limit.metric),
+            value: limit.value,
+            unit: getStrValue(limit.unit),
+            aggregationFunction: getValue(limit.aggregationFunction),
+            time: getValue(limit.time)
+        }
+    );
 }
 
 function putLimit(licenseModelId, licenseKeyGroupId, version, limit) {
-
-	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limit.id}`, {
-		name: limit.name,
-		type: limit.type,
-		description: limit.description,
-		metric: getStrValue(limit.metric),
-		value: limit.value,
-		unit: getStrValue(limit.unit),
-		aggregationFunction: getValue(limit.aggregationFunction),
-		time: getValue(limit.time)
-	});
+    return RestAPIUtil.put(
+        `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${
+            limit.id
+        }`,
+        {
+            name: limit.name,
+            type: limit.type,
+            description: limit.description,
+            metric: getStrValue(limit.metric),
+            value: limit.value,
+            unit: getStrValue(limit.unit),
+            aggregationFunction: getValue(limit.aggregationFunction),
+            time: getValue(limit.time)
+        }
+    );
 }
 
 export default {
-	fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}) {
-		return fetchLicenseKeyGroupsList(licenseModelId, version).then(response => dispatch({
-			type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED,
-			response
-		}));
-	},
-
-	openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version} = {}) {
-		if (licenseModelId && version) {
-			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-		}
-		dispatch({
-			type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN,
-			licenseKeyGroup
-		});
-	},
-
-	closeLicenseKeyGroupEditor(dispatch){
-		dispatch({
-			type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE
-		});
-	},
-
-	saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version}) {
-		if (previousLicenseKeyGroup) {
-			return putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(() => {
-				dispatch({
-					type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP,
-					licenseKeyGroup
-				});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-		else {
-			return postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(response => {
-				dispatch({
-					type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP,
-					licenseKeyGroup: {
-						...licenseKeyGroup,
-						referencingFeatureGroups: [],
-						id: response.value
-					}
-				});
-				return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-			});
-		}
-
-
-	},
-
-	deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId, version}){
-		return deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version).then(()=> {
-			dispatch({
-				type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP,
-				licenseKeyGroupId
-			});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
-			licenseKeyGroupToDelete: false
-		});
-	},
-
-	openDeleteLicenseAgreementConfirm(dispatch, {licenseKeyGroup}) {
-		dispatch({
-			type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
-			licenseKeyGroupToDelete: licenseKeyGroup
-		});
-	},
-
-
-	fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}) {
-		return fetchLimitsList(licenseModelId, licenseKeyGroup.id, version).then(response => {
-			dispatch({
-				type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.LIMITS_LIST_LOADED,
-				response
-			});
-		});
-	},
-
-	submitLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
-		const promise = limit.id ? putLimit(licenseModelId,licenseKeyGroup.id, version, limit) :
-			 postLimit(licenseModelId,licenseKeyGroup.id, version, limit);
-		return promise.then(() => {
-			dispatch({
-				type: limitEditorActions.CLOSE
-			});
-			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	},
-
-	deleteLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
-		return deleteLimit(licenseModelId,licenseKeyGroup.id, version, limit.id).then(() => {
-			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-			return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
-		});
-	}
+    fetchLicenseKeyGroupsList(dispatch, { licenseModelId, version }) {
+        return fetchLicenseKeyGroupsList(licenseModelId, version).then(
+            response =>
+                dispatch({
+                    type:
+                        licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    openLicenseKeyGroupsEditor(
+        dispatch,
+        { licenseKeyGroup, licenseModelId, version } = {}
+    ) {
+        if (licenseModelId && version) {
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                licenseKeyGroup
+            });
+        }
+        dispatch({
+            type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN,
+            licenseKeyGroup
+        });
+    },
+
+    closeLicenseKeyGroupEditor(dispatch) {
+        dispatch({
+            type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE
+        });
+    },
+
+    saveLicenseKeyGroup(
+        dispatch,
+        { licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version }
+    ) {
+        if (previousLicenseKeyGroup) {
+            return putLicenseKeyGroup(
+                licenseModelId,
+                licenseKeyGroup,
+                version
+            ).then(() => {
+                dispatch({
+                    type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP,
+                    licenseKeyGroup
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        } else {
+            return postLicenseKeyGroup(
+                licenseModelId,
+                licenseKeyGroup,
+                version
+            ).then(response => {
+                dispatch({
+                    type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP,
+                    licenseKeyGroup: {
+                        ...licenseKeyGroup,
+                        referencingFeatureGroups: [],
+                        id: response.value
+                    }
+                });
+                return ItemsHelper.checkItemStatus(dispatch, {
+                    itemId: licenseModelId,
+                    versionId: version.id
+                });
+            });
+        }
+    },
+
+    deleteLicenseKeyGroup(
+        dispatch,
+        { licenseModelId, licenseKeyGroupId, version }
+    ) {
+        return deleteLicenseKeyGroup(
+            licenseModelId,
+            licenseKeyGroupId,
+            version
+        ).then(() => {
+            dispatch({
+                type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP,
+                licenseKeyGroupId
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    },
+
+    hideDeleteConfirm(dispatch) {
+        dispatch({
+            type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
+            licenseKeyGroupToDelete: false
+        });
+    },
+
+    openDeleteLicenseAgreementConfirm(dispatch, { licenseKeyGroup }) {
+        dispatch({
+            type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
+            licenseKeyGroupToDelete: licenseKeyGroup
+        });
+    },
+
+    fetchLimits(dispatch, { licenseModelId, version, licenseKeyGroup }) {
+        return fetchLimitsList(
+            licenseModelId,
+            licenseKeyGroup.id,
+            version
+        ).then(response => {
+            dispatch({
+                type:
+                    licenseKeyGroupsConstants.licenseKeyGroupsEditor
+                        .LIMITS_LIST_LOADED,
+                response
+            });
+        });
+    },
 
+    submitLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) {
+        const promise = limit.id
+            ? putLimit(licenseModelId, licenseKeyGroup.id, version, limit)
+            : postLimit(licenseModelId, licenseKeyGroup.id, version, limit);
+        return promise.then(() => {
+            dispatch({
+                type: limitEditorActions.CLOSE
+            });
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                licenseKeyGroup
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    },
 
+    deleteLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) {
+        return deleteLimit(
+            licenseModelId,
+            licenseKeyGroup.id,
+            version,
+            limit.id
+        ).then(() => {
+            this.fetchLimits(dispatch, {
+                licenseModelId,
+                version,
+                licenseKeyGroup
+            });
+            return ItemsHelper.checkItemStatus(dispatch, {
+                itemId: licenseModelId,
+                versionId: version.id
+            });
+        });
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
index c376cb3fbc..aad0a0b1fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
@@ -15,73 +15,88 @@
  */
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
-
-	LICENSE_KEY_GROUPS_LIST_LOADED: null,
-	DELETE_LICENSE_KEY_GROUP: null,
-	EDIT_LICENSE_KEY_GROUP: null,
-	ADD_LICENSE_KEY_GROUP: null,
-	LICENSE_KEY_GROUPS_DELETE_CONFIRM: null,
-	licenseKeyGroupsEditor: {
-		OPEN: null,
-		CLOSE: null,
-		DATA_CHANGED: null,
-		LIMITS_LIST_LOADED: null
-	}
+    LICENSE_KEY_GROUPS_LIST_LOADED: null,
+    DELETE_LICENSE_KEY_GROUP: null,
+    EDIT_LICENSE_KEY_GROUP: null,
+    ADD_LICENSE_KEY_GROUP: null,
+    LICENSE_KEY_GROUPS_DELETE_CONFIRM: null,
+    licenseKeyGroupsEditor: {
+        OPEN: null,
+        CLOSE: null,
+        DATA_CHANGED: null,
+        LIMITS_LIST_LOADED: null
+    }
 });
 
 export const defaultState = {
-	licenseKeyGroupsEditor: {
-		type: '',
-		operationalScope: {choices: [], other: ''}
-	}
+    licenseKeyGroupsEditor: {
+        type: '',
+        operationalScope: { choices: [], other: '' }
+    }
 };
 
 export const LKG_FORM_NAME = 'LKGFORM';
 
 export const optionsInputValues = {
-	OPERATIONAL_SCOPE: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Network_Wide', title: 'Network Wide'},
-		{enum: 'Availability_Zone', title: 'Availability Zone'},
-		{enum: 'Data_Center', title: 'Data Center'},
-		{enum: 'Tenant', title: 'Tenant'},
-		{enum: 'VM', title: 'VM'},
-		{enum: 'CPU', title: 'CPU'},
-		{enum: 'Core', title: 'Core'}
-	],
-	TYPE: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Universal', title: 'Universal'},
-		{enum: 'Unique', title: 'Unique'},
-		{enum: 'One_Time', title: 'One Time'}
-	]
+    OPERATIONAL_SCOPE: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Network_Wide', title: 'Network Wide' },
+        { enum: 'Availability_Zone', title: 'Availability Zone' },
+        { enum: 'Data_Center', title: 'Data Center' },
+        { enum: 'Tenant', title: 'Tenant' },
+        { enum: 'VM', title: 'VM' },
+        { enum: 'CPU', title: 'CPU' },
+        { enum: 'Core', title: 'Core' }
+    ],
+    TYPE: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Universal', title: 'Universal' },
+        { enum: 'Unique', title: 'Unique' },
+        { enum: 'One_Time', title: 'One Time' }
+    ]
 };
 
-export const extractValue = (item) => {
-	if (item === undefined) {return '';} //TODO fix it later
+export const extractValue = item => {
+    if (item === undefined) {
+        return '';
+    } //TODO fix it later
 
-	return  item ? item === optionInputOther.OTHER ? item : InputOptions.getTitleByName(optionsInputValues, item) : '';
+    return item
+        ? item === optionInputOther.OTHER
+          ? item
+          : InputOptions.getTitleByName(optionsInputValues, item)
+        : '';
 };
 
-export const getOperationalScopes = (operationalScope) => {
-	if(operationalScope.choices.toString() === i18n(optionInputOther.OTHER) && operationalScope.other !== '') {
-		return operationalScope.other;
-	}
-	else {
-		let allOpScopes = '';
-		for (let opScope of operationalScope.choices) {
-			allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`;
-		}
-		return allOpScopes;
-	}
+export const getOperationalScopes = operationalScope => {
+    if (
+        operationalScope.choices.toString() === i18n(optionInputOther.OTHER) &&
+        operationalScope.other !== ''
+    ) {
+        return operationalScope.other;
+    } else {
+        let allOpScopes = '';
+        for (let opScope of operationalScope.choices) {
+            allOpScopes +=
+                allOpScopes === ''
+                    ? InputOptions.getTitleByName(optionsInputValues, opScope)
+                    : `, ${InputOptions.getTitleByName(
+                          optionsInputValues,
+                          opScope
+                      )}`;
+        }
+        return allOpScopes;
+    }
 };
 
 export const tabIds = {
-	GENERAL: 'GENERAL',
-	SP_LIMITS: 'SP_LIMITS',
-	VENDOR_LIMITS: 'VENDOR_LIMITS',
-	ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
+    GENERAL: 'GENERAL',
+    SP_LIMITS: 'SP_LIMITS',
+    VENDOR_LIMITS: 'VENDOR_LIMITS',
+    ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
index 028fa9d3e4..fa62bba669 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
@@ -13,53 +13,79 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
 import LicenseKeyGroupsEditorView from './LicenseKeyGroupsEditorView.jsx';
 import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-const mapStateToProps = ({licenseModel: {licenseKeyGroup}}) => {
+const mapStateToProps = ({ licenseModel: { licenseKeyGroup } }) => {
+    let {
+        data,
+        genericFieldInfo,
+        formReady,
+        limitsList
+    } = licenseKeyGroup.licenseKeyGroupsEditor;
 
+    let previousData,
+        LKGNames = {};
+    const licenseKeyGroupId = data ? data.id : null;
+    if (licenseKeyGroupId) {
+        previousData = licenseKeyGroup.licenseKeyGroupsList.find(
+            licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId
+        );
+    }
 
-	let {data, genericFieldInfo, formReady, limitsList} = licenseKeyGroup.licenseKeyGroupsEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let previousData, LKGNames = {};
-	const licenseKeyGroupId = data ? data.id : null;
-	if(licenseKeyGroupId) {
-		previousData = licenseKeyGroup.licenseKeyGroupsList.find(licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId);
-	}
+    const list = licenseKeyGroup.licenseKeyGroupsList;
+    for (let i = 0; i < list.length; i++) {
+        LKGNames[list[i].name.toLowerCase()] = list[i].id;
+    }
 
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
-	const list = licenseKeyGroup.licenseKeyGroupsList;
-	for (let i = 0; i < list.length; i++) {
-		LKGNames[list[i].name.toLowerCase()] = list[i].id;
-	}
-
-	return {
-		data,
-		previousData,
-		genericFieldInfo,
-		isFormValid,
-		formReady,
-		LKGNames,
-		limitsList
-	};
+    return {
+        data,
+        previousData,
+        genericFieldInfo,
+        isFormValid,
+        formReady,
+        LKGNames,
+        limitsList
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onCancel: () => LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch),
-		onSubmit: ({previousLicenseKeyGroup, licenseKeyGroup, keepOpen}) => {
-			if (!keepOpen) {LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch);}
-			LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version});
-		},
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName),
-		onCloseLimitEditor: () => LimitEditorActionHelper.closeLimitsEditor(dispatch),
-		onOpenLimitEditor: (limit) => LimitEditorActionHelper.openLimitsEditor(dispatch, {limit})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onCancel: () =>
+            LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch),
+        onSubmit: ({ previousLicenseKeyGroup, licenseKeyGroup, keepOpen }) => {
+            if (!keepOpen) {
+                LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(
+                    dispatch
+                );
+            }
+            LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, {
+                licenseModelId,
+                previousLicenseKeyGroup,
+                licenseKeyGroup,
+                version
+            });
+        },
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName),
+        onCloseLimitEditor: () =>
+            LimitEditorActionHelper.closeLimitsEditor(dispatch),
+        onOpenLimitEditor: limit =>
+            LimitEditorActionHelper.openLimitsEditor(dispatch, { limit })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseKeyGroupsEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
index b1a22f3d9a..e948e9cef8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
@@ -13,82 +13,97 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, defaultState, LKG_FORM_NAME} from './LicenseKeyGroupsConstants.js';
+import {
+    actionTypes,
+    defaultState,
+    LKG_FORM_NAME
+} from './LicenseKeyGroupsConstants.js';
 import moment from 'moment';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.licenseKeyGroupsEditor.OPEN:
-			let licenseKeyGroupData = {...action.licenseKeyGroup};
-			let {startDate, expiryDate} = licenseKeyGroupData;
-			if (startDate) {
-				licenseKeyGroupData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT);
-			}
-			if (expiryDate) {
-				licenseKeyGroupData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT);
-			}
-			return {
-				...state,
-				data: action.licenseKeyGroup ? licenseKeyGroupData : defaultState.licenseKeyGroupsEditor,
-				formReady: null,
-				formName: LKG_FORM_NAME,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'type' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					'operationalScope' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'thresholdUnits' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'thresholdValue' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'increments' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 120}]
-					},
-					'startDate': {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'expiryDate': {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				}
-			};
-		case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED:
-			return {
-				...state,
-				limitsList: action.response.results
-			};	
-		case actionTypes.licenseKeyGroupsEditor.CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.licenseKeyGroupsEditor.OPEN:
+            let licenseKeyGroupData = { ...action.licenseKeyGroup };
+            let { startDate, expiryDate } = licenseKeyGroupData;
+            if (startDate) {
+                licenseKeyGroupData.startDate = moment(
+                    startDate,
+                    DATE_FORMAT
+                ).format(DATE_FORMAT);
+            }
+            if (expiryDate) {
+                licenseKeyGroupData.expiryDate = moment(
+                    expiryDate,
+                    DATE_FORMAT
+                ).format(DATE_FORMAT);
+            }
+            return {
+                ...state,
+                data: action.licenseKeyGroup
+                    ? licenseKeyGroupData
+                    : defaultState.licenseKeyGroupsEditor,
+                formReady: null,
+                formName: LKG_FORM_NAME,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    type: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    operationalScope: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    thresholdUnits: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    thresholdValue: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    increments: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 120 }]
+                    },
+                    startDate: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    expiryDate: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                }
+            };
+        case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED:
+            return {
+                ...state,
+                limitsList: action.response.results
+            };
+        case actionTypes.licenseKeyGroupsEditor.CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
index 7cbab61a8a..a820f28dfd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
@@ -26,328 +26,498 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {optionsInputValues as licenseKeyGroupOptionsInputValues, LKG_FORM_NAME, tabIds} from './LicenseKeyGroupsConstants.js';
-import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js';
-import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+    optionsInputValues as licenseKeyGroupOptionsInputValues,
+    LKG_FORM_NAME,
+    tabIds
+} from './LicenseKeyGroupsConstants.js';
+import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
+import {
+    validateStartDate,
+    thresholdValueValidation
+} from '../LicenseModelValidations.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 import LicenseKeyGroupsLimits from './LicenseKeyGroupsLimits.js';
-import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';
+import {
+    limitType,
+    NEW_LIMIT_TEMP_ID
+} from '../limits/LimitEditorConstants.js';
 
- const LicenseKeyGroupPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	increments: PropTypes.string,
-	operationalScope: PropTypes.shape({
-		choices: PropTypes.array,
-		other: PropTypes.string
-	}),
-	type: PropTypes.string,
-	 thresholdUnits: PropTypes.string,
-	 thresholdValue: PropTypes.number,
-	 startDate: PropTypes.string,
-	 expiryDate: PropTypes.string
+const LicenseKeyGroupPropType = PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    increments: PropTypes.string,
+    operationalScope: PropTypes.shape({
+        choices: PropTypes.array,
+        other: PropTypes.string
+    }),
+    type: PropTypes.string,
+    thresholdUnits: PropTypes.string,
+    thresholdValue: PropTypes.number,
+    startDate: PropTypes.string,
+    expiryDate: PropTypes.string
 });
 
-const LicenseKeyGroupFormContent = ({data, onDataChanged, genericFieldInfo, validateName, validateStartDate, thresholdValueValidation}) => {
-	let {name, description, increments, operationalScope, type, thresholdUnits, thresholdValue, startDate, expiryDate} = data;
-	return (
-		<GridSection hasLostColSet>
-			<GridItem colSpan={2}>
-				<Input
-					onChange={name => onDataChanged({name}, LKG_FORM_NAME, {name: validateName})}
-					label={i18n('Name')}
-					data-test-id='create-lkg-name'
-					value={name}
-					isValid={genericFieldInfo.name.isValid}
-					errorText={genericFieldInfo.name.errorText}
-					isRequired={true}
-					type='text'/>
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-				<InputOptions
-					onInputChange={()=>{}}
-					isMultiSelect={true}
-					onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
-						LKG_FORM_NAME)}
-					onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
-						other: operationalScope}}, LKG_FORM_NAME)}
-					label={i18n('Operational Scope')}
-					data-test-id='create-lkg-operational-scope'
-					type='select'
-					multiSelectedEnum={operationalScope && operationalScope.choices}
-					otherValue={operationalScope && operationalScope.other}
-					values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
-					isValid={genericFieldInfo.operationalScope.isValid}
-					errorText={genericFieldInfo.operationalScope.errorText} />
-			</GridItem>
-			<GridItem colSpan={2}>
-				<Input
-					onChange={description => onDataChanged({description}, LKG_FORM_NAME)}
-					label={i18n('Description')}
-					data-test-id='create-lkg-description'
-					value={description}
-					isValid={genericFieldInfo.description.isValid}
-					errorText={genericFieldInfo.description.errorText}
-					type='textarea'
-					overlayPos='bottom' />
-			</GridItem>
-			<GridItem colSpan={2} lastColInRow>
-				<Input
-					isRequired={true}
-					onChange={e => { const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onDataChanged({type: val}, LKG_FORM_NAME);}}
-					value={type}
-					label={i18n('Type')}
-					data-test-id='create-lkg-type'
-					isValid={genericFieldInfo.type.isValid}
-					errorText={genericFieldInfo.type.errorText}
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					overlayPos='bottom'
-					type='select' >
-					{
-						licenseKeyGroupOptionsInputValues.TYPE.map(type =>
-						(<option key={type.enum} value={type.enum}>{type.title}</option>))
-					}
-				</Input>
-			</GridItem>
-			<GridItem>
-				<Input
-					onChange={e => {
-						// setting the unit to the correct value
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onDataChanged({thresholdUnits: val}, LKG_FORM_NAME);
-						// TODO make sure that the value is valid too
-						onDataChanged({thresholdValue: thresholdValue}, LKG_FORM_NAME,{thresholdValue : thresholdValueValidation});}
-
-					}
-					value={thresholdUnits}
-					label={i18n('Threshold Units')}
-					data-test-id='create-ep-threshold-units'
-					isValid={genericFieldInfo.thresholdUnits.isValid}
-					errorText={genericFieldInfo.thresholdUnits.errorText}
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					type='select' >
-					{LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype =>
-						<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-				</Input>
-			</GridItem>
-			<GridItem>
-				<Input
-					className='entitlement-pools-form-row-threshold-value'
-					onChange={thresholdValue => onDataChanged({thresholdValue}, LKG_FORM_NAME,
-						{thresholdValue : thresholdValueValidation})}
-					label={i18n('Threshold Value')}
-					isValid={genericFieldInfo.thresholdValue.isValid}
-					errorText={genericFieldInfo.thresholdValue.errorText}
-					data-test-id='create-ep-threshold-value'
-					value={thresholdValue}
-					type='text'/>
-			</GridItem>
-				<GridItem>
-				<Input
-					type='date'
-					label={i18n('Start Date')}
-					value={startDate}
-					dateFormat={DATE_FORMAT}
-					startDate={startDate}
-					endDate={expiryDate}
-					onChange={startDate => onDataChanged(
-						{startDate: startDate ? startDate.format(DATE_FORMAT) : ''},
-						LKG_FORM_NAME,
-						{startDate: validateStartDate}
-					)}
-					isValid={genericFieldInfo.startDate.isValid}
-					errorText={genericFieldInfo.startDate.errorText}
-					selectsStart/>
-			</GridItem>
-			<GridItem lastColInRow>
-				<Input
-					type='date'
-					label={i18n('Expiry Date')}
-					value={expiryDate}
-					dateFormat={DATE_FORMAT}
-					startDate={startDate}
-					endDate={expiryDate}
-					onChange={expiryDate => {
-						onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, LKG_FORM_NAME);
-						onDataChanged({startDate}, LKG_FORM_NAME, {startDate: validateStartDate});
-					}}
-					isValid={genericFieldInfo.expiryDate.isValid}
-					errorText={genericFieldInfo.expiryDate.errorText}
-					selectsEnd/>
-			</GridItem>
-			<GridItem colSpan={2}>
-				<Input
-					onChange={increments => onDataChanged({increments}, LKG_FORM_NAME)}
-					label={i18n('Increments')}
-					value={increments}
-					data-test-id='create-ep-increments'
-					type='text'/>
-			</GridItem>
-		</GridSection>
-	);
+const LicenseKeyGroupFormContent = ({
+    data,
+    onDataChanged,
+    genericFieldInfo,
+    validateName,
+    validateStartDate,
+    thresholdValueValidation
+}) => {
+    let {
+        name,
+        description,
+        increments,
+        operationalScope,
+        type,
+        thresholdUnits,
+        thresholdValue,
+        startDate,
+        expiryDate
+    } = data;
+    return (
+        <GridSection hasLostColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={name =>
+                        onDataChanged({ name }, LKG_FORM_NAME, {
+                            name: validateName
+                        })
+                    }
+                    label={i18n('Name')}
+                    data-test-id="create-lkg-name"
+                    value={name}
+                    isValid={genericFieldInfo.name.isValid}
+                    errorText={genericFieldInfo.name.errorText}
+                    isRequired={true}
+                    type="text"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <InputOptions
+                    onInputChange={() => {}}
+                    isMultiSelect={true}
+                    onEnumChange={operationalScope =>
+                        onDataChanged(
+                            {
+                                operationalScope: {
+                                    choices: operationalScope,
+                                    other: ''
+                                }
+                            },
+                            LKG_FORM_NAME
+                        )
+                    }
+                    onOtherChange={operationalScope =>
+                        onDataChanged(
+                            {
+                                operationalScope: {
+                                    choices: [optionInputOther.OTHER],
+                                    other: operationalScope
+                                }
+                            },
+                            LKG_FORM_NAME
+                        )
+                    }
+                    label={i18n('Operational Scope')}
+                    data-test-id="create-lkg-operational-scope"
+                    type="select"
+                    multiSelectedEnum={
+                        operationalScope && operationalScope.choices
+                    }
+                    otherValue={operationalScope && operationalScope.other}
+                    values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
+                    isValid={genericFieldInfo.operationalScope.isValid}
+                    errorText={genericFieldInfo.operationalScope.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={description =>
+                        onDataChanged({ description }, LKG_FORM_NAME)
+                    }
+                    label={i18n('Description')}
+                    data-test-id="create-lkg-description"
+                    value={description}
+                    isValid={genericFieldInfo.description.isValid}
+                    errorText={genericFieldInfo.description.errorText}
+                    type="textarea"
+                    overlayPos="bottom"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    isRequired={true}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onDataChanged({ type: val }, LKG_FORM_NAME);
+                    }}
+                    value={type}
+                    label={i18n('Type')}
+                    data-test-id="create-lkg-type"
+                    isValid={genericFieldInfo.type.isValid}
+                    errorText={genericFieldInfo.type.errorText}
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    overlayPos="bottom"
+                    type="select">
+                    {licenseKeyGroupOptionsInputValues.TYPE.map(type => (
+                        <option key={type.enum} value={type.enum}>
+                            {type.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+            <GridItem>
+                <Input
+                    onChange={e => {
+                        // setting the unit to the correct value
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onDataChanged({ thresholdUnits: val }, LKG_FORM_NAME);
+                        // TODO make sure that the value is valid too
+                        onDataChanged(
+                            { thresholdValue: thresholdValue },
+                            LKG_FORM_NAME,
+                            {
+                                thresholdValue: thresholdValueValidation
+                            }
+                        );
+                    }}
+                    value={thresholdUnits}
+                    label={i18n('Threshold Units')}
+                    data-test-id="create-ep-threshold-units"
+                    isValid={genericFieldInfo.thresholdUnits.isValid}
+                    errorText={genericFieldInfo.thresholdUnits.errorText}
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    type="select">
+                    {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
+                        mtype => (
+                            <option key={mtype.enum} value={mtype.enum}>{`${
+                                mtype.title
+                            }`}</option>
+                        )
+                    )}
+                </Input>
+            </GridItem>
+            <GridItem>
+                <Input
+                    className="entitlement-pools-form-row-threshold-value"
+                    onChange={thresholdValue =>
+                        onDataChanged({ thresholdValue }, LKG_FORM_NAME, {
+                            thresholdValue: thresholdValueValidation
+                        })
+                    }
+                    label={i18n('Threshold Value')}
+                    isValid={genericFieldInfo.thresholdValue.isValid}
+                    errorText={genericFieldInfo.thresholdValue.errorText}
+                    data-test-id="create-ep-threshold-value"
+                    value={thresholdValue}
+                    type="text"
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    type="date"
+                    label={i18n('Start Date')}
+                    value={startDate}
+                    dateFormat={DATE_FORMAT}
+                    startDate={startDate}
+                    endDate={expiryDate}
+                    onChange={startDate =>
+                        onDataChanged(
+                            {
+                                startDate: startDate
+                                    ? startDate.format(DATE_FORMAT)
+                                    : ''
+                            },
+                            LKG_FORM_NAME,
+                            { startDate: validateStartDate }
+                        )
+                    }
+                    isValid={genericFieldInfo.startDate.isValid}
+                    errorText={genericFieldInfo.startDate.errorText}
+                    selectsStart
+                />
+            </GridItem>
+            <GridItem lastColInRow>
+                <Input
+                    type="date"
+                    label={i18n('Expiry Date')}
+                    value={expiryDate}
+                    dateFormat={DATE_FORMAT}
+                    startDate={startDate}
+                    endDate={expiryDate}
+                    onChange={expiryDate => {
+                        onDataChanged(
+                            {
+                                expiryDate: expiryDate
+                                    ? expiryDate.format(DATE_FORMAT)
+                                    : ''
+                            },
+                            LKG_FORM_NAME
+                        );
+                        onDataChanged({ startDate }, LKG_FORM_NAME, {
+                            startDate: validateStartDate
+                        });
+                    }}
+                    isValid={genericFieldInfo.expiryDate.isValid}
+                    errorText={genericFieldInfo.expiryDate.errorText}
+                    selectsEnd
+                />
+            </GridItem>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={increments =>
+                        onDataChanged({ increments }, LKG_FORM_NAME)
+                    }
+                    label={i18n('Increments')}
+                    value={increments}
+                    data-test-id="create-ep-increments"
+                    type="text"
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 class LicenseKeyGroupsEditorView extends React.Component {
-	static propTypes = {
-		data: LicenseKeyGroupPropType,
-		previousData: LicenseKeyGroupPropType,
-		LKGNames: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
-
-	static defaultProps = {
-		data: {}
-	};
-
-	componentDidUpdate(prevProps) {
-		if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit
-			this.submit();
-		}
-	}
+    static propTypes = {
+        data: LicenseKeyGroupPropType,
+        previousData: LicenseKeyGroupPropType,
+        LKGNames: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	state = {
-		localFeatureGroupsListFilter: '',
-		selectedTab: tabIds.GENERAL,
-		selectedLimit: ''
-	};
+    static defaultProps = {
+        data: {}
+    };
 
-	render() {
-		let {data = {}, onDataChanged, isReadOnlyMode, onCloseLimitEditor, genericFieldInfo, limitsList = []} = this.props;
-		let {selectedTab} = this.state;
-		const isTabsDisabled = !data.id || !this.props.isFormValid;
-		return (
-			<div className='license-keygroup-editor'>
-				<Tabs
-					type='menu'
-					activeTab={selectedTab}
-					onTabClick={(tabIndex)=>{
-						if (tabIndex === tabIds.ADD_LIMIT_BUTTON)  {
-							this.onAddLimit();
-						} else {
-							this.setState({selectedTab: tabIndex});
-							onCloseLimitEditor();
-							this.setState({selectedLimit: ''});
-						}
-					}}
-					invalidTabs={[]}>
-					<Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
-						{ genericFieldInfo &&
-							<Form
-								ref='validationForm'
-								hasButtons={false}
-								isValid={this.props.isFormValid}
-								formReady={this.props.formReady}
-								onValidateForm={() => this.props.onValidateForm(LKG_FORM_NAME) }
-								labledButtons={true}
-								isReadOnlyMode={isReadOnlyMode}
-								className='license-model-form license-key-groups-form'>
-									<LicenseKeyGroupFormContent
-										data={data}
-										onDataChanged={onDataChanged}
-										genericFieldInfo={genericFieldInfo}
-										validateName={(value)=> this.validateName(value)}
-										validateStartDate={(value, state)=> validateStartDate(value, state)}
-										thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/>
-							</Form>}
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.formReady &&
+            this.props.formReady !== prevProps.formReady
+        ) {
+            // if form validation succeeded -> continue with submit
+            this.submit();
+        }
+    }
 
-					</Tab>
-					<Tab tabId={tabIds.SP_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('SP Limits')}>
-						{selectedTab === tabIds.SP_LIMITS &&
-							<LicenseKeyGroupsLimits
-								limitType={limitType.SERVICE_PROVIDER}
-								limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)}
-								selectedLimit={this.state.selectedLimit}
-								onCloseLimitEditor={() => this.onCloseLimitEditor()}
-								onSelectLimit={limit => this.onSelectLimit(limit)}
-								isReadOnlyMode={isReadOnlyMode} />}
-					</Tab>
-					<Tab tabId={tabIds.VENDOR_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('Vendor Limits')}>
-						{selectedTab === tabIds.VENDOR_LIMITS &&
-							<LicenseKeyGroupsLimits
-								limitType={limitType.VENDOR}
-								limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
-								selectedLimit={this.state.selectedLimit}
-								onCloseLimitEditor={() => this.onCloseLimitEditor()}
-								onSelectLimit={limit => this.onSelectLimit(limit)}
-								isReadOnlyMode={isReadOnlyMode} />}
-					</Tab>
-					{selectedTab !== tabIds.GENERAL ?
-							<Button
-								className='add-limit-button'
-								tabId={tabIds.ADD_LIMIT_BUTTON}
-								btnType='link'
-								iconName='plus'
-								disabled={this.state.selectedLimit || isReadOnlyMode}>
-								{i18n('Add Limit')}
-							</Button>
-						:
-							<div key='empty_lm_tab_key'></div> // Render empty div to not break tabs
-					}
-				</Tabs>
+    state = {
+        localFeatureGroupsListFilter: '',
+        selectedTab: tabIds.GENERAL,
+        selectedLimit: ''
+    };
 
-				<GridSection className='license-model-modal-buttons license-key-group-editor-buttons'>
-					{!this.state.selectedLimit &&
-						<Button btnType='default' disabled={!this.props.isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>
-							{i18n('Save')}
-						</Button>
-					}
-					<Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'>
-						{i18n('Cancel')}
-					</Button>
-				</GridSection>
-			</div>
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            isReadOnlyMode,
+            onCloseLimitEditor,
+            genericFieldInfo,
+            limitsList = []
+        } = this.props;
+        let { selectedTab } = this.state;
+        const isTabsDisabled = !data.id || !this.props.isFormValid;
+        return (
+            <div className="license-keygroup-editor">
+                <Tabs
+                    type="menu"
+                    activeTab={selectedTab}
+                    onTabClick={tabIndex => {
+                        if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
+                            this.onAddLimit();
+                        } else {
+                            this.setState({ selectedTab: tabIndex });
+                            onCloseLimitEditor();
+                            this.setState({ selectedLimit: '' });
+                        }
+                    }}
+                    invalidTabs={[]}>
+                    <Tab
+                        tabId={tabIds.GENERAL}
+                        data-test-id="general-tab"
+                        title={i18n('General')}>
+                        {genericFieldInfo && (
+                            <Form
+                                ref="validationForm"
+                                hasButtons={false}
+                                isValid={this.props.isFormValid}
+                                formReady={this.props.formReady}
+                                onValidateForm={() =>
+                                    this.props.onValidateForm(LKG_FORM_NAME)
+                                }
+                                labledButtons={true}
+                                isReadOnlyMode={isReadOnlyMode}
+                                className="license-model-form license-key-groups-form">
+                                <LicenseKeyGroupFormContent
+                                    data={data}
+                                    onDataChanged={onDataChanged}
+                                    genericFieldInfo={genericFieldInfo}
+                                    validateName={value =>
+                                        this.validateName(value)
+                                    }
+                                    validateStartDate={(value, state) =>
+                                        validateStartDate(value, state)
+                                    }
+                                    thresholdValueValidation={(value, state) =>
+                                        thresholdValueValidation(value, state)
+                                    }
+                                />
+                            </Form>
+                        )}
+                    </Tab>
+                    <Tab
+                        tabId={tabIds.SP_LIMITS}
+                        disabled={isTabsDisabled}
+                        data-test-id="general-tab"
+                        title={i18n('SP Limits')}>
+                        {selectedTab === tabIds.SP_LIMITS && (
+                            <LicenseKeyGroupsLimits
+                                limitType={limitType.SERVICE_PROVIDER}
+                                limitsList={limitsList.filter(
+                                    item =>
+                                        item.type === limitType.SERVICE_PROVIDER
+                                )}
+                                selectedLimit={this.state.selectedLimit}
+                                onCloseLimitEditor={() =>
+                                    this.onCloseLimitEditor()
+                                }
+                                onSelectLimit={limit =>
+                                    this.onSelectLimit(limit)
+                                }
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Tab>
+                    <Tab
+                        tabId={tabIds.VENDOR_LIMITS}
+                        disabled={isTabsDisabled}
+                        data-test-id="general-tab"
+                        title={i18n('Vendor Limits')}>
+                        {selectedTab === tabIds.VENDOR_LIMITS && (
+                            <LicenseKeyGroupsLimits
+                                limitType={limitType.VENDOR}
+                                limitsList={limitsList.filter(
+                                    item => item.type === limitType.VENDOR
+                                )}
+                                selectedLimit={this.state.selectedLimit}
+                                onCloseLimitEditor={() =>
+                                    this.onCloseLimitEditor()
+                                }
+                                onSelectLimit={limit =>
+                                    this.onSelectLimit(limit)
+                                }
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Tab>
+                    {selectedTab !== tabIds.GENERAL ? (
+                        <Button
+                            className="add-limit-button"
+                            tabId={tabIds.ADD_LIMIT_BUTTON}
+                            btnType="link"
+                            iconName="plus"
+                            disabled={
+                                this.state.selectedLimit || isReadOnlyMode
+                            }>
+                            {i18n('Add Limit')}
+                        </Button>
+                    ) : (
+                        <div key="empty_lm_tab_key" />
+                    ) // Render empty div to not break tabs
+                    }
+                </Tabs>
 
-		);
-	}
+                <GridSection className="license-model-modal-buttons license-key-group-editor-buttons">
+                    {!this.state.selectedLimit && (
+                        <Button
+                            btnType="default"
+                            disabled={!this.props.isFormValid || isReadOnlyMode}
+                            onClick={() => this.submit()}
+                            type="reset">
+                            {i18n('Save')}
+                        </Button>
+                    )}
+                    <Button
+                        btnType={
+                            this.state.selectedLimit ? 'default' : 'outline'
+                        }
+                        onClick={() => this.props.onCancel()}
+                        type="reset">
+                        {i18n('Cancel')}
+                    </Button>
+                </GridSection>
+            </div>
+        );
+    }
 
-	submit() {
-		const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup, formReady, onValidateForm, onSubmit} = this.props;
-		if (!formReady) {
-			onValidateForm(LKG_FORM_NAME);
-		} else {
-			onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
-		}
-	}
+    submit() {
+        const {
+            data: licenseKeyGroup,
+            previousData: previousLicenseKeyGroup,
+            formReady,
+            onValidateForm,
+            onSubmit
+        } = this.props;
+        if (!formReady) {
+            onValidateForm(LKG_FORM_NAME);
+        } else {
+            onSubmit({ licenseKeyGroup, previousLicenseKeyGroup });
+        }
+    }
 
-	validateName(value) {
-		const {data: {id}, LKGNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LKGNames});
+    validateName(value) {
+        const { data: { id }, LKGNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: LKGNames
+        });
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('License key group by the name \'' + value + '\' already exists. License key group name must be unique')};
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "License key group by the name '" +
+                          value +
+                          "' already exists. License key group name must be unique"
+                  )
+              };
+    }
 
-	onSelectLimit(limit) {
-		if (limit.id === this.state.selectedLimit) {
-			this.setState({selectedLimit: ''});
-			return;
-		}
-		this.setState({selectedLimit: limit.id});
-		this.props.onOpenLimitEditor(limit);
-	}
+    onSelectLimit(limit) {
+        if (limit.id === this.state.selectedLimit) {
+            this.setState({ selectedLimit: '' });
+            return;
+        }
+        this.setState({ selectedLimit: limit.id });
+        this.props.onOpenLimitEditor(limit);
+    }
 
-	onCloseLimitEditor() {
-		this.setState({selectedLimit: ''});
-		this.props.onCloseLimitEditor();
-	}
+    onCloseLimitEditor() {
+        this.setState({ selectedLimit: '' });
+        this.props.onCloseLimitEditor();
+    }
 
-	onAddLimit() {
-		this.setState({selectedLimit: NEW_LIMIT_TEMP_ID});
-		this.props.onOpenLimitEditor();
-	}
+    onAddLimit() {
+        this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
+        this.props.onOpenLimitEditor();
+    }
 }
 
 export default LicenseKeyGroupsEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
index bd8f21a7c5..ad14c6c249 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
@@ -13,45 +13,75 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx';
 
 import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
 
-const mapStateToProps = ({licenseModel: {licenseKeyGroup: {licenseKeyGroupsEditor: {data}}, limitEditor}, currentScreen}) => {
-	let  {props: {licenseModelId, version}} = currentScreen;
-	return {
-		parent: data,
-		limitEditor,
-		licenseModelId,
-		version
-	};
+const mapStateToProps = ({
+    licenseModel: {
+        licenseKeyGroup: { licenseKeyGroupsEditor: { data } },
+        limitEditor
+    },
+    currentScreen
+}) => {
+    let { props: { licenseModelId, version } } = currentScreen;
+    return {
+        parent: data,
+        limitEditor,
+        licenseModelId,
+        version
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onSubmit: (limit, licenseKeyGroup, licenseModelId, version) => LicenseKeyGroupsActionHelper.submitLimit(dispatch,
-			{
-				limit,
-				licenseKeyGroup,
-				licenseModelId,
-				version}),
-		onDelete: ({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}) => dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete {name}?', {name: limit.name}),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: ()=> LicenseKeyGroupsActionHelper.deleteLimit(dispatch, {limit, licenseKeyGroup: parent, licenseModelId, version}).then(() =>
-					selectedLimit === limit.id && onCloseLimitEditor()
-				)
-			}
-		})
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onSubmit: (limit, licenseKeyGroup, licenseModelId, version) =>
+            LicenseKeyGroupsActionHelper.submitLimit(dispatch, {
+                limit,
+                licenseKeyGroup,
+                licenseModelId,
+                version
+            }),
+        onDelete: ({
+            limit,
+            parent,
+            licenseModelId,
+            version,
+            onCloseLimitEditor,
+            selectedLimit
+        }) =>
+            dispatch({
+                type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete {name}?', {
+                        name: limit.name
+                    }),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        LicenseKeyGroupsActionHelper.deleteLimit(dispatch, {
+                            limit,
+                            licenseKeyGroup: parent,
+                            licenseModelId,
+                            version
+                        }).then(
+                            () =>
+                                selectedLimit === limit.id &&
+                                onCloseLimitEditor()
+                        )
+                }
+            })
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(Limits);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
index 00c2092b83..6151c5997d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
@@ -13,41 +13,62 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import {actionTypes as globalMoadlActions}  from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
-import LicenseKeyGroupsListEditorView, {generateConfirmationMsg} from './LicenseKeyGroupsListEditorView.jsx';
+import LicenseKeyGroupsListEditorView, {
+    generateConfirmationMsg
+} from './LicenseKeyGroupsListEditorView.jsx';
 
-const mapStateToProps = ({licenseModel: {licenseKeyGroup, licenseModelEditor}}) => {
-	let {licenseKeyGroupsList} = licenseKeyGroup;
-	let {data} = licenseKeyGroup.licenseKeyGroupsEditor;
-	let {vendorName} = licenseModelEditor.data;
+const mapStateToProps = ({
+    licenseModel: { licenseKeyGroup, licenseModelEditor }
+}) => {
+    let { licenseKeyGroupsList } = licenseKeyGroup;
+    let { data } = licenseKeyGroup.licenseKeyGroupsEditor;
+    let { vendorName } = licenseModelEditor.data;
 
-	return {
-		vendorName,
-		licenseKeyGroupsList,
-		isDisplayModal: Boolean(data),
-		isModalInEditMode: Boolean(data && data.id)
-	};
+    return {
+        vendorName,
+        licenseKeyGroupsList,
+        isDisplayModal: Boolean(data),
+        isModalInEditMode: Boolean(data && data.id)
+    };
 };
 
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {	
-	return {
-		onAddLicenseKeyGroupClick: () => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch),
-		onEditLicenseKeyGroupClick: licenseKeyGroup => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version}),
-		onDeleteLicenseKeyGroupClick: licenseKeyGroup => dispatch({
-			type: globalMoadlActions.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: generateConfirmationMsg(licenseKeyGroup),
-				confirmationButtonText: i18n('Delete'),
-				title: i18n('Delete'),
-				onConfirmed: () => LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId:licenseKeyGroup.id, version})
-			}
-		})
-	};
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+    return {
+        onAddLicenseKeyGroupClick: () =>
+            LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch),
+        onEditLicenseKeyGroupClick: licenseKeyGroup =>
+            LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {
+                licenseKeyGroup,
+                licenseModelId,
+                version
+            }),
+        onDeleteLicenseKeyGroupClick: licenseKeyGroup =>
+            dispatch({
+                type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: generateConfirmationMsg(licenseKeyGroup),
+                    confirmationButtonText: i18n('Delete'),
+                    title: i18n('Delete'),
+                    onConfirmed: () =>
+                        LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup(
+                            dispatch,
+                            {
+                                licenseModelId,
+                                licenseKeyGroupId: licenseKeyGroup.id,
+                                version
+                            }
+                        )
+                }
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    LicenseKeyGroupsListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
index 5a98b7f575..4c8c8cee6f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
@@ -21,143 +21,205 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
 import LicenseKeyGroupsEditor from './LicenseKeyGroupsEditor.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-import {optionsInputValues} from './LicenseKeyGroupsConstants';
+import InputOptions, {
+    other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { optionsInputValues } from './LicenseKeyGroupsConstants';
 
 class LicenseKeyGroupsListEditorView extends React.Component {
-	static propTypes = {
-		vendorName: PropTypes.string,
-		licenseModelId: PropTypes.string.isRequired,
-		licenseKeyGroupsList: PropTypes.array,
-		isReadOnlyMode: PropTypes.bool.isRequired,
-		isDisplayModal: PropTypes.bool,
-		isModalInEditMode: PropTypes.bool,
-		onAddLicenseKeyGroupClick: PropTypes.func,
-		onEditLicenseKeyGroupClick: PropTypes.func,
-		onDeleteLicenseKeyGroupClick: PropTypes.func
-	};
-
-	static defaultProps = {
-		licenseKeyGroupsList: []
-	};
-
-	state = {
-		localFilter: ''
-	};
-
-	render() {
-		let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
-		let {onAddLicenseKeyGroupClick} = this.props;
-		const {localFilter} = this.state;
-
-		return (
-			<div className='license-model-list-editor license-key-groups-list-editor'>
-				<ListEditorView
-					title={i18n('License Key Groups')}
-					plusButtonTitle={i18n('Add License Key Group')}
-					onAdd={onAddLicenseKeyGroupClick}
-					filterValue={localFilter}
-					onFilter={value => this.setState({localFilter: value})}
-					isReadOnlyMode={isReadOnlyMode}>
-					{this.filterList().map(licenseKeyGroup => (this.renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode)))}
-				</ListEditorView>
-				<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-key-groups-modal'>
-					<Modal.Header>
-						<Modal.Title>{`${isModalInEditMode ? i18n('Edit License Key Group') : i18n('Create New License Key Group')}`}</Modal.Title>
-					</Modal.Header>
-					<Modal.Body>
-						{
-							isDisplayModal && (
-								<LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>
-							)
-						}
-					</Modal.Body>
-				</Modal>
-			</div>
-		);
-	}
-
-	filterList() {
-		let {licenseKeyGroupsList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return licenseKeyGroupsList.filter(({name = '', description = '', operationalScope = '', type = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter) || escape(this.extractValue(operationalScope)).match(filter) || escape(type).match(filter);
-			});
-		}
-		else {
-			return licenseKeyGroupsList;
-		}
-	}
-
-	renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
-		let {id, name, description, operationalScope, type} = licenseKeyGroup;
-		let {onEditLicenseKeyGroupClick, onDeleteLicenseKeyGroupClick} = this.props;
-		return (
-			<ListEditorItemView
-				key={id}
-				onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
-				onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
-				className='list-editor-item-view'
-				isReadOnlyMode={isReadOnlyMode}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='text name'>{name}</div>
-				</div>
-
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Operational Scope')}</div>
-					<div className='text operational-scope'>{operationalScope && this.getOperationalScopes(operationalScope)}</div>
-
-					<div className='title'>{i18n('Type')}</div>
-					<div className='text type'>{InputOptions.getTitleByName(optionsInputValues, type)}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
-					<div className='text description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
-
-	getOperationalScopes(operationalScope) {
-
-		if (operationalScope.choices && operationalScope.choices.toString() === i18n(optionInputOther.OTHER)) {
-			return operationalScope.other;
-		} else if (operationalScope.choices) {
-			let allOpScopes = '';
-			for (let opScope of operationalScope.choices) {
-				allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`;
-			}
-			return allOpScopes;
-		} else {
-			return '';
-		}
-	}
-
-	extractValue(item) {
-		if (item === undefined) {
-			return '';
-		} //TODO fix it sooner rather than later
-
-		return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
-	}
+    static propTypes = {
+        vendorName: PropTypes.string,
+        licenseModelId: PropTypes.string.isRequired,
+        licenseKeyGroupsList: PropTypes.array,
+        isReadOnlyMode: PropTypes.bool.isRequired,
+        isDisplayModal: PropTypes.bool,
+        isModalInEditMode: PropTypes.bool,
+        onAddLicenseKeyGroupClick: PropTypes.func,
+        onEditLicenseKeyGroupClick: PropTypes.func,
+        onDeleteLicenseKeyGroupClick: PropTypes.func
+    };
+
+    static defaultProps = {
+        licenseKeyGroupsList: []
+    };
+
+    state = {
+        localFilter: ''
+    };
+
+    render() {
+        let {
+            licenseModelId,
+            isReadOnlyMode,
+            isDisplayModal,
+            isModalInEditMode,
+            version
+        } = this.props;
+        let { onAddLicenseKeyGroupClick } = this.props;
+        const { localFilter } = this.state;
+
+        return (
+            <div className="license-model-list-editor license-key-groups-list-editor">
+                <ListEditorView
+                    title={i18n('License Key Groups')}
+                    plusButtonTitle={i18n('Add License Key Group')}
+                    onAdd={onAddLicenseKeyGroupClick}
+                    filterValue={localFilter}
+                    onFilter={value => this.setState({ localFilter: value })}
+                    isReadOnlyMode={isReadOnlyMode}>
+                    {this.filterList().map(licenseKeyGroup =>
+                        this.renderLicenseKeyGroupListItem(
+                            licenseKeyGroup,
+                            isReadOnlyMode
+                        )
+                    )}
+                </ListEditorView>
+                <Modal
+                    show={isDisplayModal}
+                    bsSize="large"
+                    animation={true}
+                    className="onborading-modal license-model-modal license-key-groups-modal">
+                    <Modal.Header>
+                        <Modal.Title>{`${
+                            isModalInEditMode
+                                ? i18n('Edit License Key Group')
+                                : i18n('Create New License Key Group')
+                        }`}</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        {isDisplayModal && (
+                            <LicenseKeyGroupsEditor
+                                version={version}
+                                licenseModelId={licenseModelId}
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    </Modal.Body>
+                </Modal>
+            </div>
+        );
+    }
+
+    filterList() {
+        let { licenseKeyGroupsList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return licenseKeyGroupsList.filter(
+                ({
+                    name = '',
+                    description = '',
+                    operationalScope = '',
+                    type = ''
+                }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter) ||
+                        escape(this.extractValue(operationalScope)).match(
+                            filter
+                        ) ||
+                        escape(type).match(filter)
+                    );
+                }
+            );
+        } else {
+            return licenseKeyGroupsList;
+        }
+    }
+
+    renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
+        let { id, name, description, operationalScope, type } = licenseKeyGroup;
+        let {
+            onEditLicenseKeyGroupClick,
+            onDeleteLicenseKeyGroupClick
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={id}
+                onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
+                onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
+                className="list-editor-item-view"
+                isReadOnlyMode={isReadOnlyMode}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="text name">{name}</div>
+                </div>
+
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Operational Scope')}</div>
+                    <div className="text operational-scope">
+                        {operationalScope &&
+                            this.getOperationalScopes(operationalScope)}
+                    </div>
+
+                    <div className="title">{i18n('Type')}</div>
+                    <div className="text type">
+                        {InputOptions.getTitleByName(optionsInputValues, type)}
+                    </div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Description')}</div>
+                    <div className="text description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
+
+    getOperationalScopes(operationalScope) {
+        if (
+            operationalScope.choices &&
+            operationalScope.choices.toString() === i18n(optionInputOther.OTHER)
+        ) {
+            return operationalScope.other;
+        } else if (operationalScope.choices) {
+            let allOpScopes = '';
+            for (let opScope of operationalScope.choices) {
+                allOpScopes +=
+                    allOpScopes === ''
+                        ? InputOptions.getTitleByName(
+                              optionsInputValues,
+                              opScope
+                          )
+                        : `, ${InputOptions.getTitleByName(
+                              optionsInputValues,
+                              opScope
+                          )}`;
+            }
+            return allOpScopes;
+        } else {
+            return '';
+        }
+    }
+
+    extractValue(item) {
+        if (item === undefined) {
+            return '';
+        } //TODO fix it sooner rather than later
+
+        return item
+            ? item.choice === optionInputOther.OTHER
+              ? item.other
+              : InputOptions.getTitleByName(optionsInputValues, item.choice)
+            : '';
+    }
 }
 
 export default LicenseKeyGroupsListEditorView;
 
 export function generateConfirmationMsg(licenseKeyGroupToDelete) {
-	let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
-	let msg = i18n('Are you sure you want to delete "{name}"?', {name: name});
-	let subMsg = licenseKeyGroupToDelete.referencingFeatureGroups
-	&& licenseKeyGroupToDelete.referencingFeatureGroups.length > 0 ?
-		i18n('This license key group is associated with one or more feature groups') :
-		'';
-	return (
-		<div>
-			<p>{msg}</p>
-			<p>{subMsg}</p>
-		</div>
-	);
+    let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
+    let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
+    let subMsg =
+        licenseKeyGroupToDelete.referencingFeatureGroups &&
+        licenseKeyGroupToDelete.referencingFeatureGroups.length > 0
+            ? i18n(
+                  'This license key group is associated with one or more feature groups'
+              )
+            : '';
+    return (
+        <div>
+            <p>{msg}</p>
+            <p>{subMsg}</p>
+        </div>
+    );
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
index 1f0a64e295..1cd1da0d82 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
@@ -13,20 +13,29 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './LicenseKeyGroupsConstants.js';
+import { actionTypes } from './LicenseKeyGroupsConstants.js';
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.DELETE_LICENSE_KEY_GROUP:
-			return state.filter(licenseKeyGroup => licenseKeyGroup.id !== action.licenseKeyGroupId);
-		case actionTypes.ADD_LICENSE_KEY_GROUP:
-			return [...state, action.licenseKeyGroup];
-		case actionTypes.EDIT_LICENSE_KEY_GROUP:
-			const indexForEdit = state.findIndex(licenseKeyGroup => licenseKeyGroup.id === action.licenseKeyGroup.id);
-			return [...state.slice(0, indexForEdit), action.licenseKeyGroup, ...state.slice(indexForEdit + 1)];
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.DELETE_LICENSE_KEY_GROUP:
+            return state.filter(
+                licenseKeyGroup =>
+                    licenseKeyGroup.id !== action.licenseKeyGroupId
+            );
+        case actionTypes.ADD_LICENSE_KEY_GROUP:
+            return [...state, action.licenseKeyGroup];
+        case actionTypes.EDIT_LICENSE_KEY_GROUP:
+            const indexForEdit = state.findIndex(
+                licenseKeyGroup =>
+                    licenseKeyGroup.id === action.licenseKeyGroup.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.licenseKeyGroup,
+                ...state.slice(indexForEdit + 1)
+            ];
+        default:
+            return state;
+    }
 };
-