ref: Update to latest react, redux, and various supporting libs

getsentry · Nov 11, 2019 · ec8bd5b · ec8bd5b
1 parent ae487ee
commit ec8bd5b
Show file tree

Hide file tree

Showing 29 changed files with 12,967 additions and 7,699 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -16,6 +16,8 @@ env:
   global:
     - NODE_ENV=production
     - PIP_DISABLE_PIP_VERSION_CHECK=on
+    - JEST_JUNIT_OUTPUT_DIR=.artifacts
+    - JEST_JUNIT_OUTPUT_NAME=jest.junit.xml
 install:
   - curl -sSL https://raw.githubusercontent.com/sdispater/poetry/0.12.10/get-poetry.py | python
   - curl -sSLf https://get.volta.sh | bash
@@ -25,7 +27,7 @@ script:
   - PATH=$HOME/.poetry/bin:$PATH PATH=node_modules/.bin:$PATH pre-commit run -a -v
   - PATH=$HOME/.poetry/bin:$PATH poetry run py.test tests -v --cov . --cov-report="xml:.artifacts/coverage.xml" --junit-xml=".artifacts/pytest.junit.xml"
   - node_modules/.bin/webpack --json > .artifacts/webpack-stats.json
-  - JEST_JUNIT_OUTPUT=.artifacts/jest.junit.xml yarn test --ci --reporters=default --reporters=jest-junit
+  - yarn test --ci --reporters=default --reporters=jest-junit
 after_script:
   - npm install -g @zeus-ci/cli
   - $(npm bin -g)/zeus upload -t "application/x-junit+xml" .artifacts/*.junit.xml

diff --git a/package.json b/package.json
@@ -5,27 +5,29 @@
   "devDependencies": {
     "babel-eslint": "7.2.3",
     "babel-jest": "^23.4.2",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.4",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-to-json": "^3.4.3",
     "eslint": "^5.2.0",
     "eslint-loader": "^2.1.0",
     "eslint-plugin-babel": "^4.1.1",
     "eslint-plugin-flowtype": "2.34.0",
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
-    "jest": "^23.4.2",
-    "jest-junit": "^5.1.0",
+    "jest": "^24.9.0",
+    "jest-junit": "^9.0.0",
     "mockdate": "^2.0.2",
-    "prettier": "^1.14.0",
-    "redux-mock-store": "^1.5.0",
-    "sinon": "^4.1.3",
-    "xhr-mock": "^2.4.1"
+    "prettier": "^1.19.1",
+    "react-dev-utils": "^9.1.0",
+    "react-test-renderer": "^16.11.0",
+    "redux-mock-store": "^1.5.3",
+    "sinon": "^7.5.0",
+    "xhr-mock": "^2.5.1"
   },
   "dependencies": {
-    "@sentry/browser": "^5.5.0",
-    "@sentry/integrations": "^5.5.0",
+    "@sentry/browser": "^5.8.0",
+    "@sentry/integrations": "^5.8.0",
     "autoprefixer": "7.1.1",
     "babel-core": "6.25.0",
     "babel-loader": "^7.1.2",
@@ -59,25 +61,23 @@
     "postcss-loader": "2.0.6",
     "promise": "7.1.1",
     "prop-types": "^15.6.2",
-    "react": "^16.5.1",
+    "react": "^16.11.0",
     "react-chartjs-2": "^2.7.4",
-    "react-dev-utils": "^3.1.2",
     "react-document-title": "^2.0.3",
-    "react-dom": "16.4.2",
+    "react-dom": "^16.11.0",
     "react-gravatar": "^2.6.3",
     "react-icon-base": "^2.0.8",
     "react-icons": "^2.2.7",
     "react-loadable": "^5.3.1",
-    "react-redux": "^5.0.5",
-    "react-router": "3.2.0",
+    "react-redux": "5",
+    "react-router": "3",
     "react-select": "^1.0.0-rc.10",
     "react-syntax-highlighter": "^6.1.1",
-    "react-test-renderer": "^16.2.0",
-    "react-transition-group": "^2.4.0",
-    "redux": "^3.7.2",
-    "redux-thunk": "^2.2.0",
+    "react-transition-group": "^4.3.0",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0",
     "style-loader": "0.18.2",
-    "styled-components": "^2.1.1",
+    "styled-components": "^4.4.1",
     "sw-precache-webpack-plugin": "^0.11.4",
     "url-loader": "0.5.9",
     "webpack": "^3.6.0",

diff --git a/webapp/components/AsyncComponent.jsx b/webapp/components/AsyncComponent.jsx
@@ -38,20 +38,20 @@ export default class AsyncComponent extends Component {
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.api = new Client();
     this.reloadData();
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
-    let isRouterInContext = !!nextContext.router;
-    let isLocationInProps = nextProps.location !== undefined;
+  componentDidUpdate(prevProps) {
+    let isRouterInContext = !!this.context.router;
+    let isLocationInProps = this.props.location !== undefined;
 
-    let prevLocation = isLocationInProps ? this.props.location : this.state.__location;
+    let prevLocation = isLocationInProps ? prevProps.location : this.state.__location;
     let currentLocation = isLocationInProps
-      ? nextProps.location
+      ? this.props.location
       : isRouterInContext
-        ? nextContext.router.location
+        ? this.context.router.location
         : null;
 
     if (!(currentLocation && prevLocation)) {
@@ -60,11 +60,11 @@ export default class AsyncComponent extends Component {
 
     if (
       currentLocation.pathname !== prevLocation.pathname ||
-      !isEqual(this.props.params, nextProps.params) ||
+      !isEqual(this.props.params, prevProps.params) ||
       currentLocation.search !== prevLocation.search ||
       currentLocation.state !== prevLocation.state
     ) {
-      this.remountComponent(nextProps, nextContext);
+      this.remountComponent(this.props, this.context);
     }
   }
 

diff --git a/webapp/components/AsyncPage.jsx b/webapp/components/AsyncPage.jsx
@@ -4,20 +4,13 @@ import PropTypes from 'prop-types';
 
 import AsyncComponent from './AsyncComponent';
 
-import {Client} from '../api';
-
 // TODO(dcramer): make this simply call AsyncComponent instead of extend
 export default class AsyncPage extends AsyncComponent {
   static propTypes = {
     params: PropTypes.object,
     location: PropTypes.object
   };
 
-  componentWillMount() {
-    this.api = new Client();
-    this.reloadData();
-  }
-
   // XXX: cant call this getInitialState as React whines
   getDefaultState(props, context) {
     let endpoints = this.getEndpoints(props, context);

diff --git a/webapp/components/ErrorBoundary.jsx b/webapp/components/ErrorBoundary.jsx
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import idx from 'idx';
 import {isEqual} from 'lodash';
+import {withRouter} from 'react-router';
 // This is being pulled form the CDN currently
 // import Raven from 'raven-js';
 
@@ -11,34 +12,30 @@ import NetworkError from './NetworkError';
 import NotFoundError from './NotFoundError';
 import * as errors from '../errors';
 
-export default class ErrorBoundary extends Component {
-  static contextTypes = {
-    router: PropTypes.object
-  };
-
+class ErrorBoundary extends Component {
   static propTypes = {
+    router: PropTypes.object,
     children: PropTypes.node,
     location: PropTypes.object
   };
 
   constructor(...params) {
     super(...params);
-    this.state = {error: null, location: null};
+    this.state = {error: null, lastLocation: null};
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
-    let {router} = nextContext;
-    if (!isEqual(this.state.location, router.location)) {
-      this.setState({error: null, location: null});
+  static getDerivedStateFromProps(props, state) {
+    let {router} = props;
+    if (!isEqual(state.lastLocation, router.location)) {
+      return {error: null, lastLocation: null};
     }
-    super.componentWillReceiveProps &&
-      super.componentWillReceiveProps(nextProps, nextContext);
+    return null;
   }
 
   componentDidCatch(error, errorInfo) {
     this.setState({
       error,
-      location: {...(idx(this.context.router, _ => _.location) || {})}
+      lastLocation: {...(idx(this.props.router, _ => _.location) || {})}
     });
     if (window.Raven) {
       window.Sentry.captureException(error, {extra: errorInfo});
@@ -83,3 +80,5 @@ export default class ErrorBoundary extends Component {
     }
   }
 }
+
+export default withRouter(ErrorBoundary);
diff --git a/webapp/components/Indicators.jsx b/webapp/components/Indicators.jsx
@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import ToastIndicator from './ToastIndicator';
 
 const FadeTransition = props => (
-  <CSSTransition {...props} classNames="fade" timeout={500} />
+  <CSSTransition {...props} unmountOnExit classNames="fade" timeout={300} />
 );
 
 class Indicators extends Component {
@@ -17,10 +17,7 @@ class Indicators extends Component {
   render() {
     return (
       <div>
-        <TransitionGroup
-          transitionName="toast"
-          transitionEnter={false}
-          transitionLeaveTimeout={500}>
+        <TransitionGroup enter={false}>
           {this.props.items.map(indicator => {
             return (
               <FadeTransition key={indicator.id}>

diff --git a/webapp/components/ToastIndicator.css b/webapp/components/ToastIndicator.css
@@ -56,9 +56,13 @@
 .fade-exit {
   opacity: 1;
 }
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 200ms;
+}
 .fade-exit-active {
   opacity: 0.01;
-  transition: opacity 500ms ease-in;
+  transition: opacity 200ms;
 }
 
 .toast.loading.toast-message {

diff --git a/webapp/components/__tests__/CoverageSummary.spec.jsx b/webapp/components/__tests__/CoverageSummary.spec.jsx
@@ -16,13 +16,15 @@ const FIXTURE = [
 
 describe('CoverageSummary', () => {
   it('renders', () => {
+    let context = TestStubs.standardContext();
     const tree = render(
       <CoverageSummary
         build={TestStubs.Build()}
         repo={TestStubs.Repository()}
         coverage={FIXTURE}
         location={{query: '', pathname: '/path-name'}}
-      />
+      />,
+      context
     );
     expect(tree).toMatchSnapshot();
   });