add About page to console to show versions info (#2334)

console/.eslintrc

@@ -100,6 +100,7 @@
     "__DISABLE_SSR__": true,
     "__DEVTOOLS__": true,
     "socket": true,
-    "webpackIsomorphicTools": true
+    "webpackIsomorphicTools": true,
+    "CONSOLE_ASSET_VERSION":  true
   }
 }

console/src/Globals.js

@@ -44,6 +44,7 @@ const globals = {
     window.__env.nodeEnv !== 'development' ? 'console' : 'console_test',
   assetsPath: window.__env.assetsPath,
   serverVersion: window.__env.serverVersion,
+  consoleAssetVersion: CONSOLE_ASSET_VERSION,
   featuresCompatibility: window.__env.serverVersion
     ? getFeaturesCompatibility(window.__env.serverVersion)
     : null,
@@ -57,6 +58,7 @@ if (!window.__env.urlPrefix) {
 if (!window.__env.consoleMode) {
   globals.consoleMode = SERVER_CONSOLE_MODE;
 }
+
 if (!globals.adminSecret) {
   globals.adminSecret = null;
 }

console/src/components/Main/Main.js

@@ -162,7 +162,8 @@ class Main extends React.Component {
     const github = require('./images/Github.svg');
     const discord = require('./images/Discord.svg');
     const mail = require('./images/mail.svg');
-    const docs = require('./images/logo.svg');
+    const docs = require('./images/docs-logo.svg');
+    const about = require('./images/console-logo.svg');
     const pixHeart = require('./images/pix-heart.svg');
 
     const currentLocation = location.pathname;
@@ -604,6 +605,16 @@ class Main extends React.Component {
                         <span>Head to docs</span>
                       </a>
                     </li>
+                    <li className={'dropdown-item'}>
+                      <Link to="/about">
+                        <img
+                          className={'img-responsive'}
+                          src={about}
+                          alt={'about'}
+                        />
+                        <span>About</span>
+                      </Link>
+                    </li>
                   </div>
                 </ul>
               </div>

console/src/components/Services/About/About.js

@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+
+import Endpoints from '../../../Endpoints';
+
+import globals from '../../../Globals';
+
+import styles from './About.scss';
+
+class About extends Component {
+  state = {
+    serverVersion: null,
+    latestServerVersion: null,
+    consoleAssetVersion: globals.consoleAssetVersion,
+  };
+
+  componentDidMount() {
+    fetch(Endpoints.version)
+      .then(response => response.json())
+      .then(serverVersion =>
+        this.setState({
+          serverVersion: serverVersion.version,
+        })
+      );
+
+    fetch(Endpoints.updateCheck)
+      .then(response => response.json())
+      .then(latest =>
+        this.setState({
+          latestServerVersion: latest.latest,
+        })
+      );
+  }
+
+  render() {
+    const {
+      serverVersion,
+      latestServerVersion,
+      consoleAssetVersion,
+    } = this.state;
+
+    const spinner = <i className="fa fa-spinner fa-spin" />;
+
+    const getServerVersionSection = () => {
+      return (
+        <div>
+          <b>Server version: </b>
+          <span className={styles.add_mar_left_mid}>
+            {serverVersion || spinner}
+          </span>
+        </div>
+      );
+    };
+
+    const getLatestServerVersionSection = () => {
+      let updateLinks;
+      if (
+        serverVersion &&
+        latestServerVersion &&
+        serverVersion !== latestServerVersion
+      ) {
+        updateLinks = (
+          <span className={styles.add_mar_left_mid}>
+            <a
+              href={
+                'https://github.com/hasura/graphql-engine/releases/tag/' +
+                latestServerVersion
+              }
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span>
+                <i>View Changelog</i>
+              </span>
+            </a>
+            <span>
+              &nbsp;<b>&middot;</b>&nbsp;
+            </span>
+            <a
+              href="https://docs.hasura.io/1.0/graphql/manual/deployment/updating.html"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span>
+                <i>Update Now</i>
+              </span>
+            </a>
+          </span>
+        );
+      }
+
+      return (
+        <div>
+          <b>Latest server version: </b>
+          <span className={styles.add_mar_left_mid}>
+            {latestServerVersion || spinner} {updateLinks}
+          </span>
+        </div>
+      );
+    };
+
+    const getConsoleAssetVersionSection = () => {
+      return (
+        <div>
+          <b>Console asset version: </b>
+          <span className={styles.add_mar_left_mid}>
+            {consoleAssetVersion || 'NA'}
+          </span>
+        </div>
+      );
+    };
+
+    return (
+      <div
+        className={`container-fluid ${styles.add_mar_top}  ${styles.add_mar_left}`}
+      >
+        <div className={styles.subHeader}>
+          <h2 className={`${styles.heading_text} ${styles.remove_pad_bottom}`}>
+            About
+          </h2>
+          <div className={styles.wd60}>
+            <div className={styles.add_mar_top}>
+              {getServerVersionSection()}
+            </div>
+            <div className={styles.add_mar_top}>
+              {getLatestServerVersionSection()}
+            </div>
+            <div className={styles.add_mar_top}>
+              {getConsoleAssetVersionSection()}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = () => {
+  return {};
+};
+
+const aboutConnector = connect => connect(mapStateToProps)(About);
+
+export default aboutConnector;

console/src/components/Services/About/About.scss

@@ -0,0 +1,3 @@
+@import "../../Common/Common.scss";
+
+

console/src/components/Services/Data/TablePermissions/PermissionBuilder/PermissionBuilder.js

@@ -455,7 +455,9 @@ class PermissionBuilder extends React.Component {
         input = inputBox();
         suggestion = jsonSuggestion();
       } else if (valueType === 'column') {
-        input = renderSelect(dispatchInput, value, tableColumns);
+        input = wrapDoubleQuotes(
+          renderSelect(dispatchInput, value, tableColumns)
+        );
       } else {
         input = wrapDoubleQuotes(inputBox());
         suggestion = sessionVariableSuggestion();

console/src/components/Services/Metadata/Sidebar.js

@@ -33,7 +33,7 @@ const Sidebar = ({ location, metadata }) => {
   sectionsData.push({
     key: 'allowed-queries',
     link: '/metadata/allowed-queries',
-    dataTestVal: 'metadata-allowed-queries-link',
+    dataTestVal: 'allowed-queries-link',
     title: 'Allowed Queries',
   });
 

console/src/components/VoyagerView/VoyagerView.js → console/src/components/Services/VoyagerView/VoyagerView.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { GraphQLVoyager } from 'graphql-voyager';
 import fetch from 'isomorphic-fetch';
-import Endpoints from '../../Endpoints';
-import '../../../node_modules/graphql-voyager/dist/voyager.css';
+import Endpoints from '../../../Endpoints';
+import '../../../../node_modules/graphql-voyager/dist/voyager.css';
 import './voyagerView.css';
 
 class VoyagerView extends Component {

console/src/routes.js

@@ -21,9 +21,11 @@ import { getCustomResolverRouter } from './components/Services/CustomResolver';
 
 import generatedApiExplorer from './components/Services/ApiExplorer/ApiExplorerGenerator';
 
-import generatedLoginConnector from './components/Login/Login';
+import generatedVoyagerConnector from './components/Services/VoyagerView/VoyagerView';
+
+import about from './components/Services/About/About';
 
-import generatedVoyagerConnector from './components/VoyagerView/VoyagerView';
+import generatedLoginConnector from './components/Login/Login';
 
 import metadataContainer from './components/Services/Metadata/Container';
 import metadataOptionsContainer from './components/Services/Metadata/MetadataOptions/MetadataOptions';
@@ -91,14 +93,15 @@ const routes = store => {
       >
         <Route path="">
           <IndexRoute component={generatedApiExplorer(connect)} />
-          <Route
-            path="voyager-view"
-            component={generatedVoyagerConnector(connect)}
-          />
           <Route
             path="api-explorer"
             component={generatedApiExplorer(connect)}
           />
+          <Route
+            path="voyager-view"
+            component={generatedVoyagerConnector(connect)}
+          />
+          <Route path="about" component={about(connect)} />
           <Route path="metadata" component={metadataContainer(connect)}>
             <IndexRedirect to="actions" />
             <Route path="status" component={metadataStatusContainer(connect)} />

console/webpack/dev.config.js

@@ -20,6 +20,12 @@ const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
 
 // const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin');
 
+const getRandomHexString = () => {
+  return Math.random()
+    .toString(16)
+    .slice(2);
+};
+
 module.exports = {
   mode: 'development',
   devtool: 'inline-source-map',
@@ -147,6 +153,10 @@ module.exports = {
       __DEVELOPMENT__: true,
       __DEVTOOLS__: true, // <-------- DISABLE redux-devtools HERE
     }),
+    // set global consts
+    new webpack.DefinePlugin({
+      CONSOLE_ASSET_VERSION: JSON.stringify(getRandomHexString()),
+    }),
     webpackIsomorphicToolsPlugin.development(),
   ],
 };

console/webpack/prod.config.js

@@ -22,6 +22,12 @@ const cleanOptions = {
   dry: false,
 };
 
+const getRandomHexString = () => {
+  return Math.random()
+    .toString(16)
+    .slice(2);
+};
+
 module.exports = {
   mode: 'production',
   context: path.resolve(__dirname, '..'),
@@ -187,6 +193,7 @@ module.exports = {
         // Useful to reduce the size of client-side libraries, e.g. react
         NODE_ENV: JSON.stringify('production'),
       },
+      CONSOLE_ASSET_VERSION: JSON.stringify(getRandomHexString()),
     }),
   ],
 };