[docs] Improve demo error boundary

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}

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,
 };

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);

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",