hasura · shahidhk · Oct 9, 2018 · Oct 6, 2018 · Oct 8, 2018 · Oct 8, 2018
@@ -29,7 +29,6 @@ To run the tests for the modules individually (say for create table),
 
 - Go to the `cypress.json` and set the `env > TEST_MODE` variable to `ui`.
 
-
 ```
 {
     "env": {

@@ -35,24 +35,27 @@ class Main extends React.Component {
     dispatch(loadServerVersion()).then(() => {
       dispatch(checkServerUpdates()).then(() => {
         let isUpdateAvailable = false;
-        let showEvents = false;
         try {
-          showEvents = semver.gt(this.props.serverVersion, '1.0.0-alpha15');
-          if (showEvents) {
+          if (
+            semver.valid(this.props.serverVersion) === null ||
+            semver.gt(this.props.serverVersion, '1.0.0-alpha15')
+          ) {
             this.setState({ showEvents: true });
-          }
-          isUpdateAvailable = semver.gt(
-            this.props.latestServerVersion,
-            this.props.serverVersion
-          );
-          const isClosedBefore = window.localStorage.getItem(
-            this.props.latestServerVersion + '_BANNER_NOTIFICATION_CLOSED'
-          );
-          if (isClosedBefore === 'true') {
-            isUpdateAvailable = false;
-            this.setState({ showBannerNotification: false });
           } else {
-            this.setState({ showBannerNotification: isUpdateAvailable });
+            this.setState({ showEvents: false });
+            isUpdateAvailable = semver.gt(
+              this.props.latestServerVersion,
+              this.props.serverVersion
+            );
+            const isClosedBefore = window.localStorage.getItem(
+              this.props.latestServerVersion + '_BANNER_NOTIFICATION_CLOSED'
+            );
+            if (isClosedBefore === 'true') {
+              isUpdateAvailable = false;
+              this.setState({ showBannerNotification: false });
+            } else {
+              this.setState({ showBannerNotification: isUpdateAvailable });
+            }
           }
         } catch (e) {
           console.error(e);
@@ -428,7 +431,8 @@ class Main extends React.Component {
           <div className={styles.main + ' container-fluid'}>{mainContent}</div>
           {this.state.showBannerNotification ? (
             <div>
-              <div className={styles.phantom} /> {/* phantom div to prevent overlapping of banner with content. */}
+              <div className={styles.phantom} />{' '}
+              {/* phantom div to prevent overlapping of banner with content. */}
               <div className={styles.updateBannerWrapper}>
                 <div className={styles.updateBanner}>
                   <span> Hey there! A new server version </span>

@@ -27,19 +27,27 @@ class Metadata extends Component {
     }
   }
   checkSemVer(version) {
-    let showMetadata = false;
     try {
-      showMetadata = semver.gt(version, '1.0.0-alpha16');
-      if (showMetadata) {
-        this.setState({ ...this.state, showMetadata: true });
+      // If version is invalid semver or current version is greater than 1.0.0-alpha16, display Reload Metadata button
+      if (
+        semver.valid(version) === null ||
+        semver.gt(version, '1.0.0-alpha16')
+      ) {
+        this.updateMetadataState(true);
       } else {
-        this.setState({ ...this.state, showMetadata: false });
+        this.updateMetadataState(false);
       }
     } catch (e) {
-      this.setState({ ...this.state, showMetadata: false });
+      this.updateMetadataState(false);
       console.error(e);
     }
   }
+  updateMetadataState(displayReloadMetadata) {
+    this.setState({
+      ...this.state,
+      showMetadata: displayReloadMetadata,
+    });
+  }
   render() {
     const styles = require('../TableCommon/Table.scss');
     const metaDataStyles = require('./Metadata.scss');
@@ -83,32 +91,32 @@ class Metadata extends Component {
 
         {this.state.showMetadata
           ? [
-              <div key="meta_data_1" className={metaDataStyles.intro_note}>
-                <h4>Reload metadata</h4>
-                <div className={metaDataStyles.content_width}>
+            <div key="meta_data_1" className={metaDataStyles.intro_note}>
+              <h4>Reload metadata</h4>
+              <div className={metaDataStyles.content_width}>
                   Refresh Hasura metadata, typically required if you have
                   changed the underlying postgres.
-                </div>
-              </div>,
-              <div key="meta_data_2">
-                <ReloadMetadata {...this.props} />
-              </div>,
-              <div
-                key="access_key_reset_1"
-                className={metaDataStyles.intro_note}
-              >
-                <h4>Clear access key (logout)</h4>
-                <div className={metaDataStyles.content_width}>
+              </div>
+            </div>,
+            <div key="meta_data_2">
+              <ReloadMetadata {...this.props} />
+            </div>,
+            <div
+              key="access_key_reset_1"
+              className={metaDataStyles.intro_note}
+            >
+              <h4>Clear access key (logout)</h4>
+              <div className={metaDataStyles.content_width}>
                   The console caches the access key (HASURA_GRAPHQL_ACCESS_KEY)
                   in the browser. You can clear this cache to force a prompt for
                   the access key when the console is accessed next using this
                   browser.
-                </div>
-              </div>,
-              <div key="access_key_reset_2">
-                <ClearAccessKey {...this.props} />
-              </div>,
-            ]
+              </div>
+            </div>,
+            <div key="access_key_reset_2">
+              <ClearAccessKey {...this.props} />
+            </div>,
+          ]
           : null}
       </div>
     );
-Original file line number
+Diff line change
@@ Expand Up @@
     - Go to the `cypress.json` and set the `env > TEST_MODE` variable to `ui`.
     ```
     {
         "env": {
@@ Expand Down @@