Fixed all issues

client/app/components/ParameterMappingInput.jsx

@@ -311,9 +311,7 @@ class MappingEditor extends React.Component {
         inputError = 'A parameter with this name already exists';
       }
     } else if (mapping.type === MappingType.StaticValue) {
-      if (mapping.param.isEmpty) {
-        inputError = 'Required field';
-      }
+      inputError = mapping.param.currentValueValidationError;
     }
 
     this.setState({ mapping, inputError });

client/app/components/ParameterValueInput.jsx

@@ -143,13 +143,11 @@ class ParameterValueInput extends React.Component {
     const { className } = this.props;
     const { value } = this.state;
 
-    const normalize = val => (isNaN(val) ? undefined : val);
-
     return (
       <InputNumber
         className={className}
-        value={normalize(value)}
-        onChange={val => this.onSelect(normalize(val))}
+        value={value}
+        onChange={val => this.onSelect(val)}
       />
     );
   }

client/app/components/Parameters.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { size, filter, forEach, extend, some, trim } from 'lodash';
+import { size, filter, forEach, extend, some } from 'lodash';
 import { react2angular } from 'react2angular';
 import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
 import { $location } from '@/services/ng';
@@ -26,10 +26,6 @@ const SortableItem = sortableElement(({ className, parameterName, disabled, chil
 ));
 const SortableContainer = sortableContainer(({ children }) => children);
 
-function isPendingValueEmpty({ hasPendingValue, pendingValue }) {
-  return hasPendingValue ? trim(pendingValue) === '' : false;
-}
-
 function updateUrl(parameters) {
   const params = extend({}, $location.search());
   parameters.forEach((param) => {
@@ -143,7 +139,7 @@ export class Parameters extends React.Component {
 
   renderParameter(param, index) {
     const { editable } = this.props;
-    const isEmpty = param.hasPendingValue ? isPendingValueEmpty(param) : param.isEmpty;
+    const errorMessage = param.currentValueValidationError;
 
     return (
       <div
@@ -165,8 +161,8 @@ export class Parameters extends React.Component {
           )}
         </div>
         <Form.Item
-          validateStatus={isEmpty ? 'error' : ''}
-          help={isEmpty ? 'Required field' : null}
+          validateStatus={errorMessage ? 'error' : ''}
+          help={errorMessage || null}
         >
           <ParameterValueInput
             type={param.type}
@@ -186,7 +182,9 @@ export class Parameters extends React.Component {
     const { parameters, dragging } = this.state;
     const { editable } = this.props;
     const dirtyParamCount = size(filter(parameters, 'hasPendingValue'));
-    const canApplyChanges = !!dirtyParamCount && !some(parameters, isPendingValueEmpty);
+
+    // show apply button if there are any changes and all param values are valid
+    const canApplyChanges = !!dirtyParamCount && !some(parameters, p => p.currentValueValidationError !== null);
 
     return (
       <SortableContainer

client/app/services/parameters/NumberParameter.js

@@ -1,4 +1,4 @@
-import { toNumber, isNull } from 'lodash';
+import { toNumber, trim } from 'lodash';
 import { Parameter } from '.';
 
 class NumberParameter extends Parameter {
@@ -9,11 +9,16 @@ class NumberParameter extends Parameter {
 
   // eslint-disable-next-line class-methods-use-this
   normalizeValue(value) {
-    if (isNull(value)) {
+    if (!trim(value)) {
       return null;
     }
     const normalizedValue = toNumber(value);
-    return !isNaN(normalizedValue) ? normalizedValue : null;
+    return !isNaN(normalizedValue) ? normalizedValue : value;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isValueInvalid(value) {
+    return isNaN(value);
   }
 }
 

client/app/services/parameters/Parameter.js

@@ -69,6 +69,20 @@ class Parameter {
     return this.$$value;
   }
 
+  get currentValueValidationError() {
+    const value = this.hasPendingValue ? this.pendingValue : this.value;
+
+    if (this.isValueInvalid(value)) {
+      return 'Invalid value';
+    }
+
+    if (this.isEmptyValue(value)) {
+      return 'Required field';
+    }
+
+    return null;
+  }
+
   clone() {
     return Parameter.create(this, this.parentQueryId);
   }
@@ -77,6 +91,11 @@ class Parameter {
     return isNull(this.normalizeValue(value));
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  isValueInvalid() {
+    return false; // accepts any input
+  }
+
   // eslint-disable-next-line class-methods-use-this
   normalizeValue(value) {
     if (isUndefined(value)) {