fix(deploy): display validation result only after first submission

The green/red outline and the error message will be displayed only
after the user tries to deploy the diagram for the first time.
Then, the validation results will be displayed immediately on change
or blur.

Closes #1405

client/src/app/modals/deploy-diagram/View.js

@@ -53,8 +53,8 @@ class View extends PureComponent {
       initialValues,
       onClose,
       onDeploy,
-      onFocusChange,
-      validators
+      validators,
+      onFocusChange = noop
     } = this.props;
 
     const deployOpen = this.state.deployOpen;
@@ -191,7 +191,7 @@ function FormControl({
   label,
   onFocusChange,
   validated,
-  form: { touched, errors, isSubmitting },
+  form: { touched, errors, isSubmitting, submitCount },
   ...props
 }) {
   const { name } = field;
@@ -209,12 +209,12 @@ function FormControl({
           onBlur={ compose(onFocusChange, field.onBlur) }
           disabled={ isSubmitting }
           className={ validated && classnames({
-            valid: !errors[name] && touched[name],
-            invalid: errors[name] && touched[name]
+            valid: submitCount && !errors[name] && touched[name],
+            invalid: submitCount && errors[name] && touched[name]
           }) }
         />
 
-        { errors[name] && touched[name] ? (
+        { errors[name] && touched[name] && submitCount ? (
           <div className="hint error">{errors[name]}</div>
         ) : null}
 
@@ -303,3 +303,5 @@ function compose(...handlers) {
     handlers.forEach(handler => handler(...args));
   };
 }
+
+function noop() {}

client/src/app/modals/deploy-diagram/__tests__/DeployDiagramModalSpec.js

@@ -520,32 +520,95 @@ describe('<DeployDiagramModal>', function() {
 
   describe('<View>', function() {
 
+    let wrapper;
+
+    afterEach(function() {
+      wrapper && wrapper.unmount();
+    });
+
     it('should render', function() {
       shallow(<View />);
     });
 
 
     it('should render error message', function() {
       // given
-      const wrapper = mount(<View validators={ { auth: {} } } error={ 'Error message' } />);
+      wrapper = mount(<View validators={ { auth: {} } } error={ 'Error message' } />);
 
       // then
       expect(wrapper.find('.deploy-message.error')).to.have.lengthOf(1);
-
-      wrapper.unmount();
     });
 
 
     it('should render success message', function() {
       // given
-      const wrapper = mount(<View validators={ { auth: {} } } success={ 'Success message' } />);
+      wrapper = mount(<View validators={ { auth: {} } } success={ 'Success message' } />);
 
       // then
       expect(wrapper.find('.deploy-message.success')).to.have.lengthOf(1);
+    });
 
-      wrapper.unmount();
+
+    it('should not display validation error before first submit', function(done) {
+      // given
+      wrapper = mount(<View
+        initialValues={ { deploymentName: '' } }
+        validators={ { deploymentName: () => 'Error', auth: {} } }
+      />);
+
+      // when
+      const input = wrapper.find('input[name="deploymentName"]');
+      input.simulate('change', {
+        target: {
+          name: 'deploymentName',
+          value: ''
+        }
+      });
+
+      // then
+      nextTickExpect(done, () => expect(wrapper.find('.invalid')).to.have.lengthOf(0));
+    });
+
+
+    it('should display validation error after first submit', function(done) {
+      // given
+      wrapper = mount(<View
+        initialValues={ { deploymentName: '' } }
+        validators={ { deploymentName: () => 'Error', auth: {} } }
+      />);
+
+      const input = wrapper.find('input[name="deploymentName"]');
+      input.simulate('change', {
+        target: {
+          name: 'deploymentName',
+          value: ''
+        }
+      });
+
+      // when
+      wrapper.find('form').simulate('submit');
+
+      // then
+      nextTickExpect(done, () =>{
+        expect(wrapper.find('.valid')).to.have.lengthOf(1);
+      });
     });
 
   });
 
 });
+
+
+
+// helper
+function nextTickExpect(done, fn) {
+  process.nextTick(() => {
+    try {
+      fn();
+    } catch (error) {
+      return done(error);
+    }
+
+    done();
+  });
+}