Migrate tc-web to neutrino v9 (#157)

* Use material's new typograpghy v2 variants

* Fix linting errors

* Add required changes after rebasing

* Regenerate yarn.lock with node 10

* Nits after rebasing on master

Author: helfi92

.eslintrc.js

@@ -1,5 +1,3 @@
-const { Neutrino } = require('neutrino');
+const neutrino = require('neutrino');
 
-module.exports = Neutrino({ root: __dirname })
-  .use('.neutrinorc')
-  .call('eslintrc');
+module.exports = neutrino().eslintrc();

.gitignore

@@ -8,3 +8,4 @@ node_modules
 /styleguide
 .coverage
 .DS_Store
+.eslintcache

.neutrinorc.js

@@ -1,37 +1,67 @@
-const { join } = require('path');
 const merge = require('deepmerge');
 
-require('babel-register')({
-  plugins: [
-    [require.resolve('babel-plugin-transform-es2015-modules-commonjs'), {
-      useBuiltIns: true
-    }],
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-  ],
-  cache: false,
-});
-
-const theme = require('./src/theme').default;
-
 module.exports = {
   use: [
-    ['neutrino-preset-mozilla-frontend-infra/styleguide', {
-      components: 'src/components/**/index.jsx',
-      theme: theme.styleguide,
-      styles: {
-        StyleGuide: theme.styleguide.StyleGuide,
-      },
-      editorConfig: {
-        theme: 'material',
-      },
-      showUsage: true,
-      skipComponentsWithoutExample: false,
-      styleguideComponents: {
-        Wrapper: join(__dirname, 'src/styleguide/ThemeWrapper.jsx'),
-        StyleGuideRenderer: join(__dirname, 'src/styleguide/StyleGuideRenderer.jsx'),
+    ['@neutrinojs/airbnb', {
+      eslint: {
+        parserOptions: {
+          ecmaFeatures: {
+            legacyDecorators: true
+          }
+        },
+        emitWarning: process.env.NODE_ENV === 'development',
+        baseConfig: {
+          extends: ['plugin:react/recommended', 'eslint-config-prettier'],
+        },
+        envs: ['worker', 'serviceworker'],
+        plugins: ['prettier'],
+        rules: {
+          'react/jsx-wrap-multilines': 'off',
+          'react/prop-types': 'off',
+          'react/jsx-one-expression-per-line': 'off',
+          'react/forbid-prop-types': 'off',
+          'react/prefer-stateless-function': 'off',
+          'react/no-access-state-in-setstate': 'off',
+          'react/destructuring-assignment': 'off',
+          'babel/no-unused-expressions': 'off',
+          'import/no-extraneous-dependencies': 'off',
+          // Specify the maximum length of a line in your program
+          'max-len': [
+            'error',
+            80,
+            2,
+            {
+              ignoreUrls: true,
+              ignoreComments: false,
+              ignoreStrings: true,
+              ignoreTemplateLiterals: true,
+            },
+          ],
+          // Allow using class methods with static/non-instance functionality
+          // React lifecycle methods commonly do not use an instance context for
+          // anything
+          'class-methods-use-this': 'off',
+          // Allow console during development, otherwise throw an error
+          'no-console': process.env.NODE_ENV === 'development' ? 'off' : 'error',
+          'prettier/prettier': [
+            'error',
+            {
+              singleQuote: true,
+              trailingComma: 'es5',
+              bracketSpacing: true,
+              jsxBracketSameLine: false,
+            },
+          ],
+          'consistent-return': 'off',
+          'no-shadow': 'off',
+          'no-return-assign': 'off',
+          'babel/new-cap': 'off',
+          'no-mixed-operators': 'off',
+        },
       },
     }],
-    ['neutrino-preset-mozilla-frontend-infra/react', {
+    ['@neutrinojs/react', {
+      publicPath: '/',
       html: {
         title: process.env.APPLICATION_NAME
       },
@@ -52,26 +82,21 @@ module.exports = {
           },
         },
       },
-      eslint: {
-        rules: {
-          // This has been set in the latest Airbnb preset, but has not been
-          // released yet.
-          'react/no-did-mount-set-state': 'off',
-        }
-      }
+      env: [
+        'APPLICATION_NAME',
+        'LOGIN_STRATEGIES',
+        'PORT',
+        'TASKCLUSTER_ROOT_URL',
+        'GRAPHQL_SUBSCRIPTION_ENDPOINT',
+      ],
+      babel: {
+        plugins: [
+          [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
+          require.resolve('@babel/plugin-proposal-class-properties'),
+        ],
+      },
     }],
-    ['@neutrinojs/env', [
-      'NODE_ENV',
-      'APPLICATION_NAME',
-      'LOGIN_STRATEGIES',
-      'TASKCLUSTER_ROOT_URL',
-      'GRAPHQL_SUBSCRIPTION_ENDPOINT',
-    ]],
     (neutrino) => {
-      if (process.env.NODE_ENV === 'development') {
-        neutrino.config.devtool('cheap-module-source-map');
-      }
-
       neutrino.config.node.set('Buffer', true);
 
       // The shell view requires this
@@ -80,7 +105,6 @@ module.exports = {
           bindings: 'bindings'
         }));
 
-      neutrino.config.output.publicPath('/');
       neutrino.config.module
         .rule('graphql')
           .test(/\.graphql$/)

.travis.yml

@@ -5,6 +5,9 @@ node_js:
 - '10'
 install:
 - yarn install --frozen-lockfile
+before_install:
+- curl -sSfL https://yarnpkg.com/install.sh | bash # Required due to: https://github.com/travis-ci/travis-ci/issues/7951
+- export PATH=$HOME/.yarn/bin:$PATH
 before_script:
 - export CHROME_BIN=chromium-browser
 - export DISPLAY=:99.0

karma.conf.js

@@ -0,0 +1,5 @@
+const neutrino = require('neutrino');
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'test';
+
+module.exports = neutrino().karma();

package.json

@@ -4,22 +4,20 @@
   "private": true,
   "license": "MPL-2.0",
   "engines": {
-    "node": ">=8.0.0",
-    "yarn": ">=1.3.2"
+    "node": ">=10.0.0",
+    "yarn": ">=1.10.0"
   },
   "scripts": {
-    "build": "yarn create:fragment-matcher && neutrino build --require dotenv/config",
-    "start": "neutrino start --require dotenv/config",
-    "test": "neutrino test",
-    "lint": "neutrino lint",
-    "precommit": "neutrino stage",
-    "create:fragment-matcher": "node src/scripts/queryServer",
-    "styleguide": "neutrino styleguide:start --require dotenv/config"
+    "build": "yarn create:fragment-matcher && dotenv webpack -- --mode production",
+    "start": "dotenv webpack-dev-server -- --mode development",
+    "test": "karma start --single-run",
+    "lint": "eslint --cache --format codeframe --ext mjs,js,jsx src test",
+    "create:fragment-matcher": "node src/scripts/queryServer"
   },
   "dependencies": {
-    "@material-ui/core": "^1.5.1",
-    "@material-ui/icons": "^1.1.1",
-    "@material-ui/lab": "3.0.0-alpha.15",
+    "@material-ui/core": "^3.0.3",
+    "@material-ui/icons": "^3.0.1",
+    "@material-ui/lab": "3.0.0-alpha.19",
     "@mozilla-frontend-infra/components": "^1.3.1",
     "apollo-cache-inmemory": "^1.2.10",
     "apollo-cache-persist": "^0.1.1",
@@ -54,7 +52,7 @@
     "markdown-it-highlightjs": "^3.0.0",
     "markdown-it-link-attributes": "^2.1.0",
     "material-ui-pickers": "^1.0.0-rc.9",
-    "material-ui-treeview": "^1.1.0",
+    "material-ui-treeview": "^2.0.1",
     "mdi-react": "^4.3.0",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",
@@ -78,16 +76,26 @@
     "ws-shell": "^0.1.5"
   },
   "devDependencies": {
-    "@neutrinojs/env": "^8.3.0",
-    "@neutrinojs/jest": "^8.3.0",
-    "@neutrinojs/karma": "^8.3.0",
-    "babel-register": "^6.26.0",
-    "chai": "^4.1.2",
-    "dotenv": "^5.0.1",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
+    "@neutrinojs/airbnb": "^9.0.0-beta.0",
+    "@neutrinojs/karma": "^9.0.0-beta.0",
+    "@neutrinojs/react": "^9.0.0-beta.0",
+    "chai": "^4.2.0",
+    "dotenv-cli": "^1.4.0",
+    "eslint": "^5.6.1",
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-plugin-prettier": "^3.0.0",
     "graphql-tag": "^2.8.0",
-    "neutrino": "^8.3.0",
-    "neutrino-preset-mozilla-frontend-infra": "^4.1.0",
-    "node-fetch": "^2.2.0"
+    "karma": "^3.0.0",
+    "karma-cli": "^1.0.1",
+    "mocha": "^5.2.0",
+    "neutrino": "^9.0.0-beta.0",
+    "node-fetch": "^2.2.0",
+    "prettier": "^1.14.3",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
   },
   "optionalDependencies": {
     "bufferutil": "^3.0.5",

src/App/Main.jsx

@@ -1,4 +1,4 @@
-import { Component, Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom';
 import { object } from 'prop-types';
 import ErrorPanel from '@mozilla-frontend-infra/components/ErrorPanel';

src/App/index.jsx

@@ -1,5 +1,5 @@
 import { hot } from 'react-hot-loader';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import storage from 'localforage';
 import { ApolloProvider } from 'react-apollo';
 import { ApolloClient } from 'apollo-client';
@@ -26,37 +26,17 @@ const AUTH_STORE = '@@TASKCLUSTER_WEB_AUTH';
 
 @hot(module)
 export default class App extends Component {
-  authorize = async (user, persist = true) => {
-    if (persist) {
-      localStorage.setItem(AUTH_STORE, JSON.stringify(user));
-    }
-
-    this.setState({
-      auth: {
-        ...this.state.auth,
-        user,
-      },
-    });
-  };
-
-  unauthorize = () => {
-    localStorage.removeItem(AUTH_STORE);
-    this.setState({
-      auth: {
-        ...this.state.auth,
-        user: null,
-      },
-    });
-  };
-
   fragmentMatcher = new IntrospectionFragmentMatcher({
     introspectionQueryResultData,
   });
+
   cache = new InMemoryCache({ fragmentMatcher: this.fragmentMatcher });
+
   persistence = new CachePersistor({
     cache: this.cache,
     storage,
   });
+
   apolloClient = new ApolloClient({
     cache: this.cache,
     link: from([
@@ -121,9 +101,30 @@ export default class App extends Component {
     this.state = state;
   }
 
-  componentDidCatch(error) {
-    this.setState({ error });
-  }
+  authorize = async (user, persist = true) => {
+    if (persist) {
+      localStorage.setItem(AUTH_STORE, JSON.stringify(user));
+    }
+
+    this.setState({
+      auth: {
+        // eslint-disable-next-line react/no-access-state-in-setstate
+        ...this.state.auth,
+        user,
+      },
+    });
+  };
+
+  unauthorize = () => {
+    localStorage.removeItem(AUTH_STORE);
+    this.setState({
+      auth: {
+        // eslint-disable-next-line react/no-access-state-in-setstate
+        ...this.state.auth,
+        user: null,
+      },
+    });
+  };
 
   toggleTheme = () => {
     this.setState({
@@ -134,6 +135,10 @@ export default class App extends Component {
     });
   };
 
+  componentDidCatch(error) {
+    this.setState({ error });
+  }
+
   render() {
     const { auth, error, theme } = this.state;
 

src/components/AwsProvisionerErrorsTable/index.jsx

@@ -1,4 +1,4 @@
-import { Fragment, Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { arrayOf } from 'prop-types';
 import { pipe, map, sort as rSort } from 'ramda';
 import memoize from 'fast-memoize';
@@ -38,13 +38,6 @@ export default class AwsProvisionerErrorsTable extends Component {
     sortDirection: null,
   };
 
-  handleHeaderClick = sortBy => {
-    const toggled = this.state.sortDirection === 'desc' ? 'asc' : 'desc';
-    const sortDirection = this.state.sortBy === sortBy ? toggled : 'desc';
-
-    this.setState({ sortBy, sortDirection });
-  };
-
   createSortedErrors = memoize(
     (errors, sortBy, sortDirection) => {
       const sortByProperty = camelCase(sortBy);
@@ -71,6 +64,13 @@ export default class AwsProvisionerErrorsTable extends Component {
     }
   );
 
+  handleHeaderClick = sortBy => {
+    const toggled = this.state.sortDirection === 'desc' ? 'asc' : 'desc';
+    const sortDirection = this.state.sortBy === sortBy ? toggled : 'desc';
+
+    this.setState({ sortBy, sortDirection });
+  };
+
   render() {
     const { errors } = this.props;
     const { sortBy, sortDirection } = this.state;
@@ -97,7 +97,8 @@ export default class AwsProvisionerErrorsTable extends Component {
             <TableRow
               key={`${error.az}-${error.instanceType}-${error.type}-${
                 error.time
-              }`}>
+              }`}
+            >
               <TableCell>
                 <Typography>{error.az}</Typography>
               </TableCell>