diff options
Diffstat (limited to 'openecomp-ui')
7 files changed, 45 insertions, 293 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/inputOptions/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/inputOptions/InputOptions.jsx deleted file mode 100644 index e8aadc4357..0000000000 --- a/openecomp-ui/src/nfvo-components/input/inputOptions/InputOptions.jsx +++ /dev/null @@ -1,246 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. - */ -import React from 'react'; -import i18n from 'nfvo-utils/i18n/i18n.js'; -import classNames from 'classnames'; -import Select from 'nfvo-components/input/SelectInput.jsx'; - -export const other = {OTHER: 'Other'}; - -class InputOptions extends React.Component { - - static propTypes = { - values: React.PropTypes.arrayOf(React.PropTypes.shape({ - enum: React.PropTypes.string, - title: React.PropTypes.string - })), - isEnabledOther: React.PropTypes.bool, - label: React.PropTypes.string, - selectedValue: React.PropTypes.string, - multiSelectedEnum: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.array - ]), - selectedEnum: React.PropTypes.string, - otherValue: React.PropTypes.string, - onEnumChange: React.PropTypes.func, - onOtherChange: React.PropTypes.func, - onBlur: React.PropTypes.func, - isRequired: React.PropTypes.bool, - isMultiSelect: React.PropTypes.bool, - hasError: React.PropTypes.bool, - disabled: React.PropTypes.bool - }; - - - static contextTypes = { - isReadOnlyMode: React.PropTypes.bool - }; - - state = { - otherInputDisabled: !this.props.otherValue - }; - - oldProps = { - selectedEnum: '', - otherValue: '', - multiSelectedEnum: [] - }; - - render() { - let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props; - const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {}; - let currentMultiSelectedEnum = []; - let currentSelectedEnum = ''; - let {otherInputDisabled} = this.state; - if (isMultiSelect) { - currentMultiSelectedEnum = multiSelectedEnum; - if(!otherInputDisabled) { - currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined; - } - } - else if(selectedEnum){ - currentSelectedEnum = selectedEnum; - } - if (!onBlur) { - onBlur = () => {}; - } - - let isReadOnlyMode = this.context.isReadOnlyMode; - - return( - <div className={classNames('form-group', {'required' : (validations && validations.required) || isRequired, 'has-error' : hasError})}> - {label && <label className='control-label'>{label}</label>} - {isMultiSelect && otherInputDisabled ? - <Select - {...dataTestId} - ref='_myInput' - value={currentMultiSelectedEnum} - className='options-input' - clearable={false} - required={isRequired} - disabled={isReadOnlyMode || Boolean(this.props.disabled)} - onBlur={() => onBlur()} - onMultiSelectChanged={value => this.multiSelectEnumChanged(value)} - options={this.renderMultiSelectOptions(values)} - multi/> : - <div className={classNames('input-options',{'has-error' : hasError})}> - <select - {...dataTestId} - ref={'_myInput'} - label={label} - className='form-control input-options-select' - value={currentSelectedEnum} - style={{'width' : otherInputDisabled ? '100%' : '100px'}} - onBlur={() => onBlur()} - disabled={isReadOnlyMode || Boolean(this.props.disabled)} - onChange={ value => this.enumChanged(value)} - type='select'> - {children || (values && values.length && values.map((val, index) => this.renderOptions(val, index)))} - {onOtherChange && <option key='other' value={other.OTHER}>{i18n(other.OTHER)}</option>} - </select> - - {!otherInputDisabled && <div className='input-options-separator'/>} - <input - className='form-control input-options-other' - placeholder={i18n('other')} - ref='_otherValue' - style={{'display' : otherInputDisabled ? 'none' : 'block'}} - disabled={isReadOnlyMode || Boolean(this.props.disabled)} - value={otherValue || ''} - onBlur={() => onBlur()} - onChange={() => this.changedOtherInput()}/> - </div> - } - </div> - ); - } - - renderOptions(val, index){ - return ( - <option key={index} value={val.enum}>{val.title}</option> - ); - } - - - renderMultiSelectOptions(values) { - let {onOtherChange} = this.props; - let optionsList = []; - if (onOtherChange) { - optionsList = values.map(option => { - return { - label: option.title, - value: option.enum, - }; - }).concat([{ - label: i18n(other.OTHER), - value: i18n(other.OTHER), - }]); - } - else { - optionsList = values.map(option => { - return { - label: option.title, - value: option.enum, - }; - }); - } - if (optionsList.length > 0 && optionsList[0].value === '') { - optionsList.shift(); - } - return optionsList; - } - - getValue() { - let res = ''; - let {isMultiSelect} = this.props; - let {otherInputDisabled} = this.state; - - if (otherInputDisabled) { - res = isMultiSelect ? this.refs._myInput.getValue() : this.refs._myInput.value; - } else { - res = this.refs._otherValue.value; - } - return res; - } - - enumChanged() { - let enumValue = this.refs._myInput.value; - let {onEnumChange, onOtherChange, isMultiSelect, onChange} = this.props; - this.setState({ - otherInputDisabled: !Boolean(onOtherChange) || enumValue !== other.OTHER - }); - - let value = isMultiSelect ? [enumValue] : enumValue; - if (onEnumChange) { - onEnumChange(value); - } - if (onChange) { - onChange(value); - } - } - - multiSelectEnumChanged(enumValue) { - let {onEnumChange, onOtherChange} = this.props; - let selectedValues = enumValue.map(enumVal => { - return enumVal.value; - }); - - if (this.state.otherInputDisabled === false) { - selectedValues.shift(); - } - else if (selectedValues.includes(i18n(other.OTHER))) { - selectedValues = [i18n(other.OTHER)]; - } - - this.setState({ - otherInputDisabled: !Boolean(onOtherChange) || !selectedValues.includes(i18n(other.OTHER)) - }); - onEnumChange(selectedValues); - } - - changedOtherInput() { - let {onOtherChange} = this.props; - onOtherChange(this.refs._otherValue.value); - } - - componentDidUpdate() { - let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props; - if (this.oldProps.otherValue !== otherValue - || this.oldProps.selectedEnum !== selectedEnum - || this.oldProps.multiSelectedEnum !== multiSelectedEnum) { - this.oldProps = { - otherValue, - selectedEnum, - multiSelectedEnum - }; - onInputChange(); - } - } - - static getTitleByName(values, name) { - for (let key of Object.keys(values)) { - let option = values[key].find(option => option.enum === name); - if (option) { - return option.title; - } - } - return name; - } - -} - -export default InputOptions; diff --git a/openecomp-ui/src/nfvo-utils/Validator.js b/openecomp-ui/src/nfvo-utils/Validator.js index 1df82a2ada..3f6a00e289 100644 --- a/openecomp-ui/src/nfvo-utils/Validator.js +++ b/openecomp-ui/src/nfvo-utils/Validator.js @@ -46,7 +46,25 @@ class Validator { email: value => ValidatorJS.isEmail(value), ip: value => ValidatorJS.isIP(value), url: value => ValidatorJS.isURL(value), - alphanumericWithUnderscores: value => ValidatorJS.isAlphanumeric(value.replace(/_/g, '')) + alphanumericWithUnderscores: value => ValidatorJS.isAlphanumeric(value.replace(/_/g, '')), + requiredChoiceWithOther: (value, otherValue) => { + let chosen = value.choice; + // if we have an empty multiple select we have a problem since it's required + let validationFunc = this.globalValidationFunctions['required']; + if (value.choices) { + if (value.choices.length === 0) { + return false; + } else { + // continuing validation with the first chosen value in case we have the 'Other' field + chosen = value.choices[0]; + } + } + if (chosen !== otherValue) { + return validationFunc(chosen, true); + } else { // when 'Other' was chosen, validate other value + return validationFunc(value.other, true); + } + } }; } @@ -54,6 +72,7 @@ class Validator { return { required: () => i18n('Field is required'), requiredChooseOption: () => i18n('Field should have one of these options'), + requiredChoiceWithOther: () => i18n('Field is required'), maxLength: (value, maxLength) => i18n('Field value has exceeded it\'s limit, {maxLength}. current length: {length}', { length: value.length, maxLength diff --git a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js index 2276984f7a..49f1e3d415 100644 --- a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js +++ b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js @@ -16,7 +16,7 @@ import {actionTypes} from './PlainDataReducerConstants.js'; import Validator from 'nfvo-utils/Validator.js'; import forOwn from 'lodash/forOwn.js'; -import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx'; +import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; function updateDataAndValidateReducer(state = {}, action) { let genericFieldInfoCopy; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js index 5be140550a..9cff2792ff 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import {actionTypes, defaultState, LA_EDITOR_FORM, enums as LicenseAgreementEnums} from './LicenseAgreementConstants.js'; +import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; export default (state = {}, action) => { switch (action.type) { @@ -38,7 +39,7 @@ export default (state = {}, action) => { 'licenseTerm' : { isValid: true, errorText: '', - validations: [{type: 'required', data: true}], + validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}], tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL }, 'name' : { diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx index a15e5daa4e..0b418686fd 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx @@ -21,9 +21,11 @@ import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx'; import Tabs from 'nfvo-components/input/validation/Tabs.jsx'; import Tab from 'sdc-ui/lib/react/Tab.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; +import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Validator from 'nfvo-utils/Validator.js'; +import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; import {enums as LicenseAgreementEnums, optionsInputValues as LicenseAgreementOptionsInputValues, LA_EDITOR_FORM} from './LicenseAgreementConstants.js'; @@ -43,7 +45,7 @@ const LicenseAgreementPropType = React.PropTypes.shape({ }); -const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName, validateLTChoice}) => { +const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName}) => { let {name, description, requirementsAndConstrains, licenseTerm} = data; return ( <GridSection> @@ -67,24 +69,22 @@ const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName, data-test-id='create-la-requirements-constants' name='license-agreement-requirements-and-constraints' type='textarea'/> - <Input + <InputOptions + onInputChange={()=>{}} + isMultiSelect={false} + onEnumChange={licenseTerm => onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}}, + LA_EDITOR_FORM)} + onOtherChange={licenseTerm => onDataChanged({licenseTerm:{choice: optionInputOther.OTHER, + other: licenseTerm}}, LA_EDITOR_FORM)} label={i18n('License Term')} - type='select' - value={licenseTerm && licenseTerm.choice} + data-test-id='create-la-license-term' isRequired={true} - onChange={e => { - const selectedIndex = e.target.selectedIndex; - const licenseTerm = e.target.options[selectedIndex].value; - onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}}, LA_EDITOR_FORM, { licenseTerm: validateLTChoice }); - }} + type='select' + selectedEnum={licenseTerm && licenseTerm.choice} + otherValue={licenseTerm && licenseTerm.other} + values={LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE} isValid={genericFieldInfo.licenseTerm.isValid} - errorText={genericFieldInfo.licenseTerm.errorText} - className='input-options-select' - groupClassName='bootstrap-input-options' - data-test-id='create-la-license-term' > - {LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> + errorText={genericFieldInfo.licenseTerm.errorText} /> </GridItem> <GridItem colSpan={2} stretch> <Input @@ -151,7 +151,7 @@ class LicenseAgreementEditorView extends React.Component { data-test-id='general-tab' title={i18n('General')}> <fieldset disabled={isReadOnlyMode}> - <GeneralTabContent data={data} genericFieldInfo={genericFieldInfo} onDataChanged={onDataChanged} validateLTChoice={(value)=>this.validateLTChoice(value)} + <GeneralTabContent data={data} genericFieldInfo={genericFieldInfo} onDataChanged={onDataChanged} validateName={(value)=>this.validateName(value)}/> </fieldset> </Tab> @@ -181,12 +181,6 @@ class LicenseAgreementEditorView extends React.Component { this.props.onSubmit({licenseAgreement, previousLicenseAgreement}); } - validateLTChoice(value) { - if (!value.choice) { - return {isValid: false, errorText: i18n('Field is required')}; - } - return {isValid: true, errorText: ''}; - } validateName(value) { const {data: {id}, LANames} = this.props; 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 5c4e50d673..d4b7e5c898 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx @@ -7,7 +7,7 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; 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/inputOptions/InputOptions.jsx'; +import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitPropType = React.PropTypes.shape({ @@ -96,9 +96,9 @@ class LimitEditor extends React.Component { isMultiSelect={false} isRequired={true} onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}}, - LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})} + LIMITS_FORM_NAME)} onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER, - other: metric}}, LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})} + other: metric}}, LIMITS_FORM_NAME)} label={i18n('Metric')} data-test-id='limit-editor-metric' type='select' @@ -196,23 +196,6 @@ class LimitEditor extends React.Component { {isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')}; } - validateChoiceWithOther(value) { - let chosen = value.choice; - // if we have an empty multiple select we have a problem since it's required - if (value.choices) { - if (value.choices.length === 0) { - return Validator.validate('field', '', [{type: 'required', data: true}]); - } else { - // continuing validation with the first chosen value in case we have the 'Other' field - chosen = value.choices[0]; - } - } - if (chosen !== optionInputOther.OTHER) { - return Validator.validate('field', chosen, [{type: 'required', data: true}]); - } else { // when 'Other' was chosen, validate other value - return Validator.validate('field', value.other, [{type: 'required', data: true}]); - } - } submit() { if (!this.props.formReady) { 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 de9e7c8c38..99d94a09cc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js @@ -15,6 +15,7 @@ */ 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) { @@ -38,7 +39,7 @@ export default (state = {}, action) => { 'metric' : { isValid: true, errorText: '', - validations: [] + validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}] }, 'value' : { isValid: true, |