Adding Prettier and fixing up eslint version

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

7 files changed, 662 insertions, 438 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
index d483383472..76ea36db98 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
@@ -1,25 +1,30 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import LimitEditor from './LimitEditor.jsx';
 
-const mapStateToProps = ({licenseModel: {limitEditor}}) => {
+const mapStateToProps = ({ licenseModel: { limitEditor } }) => {
+    let { data, genericFieldInfo, formReady } = limitEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let {data, genericFieldInfo, formReady} = limitEditor;	
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
-	return {
-		data,		
-		genericFieldInfo,
-		isFormValid,
-		formReady
-	};
+    return {
+        data,
+        genericFieldInfo,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
-		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: (deltaData, formName, customValidations) =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName,
+                customValidations
+            }),
+        onValidateForm: formName =>
+            ValidationHelper.validateForm(dispatch, formName)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(LimitEditor);
\ No newline at end of file
+export default connect(mapStateToProps, mapActionsToProps)(LimitEditor);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
index 54f057eaa4..0d1d4eaf10 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
@@ -5,206 +5,349 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js';
+import { LIMITS_FORM_NAME, selectValues } from './LimitEditorConstants.js';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Validator from 'nfvo-utils/Validator.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 
 const LimitPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	metric: PropTypes.shape({
-		choice: PropTypes.string,
-		other: PropTypes.string
-	}),
-	value: PropTypes.string,
-	aggregationFunction: PropTypes.string,
-	time: PropTypes.string,
-	unit: PropTypes.shape({
-		choice: PropTypes.string,
-		other: PropTypes.string
-	})
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    metric: PropTypes.shape({
+        choice: PropTypes.string,
+        other: PropTypes.string
+    }),
+    value: PropTypes.string,
+    aggregationFunction: PropTypes.string,
+    time: PropTypes.string,
+    unit: PropTypes.shape({
+        choice: PropTypes.string,
+        other: PropTypes.string
+    })
 });
 
 class LimitEditor extends React.Component {
-	static propTypes = {
-		data: LimitPropType,
-		limitsNames: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		isFormValid: PropTypes.bool,
-		formReady: PropTypes.bool,
-		genericFieldInfo: PropTypes.object.isRequired,
-		onDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onValidateForm: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    static propTypes = {
+        data: LimitPropType,
+        limitsNames: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        isFormValid: PropTypes.bool,
+        formReady: PropTypes.bool,
+        genericFieldInfo: PropTypes.object.isRequired,
+        onDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onValidateForm: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	componentDidUpdate(prevProps) {
-		if (this.props.formReady && this.props.formReady !== prevProps.formReady) {
-			this.submit();
-		}
-	}
+    componentDidUpdate(prevProps) {
+        if (
+            this.props.formReady &&
+            this.props.formReady !== prevProps.formReady
+        ) {
+            this.submit();
+        }
+    }
 
-	render() {
-		let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCancel, isFormValid, formReady, onValidateForm} = this.props;
-		let {name, description, metric, value, aggregationFunction, time, unit} = data;
-		return (
-			<div className='limit-editor'>
-			{!data.id &&
-			<div className='limit-editor-title'>
-				{data.name ? data.name : i18n('NEW LIMIT')}
-			</div>}
-			{
-				genericFieldInfo &&
-				<Form
-					ref='validationForm'
-					hasButtons={false}
-					isValid={isFormValid}
-					formReady={formReady}
-					onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) }
-					labledButtons={false}
-					isReadOnlyMode={isReadOnlyMode}
-					className='limit-editor-form'>
-					<GridSection className='limit-editor-form-grid-section' hasLastColSet>
-						<GridItem colSpan={2}>
-							<Input
-								onChange={name => onDataChanged({name}, LIMITS_FORM_NAME, {name: () => this.validateName(name)})}
-								label={i18n('Name')}
-								data-test-id='limit-editor-name'
-								value={name}
-								isValid={genericFieldInfo.name.isValid}
-								errorText={genericFieldInfo.name.errorText}
-								isRequired={true}
-								type='text'/>
-						</GridItem>
-						<GridItem colSpan={2} lastColInRow>
-							<Input
-								onChange={description => onDataChanged({description}, LIMITS_FORM_NAME)}
-								label={i18n('Description')}
-								data-test-id='limit-editor-description'
-								value={description}
-								isValid={genericFieldInfo.description.isValid}
-								errorText={genericFieldInfo.description.errorText}
-								isRequired={false}
-								type='text'/>
-						</GridItem>
-						<GridItem colSpan={2}>
-							<InputOptions
-								onInputChange={()=>{}}
-								isMultiSelect={false}
-								isRequired={true}
-								onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}},
-									LIMITS_FORM_NAME)}
-								onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER,
-									other: metric}}, LIMITS_FORM_NAME)}
-								label={i18n('Metric')}
-								data-test-id='limit-editor-metric'
-								type='select'
-								required={true}
-								selectedEnum={metric && metric.choice}
-								otherValue={metric && metric.other}
-								values={selectValues.METRIC}
-								isValid={genericFieldInfo.metric.isValid}
-								errorText={genericFieldInfo.metric.errorText} />
-						</GridItem>
-						<GridItem>
-							<Input
-								onChange={value => onDataChanged({value}, LIMITS_FORM_NAME)}
-								label={i18n('Metric value')}
-								data-test-id='limit-editor-metric-value'
-								value={value}
-								isValid={genericFieldInfo.value.isValid}
-								errorText={genericFieldInfo.value.errorText}
-								isRequired={true}
-								type='text'/>
-						</GridItem>
-						<GridItem lastColInRow>
-							<InputOptions
-								onInputChange={()=>{}}
-								isMultiSelect={false}
-								isRequired={false}
-								onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}},
-									LIMITS_FORM_NAME)}
-								onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER,
-									other: unit}}, LIMITS_FORM_NAME)}
-								label={i18n('Units')}
-								data-test-id='limit-editor-units'
-								type='select'
-								required={false}
-								selectedEnum={unit && unit.choice}
-								otherValue={unit && unit.other}
-								values={selectValues.UNIT}
-								isValid={genericFieldInfo.unit.isValid}
-								errorText={genericFieldInfo.unit.errorText} />
-						</GridItem>
-						<GridItem colSpan={2}>
-							<Input
-								onChange={e => {
-									const selectedIndex = e.target.selectedIndex;
-									const val = e.target.options[selectedIndex].value;
-									onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);}
-								}
-								value={aggregationFunction}
-								label={i18n('Aggregation Function')}
-								data-test-id='limit-editor-aggregation-function'
-								isValid={genericFieldInfo.aggregationFunction.isValid}
-								errorText={genericFieldInfo.aggregationFunction.errorText}
-								groupClassName='bootstrap-input-options'
-								className='input-options-select'
-								type='select' >
-								{selectValues.AGGREGATION_FUNCTION.map(mtype =>
-									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>
-						</GridItem>
-						<GridItem>
-							<Input
-								onChange={e => {
-									const selectedIndex = e.target.selectedIndex;
-									const val = e.target.options[selectedIndex].value;
-									onDataChanged({time: val}, LIMITS_FORM_NAME);}
-								}
-								value={time}
-								label={i18n('Time')}
-								data-test-id='limit-editor-time'
-								isValid={genericFieldInfo.time.isValid}
-								errorText={genericFieldInfo.time.errorText}
-								groupClassName='bootstrap-input-options'
-								className='input-options-select'
-								type='select' >
-								{selectValues.TIME.map(mtype =>
-									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>
-						</GridItem>
-					</GridSection>
-					<GridSection className='limit-editor-buttons'>
-						<Button btnType='outline' disabled={!isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>
-						<Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button>
-					</GridSection>
-				</Form>
-			}
-			</div>
-		);
-	}
+    render() {
+        let {
+            data = {},
+            onDataChanged,
+            isReadOnlyMode,
+            genericFieldInfo,
+            onCancel,
+            isFormValid,
+            formReady,
+            onValidateForm
+        } = this.props;
+        let {
+            name,
+            description,
+            metric,
+            value,
+            aggregationFunction,
+            time,
+            unit
+        } = data;
+        return (
+            <div className="limit-editor">
+                {!data.id && (
+                    <div className="limit-editor-title">
+                        {data.name ? data.name : i18n('NEW LIMIT')}
+                    </div>
+                )}
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={false}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        onValidateForm={() => onValidateForm(LIMITS_FORM_NAME)}
+                        labledButtons={false}
+                        isReadOnlyMode={isReadOnlyMode}
+                        className="limit-editor-form">
+                        <GridSection
+                            className="limit-editor-form-grid-section"
+                            hasLastColSet>
+                            <GridItem colSpan={2}>
+                                <Input
+                                    onChange={name =>
+                                        onDataChanged(
+                                            { name },
+                                            LIMITS_FORM_NAME,
+                                            {
+                                                name: () =>
+                                                    this.validateName(name)
+                                            }
+                                        )
+                                    }
+                                    label={i18n('Name')}
+                                    data-test-id="limit-editor-name"
+                                    value={name}
+                                    isValid={genericFieldInfo.name.isValid}
+                                    errorText={genericFieldInfo.name.errorText}
+                                    isRequired={true}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={2} lastColInRow>
+                                <Input
+                                    onChange={description =>
+                                        onDataChanged(
+                                            { description },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Description')}
+                                    data-test-id="limit-editor-description"
+                                    value={description}
+                                    isValid={
+                                        genericFieldInfo.description.isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.description.errorText
+                                    }
+                                    isRequired={false}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem colSpan={2}>
+                                <InputOptions
+                                    onInputChange={() => {}}
+                                    isMultiSelect={false}
+                                    isRequired={true}
+                                    onEnumChange={metric =>
+                                        onDataChanged(
+                                            {
+                                                metric: {
+                                                    choice: metric,
+                                                    other: ''
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    onOtherChange={metric =>
+                                        onDataChanged(
+                                            {
+                                                metric: {
+                                                    choice:
+                                                        optionInputOther.OTHER,
+                                                    other: metric
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Metric')}
+                                    data-test-id="limit-editor-metric"
+                                    type="select"
+                                    required={true}
+                                    selectedEnum={metric && metric.choice}
+                                    otherValue={metric && metric.other}
+                                    values={selectValues.METRIC}
+                                    isValid={genericFieldInfo.metric.isValid}
+                                    errorText={
+                                        genericFieldInfo.metric.errorText
+                                    }
+                                />
+                            </GridItem>
+                            <GridItem>
+                                <Input
+                                    onChange={value =>
+                                        onDataChanged(
+                                            { value },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Metric value')}
+                                    data-test-id="limit-editor-metric-value"
+                                    value={value}
+                                    isValid={genericFieldInfo.value.isValid}
+                                    errorText={genericFieldInfo.value.errorText}
+                                    isRequired={true}
+                                    type="text"
+                                />
+                            </GridItem>
+                            <GridItem lastColInRow>
+                                <InputOptions
+                                    onInputChange={() => {}}
+                                    isMultiSelect={false}
+                                    isRequired={false}
+                                    onEnumChange={unit =>
+                                        onDataChanged(
+                                            {
+                                                unit: {
+                                                    choice: unit,
+                                                    other: ''
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    onOtherChange={unit =>
+                                        onDataChanged(
+                                            {
+                                                unit: {
+                                                    choice:
+                                                        optionInputOther.OTHER,
+                                                    other: unit
+                                                }
+                                            },
+                                            LIMITS_FORM_NAME
+                                        )
+                                    }
+                                    label={i18n('Units')}
+                                    data-test-id="limit-editor-units"
+                                    type="select"
+                                    required={false}
+                                    selectedEnum={unit && unit.choice}
+                                    otherValue={unit && unit.other}
+                                    values={selectValues.UNIT}
+                                    isValid={genericFieldInfo.unit.isValid}
+                                    errorText={genericFieldInfo.unit.errorText}
+                                />
+                            </GridItem>
+                            <GridItem colSpan={2}>
+                                <Input
+                                    onChange={e => {
+                                        const selectedIndex =
+                                            e.target.selectedIndex;
+                                        const val =
+                                            e.target.options[selectedIndex]
+                                                .value;
+                                        onDataChanged(
+                                            { aggregationFunction: val },
+                                            LIMITS_FORM_NAME
+                                        );
+                                    }}
+                                    value={aggregationFunction}
+                                    label={i18n('Aggregation Function')}
+                                    data-test-id="limit-editor-aggregation-function"
+                                    isValid={
+                                        genericFieldInfo.aggregationFunction
+                                            .isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo.aggregationFunction
+                                            .errorText
+                                    }
+                                    groupClassName="bootstrap-input-options"
+                                    className="input-options-select"
+                                    type="select">
+                                    {selectValues.AGGREGATION_FUNCTION.map(
+                                        mtype => (
+                                            <option
+                                                key={mtype.enum}
+                                                value={mtype.enum}>{`${
+                                                mtype.title
+                                            }`}</option>
+                                        )
+                                    )}
+                                </Input>
+                            </GridItem>
+                            <GridItem>
+                                <Input
+                                    onChange={e => {
+                                        const selectedIndex =
+                                            e.target.selectedIndex;
+                                        const val =
+                                            e.target.options[selectedIndex]
+                                                .value;
+                                        onDataChanged(
+                                            { time: val },
+                                            LIMITS_FORM_NAME
+                                        );
+                                    }}
+                                    value={time}
+                                    label={i18n('Time')}
+                                    data-test-id="limit-editor-time"
+                                    isValid={genericFieldInfo.time.isValid}
+                                    errorText={genericFieldInfo.time.errorText}
+                                    groupClassName="bootstrap-input-options"
+                                    className="input-options-select"
+                                    type="select">
+                                    {selectValues.TIME.map(mtype => (
+                                        <option
+                                            key={mtype.enum}
+                                            value={mtype.enum}>{`${
+                                            mtype.title
+                                        }`}</option>
+                                    ))}
+                                </Input>
+                            </GridItem>
+                        </GridSection>
+                        <GridSection className="limit-editor-buttons">
+                            <Button
+                                btnType="outline"
+                                disabled={!isFormValid || isReadOnlyMode}
+                                onClick={() => this.submit()}
+                                type="reset">
+                                {i18n('Save')}
+                            </Button>
+                            <Button
+                                btnType="outline"
+                                color="gray"
+                                onClick={onCancel}
+                                type="reset">
+                                {i18n('Cancel')}
+                            </Button>
+                        </GridSection>
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	validateName(value) {
-		const {data: {id}, limitsNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: limitsNames});
+    validateName(value) {
+        const { data: { id }, limitsNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: limitsNames
+        });
 
-		return !isExists ?  {isValid: true, errorText: ''} :
-		{isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')};
-	}
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Limit by the name '" +
+                          value +
+                          "' already exists. Limit name must be unique"
+                  )
+              };
+    }
 
-
-	submit() {
-		if (!this.props.formReady) {
-			this.props.onValidateForm(LIMITS_FORM_NAME);
-		} else {
-			this.props.onSubmit();
-		}
-	}
+    submit() {
+        if (!this.props.formReady) {
+            this.props.onValidateForm(LIMITS_FORM_NAME);
+        } else {
+            this.props.onSubmit();
+        }
+    }
 }
 
 export default LimitEditor;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
index 8ac845a1a7..a275808d01 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
@@ -14,41 +14,47 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, selectValues} from './LimitEditorConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-
+import { actionTypes, selectValues } from './LimitEditorConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 const LimitEditorActionHelper = {
-	openLimitsEditor(dispatch, {limit}) {
-		let modifiedLimit = {...limit};
-		if (limit && limit.metric) {
-			modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC);
-		}
-		if (limit && limit.unit) {
-			modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT);
-		}
-		dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit});
-	},
+    openLimitsEditor(dispatch, { limit }) {
+        let modifiedLimit = { ...limit };
+        if (limit && limit.metric) {
+            modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(
+                modifiedLimit.metric,
+                selectValues.METRIC
+            );
+        }
+        if (limit && limit.unit) {
+            modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(
+                modifiedLimit.unit,
+                selectValues.UNIT
+            );
+        }
+        dispatch({ type: actionTypes.OPEN, limitItem: modifiedLimit });
+    },
 
-	closeLimitsEditor(dispatch) {
-		dispatch({type: actionTypes.CLOSE});
-	},
+    closeLimitsEditor(dispatch) {
+        dispatch({ type: actionTypes.CLOSE });
+    },
 
-	createChoiceObject(value, optionsList) {
-		let option = optionsList.find(function(item) { return item.enum === value; });
-		if (!option) {
-			return {
-				choice: optionInputOther.OTHER,
-				other: value
-			};
-		}
-		else {
-			return {
-				choice: value,
-				other: ''
-			};
-		}
-	}
+    createChoiceObject(value, optionsList) {
+        let option = optionsList.find(function(item) {
+            return item.enum === value;
+        });
+        if (!option) {
+            return {
+                choice: optionInputOther.OTHER,
+                other: value
+            };
+        } else {
+            return {
+                choice: value,
+                other: ''
+            };
+        }
+    }
 };
 
 export default LimitEditorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
index 9829e696c3..a916b9594c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
@@ -3,62 +3,61 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 // import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
-	OPEN: null,
-	CLOSE: null,
-	DATA_CHANGED: null,
+    OPEN: null,
+    CLOSE: null,
+    DATA_CHANGED: null
 });
 
 export const LIMITS_FORM_NAME = 'LIMITSFORM';
 
 export const selectValues = {
-	METRIC: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'BWTH', title: 'BWTH'},
-		{enum: 'Country', title: 'Country'},
-		{enum: 'Session', title: 'Session'},
-		{enum: 'LoB', title: 'LoB'},
-		{enum: 'Site', title: 'Site'},
-		{enum: 'Usage', title: 'Usage'}
-	],
-	UNIT: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'trunk', title: 'Trunks'},
-		{enum: 'user', title: 'Users'},
-		{enum: 'subscriber', title: 'Subscribers'},
-		{enum: 'session', title: 'Sessions'},
-		{enum: 'tenant', title: 'Tenants'},
-		{enum: 'token', title: 'Tokens'},
-		{enum: 'seats', title: 'Seats'},
-		{enum: 'TB', title: 'TB'},
-		{enum: 'GB', title: 'GB'},
-		{enum: 'MB', title: 'MB'}
-	],
-	AGGREGATION_FUNCTION: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Peak', title: 'Peak'},
-		{enum: 'Average', title: 'Average'}
-	],
-	TIME: [
-		{enum: '', title: i18n('please select…')},
-		{enum: 'Day', title: 'Day'},
-		{enum: 'Month', title: 'Month'},
-		{enum: 'Hour', title: 'Hour'},
-		{enum: 'Minute', title: 'Minute'},
-		{enum: 'Second', title: 'Second'},
-		{enum: 'Milli-Second', title: 'Milli-Second'}
-	]
-
+    METRIC: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'BWTH', title: 'BWTH' },
+        { enum: 'Country', title: 'Country' },
+        { enum: 'Session', title: 'Session' },
+        { enum: 'LoB', title: 'LoB' },
+        { enum: 'Site', title: 'Site' },
+        { enum: 'Usage', title: 'Usage' }
+    ],
+    UNIT: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'trunk', title: 'Trunks' },
+        { enum: 'user', title: 'Users' },
+        { enum: 'subscriber', title: 'Subscribers' },
+        { enum: 'session', title: 'Sessions' },
+        { enum: 'tenant', title: 'Tenants' },
+        { enum: 'token', title: 'Tokens' },
+        { enum: 'seats', title: 'Seats' },
+        { enum: 'TB', title: 'TB' },
+        { enum: 'GB', title: 'GB' },
+        { enum: 'MB', title: 'MB' }
+    ],
+    AGGREGATION_FUNCTION: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Peak', title: 'Peak' },
+        { enum: 'Average', title: 'Average' }
+    ],
+    TIME: [
+        { enum: '', title: i18n('please select…') },
+        { enum: 'Day', title: 'Day' },
+        { enum: 'Month', title: 'Month' },
+        { enum: 'Hour', title: 'Hour' },
+        { enum: 'Minute', title: 'Minute' },
+        { enum: 'Second', title: 'Second' },
+        { enum: 'Milli-Second', title: 'Milli-Second' }
+    ]
 };
 
 export const limitType = {
-	SERVICE_PROVIDER: 'ServiceProvider',
-	VENDOR: 'Vendor'
+    SERVICE_PROVIDER: 'ServiceProvider',
+    VENDOR: 'Vendor'
 };
 
 export const defaultState = {
-	LIMITS_EDITOR_DATA: {
-		metric: {choice: '', other: ''},
-	}
+    LIMITS_EDITOR_DATA: {
+        metric: { choice: '', other: '' }
+    }
 };
 
 export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
