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, 313 insertions, 232 deletions

diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
index 11b07ba9da..019b6a5c70 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
@@ -22,260 +22,341 @@ import Select from 'nfvo-components/input/SelectInput.jsx';
 import Overlay from 'react-bootstrap/lib/Overlay.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 
-export const other = {OTHER: 'Other'};
+export const other = { OTHER: 'Other' };
 
 class InputOptions extends React.Component {
+    static propTypes = {
+        values: PropTypes.arrayOf(
+            PropTypes.shape({
+                enum: PropTypes.string,
+                title: PropTypes.string
+            })
+        ),
+        isEnabledOther: PropTypes.bool,
+        label: PropTypes.string,
+        selectedValue: PropTypes.string,
+        multiSelectedEnum: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.array
+        ]),
+        selectedEnum: PropTypes.string,
+        otherValue: PropTypes.string,
+        overlayPos: PropTypes.string,
+        onEnumChange: PropTypes.func,
+        onOtherChange: PropTypes.func,
+        onBlur: PropTypes.func,
+        isRequired: PropTypes.bool,
+        isMultiSelect: PropTypes.bool,
+        isValid: PropTypes.bool,
+        disabled: PropTypes.bool
+    };
 
-	static propTypes = {
-		values: PropTypes.arrayOf(PropTypes.shape({
-			enum: PropTypes.string,
-			title: PropTypes.string
-		})),
-		isEnabledOther: PropTypes.bool,
-		label: PropTypes.string,
-		selectedValue: PropTypes.string,
-		multiSelectedEnum: PropTypes.oneOfType([
-			PropTypes.string,
-			PropTypes.array
-		]),
-		selectedEnum: PropTypes.string,
-		otherValue: PropTypes.string,
-		overlayPos: PropTypes.string,
-		onEnumChange: PropTypes.func,
-		onOtherChange: PropTypes.func,
-		onBlur: PropTypes.func,
-		isRequired: PropTypes.bool,
-		isMultiSelect: PropTypes.bool,
-		isValid: PropTypes.bool,
-		disabled: PropTypes.bool
-	};
+    state = {
+        otherInputDisabled: !this.props.otherValue
+    };
 
-	state = {
-		otherInputDisabled: !this.props.otherValue
-	};
+    oldProps = {
+        selectedEnum: '',
+        otherValue: '',
+        multiSelectedEnum: []
+    };
 
