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, 296 insertions, 187 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
index 6d0acaa65d..fc8269332a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
@@ -19,211 +19,320 @@ import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
 import Tab from 'sdc-ui/lib/react/Tab.js';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
+import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
 
-import {state as FeatureGroupStateConstants, FG_EDITOR_FORM} from './FeatureGroupsConstants.js';
+import {
+    state as FeatureGroupStateConstants,
+    FG_EDITOR_FORM
+} from './FeatureGroupsConstants.js';
 
 const FeatureGroupsPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string,
-	partNumber: PropTypes.string,
-	manufacturerReferenceNumber: PropTypes.string,
-	entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
-	licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    partNumber: PropTypes.string,
+    manufacturerReferenceNumber: PropTypes.string,
+    entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
+    licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
 });
 
-const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => {
-	let {name, description, partNumber, manufacturerReferenceNumber} = data;
-	return (
-			<GridSection hasLastColSet>
-				<GridItem colSpan={2}>
-					<Input
-						groupClassName='field-section'
-						onChange={name => onDataChanged({name}, FG_EDITOR_FORM, {name: validateName})}
-						label={i18n('Name')}
-						data-test-id='create-fg-name'
-						value={name}
-						name='feature-group-name'
-						type='text'
-						isRequired={true}
-						isValid={genericFieldInfo.name.isValid}
-						errorText={genericFieldInfo.name.errorText} />
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						groupClassName='field-section'
-						className='description-field'
-						onChange={description => onDataChanged({description}, FG_EDITOR_FORM)}
-						data-test-id='create-fg-description'
-						label={i18n('Description')}
-						value={description}
-						name='feature-group-description'
-						type='textarea'
-						isValid={genericFieldInfo.description.isValid}
-						errorText={genericFieldInfo.description.errorText} />
-				</GridItem>
-				<GridItem colSpan={2}>
-					<Input
-						groupClassName='field-section'
-						onChange={partNumber => onDataChanged({partNumber}, FG_EDITOR_FORM)}
-						label={i18n('Part Number')}
-						data-test-id='create-fg-part-number'
-						value={partNumber}
-						isRequired={true}
-						type='text'
-						isValid={genericFieldInfo.partNumber.isValid}
-						errorText={genericFieldInfo.partNumber.errorText} />
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						groupClassName='field-section'
-						onChange={manufacturerReferenceNumber => onDataChanged({manufacturerReferenceNumber}, FG_EDITOR_FORM)}
-						label={i18n('Manufacturer Reference Number')}
-						data-test-id='create-fg-reference-number'
-						value={manufacturerReferenceNumber}
-						isRequired={true}
-						type='text'
-						isValid={genericFieldInfo.manufacturerReferenceNumber.isValid}
-						errorText={genericFieldInfo.manufacturerReferenceNumber.errorText} />
-				</GridItem>
-			</GridSection>
-		);
+const GeneralTab = ({
+    data = {},
+    onDataChanged,
+    genericFieldInfo,
+    validateName
+}) => {
+    let { name, description, partNumber, manufacturerReferenceNumber } = data;
+    return (
+        <GridSection hasLastColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    groupClassName="field-section"
+                    onChange={name =>
+                        onDataChanged({ name }, FG_EDITOR_FORM, {
+                            name: validateName
+                        })
+                    }
+                    label={i18n('Name')}
+                    data-test-id="create-fg-name"
+                    value={name}
+                    name="feature-group-name"
+                    type="text"
+                    isRequired={true}
+                    isValid={genericFieldInfo.name.isValid}
+                    errorText={genericFieldInfo.name.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    groupClassName="field-section"
+                    className="description-field"
+                    onChange={description =>
+                        onDataChanged({ description }, FG_EDITOR_FORM)
+                    }
+                    data-test-id="create-fg-description"
+                    label={i18n('Description')}
+                    value={description}
+                    name="feature-group-description"
+                    type="textarea"
+                    isValid={genericFieldInfo.description.isValid}
+                    errorText={genericFieldInfo.description.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2}>
+                <Input
+                    groupClassName="field-section"
+                    onChange={partNumber =>
+                        onDataChanged({ partNumber }, FG_EDITOR_FORM)
+                    }
+                    label={i18n('Part Number')}
+                    data-test-id="create-fg-part-number"
+                    value={partNumber}
+                    isRequired={true}
+                    type="text"
+                    isValid={genericFieldInfo.partNumber.isValid}
+                    errorText={genericFieldInfo.partNumber.errorText}
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    groupClassName="field-section"
+                    onChange={manufacturerReferenceNumber =>
+                        onDataChanged(
+                            { manufacturerReferenceNumber },
+                            FG_EDITOR_FORM
+                        )
+                    }
+                    label={i18n('Manufacturer Reference Number')}
+                    data-test-id="create-fg-reference-number"
+                    value={manufacturerReferenceNumber}
+                    isRequired={true}
+                    type="text"
+                    isValid={
+                        genericFieldInfo.manufacturerReferenceNumber.isValid
+                    }
+                    errorText={
+                        genericFieldInfo.manufacturerReferenceNumber.errorText
+                    }
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
-const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => {
-	const dualBoxFilterTitle = {
-		left: i18n('Available Entitlement Pools'),
-		right: i18n('Selected Entitlement Pools')
-	};
-	if (entitlementPoolsList.length > 0) {
-		return (
-			<DualListboxView
-				isReadOnlyMode={isReadOnlyMode}
-				filterTitle={dualBoxFilterTitle}
-				selectedValuesList={data.entitlementPoolsIds}
-				availableList={entitlementPoolsList}
-				onChange={ selectedValuesList => onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
-		);
-	} else {
-		return (
-			<p>{i18n('There are no available entitlement pools')}</p>
-		);
-	}
+const EntitlementPoolsTab = ({
+    entitlementPoolsList,
+    data,
+    onDataChanged,
+    isReadOnlyMode
+}) => {
+    const dualBoxFilterTitle = {
+        left: i18n('Available Entitlement Pools'),
+        right: i18n('Selected Entitlement Pools')
+    };
+    if (entitlementPoolsList.length > 0) {
+        return (
+            <DualListboxView
+                isReadOnlyMode={isReadOnlyMode}
+                filterTitle={dualBoxFilterTitle}
+                selectedValuesList={data.entitlementPoolsIds}
+                availableList={entitlementPoolsList}
+                onChange={selectedValuesList =>
+                    onDataChanged(
+                        { entitlementPoolsIds: selectedValuesList },
+                        FG_EDITOR_FORM
+                    )
+                }
+            />
+        );
+    } else {
+        return <p>{i18n('There are no available entitlement pools')}</p>;
+    }
 };
 
-const LKGTab = ({licenseKeyGroupsList, data, onDataChanged, isReadOnlyMode}) => {
-	const dualBoxFilterTitle = {
-		left: i18n('Available License Key Groups'),
-		right: i18n('Selected License Key Groups')
-	};
-	if (licenseKeyGroupsList.length > 0) {
-		return (
-			<DualListboxView
-				isReadOnlyMode={isReadOnlyMode}
-				filterTitle={dualBoxFilterTitle}
-				selectedValuesList={data.licenseKeyGroupsIds}
-				availableList={licenseKeyGroupsList}
-				onChange={ selectedValuesList => onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
-		);
-	} else {
-		return (
-			<p>{i18n('There are no available license key groups')}</p>
-		);
-	}
+const LKGTab = ({
+    licenseKeyGroupsList,
+    data,
+    onDataChanged,
+    isReadOnlyMode
+}) => {
+    const dualBoxFilterTitle = {
+        left: i18n('Available License Key Groups'),
+        right: i18n('Selected License Key Groups')
+    };
+    if (licenseKeyGroupsList.length > 0) {
+        return (
+            <DualListboxView
+                isReadOnlyMode={isReadOnlyMode}
+                filterTitle={dualBoxFilterTitle}
+                selectedValuesList={data.licenseKeyGroupsIds}
+                availableList={licenseKeyGroupsList}
+                onChange={selectedValuesList =>
+                    onDataChanged(
+                        { licenseKeyGroupsIds: selectedValuesList },
+                        FG_EDITOR_FORM
+                    )
+                }
+            />
+        );
+    } else {
+        return <p>{i18n('There are no available license key groups')}</p>;
+    }
 };
 
 class FeatureGroupEditorView extends React.Component {
+    static propTypes = {
+        data: FeatureGroupsPropType,
+        previousData: FeatureGroupsPropType,
+        isReadOnlyMode: PropTypes.bool,
+        FGNames: PropTypes.object,
 
+        onSubmit: PropTypes.func,
+        onCancel: PropTypes.func,
 
-	static propTypes = {
-		data: FeatureGroupsPropType,
-		previousData: FeatureGroupsPropType,
-		isReadOnlyMode: PropTypes.bool,
-		FGNames: PropTypes.object,
-
-		onSubmit: PropTypes.func,
-		onCancel: PropTypes.func,
-
-		selectedTab: PropTypes.number,
-		onTabSelect: PropTypes.func,
-
-		entitlementPoolsList: DualListboxView.propTypes.availableList,
-		licenseKeyGroupsList: DualListboxView.propTypes.availableList
-	};
-
-
-	static defaultProps = {
-		data: {},
-		selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
-	};
-
-	state = {
-		localEntitlementPoolsListFilter: '',
-		localLicenseKeyGroupsListFilter: ''
-	};
-
-
-	render() {
-		let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props;
-		return (
-			<div>
-			{ genericFieldInfo && <Form
-				ref='validationForm'
-				hasButtons={true}
-				onSubmit={ () => this.submit() }
-				isValid={this.props.isFormValid}
-				formReady={this.props.formReady}
-				onValidateForm={() => this.props.onValidateForm(FG_EDITOR_FORM) }
-				onReset={ () => this.props.onCancel() }
-				labledButtons={true}
-				isReadOnlyMode={isReadOnlyMode}
-				name='feature-group-validation-form'
-				className='license-model-form feature-group-form'>
-				<Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={invalidTabs} id='vlmFGValTabs' >
-					<Tab tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')}  >
-						<fieldset disabled={isReadOnlyMode}>
-							<GeneralTab data={data} onDataChanged={onDataChanged} genericFieldInfo={genericFieldInfo}  validateName={(value)=> this.validateName(value)}/>
-						</fieldset>
-					</Tab>
-					<Tab
-						tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
-						title={i18n('Entitlement Pools')} >
-						<fieldset disabled={isReadOnlyMode}>
-							<EntitlementPoolsTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} entitlementPoolsList={entitlementPoolsList} />
-						</fieldset>
-					</Tab>
-					<Tab
-						tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENSE_KEY_GROUPS}
-						title={i18n('License Key Groups')} >
-						<fieldset disabled={isReadOnlyMode}>
-							<LKGTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} licenseKeyGroupsList={licenseKeyGroupsList} />
-						</fieldset>
-					</Tab>
-				</Tabs>
-
-				</Form> }
-			</div>
-		);
-	}
-
-	submit() {
-		const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
-		this.props.onSubmit(previousFeatureGroup, featureGroup);
-	}
-
-	validateName(value) {
-		const {data: {id}, FGNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: FGNames});
-
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('Feature group by the name \'' + value + '\' already exists. Feature group name must be unique')};
-	}
-}
+        selectedTab: PropTypes.number,
+        onTabSelect: PropTypes.func,
+
+        entitlementPoolsList: DualListboxView.propTypes.availableList,
+        licenseKeyGroupsList: DualListboxView.propTypes.availableList
+    };
+
+    static defaultProps = {
+        data: {},
+        selectedTab:
+            FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
+    };
+
+    state = {
+        localEntitlementPoolsListFilter: '',
+        localLicenseKeyGroupsListFilter: ''
+    };
 
+    render() {
+        let {
+            selectedTab,
+            onTabSelect,
+            isReadOnlyMode,
+            invalidTabs,
+            data,
+            onDataChanged,
+            genericFieldInfo,
+            entitlementPoolsList,
+            licenseKeyGroupsList
+        } = this.props;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        ref="validationForm"
+                        hasButtons={true}
+                        onSubmit={() => this.submit()}
+                        isValid={this.props.isFormValid}
+                        formReady={this.props.formReady}
+                        onValidateForm={() =>
+                            this.props.onValidateForm(FG_EDITOR_FORM)
+                        }
+                        onReset={() => this.props.onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        name="feature-group-validation-form"
+                        className="license-model-form feature-group-form">
+                        <Tabs
+                            activeTab={onTabSelect ? selectedTab : undefined}
+                            onTabClick={onTabSelect}
+                            invalidTabs={invalidTabs}
+                            id="vlmFGValTabs">
+                            <Tab
+                                tabId={
+                                    FeatureGroupStateConstants
+                                        .SELECTED_FEATURE_GROUP_TAB.GENERAL
+                                }
+                                title={i18n('General')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    <GeneralTab
+                                        data={data}
+                                        onDataChanged={onDataChanged}
+                                        genericFieldInfo={genericFieldInfo}
+                                        validateName={value =>
+                                            this.validateName(value)
+                                        }
+                                    />
+                                </fieldset>
+                            </Tab>
+                            <Tab
+                                tabId={
+                                    FeatureGroupStateConstants
+                                        .SELECTED_FEATURE_GROUP_TAB
+                                        .ENTITLEMENT_POOLS
+                                }
+                                title={i18n('Entitlement Pools')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    <EntitlementPoolsTab
+                                        isReadOnlyMode={isReadOnlyMode}
+                                        data={data}
+                                        onDataChanged={onDataChanged}
+                                        entitlementPoolsList={
+                                            entitlementPoolsList
+                                        }
+                                    />
+                                </fieldset>
+                            </Tab>
+                            <Tab
+                                tabId={
+                                    FeatureGroupStateConstants
+                                        .SELECTED_FEATURE_GROUP_TAB
+                                        .LICENSE_KEY_GROUPS
+                                }
+                                title={i18n('License Key Groups')}>
+                                <fieldset disabled={isReadOnlyMode}>
+                                    <LKGTab
+                                        isReadOnlyMode={isReadOnlyMode}
+                                        data={data}
+                                        onDataChanged={onDataChanged}
+                                        licenseKeyGroupsList={
+                                            licenseKeyGroupsList
+                                        }
+                                    />
+                                </fieldset>
+                            </Tab>
+                        </Tabs>
+                    </Form>
+                )}
+            </div>
+        );
+    }
+
+    submit() {
+        const {
+            data: featureGroup,
+            previousData: previousFeatureGroup
+        } = this.props;
+        this.props.onSubmit(previousFeatureGroup, featureGroup);
+    }
+
+    validateName(value) {
+        const { data: { id }, FGNames } = this.props;
+        const isExists = Validator.isItemNameAlreadyExistsInList({
+            itemId: id,
+            itemName: value,
+            list: FGNames
+        });
+
+        return !isExists
+            ? { isValid: true, errorText: '' }
+            : {
+                  isValid: false,
+                  errorText: i18n(
+                      "Feature group by the name '" +
+                          value +
+                          "' already exists. Feature group name must be unique"
+                  )
+              };
+    }
+}
 
 export default FeatureGroupEditorView;