Improve about/shortcuts stories by passing in onClose as a prop.

lib/ui/src/settings/about.js

@@ -1,4 +1,3 @@
-import { history } from 'global';
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
 import { GlobalHotKeys } from 'react-hotkeys';
@@ -19,17 +18,14 @@ import {
 } from './components';
 
 const keyMap = {
-  BACK: 'escape',
-};
-const handlers = {
-  BACK: () => history.back(),
+  CLOSE: 'escape',
 };
 
-const AboutScreen = ({ latest, current }) => {
+const AboutScreen = ({ latest, current, onClose }) => {
   const canUpdate = latest && latest.version !== current.version;
 
   return (
-    <GlobalHotKeys handlers={handlers} keyMap={keyMap}>
+    <GlobalHotKeys handlers={{ CLOSE: onClose }} keyMap={keyMap}>
       <Tabs
         absolute
         selected="about"
@@ -39,7 +35,7 @@ const AboutScreen = ({ latest, current }) => {
             <IconButton
               onClick={e => {
                 e.preventDefault();
-                history.back();
+                return onClose();
               }}
             >
               <Icons icon="close" />
@@ -124,6 +120,7 @@ AboutScreen.propTypes = {
       plain: PropTypes.string.isRequired,
     }).isRequired,
   }),
+  onClose: PropTypes.func.isRequired,
 };
 
 AboutScreen.defaultProps = {

lib/ui/src/settings/about.stories.js

@@ -1,16 +1,22 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { actions as createActions } from '@storybook/addon-actions';
+
 import AboutScreen from './about';
 
 const info = {
   plain: `- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs`,
 };
 
+const actions = createActions('onClose');
+
 storiesOf('UI|AboutPage', module)
   .add('up to date', () => (
-    <AboutScreen latest={{ version: '5.0.0', info }} current={{ version: '5.0.0' }} />
+    <AboutScreen latest={{ version: '5.0.0', info }} current={{ version: '5.0.0' }} {...actions} />
   ))
   .add('new version required', () => (
-    <AboutScreen latest={{ version: '5.0.3', info }} current={{ version: '5.0.0' }} />
+    <AboutScreen latest={{ version: '5.0.3', info }} current={{ version: '5.0.0' }} {...actions} />
   ))
-  .add('failed to fetch new version', () => <AboutScreen current={{ version: '5.0.0' }} />);
+  .add('failed to fetch new version', () => (
+    <AboutScreen current={{ version: '5.0.0' }} {...actions} />
+  ));

lib/ui/src/settings/about_page.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Route } from '@storybook/router';
+import { history } from 'global';
 
 import { Consumer } from '../core/context';
 import AboutScreen from './about';
@@ -31,7 +32,11 @@ export default () => (
     <Consumer>
       {({ api }) => (
         <NotificationClearer api={api} notificationId="update">
-          <AboutScreen current={api.getCurrentVersion()} latest={api.getLatestVersion()} />
+          <AboutScreen
+            current={api.getCurrentVersion()}
+            latest={api.getLatestVersion()}
+            onClose={() => history.back()}
+          />
         </NotificationClearer>
       )}
     </Consumer>

lib/ui/src/settings/shortcuts.js

@@ -1,4 +1,3 @@
-import { history } from 'global';
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalHotKeys } from 'react-hotkeys';
@@ -59,10 +58,7 @@ function toShortcutState(shortcutKeys) {
 }
 
 const keyMap = {
-  BACK: 'escape',
-};
-const handlers = {
-  BACK: () => history.back(),
+  CLOSE: 'escape',
 };
 
 class ShortcutsScreen extends Component {
@@ -210,9 +206,10 @@ class ShortcutsScreen extends Component {
   );
 
   render() {
+    const { onClose } = this.props;
     const layout = this.renderKeyForm();
     return (
-      <GlobalHotKeys handlers={handlers} keyMap={keyMap}>
+      <GlobalHotKeys handlers={{ CLOSE: onClose }} keyMap={keyMap}>
         <Tabs
           absolute
           selected="shortcuts"
@@ -222,7 +219,7 @@ class ShortcutsScreen extends Component {
               <IconButton
                 onClick={e => {
                   e.preventDefault();
-                  history.back();
+                  return onClose();
                 }}
               >
                 <Icons icon="close" />
@@ -269,6 +266,7 @@ ShortcutsScreen.propTypes = {
   setShortcut: PropTypes.func.isRequired,
   restoreDefaultShortcut: PropTypes.func.isRequired,
   restoreAllDefaultShortcuts: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 export default ShortcutsScreen;

lib/ui/src/settings/shortcuts.stories.js

@@ -4,7 +4,12 @@ import { actions as makeActions } from '@storybook/addon-actions';
 import ShortcutsScreen from './shortcuts';
 import { defaultShortcuts } from '../core/shortcuts';
 
-const actions = makeActions('setShortcut', 'restoreDefaultShortcut', 'restoreAllDefaultShortcuts');
+const actions = makeActions(
+  'setShortcut',
+  'restoreDefaultShortcut',
+  'restoreAllDefaultShortcuts',
+  'onClose'
+);
 
 export default {
   component: ShortcutsScreen,

lib/ui/src/settings/shortcuts_page.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Route } from '@storybook/router';
+import { history } from 'global';
 
 import { Consumer } from '../core/context';
 import ShortcutsScreen from './shortcuts';
@@ -14,6 +15,7 @@ export default () => (
           <ShortcutsScreen
             shortcutKeys={getShortcutKeys()}
             {...{ setShortcut, restoreDefaultShortcut, restoreAllDefaultShortcuts }}
+            onClose={() => history.back()}
           />
         </Route>
       )}