Clean up react devtools warnings on our devtools

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/).
 
+## Unreleased
+### 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.json

@@ -63,4 +63,4 @@
     "webpack-serve": "^3.1.1",
     "whatwg-fetch": "^2.0.2"
   }
-}
+}

dash-renderer/src/actions/constants.js

@@ -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/index.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/components/error/ComponentErrorBoundary.react.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/FrontEnd/FrontEndError.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/FrontEndErrorContainer.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/GlobalErrorContainer.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/GlobalErrorOverlay.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,

dash-renderer/src/components/error/menu/DebugMenu.react.js

@@ -31,7 +31,7 @@ class DebugMenu extends Component {
             toastsEnabled,
             callbackGraphOpened,
         } = this.state;
-        const {error, resolveError, dispatch, dependenciesRequest} = this.props;
+        const {error, dependenciesRequest} = this.props;
 
         const menuClasses = opened
             ? 'dash-debug-menu dash-debug-menu--opened'
@@ -136,7 +136,6 @@ class DebugMenu extends Component {
                     {menuContent}
                 </div>
                 <GlobalErrorOverlay
-                    resolve={(type, myId) => resolveError(dispatch, type, myId)}
                     error={error}
                     visible={
                         !(isEmpty(error.backEnd) && isEmpty(error.frontEnd))
@@ -154,8 +153,6 @@ DebugMenu.propTypes = {
     children: PropTypes.object,
     error: PropTypes.object,
     dependenciesRequest: PropTypes.object,
-    resolveError: PropTypes.func,
-    dispatch: PropTypes.func,
 };
 
 export {DebugMenu};

dash-renderer/src/reducers/error.js

@@ -1,11 +1,11 @@
-import {findIndex, mergeRight, propEq, remove} from 'ramda';
+import {mergeRight} from 'ramda';
 
 const initialError = {
     frontEnd: [],
     backEnd: [],
 };
 
-function error(state = initialError, action) {
+export default function error(state = initialError, action) {
     switch (action.type) {
         case 'ON_ERROR': {
             if (action.payload.type === 'frontEnd') {
@@ -28,31 +28,8 @@ function error(state = initialError, action) {
             return state;
         }
 
-        case 'RESOLVE_ERROR': {
-            if (action.payload.type === 'frontEnd') {
-                const removeIdx = findIndex(
-                    propEq('myUID', action.payload.myUID)
-                )(state.frontEnd);
-                return {
-                    frontEnd: remove(removeIdx, 1, state.frontEnd),
-                    backEnd: state.backEnd,
-                };
-            } else if (action.payload.type === 'backEnd') {
-                const removeIdx = findIndex(
-                    propEq('myUID', action.payload.myUID)
-                )(state.backEnd);
-                return {
-                    frontEnd: state.frontEnd,
-                    backEnd: remove(removeIdx, 1, state.backEnd),
-                };
-            }
-            return state;
-        }
-
         default: {
             return state;
         }
     }
 }
-
-export default error;