Merge pull request #153 from plotly/chriddyp-dev-tools

another round of dev-tools edits

Author: byronz

src/TreeContainer.js

@@ -7,6 +7,7 @@ import {
     contains,
     filter,
     forEach,
+    has,
     isEmpty,
     isNil,
     keysIn,
@@ -25,6 +26,29 @@ import { assertPropTypes } from 'check-prop-types';
 const SIMPLE_COMPONENT_TYPES = ['String', 'Number', 'Null', 'Boolean'];
 const isSimpleComponent = component => contains(type(component), SIMPLE_COMPONENT_TYPES)
 
+function validateComponent(componentDefinition) {
+    if (type(componentDefinition) === 'Array') {
+        throw new Error(
+            'The children property of a component is a list of lists, instead '+
+            'of just a list. ' +
+            'Check the component that has the following contents, ' +
+            'and remove of the levels of nesting: \n' +
+            JSON.stringify(componentDefinition, null, 2)
+        );
+    }
+    if (type(componentDefinition) === 'Object' &&
+            !(has('namespace', componentDefinition) &&
+              has('type', componentDefinition) &&
+              has('props', componentDefinition))) {
+        throw new Error(
+            'An object was provided as `children` instead of a component, ' +
+            'string, or number (or list of those). ' +
+            'Check the children property that looks something like:\n' +
+            JSON.stringify(componentDefinition, null, 2)
+        );
+    }
+}
+
 const createContainer = component => isSimpleComponent(component) ?
     component :
     (<AugmentedTreeContainer
@@ -72,21 +96,9 @@ class TreeContainer extends Component {
         if (isSimpleComponent(_dashprivate_layout)) {
             return _dashprivate_layout;
         }
+        validateComponent(_dashprivate_layout);
 
-        if (!_dashprivate_layout.type) {
-            /* eslint-disable no-console */
-            console.error(type(_dashprivate_layout), _dashprivate_layout);
-            /* eslint-enable no-console */
-            throw new Error('component.type is undefined');
-        }
-        if (!_dashprivate_layout.namespace) {
-            /* eslint-disable no-console */
-            console.error(type(_dashprivate_layout), _dashprivate_layout);
-            /* eslint-enable no-console */
-            throw new Error('component.namespace is undefined');
-        }
-
-        const element = Registry.resolve(_dashprivate_layout.type, _dashprivate_layout.namespace);
+        const element = Registry.resolve(_dashprivate_layout);
 
         const layout = omit(['children'], _dashprivate_layout.props);
 
@@ -178,7 +190,8 @@ TreeContainer.propTypes = {
 };
 
 function isLoadingComponent(layout) {
-    return Registry.resolve(layout.type, layout.namespace)._dashprivate_isLoadingComponent;
+    validateComponent(layout);
+    return Registry.resolve(layout)._dashprivate_isLoadingComponent;
 }
 
 function getNestedIds(layout) {

src/components/error/FrontEnd/FrontEndError.css

@@ -84,9 +84,9 @@
 
     background-color: white;
     border: 2px solid #dfe8f3;
-    border-radius: 0px 0px 4px 4px;
     color: #506784;
     overflow: scroll;
+    white-space: pre-wrap;
 }
 
 .dash-fe-error__curved {

src/components/error/GlobalErrorOverlay.react.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {concat} from 'ramda';
 
 import './GlobalErrorOverlay.css';
 import {FrontEndErrorContainer} from './FrontEnd/FrontEndErrorContainer.react';
@@ -14,14 +15,10 @@ export default class GlobalErrorOverlay extends Component {
 
         let frontEndErrors;
         if (toastsEnabled) {
-            let errors = [];
-            if (error.frontEnd.length) {
-                errors = error.frontEnd;
-            }
-
-            error.backEnd.forEach(backEndError => {
-                errors.push(backEndError);
-            });
+            const errors = concat(
+                error.frontEnd,
+                error.backEnd
+            );
 
             frontEndErrors = (
                 <FrontEndErrorContainer errors={errors} resolve={resolve} />

src/registry.js

@@ -1,16 +1,17 @@
 'use strict';
 
 export default {
-    resolve: (componentName, namespace) => {
+    resolve: (component) => {
+        const {type, namespace} = component;
+
         const ns = window[namespace]; /* global window: true */
 
         if (ns) {
-            if (ns[componentName]) {
-                return ns[componentName];
+            if (ns[type]) {
+                return ns[type];
             }
 
-            throw new Error(`Component ${componentName} not found in
-                ${namespace}`);
+            throw new Error(`Component ${type} not found in ${namespace}`);
         }
 
         throw new Error(`${namespace} was not found.`);