Merge remote-tracking branch 'origin/dev'

# Conflicts:
#	dash-renderer/package-lock.json

Author: Marc-André Rivet

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.4.1] - 2019-10-17
+### Fixed
+- [#969](https://github.com/plotly/dash/pull/969) Fix warnings emitted by react devtools coming from our own devtools components.
+
 ## [1.4.0] - 2019-10-08
 ### Added
 - [#948](https://github.com/plotly/dash/pull/948) Support setting working directory for R apps run using the `dashr` fixture, primarily useful for tests with assets. `dashr.start_server` supports a `cwd` argument to set an explicit working directory, and has smarter defaults when it's omitted: if `app` is a path to an R script, uses the directory of that path; if `app` is a string, uses the directory the test file itself is in.

dash-renderer/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "render dash components in react",
   "main": "dash_renderer/dash_renderer.min.js",
   "scripts": {

dash-renderer/package.json

@@ -7,7 +7,6 @@ const actionList = {
     SET_APP_LIFECYCLE: 'SET_APP_LIFECYCLE',
     SET_CONFIG: 'SET_CONFIG',
     ON_ERROR: 'ON_ERROR',
-    RESOLVE_ERROR: 'RESOLVE_ERROR',
     SET_HOOKS: 'SET_HOOKS',
 };
 

dash-renderer/src/actions/constants.js

@@ -43,7 +43,6 @@ export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE'));
 export const setConfig = createAction(getAction('SET_CONFIG'));
 export const setHooks = createAction(getAction('SET_HOOKS'));
 export const onError = createAction(getAction('ON_ERROR'));
-export const resolveError = createAction(getAction('RESOLVE_ERROR'));
 
 export function hydrateInitialOutputs() {
     return function(dispatch, getState) {

dash-renderer/src/actions/index.js

@@ -2,7 +2,6 @@ import {connect} from 'react-redux';
 import {Component} from 'react';
 import PropTypes from 'prop-types';
 import Radium from 'radium';
-import {includes, pluck} from 'ramda';
 import uniqid from 'uniqid';
 import {onError, revert} from '../../actions';
 
@@ -13,9 +12,14 @@ class UnconnectedComponentErrorBoundary extends Component {
             myID: props.componentId,
             myUID: uniqid(),
             oldChildren: null,
+            hasError: false,
         };
     }
 
+    static getDerivedStateFromError(_) {
+        return {hasError: true};
+    }
+
     componentDidCatch(error, info) {
         const {dispatch} = this.props;
         dispatch(
@@ -32,30 +36,22 @@ class UnconnectedComponentErrorBoundary extends Component {
 
     /* eslint-disable react/no-did-update-set-state */
     componentDidUpdate(prevProps, prevState) {
-        const {error} = this.props;
-        const {myUID} = this.state;
-        const hasError = includes(myUID, pluck('myUID')(error.frontEnd));
+        const prevChildren = prevProps.children;
         if (
-            !hasError &&
-            prevState.oldChildren !== prevProps.children &&
-            prevProps.children !== this.props.children
+            !this.state.hasError &&
+            prevChildren !== prevState.oldChildren &&
+            prevChildren !== this.props.children
         ) {
             this.setState({
-                oldChildren: prevProps.children,
+                oldChildren: prevChildren,
             });
         }
     }
     /* eslint-enable react/no-did-update-set-state */
 
     render() {
-        const {error} = this.props;
-        const {myUID} = this.state;
-        const hasError = includes(myUID, pluck('myUID')(error.frontEnd));
-
-        if (hasError) {
-            return this.state.oldChildren;
-        }
-        return this.props.children;
+        const {hasError, oldChildren} = this.state;
+        return hasError ? oldChildren : this.props.children;
     }
 }
 

dash-renderer/src/components/error/ComponentErrorBoundary.react.js

@@ -17,19 +17,12 @@ class FrontEndError extends Component {
     }
 
     render() {
-        const {e, resolve, inAlertsTray} = this.props;
+        const {e, inAlertsTray} = this.props;
         const {collapsed} = this.state;
 
-        let cardClasses;
-        // if resolve is defined, the error should be a standalone card
-        if (resolve) {
-            cardClasses = 'dash-error-card';
-        } else {
-            cardClasses = 'dash-error-card__content';
-        }
-        if (inAlertsTray) {
-            cardClasses += ' dash-error-card--alerts-tray';
-        }
+        const cardClasses =
+            'dash-error-card__content' +
+            (inAlertsTray ? ' dash-error-card--alerts-tray' : '');
 
         /* eslint-disable no-inline-comments */
         const errorHeader = (
@@ -178,7 +171,6 @@ FrontEndError.propTypes = {
         timestamp: PropTypes.object,
         error: errorPropTypes,
     }),
-    resolve: PropTypes.func,
     inAlertsTray: PropTypes.bool,
     isListItem: PropTypes.bool,
 };

dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js

@@ -17,8 +17,8 @@ class FrontEndErrorContainer extends Component {
         const inAlertsTray = this.props.inAlertsTray;
         let cardClasses = 'dash-error-card dash-error-card--container';
 
-        const errorElements = this.props.errors.map(error => {
-            return <FrontEndError e={error} isListItem={true} />;
+        const errorElements = this.props.errors.map((error, i) => {
+            return <FrontEndError e={error} isListItem={true} key={i} />;
         });
         if (inAlertsTray) {
             cardClasses += ' dash-error-card--alerts-tray';
@@ -42,7 +42,6 @@ class FrontEndErrorContainer extends Component {
 
 FrontEndErrorContainer.propTypes = {
     errors: PropTypes.array,
-    resolve: PropTypes.func,
     inAlertsTray: PropTypes.any,
 };
 

dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js

@@ -2,32 +2,20 @@ import {connect} from 'react-redux';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import Radium from 'radium';
-import {resolveError} from '../../actions';
 import {DebugMenu} from './menu/DebugMenu.react';
 
 class UnconnectedGlobalErrorContainer extends Component {
     constructor(props) {
         super(props);
     }
 
-    resolveError(dispatch, type, myId) {
-        if (type === 'backEnd') {
-            dispatch(resolveError({type}));
-            // dispatch(revert);
-        } else {
-            dispatch(resolveError({myId, type}));
-        }
-    }
-
     render() {
-        const {error, dispatch, dependenciesRequest} = this.props;
+        const {error, dependenciesRequest} = this.props;
         return (
             <div id="_dash-global-error-container">
                 <DebugMenu
                     error={error}
                     dependenciesRequest={dependenciesRequest}
-                    dispatch={dispatch}
-                    resolveError={this.resolveError}
                 >
                     <div id="_dash-app-content">{this.props.children}</div>
                 </DebugMenu>
@@ -40,15 +28,11 @@ UnconnectedGlobalErrorContainer.propTypes = {
     children: PropTypes.object,
     error: PropTypes.object,
     dependenciesRequest: PropTypes.object,
-    dispatch: PropTypes.func,
 };
 
-const GlobalErrorContainer = connect(
-    state => ({
-        error: state.error,
-        dependenciesRequest: state.dependenciesRequest,
-    }),
-    dispatch => ({dispatch})
-)(Radium(UnconnectedGlobalErrorContainer));
+const GlobalErrorContainer = connect(state => ({
+    error: state.error,
+    dependenciesRequest: state.dependenciesRequest,
+}))(Radium(UnconnectedGlobalErrorContainer));
 
 export default GlobalErrorContainer;

dash-renderer/src/components/error/GlobalErrorContainer.react.js

@@ -11,15 +11,13 @@ export default class GlobalErrorOverlay extends Component {
     }
 
     render() {
-        const {resolve, visible, error, toastsEnabled} = this.props;
+        const {visible, error, toastsEnabled} = this.props;
 
         let frontEndErrors;
         if (toastsEnabled) {
             const errors = concat(error.frontEnd, error.backEnd);
 
-            frontEndErrors = (
-                <FrontEndErrorContainer errors={errors} resolve={resolve} />
-            );
+            frontEndErrors = <FrontEndErrorContainer errors={errors} />;
         }
         return (
             <div>
@@ -36,7 +34,6 @@ export default class GlobalErrorOverlay extends Component {
 
 GlobalErrorOverlay.propTypes = {
     children: PropTypes.object,
-    resolve: PropTypes.func,
     visible: PropTypes.bool,
     error: PropTypes.object,
     toastsEnabled: PropTypes.any,