humble beginnings with React components

client/.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "stage-2"],
+  "presets": ["env", "react", "stage-2"],
   "plugins": [
     "angularjs-annotate",
     "transform-object-assign",

client/.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
   settings: {
     "import/resolver": "webpack"
   },
+  parser: "babel-eslint",
   env: {
     "browser": true,
     "node": true
@@ -21,6 +22,7 @@ module.exports = {
     "no-multi-assign": "off",
     "no-lonely-if": "off",
     "consistent-return": "off",
+    "no-control-regex": "off",
     "max-len": ['error', 120, 2, {
       ignoreUrls: true,
       ignoreComments: false,

client/app/components/footer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { react2angular } from 'react2angular';
+
+class Footer extends React.Component {
+  render() {
+    const version = this.props.clientConfig.version;
+    const newVersionAvailable = this.props.clientConfig.newVersionAvailable && this.props.currentUser.isAdmin;
+    return (
+      <div id="footer">
+        <a href="http://redash.io">Redash</a> {version}{ <small><a href="https://version.redash.io/">(New Redash version available)</a></small> ? newVersionAvailable : ''}
+        &#8226;
+        <a href="https://redash.io/help/">Documentation</a>
+        &#8226;
+        <a href="http://github.com/getredash/redash">Contribute</a>
+      </div>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('footer', react2angular(Footer, [], ['clientConfig', 'currentUser']));
+}

client/app/components/footer/footer.html

@@ -1,7 +0,0 @@
-<div id="footer">
-    <a href="http://redash.io">Redash</a> <span ng-bind="$ctrl.version"></span> <small ng-if="$ctrl.newVersionAvailable" ng-cloak class="ng-cloak"><a href="https://version.redash.io/">(New Redash version available)</a></small>
-    &#8226;
-    <a href="https://redash.io/help/">Documentation</a>
-    &#8226;
-    <a href="http://github.com/getredash/redash">Contribute</a>
-</div>

client/app/components/footer/index.js

@@ -1,13 +0,0 @@
-import template from './footer.html';
-
-function controller(clientConfig, currentUser) {
-  this.version = clientConfig.version;
-  this.newVersionAvailable = clientConfig.newVersionAvailable && currentUser.isAdmin;
-}
-
-export default function init(ngModule) {
-  ngModule.component('footer', {
-    template,
-    controller,
-  });
-}

package.json

@@ -26,6 +26,9 @@
   },
   "homepage": "https://redash.io/",
   "dependencies": {
+    "@types/prop-types": "^15.5.2",
+    "@types/react": "^16.3.13",
+    "@types/react-dom": "^16.0.5",
     "angular": "~1.5.8",
     "angular-base64-upload": "^0.1.23",
     "angular-messages": "~1.5.8",
@@ -38,6 +41,7 @@
     "angular-ui-ace": "^0.2.3",
     "angular-ui-bootstrap": "^2.5.0",
     "angular-vs-repeat": "^1.1.7",
+    "babel-preset-react": "^6.24.1",
     "bootstrap": "^3.3.7",
     "brace": "^0.10.0",
     "chroma-js": "^1.3.6",
@@ -53,6 +57,7 @@
     "leaflet": "^1.2.0",
     "leaflet.markercluster": "^1.1.0",
     "leaflet-fullscreen": "^1.0.2",
+    "lodash": "^4.17.10",
     "markdown": "0.5.0",
     "material-design-iconic-font": "^2.2.0",
     "moment": "^2.19.3",
@@ -62,17 +67,25 @@
     "pace-progress": "git+https://github.com/getredash/pace.git",
     "pivottable": "^2.15.0",
     "plotly.js": "1.30.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react2angular": "^3.2.1",
     "ui-select": "^0.19.8",
     "underscore": "^1.8.3",
     "underscore.string": "^3.3.4"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.2",
     "babel-plugin-angularjs-annotate": "^0.8.2",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "copy-webpack-plugin": "^4.3.1",
     "css-loader": "^0.28.7",

webpack.config.js

@@ -29,11 +29,6 @@ const config = {
   resolve: {
     alias: {
       "@": appPath,
-      // Currently `lodash` is used only by `gridstack.js`, but it can work
-      // with `underscore` as well, so set an alias to avoid bundling both `lodash` and
-      // `underscore`. When adding new libraries, check if they can work
-      // with `underscore`, otherwise remove this line
-      lodash: "underscore"
     }
   },
   plugins: [