index 99d94a09cc..a0c3b0b1b1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
@@ -14,58 +14,73 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, LIMITS_FORM_NAME, defaultState} from './LimitEditorConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+    actionTypes,
+    LIMITS_FORM_NAME,
+    defaultState
+} from './LimitEditorConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.OPEN:
-			return {
-				...state,
-				data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA,
-				formReady: null,
-				formName: LIMITS_FORM_NAME,
-				genericFieldInfo: {
-					'description' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 1000}]
-					},
-					'name' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
-					},
-					'metric' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}]
-					},
-					'value' : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					'unit' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'aggregationFunction' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					},
-					'time' : {
-						isValid: true,
-						errorText: '',
-						validations: []
-					}
-				}
-			};
-		case actionTypes.CLOSE:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.OPEN:
+            return {
+                ...state,
+                data: action.limitItem
+                    ? { ...action.limitItem }
+                    : defaultState.LIMITS_EDITOR_DATA,
+                formReady: null,
+                formName: LIMITS_FORM_NAME,
+                genericFieldInfo: {
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 1000 }]
+                    },
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 120 }
+                        ]
+                    },
+                    metric: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            {
+                                type: 'requiredChoiceWithOther',
+                                data: optionInputOther.OTHER
+                            }
+                        ]
+                    },
+                    value: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    unit: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    aggregationFunction: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    },
+                    time: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
+                    }
+                }
+            };
+        case actionTypes.CLOSE:
+            return {};
+        default:
+            return state;
+    }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
index 4841d0335c..2667560935 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
@@ -18,99 +18,157 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import LimitEditor from './LimitEditor.js';
-import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js';
+import { NEW_LIMIT_TEMP_ID, selectValues } from './LimitEditorConstants.js';
 
