Adding Prettier and fixing up eslint version

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

1 files changed, 471 insertions, 301 deletions

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;