-	oldProps = {
-		selectedEnum: '',
-		otherValue: '',
-		multiSelectedEnum: []
-	};
+    render() {
+        let {
+            label,
+            isRequired,
+            values,
+            otherValue,
+            onOtherChange,
+            isMultiSelect,
+            onBlur,
+            multiSelectedEnum,
+            selectedEnum,
+            isValid,
+            children,
+            isReadOnlyMode
+        } = this.props;
+        const dataTestId = this.props['data-test-id']
+            ? { 'data-test-id': this.props['data-test-id'] }
+            : {};
+        let currentMultiSelectedEnum = [];
+        let currentSelectedEnum = '';
+        let otherInputDisabled =
+            (isMultiSelect &&
+                (multiSelectedEnum === undefined ||
+                    multiSelectedEnum.length === 0 ||
+                    multiSelectedEnum[0] !== other.OTHER)) ||
+            (!isMultiSelect &&
+                (selectedEnum === undefined || selectedEnum !== other.OTHER));
+        if (isMultiSelect) {
+            currentMultiSelectedEnum = multiSelectedEnum;
+            if (!otherInputDisabled) {
+                currentSelectedEnum = multiSelectedEnum
+                    ? multiSelectedEnum.toString()
+                    : undefined;
+            }
+        } else if (selectedEnum) {
+            currentSelectedEnum = selectedEnum;
+        }
+        if (!onBlur) {
+            onBlur = () => {};
+        }
 
-	render() {
-		let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, isValid, children, isReadOnlyMode} = this.props;
-		const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {};
-		let currentMultiSelectedEnum = [];
-		let currentSelectedEnum = '';
-		let otherInputDisabled = (isMultiSelect && (multiSelectedEnum === undefined || multiSelectedEnum.length === 0 || multiSelectedEnum[0] !== other.OTHER))
-			|| (!isMultiSelect && (selectedEnum === undefined || selectedEnum !== other.OTHER));
-		if (isMultiSelect) {
-			currentMultiSelectedEnum = multiSelectedEnum;
-			if(!otherInputDisabled) {
-				currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
-			}
-		}
-		else if(selectedEnum){
-			currentSelectedEnum = selectedEnum;
-		}
-		if (!onBlur) {
-			onBlur = () => {};
-		}
+        return (
+            <div className="validation-input-wrapper">
+                <div
+                    className={classNames('form-group', {
+                        required: isRequired,
+                        'has-error': !isValid
+                    })}>
+                    {label && <label className="control-label">{label}</label>}
+                    {isMultiSelect && otherInputDisabled ? (
+                        <Select
+                            {...dataTestId}
+                            ref={input => (this.input = input)}
+                            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': !isValid
+                            })}>
+                            <select
+                                {...dataTestId}
+                                ref={input => (this.input = input)}
+                                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>
 
-		return(
-			<div className='validation-input-wrapper' >
-				<div className={classNames('form-group', {'required' : isRequired, 'has-error' : !isValid})} >
-					{label && <label className='control-label'>{label}</label>}
-					{isMultiSelect && otherInputDisabled ?
-						<Select
-							{...dataTestId}
-							ref={(input) => this.input = input}
-							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' : !isValid})} >
-							<select
-								{...dataTestId}
-								ref={(input) => this.input = input}
-								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 =>
+                                    (this.otherValue = otherValue)
+                                }
+                                style={{
+                                    display: otherInputDisabled
+                                        ? 'none'
+                                        : 'block'
+                                }}
+                                disabled={
+                                    isReadOnlyMode ||
+                                    Boolean(this.props.disabled)
+                                }
+                                value={otherValue || ''}
+                                onBlur={() => onBlur()}
+                                onChange={() => this.changedOtherInput()}
+                            />
+                        </div>
+                    )}
+                </div>
+                {this.renderErrorOverlay()}
+            </div>
+        );
+    }
 
-							{!otherInputDisabled && <div className='input-options-separator'/>}
-							<input
-								className='form-control input-options-other'
-								placeholder={i18n('other')}
-								ref={(otherValue) => this.otherValue = otherValue}
-								style={{'display' : otherInputDisabled ? 'none' : 'block'}}
-								disabled={isReadOnlyMode || Boolean(this.props.disabled)}
-								value={otherValue || ''}
-								onBlur={() => onBlur()}
-								onChange={() => this.changedOtherInput()}/>
-						</div>
-					}
-					</div>
-				{ this.renderErrorOverlay() }
-			</div>
-		);
-	}
+    renderOptions(val, index) {
+        return (
+            <option key={index} value={val.enum}>
+                {val.title}
+            </option>
+        );
+    }
 
-	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;
+    }
 
+    renderErrorOverlay() {
+        let position = 'right';
+        const { errorText = '', isValid = true, type, overlayPos } = this.props;
 
-	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;
-	}
+        if (overlayPos) {
+            position = overlayPos;
+        } else if (
+            type === 'text' ||
+            type === 'email' ||
+            type === 'number' ||
+            type === 'password'
+        ) {
+            position = 'bottom';
+        }
 
-	renderErrorOverlay() {
-		let position = 'right';
-		const {errorText = '', isValid = true, type, overlayPos} = this.props;
+        return (
+            <Overlay
+                show={!isValid}
+                placement={position}
+                target={() => {
+                    let { otherInputDisabled } = this.state;
+                    let target = otherInputDisabled
+                        ? ReactDOM.findDOMNode(this.input)
+                        : ReactDOM.findDOMNode(this.otherValue);
+                    return target.offsetParent ? target : undefined;
+                }}
+                container={this}>
+                <Tooltip
+                    id={`error-${errorText.replace(' ', '-')}`}
+                    className="validation-error-message">
+                    {errorText}
+                </Tooltip>
+            </Overlay>
+        );
+    }
 
