Hide 'Show Error' link if validation request didn't respond with an error message

Move page header's z-index lower so that the Add Cloud Connection popup isn't behind it.

src/components/AddCloudConnection/AddCloudConnection.js

@@ -249,7 +249,7 @@ class AddCloudConnection extends Reflux.Component {
       } else {
         this.setState({
           endpointStatus: endpointStatuses.ERROR,
-          errorMessage: validation.message,
+          errorMessage: validation.message
         })
       }
     }, () => {
@@ -623,19 +623,27 @@ class AddCloudConnection extends Reflux.Component {
         onMouseDown={e => e.stopPropagation()}
         onMouseUp={e => e.stopPropagation()}
       >
-        <span className={s.endpointErrorMessageContent}>{this.state.errorMessage}</span>
-        <span className="copyButton" />
+        <span className={s.endpointErrorMessageContent}>
+          {this.state.errorMessage}<span className="copyButton" />
+        </span>
       </div>
     )
   }
 
   renderEndpointErrorTitle() {
-    return (
-      <div className={s.endpointErrorMessageTitle}>
-        <span className={s.endpointErrorMessageTitleContent}>Validation Failed</span>
+    let errorMessage = null
+    if (this.state.errorMessage) {
+      errorMessage = (
         <span className={s.ednpointErrorMessageViewMore}
           onClick={() => { this.handleShowErrorClick() }}
         >{this.state.showErrorMessage ? 'Hide Error' : 'Show Error'}</span>
+      )
+    }
+
+    return (
+      <div className={s.endpointErrorMessageTitle}>
+        <span className={s.endpointErrorMessageTitleContent}>Validation Failed</span>
+        {errorMessage}
       </div>
     )
   }

src/components/Header/Header.scss

@@ -26,8 +26,7 @@ $brand-color: #FFF;
   position: absolute;
   width: 100%;
   top: 0;
-  left: 0;
-  z-index: 9999;
+  z-index: 999;
   .bannerTitle {
     margin: 0;
     font-weight: $weight-light;