Display frontend version (#3105)

* add git-revision-webpack-plugin

* configure git-revision-webpack-plugin

* add commit to footer

* rename version and commit to backendVersion and frontendVersion

* rename version and commit to backendVersion and frontendVersion

* disable lint error due to use of globals

* fix snapshot test

* read frontend version from VERSION file instead latest git revision

* directly require from version.json file instead of going through WebPack's DefinePlugin

* run snapshots

.circleci/update_version

@@ -3,3 +3,4 @@ VERSION=$(jq -r .version package.json)
 FULL_VERSION=$VERSION+b$CIRCLE_BUILD_NUM
 
 sed -ri "s/^__version__ = '([A-Za-z0-9.-]*)'/__version__ = '$FULL_VERSION'/" redash/__init__.py
+sed -i "s/dev/$CIRCLE_SHA1/" client/app/version.json

client/app/components/Footer.jsx

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 
 import { react2angular } from 'react2angular';
 
+import frontendVersion from '../version.json';
+
 export function Footer({ clientConfig, currentUser }) {
-  const version = clientConfig.version;
+  const backendVersion = clientConfig.version;
   const newVersionAvailable = clientConfig.newVersionAvailable && currentUser.isAdmin;
   const separator = ' \u2022 ';
 
@@ -19,7 +21,7 @@ export function Footer({ clientConfig, currentUser }) {
 
   return (
     <div id="footer">
-      <a href="https://redash.io">Redash</a> {version}
+      <a href="https://redash.io">Redash</a> {backendVersion} ({frontendVersion})
       {newVersionString}
       {separator}
       <a href="https://redash.io/help/">Documentation</a>

client/app/components/__snapshots__/Footer.test.js.snap

@@ -11,6 +11,9 @@ exports[`Footer renders 1`] = `
   </a>
    
   5.0.1
+   (
+  dev
+  )
   <small>
     <a
       href="https://version.redash.io/"

client/app/version.json

@@ -0,0 +1 @@
+"dev"

webpack.config.js

@@ -10,6 +10,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const LessPluginAutoPrefix = require("less-plugin-autoprefix");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
   .BundleAnalyzerPlugin;
+
 const path = require("path");
 
 const isProduction = process.env.NODE_ENV === "production";