Show validation error message at the top of the Add Cloud Connection popup

Auto-close modal if validation is successful.
Add 'Validating...' progress spinner inside 'Validating...' button.

src/components/AddCloudConnection/AddCloudConnection.js

@@ -258,14 +258,14 @@ class AddCloudConnection extends Reflux.Component {
 
     ConnectionsActions.validateConnection(endpoint, response => {
       let validation = response.data["validate-connection"]
-      this.setState({
-        endpointStatus: validation.valid ? endpointStatuses.SUCCESS : endpointStatuses.ERROR,
-      })
-
       if (validation.valid) {
         this.setState({ endpointStatus: endpointStatuses.SUCCESS })
+        this.handleSaveAndClose()
       } else {
-        this.setState({ endpointStatus: endpointStatuses.ERROR })
+        this.setState({
+          endpointStatus: endpointStatuses.ERROR,
+          errorMessage: validation.message,
+        })
       }
     }, () => {
       this.setState({ endpointStatus: endpointStatuses.ERROR })
@@ -618,31 +618,18 @@ class AddCloudConnection extends Reflux.Component {
   }
 
   renderEndpointStatus() {
-    let label = ''
-    let icon = ''
-
-    switch (this.state.endpointStatus) {
-      case endpointStatuses.VALIDATING:
-        label = 'Validating Endpoint...'
-        icon = 'spinner'
-        break
-      case endpointStatuses.ERROR:
-        label = 'Validation Failed'
-        icon = 'errorIcon'
-        break
-      case endpointStatuses.SUCCESS:
-        label = 'Endpoint is Valid'
-        icon = 'successIcon'
-        break
-      default:
+    if (this.state.endpointStatus === endpointStatuses.ERROR) {
+      return (
+        <div className={s.endpointStatus}>
+          <div className={s.endpointStatusIcon + ' errorIcon'}></div>
+          <div className={s.endpointStatusLabel}>
+            Validation Failed{this.state.errorMessage ? ': ' + this.state.errorMessage : ''}
+          </div>
+        </div>
+      )
     }
 
-    return (
-      <div className={s.endpointStatus}>
-        <div className={s.endpointStatusIcon + ' ' + icon}></div>
-        <div className={s.endpointStatusLabel}>{label}</div>
-      </div>
-    )
+    return null
   }
 
   renderButtons() {
@@ -650,6 +637,9 @@ class AddCloudConnection extends Reflux.Component {
       <button className={s.leftBtn + " gray"} onClick={(e) => this.handleBack(e)}>Back</button> :
       <button className={s.leftBtn + " gray"} onClick={(e) => this.handleCancel(e)}>Cancel</button>
 
+    let saveButtonContent = this.state.endpointStatus === endpointStatuses.VALIDATING ?
+      <span>Validating ... <div className="spinner"></div></span> : 'Save'
+
     let saveButton = this.state.endpointStatus === endpointStatuses.IDLE ||
       this.state.endpointStatus === endpointStatuses.ERROR ?
       <DropdownButton
@@ -661,10 +651,12 @@ class AddCloudConnection extends Reflux.Component {
         value={saveOptions.find(o => o.value === this.state.saveOption)}
       /> :
       <button
-        className={s.rightBtn + (this.state.endpointStatus === endpointStatuses.VALIDATING ? ' gray' : '')}
+        className={s.rightBtn}
         onClick={this.handleSaveAndClose.bind(this)}
         disabled={this.state.endpointStatus === endpointStatuses.VALIDATING}
-      >{this.state.endpointStatus === endpointStatuses.VALIDATING ? 'Validating...' : 'Save'}</button>
+      >
+        {saveButtonContent}
+      </button>
 
     return (
       <div className={s.buttons}>

src/components/AddCloudConnection/AddCloudConnection.scss

@@ -45,9 +45,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   .endpointStatus {
     display: flex;
     justify-content: center;
-    align-items: center;
-    margin-bottom: 32px;
-    height: 20px;
+    width: 336px;
+    margin: 0 auto 32px auto;
     .endpointStatusIcon {
       margin-right: 8px;
     }
@@ -94,7 +93,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   .buttons {
     padding-top: 16px;
     > * {
-      width: 242px;
+      width: 224px;
+      position: relative;
     }
     .leftBtn {
       float: left;
@@ -104,6 +104,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }
     &:after {
 
+    }
+    :global(.spinner) {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      border-top-color: white;
+      border-right-color: white;
+      border-bottom-color: white;
+      border-left-color: #7190CD;
     }
     .centerBtn {
       margin: 0 auto;
@@ -115,6 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     display: flex;
     flex-wrap: wrap;
     margin-left: -64px;
+    margin-top: 48px;
     &.radioFields {
       margin-left: 0;
     }
@@ -137,9 +147,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       }
 
     }
-    &.larger {
-      margin-top: 0px;
-    }
   }
   &:after {
     clear: both;

src/components/App/App.scss

@@ -524,7 +524,7 @@ button {
     animation: rotate 2s infinite linear;
   }
   .errorIcon {
-    width: 16px;
+    min-width: 16px;
     height: 16px;
     background-image: $error-icon;
   }