Merge pull request #756 from plotly/customize-trace-required-panel

customized TraceRequiredPanel

Author: dmt0

src/components/containers/TraceRequiredPanel.js

@@ -10,7 +10,7 @@ class TraceRequiredPanel extends Component {
 
   render() {
     const {localize: _} = this.context;
-    const {children, ...rest} = this.props;
+    const {children, heading, beforeMessage, afterMessage, ...rest} = this.props;
 
     if (!this.props.visible) {
       return null;
@@ -19,12 +19,14 @@ class TraceRequiredPanel extends Component {
     return this.hasTrace() ? (
       <LayoutPanel {...rest}>{children}</LayoutPanel>
     ) : (
-      <PanelEmpty heading={_("Looks like there aren't any traces defined yet.")}>
+      <PanelEmpty heading={heading || _("Looks like there aren't any traces defined yet.")}>
+        {beforeMessage && <p>{beforeMessage}</p>}
         <p>
           {_('Go to the ')}
           <a onClick={() => this.context.setPanel('Structure', 'Traces')}>{_('Traces')}</a>
           {_(' panel under Structure to define traces.')}
         </p>
+        {afterMessage && <p>{afterMessage}</p>}
       </PanelEmpty>
     );
   }
@@ -33,6 +35,9 @@ class TraceRequiredPanel extends Component {
 TraceRequiredPanel.propTypes = {
   children: PropTypes.node,
   visible: PropTypes.bool,
+  heading: PropTypes.string,
+  beforeMessage: PropTypes.string,
+  afterMessage: PropTypes.string,
 };
 
 TraceRequiredPanel.defaultProps = {