-const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => {
-	const {name, description, value, metric, aggregationFunction = '', time = ''} = limit;
-	const timeLabel = time ? `per ${time}` : '';
-	let metricOption = selectValues.METRIC.find(item => item.enum === metric);
-	metricOption = metricOption ? metricOption.title : metric;
+const LimitItem = ({ isReadOnlyMode, limit, onDelete, onSelect }) => {
+    const {
+        name,
+        description,
+        value,
+        metric,
+        aggregationFunction = '',
+        time = ''
+    } = limit;
+    const timeLabel = time ? `per ${time}` : '';
+    let metricOption = selectValues.METRIC.find(item => item.enum === metric);
+    metricOption = metricOption ? metricOption.title : metric;
 
-	return (
-		<ListEditorItemView
-			onDelete={onDelete}
-			onSelect={onSelect}
-			isReadOnlyMode={isReadOnlyMode}>
-			<div className='list-editor-item-view-field limit-name'>
-				<div className='text name'>{name}</div>
-			</div>
+    return (
+        <ListEditorItemView
+            onDelete={onDelete}
+            onSelect={onSelect}
+            isReadOnlyMode={isReadOnlyMode}>
+            <div className="list-editor-item-view-field limit-name">
+                <div className="text name">{name}</div>
+            </div>
 
-			<div className='list-editor-item-view-field limit-description'>
-				<div className='text description'>{description}</div>
-			</div>
+            <div className="list-editor-item-view-field limit-description">
+                <div className="text description">{description}</div>
+            </div>
 
-			<div className='list-editor-item-view-field limit-metric-details'>
-				<div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
-			</div>
-		</ListEditorItemView>
-	);
+            <div className="list-editor-item-view-field limit-metric-details">
+                <div className="text description">{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
+            </div>
+        </ListEditorItemView>
+    );
 };
 
 class Limits extends React.Component {
+    state = {
+        localFilter: ''
+    };
 
+    render() {
+        const {
+            isReadOnlyMode = false,
+            limitEditor,
+            limitsList = [],
+            onCloseLimitEditor,
+            selectedLimit
+        } = this.props;
+        let limitsNames = {};
+        for (let i = 0; i < limitsList.length; i++) {
+            limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
+        }
+        return (
+            <div className="license-model-limits-view">
+                <ListEditorView isReadOnlyMode={isReadOnlyMode}>
+                    {this.props.selectedLimit === NEW_LIMIT_TEMP_ID &&
+                        limitEditor.data && (
+                            <LimitEditor
+                                limitsNames={limitsNames}
+                                onCancel={onCloseLimitEditor}
+                                onSubmit={() => this.submit()}
+                                isReadOnlyMode={isReadOnlyMode}
+                            />
+                        )}
+                    {limitsList.length === 0 &&
+                        !limitEditor.data && (
+                            <div className="no-limits-text">
+                                {i18n('There are no limits')}
+                            </div>
+                        )}
+                    {limitsList.map(limit => (
+                        <div key={limit.id} className="limit-item-wrapper">
+                            <LimitItem
+                                onDelete={() => this.deleteLimit(limit)}
+                                onSelect={
+                                    selectedLimit
+                                        ? undefined
+                                        : () => this.props.onSelectLimit(limit)
+                                }
+                                clickable={!selectedLimit}
+                                isReadOnlyMode={isReadOnlyMode}
+                                limit={limit}
+                            />
+                            {limit.id === selectedLimit &&
+                                limitEditor.data && (
+                                    <LimitEditor
+                                        limitsNames={limitsNames}
+                                        onCancel={onCloseLimitEditor}
+                                        onSubmit={() => this.submit()}
+                                        isReadOnlyMode={isReadOnlyMode}
+                                    />
+                                )}
+                        </div>
+                    ))}
+                </ListEditorView>
+            </div>
+        );
+    }
 
-	state = {
-		localFilter: ''
-	};
+    submit() {
+        let {
+            onSubmit,
+            onCloseLimitEditor,
+            parent,
+            limitEditor,
+            licenseModelId,
+            version,
+            limitType
+        } = this.props;
+        onSubmit(
+            { type: limitType, ...limitEditor.data },
+            parent,
+            licenseModelId,
+            version
+        ).then(() => onCloseLimitEditor());
+    }
 
-	render() {
-		const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props;
-		let limitsNames = {};
-		for (let i = 0; i < limitsList.length; i++) {
-			limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
-		}
-		return (
-			<div className='license-model-limits-view'>
-				<ListEditorView isReadOnlyMode={isReadOnlyMode}>
-					{this.props.selectedLimit === NEW_LIMIT_TEMP_ID && limitEditor.data &&
-						<LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()} isReadOnlyMode={isReadOnlyMode}/>
-					}
-					{limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>}
-					{limitsList.map(limit =>
-					<div key={limit.id}  className='limit-item-wrapper'>
-						<LimitItem
-							onDelete={() => this.deleteLimit(limit)}
-							onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)}
-							clickable={!selectedLimit}
-							isReadOnlyMode={isReadOnlyMode}
-							limit={limit}/>
-						{limit.id === selectedLimit &&  limitEditor.data &&
-							<LimitEditor
-								limitsNames={limitsNames}
-								onCancel={onCloseLimitEditor}
-								onSubmit={ () => this.submit()}
-								isReadOnlyMode={isReadOnlyMode} />
-						}
-					</div> )}
-				</ListEditorView>
+    deleteLimit(limit) {
+        let {
+            onDelete,
+            parent,
+            licenseModelId,
+            version,
+            onCloseLimitEditor,
+            selectedLimit
+        } = this.props;
+        onDelete({
+            limit,
+            parent,
+            licenseModelId,
+            version,
+            onCloseLimitEditor,
+            selectedLimit
+        });
+    }
 
-			</div>
-		);
-	}
-
-	submit() {
-		let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props;
-		onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor());
-	}
-
-	deleteLimit(limit) {
-		let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props;
-		onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit});
-	}
-
-	filterList() {
-		let {limitsList = []} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return limitsList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return limitsList;
-		}
-	}
+    filterList() {
+        let { limitsList = [] } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return limitsList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return limitsList;
+        }
+    }
 }
 
 export default Limits;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
