feat(deployment-tool): DefaultInputValidator

Closes #1709

client/src/plugins/camunda-plugin/deployment-tool/DeploymentConfigModal.js

@@ -38,12 +38,45 @@ export default class DeploymentConfigModal extends React.PureComponent {
     super(props);
 
     this.state = {
+      connectionState: {},
       isAuthNeeded: false
     };
 
     this.shouldCheckIfAuthNeeded = true;
   }
 
+  handleConnectionCheckStart = () => {
+    this.setConnectionState({
+      isValidating: true,
+      isValidated: false
+    });
+  }
+
+  handleConnectionChecked = (result) => {
+
+    const {
+      endpointErrors,
+      connectionError
+    } = result;
+
+    this.setConnectionState({
+      isValidating: false,
+      isValidated: true,
+      isValid: !hasKeys(endpointErrors) && !connectionError,
+      endpointErrors,
+      connectionError
+    });
+  }
+
+  setConnectionState(connectionState) {
+    this.setState({
+      connectionState: {
+        ...this.state.connectionState,
+        ...connectionState
+      }
+    });
+  }
+
   onClose = (action = 'cancel', data) => this.props.onClose(action, data);
 
   onCancel = () => this.onClose('cancel');
@@ -159,7 +192,9 @@ export default class DeploymentConfigModal extends React.PureComponent {
       validator,
       title,
       intro,
-      primaryAction
+      primaryAction,
+      saveCredential,
+      removeCredentials
     } = this.props;
 
     const {
@@ -177,6 +212,7 @@ export default class DeploymentConfigModal extends React.PureComponent {
         <Formik
           initialValues={ values }
           onSubmit={ onSubmit }
+          validateOnBlur={ false }
         >
           { form => (
             <form onSubmit={ form.handleSubmit }>
@@ -203,7 +239,9 @@ export default class DeploymentConfigModal extends React.PureComponent {
                       component={ TextInput }
                       label="Deployment Name"
                       fieldError={ fieldError }
-                      validate={ validator.validateDeploymentName }
+                      validate={ (value) => {
+                        return validator.validateDeploymentName(value, this.isOnBeforeSubmit);
+                      } }
                       autoFocus
                     />
 
@@ -246,7 +284,10 @@ export default class DeploymentConfigModal extends React.PureComponent {
                           name="endpoint.authType"
                           label="Authentication"
                           component={ Radio }
-                          onChange={ this.setAuthType(form) }
+                          onChange={ (event) => {
+                            form.handleChange(event);
+                            this.setAuthType(form);
+                          } }
                           values={
                             [
                               { value: AuthTypes.basic, label: 'HTTP Basic' },
@@ -263,15 +304,19 @@ export default class DeploymentConfigModal extends React.PureComponent {
                           name="endpoint.username"
                           component={ TextInput }
                           fieldError={ fieldError }
-                          validate={ validator.validateUsername }
+                          validate={ (value) => {
+                            return validator.validateUsername(value || '', this.isOnBeforeSubmit);
+                          } }
                           label="Username"
                         />
 
                         <Field
                           name="endpoint.password"
                           component={ TextInput }
                           fieldError={ fieldError }
-                          validate={ validator.validatePassword }
+                          validate={ (value) => {
+                            return validator.validatePassword(value || '', this.isOnBeforeSubmit);
+                          } }
                           label="Password"
                           type="password"
                         />
@@ -283,7 +328,9 @@ export default class DeploymentConfigModal extends React.PureComponent {
                         name="endpoint.token"
                         component={ TextInput }
                         fieldError={ fieldError }
-                        validate={ validator.validateToken }
+                        validate={ (value) => {
+                          return validator.validateToken(value || '', this.isOnBeforeSubmit);
+                        } }
                         label="Token"
                       />
                     )}
@@ -316,6 +363,7 @@ export default class DeploymentConfigModal extends React.PureComponent {
                   <button
                     type="submit"
                     className="btn btn-primary"
+                    disabled={ form.isSubmitting }
                     onClick={ () => {
 
                       // @oguz:
@@ -328,7 +376,6 @@ export default class DeploymentConfigModal extends React.PureComponent {
                         this.isOnBeforeSubmit = false;
                       });
                     } }
-                    disabled={ form.isSubmitting }
                   >
                     { primaryAction || 'Deploy' }
                   </button>

client/src/plugins/camunda-plugin/deployment-tool/validation/DefaultInputValidator.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+export default class DefaultInputValidator {
+
+  // This validator validates input fields:
+  //    Not initially
+  //    Only when the form is submitted
+  //
+  // This validator is also "forgiving", it means that
+  // once the user types anything on a non-validated field
+  // the error dissapears and won't be shown until the form
+  // is submitted again.
+
+  constructor(validateNonEmpty, text) {
+    this.validateNonEmpty = validateNonEmpty;
+    this.text = text;
+  }
+
+  _validate(value, forceRecheck) {
+    const { text, validateNonEmpty, cachedValidationResult } = this;
+
+    if (forceRecheck) {
+      const result = validateNonEmpty(value, text);
+      this.cachedValidationResult = result;
+      return result;
+    }
+    return cachedValidationResult;
+  }
+
+  validate(value, isOnBeforeSubmit) {
+
+    // always force validation before submit
+    if (isOnBeforeSubmit) {
+      this.cachedValue = value;
+      return this._validate(value, true);
+    }
+
+    // user is typing on the field
+    if (value !== this.cachedValue) {
+      this.cachedValue = value;
+      this.cachedValidationResult = null;
+      return null;
+    }
+
+    // user is not typing on the field.
+    if (value === this.cachedValue) {
+      return this._validate(value, false);
+    }
+
+    this.cachedValue = value;
+  }
+}

client/src/plugins/camunda-plugin/deployment-tool/validation/DeploymentConfigValidator.js

@@ -14,6 +14,8 @@ import CamundaAPI from '../../shared/CamundaAPI';
 
 import EndpointURLValidator from './EndpointURLValidator';
 
+import DefaultInputValidator from './DefaultInputValidator';
+
 export default class DeploymentConfigValidator {
 
   constructor() {
@@ -23,6 +25,26 @@ export default class DeploymentConfigValidator {
       this.validateConnectionWithoutCredentials
     );
 
+    this.deploymentNameValidator = new DefaultInputValidator(
+      this.validateNonEmpty,
+      'Deployment name must not be empty.'
+    );
+
+    this.usernameValidator = new DefaultInputValidator(
+      this.validateNonEmpty,
+      'Credentials are required to connect to the server.'
+    );
+
+    this.passwordValidator = new DefaultInputValidator(
+      this.validateNonEmpty,
+      'Credentials are required to connect to the server.'
+    );
+
+    this.tokenValidator = new DefaultInputValidator(
+      this.validateNonEmpty,
+      'Token must not be empty.'
+    );
+
     this.lastConnectionCheckID = 0;
   }
 
@@ -40,20 +62,20 @@ export default class DeploymentConfigValidator {
     return value ? null : message;
   }
 
-  validateDeploymentName = (value) => {
-    return this.validateNonEmpty(value, 'Deployment name must not be empty.');
+  validateDeploymentName = (value, isOnBeforeSubmit) => {
+    return this.deploymentNameValidator.validate(value, isOnBeforeSubmit);
   }
 
-  validateToken = (value) => {
-    return this.validateNonEmpty(value, 'Token must not be empty.');
+  validateToken = (value, isOnBeforeSubmit) => {
+    return this.tokenValidator.validate(value, isOnBeforeSubmit);
   }
 
-  validatePassword = (value) => {
-    return this.validateNonEmpty(value, 'Password must not be empty.');
+  validatePassword = (value, isOnBeforeSubmit) => {
+    return this.passwordValidator.validate(value, isOnBeforeSubmit);
   }
 
-  validateUsername = (value) => {
-    return this.validateNonEmpty(value, 'Username must not be empty.');
+  validateUsername = (value, isOnBeforeSubmit) => {
+    return this.usernameValidator.validate(value, isOnBeforeSubmit);
   }
 
   validateDeployment(deployment = {}) {
@@ -140,8 +162,10 @@ export default class DeploymentConfigValidator {
 
     return !hasKeys(errors);
   }
+
 }
 
+
 // helpers /////////////////
 
 function hasKeys(obj) {