From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001 From: Einav Weiss Keidar Date: Tue, 20 Mar 2018 14:45:40 +0200 Subject: Adding Prettier and fixing up eslint version Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar --- .../LicenseKeyGroupsEditorView.jsx | 772 +++++++++++++-------- 1 file changed, 471 insertions(+), 301 deletions(-) (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx') 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 ( - - - 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'/> - - - {}} - 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} /> - - - 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' /> - - - { 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 => - ()) - } - - - - { - // 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 => - )} - - - - 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'/> - - - onDataChanged( - {startDate: startDate ? startDate.format(DATE_FORMAT) : ''}, - LKG_FORM_NAME, - {startDate: validateStartDate} - )} - isValid={genericFieldInfo.startDate.isValid} - errorText={genericFieldInfo.startDate.errorText} - selectsStart/> - - - { - 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/> - - - onDataChanged({increments}, LKG_FORM_NAME)} - label={i18n('Increments')} - value={increments} - data-test-id='create-ep-increments' - type='text'/> - - - ); +const LicenseKeyGroupFormContent = ({ + data, + onDataChanged, + genericFieldInfo, + validateName, + validateStartDate, + thresholdValueValidation +}) => { + let { + name, + description, + increments, + operationalScope, + type, + thresholdUnits, + thresholdValue, + startDate, + expiryDate + } = data; + return ( + + + + 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" + /> + + + {}} + 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} + /> + + + + 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" + /> + + + { + 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 => ( + + ))} + + + + { + // 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 => ( + + ) + )} + + + + + 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" + /> + + + + onDataChanged( + { + startDate: startDate + ? startDate.format(DATE_FORMAT) + : '' + }, + LKG_FORM_NAME, + { startDate: validateStartDate } + ) + } + isValid={genericFieldInfo.startDate.isValid} + errorText={genericFieldInfo.startDate.errorText} + selectsStart + /> + + + { + 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 + /> + + + + onDataChanged({ increments }, LKG_FORM_NAME) + } + label={i18n('Increments')} + value={increments} + data-test-id="create-ep-increments" + type="text" + /> + + + ); }; 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 ( -
- { - if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { - this.onAddLimit(); - } else { - this.setState({selectedTab: tabIndex}); - onCloseLimitEditor(); - this.setState({selectedLimit: ''}); - } - }} - invalidTabs={[]}> - - { genericFieldInfo && -
this.props.onValidateForm(LKG_FORM_NAME) } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - className='license-model-form license-key-groups-form'> - this.validateName(value)} - validateStartDate={(value, state)=> validateStartDate(value, state)} - thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/> - } + componentDidUpdate(prevProps) { + if ( + this.props.formReady && + this.props.formReady !== prevProps.formReady + ) { + // if form validation succeeded -> continue with submit + this.submit(); + } + } -
- - {selectedTab === tabIds.SP_LIMITS && - item.type === limitType.SERVICE_PROVIDER)} - selectedLimit={this.state.selectedLimit} - onCloseLimitEditor={() => this.onCloseLimitEditor()} - onSelectLimit={limit => this.onSelectLimit(limit)} - isReadOnlyMode={isReadOnlyMode} />} - - - {selectedTab === tabIds.VENDOR_LIMITS && - item.type === limitType.VENDOR)} - selectedLimit={this.state.selectedLimit} - onCloseLimitEditor={() => this.onCloseLimitEditor()} - onSelectLimit={limit => this.onSelectLimit(limit)} - isReadOnlyMode={isReadOnlyMode} />} - - {selectedTab !== tabIds.GENERAL ? - - : -
// Render empty div to not break tabs - } - + state = { + localFeatureGroupsListFilter: '', + selectedTab: tabIds.GENERAL, + selectedLimit: '' + }; - - {!this.state.selectedLimit && - - } - - -
+ render() { + let { + data = {}, + onDataChanged, + isReadOnlyMode, + onCloseLimitEditor, + genericFieldInfo, + limitsList = [] + } = this.props; + let { selectedTab } = this.state; + const isTabsDisabled = !data.id || !this.props.isFormValid; + return ( +
+ { + if (tabIndex === tabIds.ADD_LIMIT_BUTTON) { + this.onAddLimit(); + } else { + this.setState({ selectedTab: tabIndex }); + onCloseLimitEditor(); + this.setState({ selectedLimit: '' }); + } + }} + invalidTabs={[]}> + + {genericFieldInfo && ( +
+ this.props.onValidateForm(LKG_FORM_NAME) + } + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + className="license-model-form license-key-groups-form"> + + this.validateName(value) + } + validateStartDate={(value, state) => + validateStartDate(value, state) + } + thresholdValueValidation={(value, state) => + thresholdValueValidation(value, state) + } + /> + + )} +
+ + {selectedTab === tabIds.SP_LIMITS && ( + + item.type === limitType.SERVICE_PROVIDER + )} + selectedLimit={this.state.selectedLimit} + onCloseLimitEditor={() => + this.onCloseLimitEditor() + } + onSelectLimit={limit => + this.onSelectLimit(limit) + } + isReadOnlyMode={isReadOnlyMode} + /> + )} + + + {selectedTab === tabIds.VENDOR_LIMITS && ( + item.type === limitType.VENDOR + )} + selectedLimit={this.state.selectedLimit} + onCloseLimitEditor={() => + this.onCloseLimitEditor() + } + onSelectLimit={limit => + this.onSelectLimit(limit) + } + isReadOnlyMode={isReadOnlyMode} + /> + )} + + {selectedTab !== tabIds.GENERAL ? ( + + ) : ( +
+ ) // Render empty div to not break tabs + } + - ); - } + + {!this.state.selectedLimit && ( + + )} + + +
+ ); + } - 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; -- cgit 1.2.3-korg