[docs] Improve demo error boundary (#20177)

mui · Mar 19, 2020 · 48402d3 · 48402d3
1 parent 5fc9926
commit 48402d3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -17,6 +17,7 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Tooltip from '@material-ui/core/Tooltip';
+import RefreshIcon from '@material-ui/icons/Refresh';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import DemoLanguages from 'docs/src/modules/components/DemoLanguages';
@@ -336,6 +337,8 @@ function Demo(props) {
     showCodeLabel = showPreview ? t('showFullSource') : t('showSource');
   }
 
+  const [demoKey, resetDemo] = React.useReducer(key => key + 1, 0);
+
   const demoSourceId = useUniqueId(`demo-`);
   const openDemoSource = codeOpen || showPreview;
 
@@ -353,10 +356,12 @@ function Demo(props) {
         onMouseLeave={handleDemoHover}
       >
         <DemoSandboxed
+          key={demoKey}
           style={demoSandboxedStyle}
           component={DemoComponent}
           iframe={demoOptions.iframe}
           name={demoName}
+          onResetDemoClick={resetDemo}
         />
       </div>
       <div className={classes.anchorLink} id={`${demoName}.js`} />
@@ -428,6 +433,17 @@ function Demo(props) {
                   <FileCopyIcon fontSize="small" />
                 </IconButton>
               </Tooltip>
+              <Tooltip classes={{ popper: classes.tooltip }} title={t('resetDemo')} placement="top">
+                <IconButton
+                  aria-label={t('resetDemo')}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
+                  data-ga-event-action="reset"
+                  onClick={resetDemo}
+                >
+                  <RefreshIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
               <IconButton
                 onClick={handleMoreClick}
                 aria-owns={anchorEl ? 'demo-menu-more' : undefined}

diff --git a/docs/src/modules/components/DemoErrorBoundary.js b/docs/src/modules/components/DemoErrorBoundary.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
+import Button from '@material-ui/core/Button';
 
 export default class DemoErrorBoundary extends React.Component {
   state = {
@@ -13,7 +14,7 @@ export default class DemoErrorBoundary extends React.Component {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, onResetDemoClick, t } = this.props;
     const { error } = this.state;
 
     if (error) {
@@ -25,12 +26,18 @@ export default class DemoErrorBoundary extends React.Component {
           </Typography>
           <Typography>
             We would appreciate it if you report this error directly to our{' '}
-            <Link href="https://github.com/mui-org/material-ui/issues/new/choose" target="_blank">
+            <Link
+              href="https://github.com/mui-org/material-ui/issues/new?template=1.bug.md"
+              target="_blank"
+            >
               issue tracker
             </Link>
             .
           </Typography>
           <pre>{error.toString()}</pre>
+          <Button color="secondary" onClick={onResetDemoClick} variant="text">
+            {t('resetDemo')}
+          </Button>
         </div>
       );
       /* eslint-enable material-ui/no-hardcoded-labels */
@@ -42,4 +49,9 @@ export default class DemoErrorBoundary extends React.Component {
 
 DemoErrorBoundary.propTypes = {
   children: PropTypes.node,
+  onResetDemoClick: PropTypes.func.isRequired,
+  /**
+   * translate function from redux store
+   */
+  t: PropTypes.func.isRequired,
 };
diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
@@ -5,6 +5,7 @@ import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/co
 import NoSsr from '@material-ui/core/NoSsr';
 import rtl from 'jss-rtl';
 import Frame from 'react-frame-component';
+import { useSelector } from 'react-redux';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 
 const styles = theme => ({
@@ -85,12 +86,14 @@ const StyledFrame = withStyles(styles)(DemoFrame);
  * to an `iframe` if `iframe={true}`.
  */
 function DemoSandboxed(props) {
-  const { component: Component, iframe, name, ...other } = props;
+  const { component: Component, iframe, name, onResetDemoClick, ...other } = props;
   const Sandbox = iframe ? StyledFrame : React.Fragment;
   const sandboxProps = iframe ? { title: `${name} demo`, ...other } : {};
 
+  const t = useSelector(state => state.options.t);
+
   return (
-    <DemoErrorBoundary>
+    <DemoErrorBoundary onResetDemoClick={onResetDemoClick} t={t}>
       <Sandbox {...sandboxProps}>
         <Component />
       </Sandbox>
@@ -102,6 +105,7 @@ DemoSandboxed.propTypes = {
   component: PropTypes.elementType.isRequired,
   iframe: PropTypes.bool,
   name: PropTypes.string.isRequired,
+  onResetDemoClick: PropTypes.func.isRequired,
 };
 
 export default React.memo(DemoSandboxed);
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
@@ -92,6 +92,7 @@
   "getProfessionalSupport": "Get Professional Support",
   "diamondSponsors": "Diamond Sponsors",
   "demoToolbarLabel": "demo source",
+  "resetDemo": "Reset demo",
   "pages": {
     "/getting-started": "Getting Started",
     "/getting-started/installation": "Installation",