-		if (overlayPos) {
-			position = overlayPos;
-		}
-		else if (type === 'text'
-			|| type === 'email'
-			|| type === 'number'
-			|| type === 'password') {
-			position = 'bottom';
-		}
+    getValue() {
+        let res = '';
+        let { isMultiSelect } = this.props;
+        let { otherInputDisabled } = this.state;
 
-		return (
-			<Overlay
-				show={!isValid}
-				placement={position}
-				target={() => {
-					let {otherInputDisabled} = this.state;
-					let target = otherInputDisabled ? ReactDOM.findDOMNode(this.input) :  ReactDOM.findDOMNode(this.otherValue);
-					return target.offsetParent ? target : undefined;
-				}}
-				container={this}>
-				<Tooltip
-					id={`error-${errorText.replace(' ', '-')}`}
-					className='validation-error-message'>
-					{errorText}
-				</Tooltip>
-			</Overlay>
-		);
-	}
+        if (otherInputDisabled) {
+            res = isMultiSelect ? this.input.getValue() : this.input.value;
+        } else {
+            res = this.otherValue.value;
+        }
+        return res;
+    }
 
-	getValue() {
-		let res = '';
-		let {isMultiSelect} = this.props;
-		let {otherInputDisabled} = this.state;
+    enumChanged() {
+        let enumValue = this.input.value;
+        let {
+            onEnumChange,
+            onOtherChange,
+            isMultiSelect,
+            onChange
+        } = this.props;
+        this.setState({
+            otherInputDisabled:
+                !Boolean(onOtherChange) || enumValue !== other.OTHER
+        });
 
-		if (otherInputDisabled) {
-			res = isMultiSelect ? this.input.getValue() : this.input.value;
-		} else {
-			res = this.otherValue.value;
-		}
-		return res;
-	}
+        let value = isMultiSelect ? [enumValue] : enumValue;
+        if (onEnumChange) {
+            onEnumChange(value);
+        }
+        if (onChange) {
+            onChange(value);
+        }
+    }
 
-	enumChanged() {
-		let enumValue = this.input.value;
-		let {onEnumChange, onOtherChange, isMultiSelect, onChange} = this.props;
-		this.setState({
-			otherInputDisabled: !Boolean(onOtherChange) || enumValue !== other.OTHER
-		});
+    multiSelectEnumChanged(enumValue) {
+        let { onEnumChange, onOtherChange } = this.props;
+        let selectedValues = enumValue.map(enumVal => {
+            return enumVal.value;
+        });
 
-		let value = isMultiSelect ? [enumValue] : enumValue;
-		if (onEnumChange) {
-			onEnumChange(value);
-		}
-		if (onChange) {
-			onChange(value);
-		}
-	}
+        if (this.state.otherInputDisabled === false) {
+            selectedValues.shift();
+        } else if (selectedValues.includes(i18n(other.OTHER))) {
+            selectedValues = [i18n(other.OTHER)];
+        }
 
-	multiSelectEnumChanged(enumValue) {
-		let {onEnumChange, onOtherChange} = this.props;
-		let selectedValues = enumValue.map(enumVal => {
-			return enumVal.value;
-		});
+        this.setState({
+            otherInputDisabled:
+                !Boolean(onOtherChange) ||
+                !selectedValues.includes(i18n(other.OTHER))
+        });
+        onEnumChange(selectedValues);
+    }
 
-		if (this.state.otherInputDisabled === false) {
-			selectedValues.shift();
-		}
-		else if (selectedValues.includes(i18n(other.OTHER))) {
-			selectedValues = [i18n(other.OTHER)];
-		}
+    changedOtherInput() {
+        let { onOtherChange } = this.props;
+        onOtherChange(this.otherValue.value);
+    }
 
-		this.setState({
-			otherInputDisabled: !Boolean(onOtherChange) || !selectedValues.includes(i18n(other.OTHER))
-		});
-		onEnumChange(selectedValues);
-	}
-
-	changedOtherInput() {
-		let {onOtherChange} = this.props;
-		onOtherChange(this.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;
-	}
+    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;