index 1b8ecb9d94..679f9975e5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
@@ -16,31 +16,29 @@
 
 // items/{itemId}/users
 
-let list = [
-	
-];
+let list = [];
 
 export default {
-	fetch() {
-		return Promise.resolve({
-			listCount: list.length,
-			results: list
-		});
-	},
+    fetch() {
+        return Promise.resolve({
+            listCount: list.length,
+            results: list
+        });
+    },
 
-	put(url, payload) {
-		// let {removedUsers, addedUsers} = payload;
-		// users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers);
-		payload.id = Math.random() * (1000 - 1) + 1;
-		list.push(payload);
-		return Promise.resolve();
-	},
+    put(url, payload) {
+        // let {removedUsers, addedUsers} = payload;
+        // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers);
+        payload.id = Math.random() * (1000 - 1) + 1;
+        list.push(payload);
+        return Promise.resolve();
+    },
 
-	destroy(url) {
-		const parts = url.split('/');
-		const id = parts[parts.length - 1];
-		let newList  = list.filter(item => item.id !== id);
-		list = newList;
-		return Promise.resolve();
-	}
-};
\ No newline at end of file
+    destroy(url) {
+        const parts = url.split('/');
+        const id = parts[parts.length - 1];
+        let newList = list.filter(item => item.id !== id);
+        list = newList;
+        return Promise.resolve();
+    }
+};