I5852 esc key modal (#6140)

* adding keydown

* integrating keydown

* updating user prof so integrates with keydown

* updating rel test for chgs

* Removing test as don't think its needed..

* updating comment

* updating per comments

* moving keytype into internal props

package.json

@@ -228,6 +228,7 @@
     "react-cookie": "1.0.5",
     "react-dom": "16.5.0",
     "react-helmet": "5.2.0",
+    "react-keydown": "1.9.7",
     "react-nested-status": "0.2.1",
     "react-onclickoutside": "6.7.1",
     "react-photoswipe": "1.3.0",

src/amo/components/UserProfileEdit/index.js

@@ -219,8 +219,10 @@ export class UserProfileEditBase extends React.Component<Props, State> {
     this.setState({ showProfileDeletionModal: true });
   };
 
-  onCancelProfileDeletion = (e: SyntheticEvent<HTMLButtonElement>) => {
+  onCancelProfileDeletion = (e: SyntheticEvent<HTMLButtonElement> | null) => {
-    e.preventDefault();
+    if (e) {
+      e.preventDefault();
+    }
 
     this.setState({ showProfileDeletionModal: false });
   };
@@ -758,6 +760,7 @@ export class UserProfileEditBase extends React.Component<Props, State> {
 
         {this.state.showProfileDeletionModal && (
           <OverlayCard
+            onEscapeOverlay={this.onCancelProfileDeletion}
             className={overlayClassName}
             header={
               isEditingCurrentUser

src/ui/components/Overlay/index.js

@@ -3,11 +3,14 @@ import invariant from 'invariant';
 import makeClassName from 'classnames';
 import * as React from 'react';
 import { compose } from 'redux';
+import keydown, { Keys } from 'react-keydown';
 
 import withUIState from 'core/withUIState';
 
 import './styles.scss';
 
+const { ESC } = Keys;
+
 type Props = {|
   className?: string,
   children: React.Element<any>,
@@ -26,6 +29,7 @@ type InternalProps = {|
   ...Props,
   setUIState: ($Shape<UIStateType>) => void,
   uiState: UIStateType,
+  keydown: {| event: SyntheticEvent<any> | null |},
 |};
 
 export class OverlayBase extends React.Component<InternalProps> {
@@ -40,7 +44,13 @@ export class OverlayBase extends React.Component<InternalProps> {
 
   componentWillReceiveProps(nextProps: InternalProps) {
     const { uiState } = this.props;
-    const { visibleOnLoad: visibleOnLoadNew } = nextProps;
+    const { visibleOnLoad: visibleOnLoadNew, keydown: escKeydown } = nextProps;
+
+    // Pressing the "Esc" key is the only key that will trigger an update here.
+    // escKeydown is only set if the "Esc" key is pressed.
+    if (escKeydown && escKeydown.event) {
+      this.onClickBackground(escKeydown.event);
+    }
 
     if (
       visibleOnLoadNew !== undefined &&
@@ -96,6 +106,7 @@ const Overlay: React.ComponentType<Props> = compose(
     extractId,
     initialState: initialUIState,
   }),
+  keydown(ESC),
 )(OverlayBase);
 
 export default Overlay;

tests/unit/ui/components/TestOverlay.js

@@ -91,6 +91,24 @@ describe(__filename, () => {
     expect(root).not.toHaveClassName('Overlay--visible');
   });
 
+  it('hides when the "Esc" key is pressed', () => {
+    const { store } = dispatchClientMetadata();
+
+    const root = render({ visibleOnLoad: true, store });
+
+    // This will trigger the componentWillReceiveProps() method.
+    // keydown.event will be set when "Esc" is hit.
+    root.setProps({
+      keydown: {
+        event: createFakeEvent(),
+      },
+    });
+
+    applyUIStateChanges({ root, store });
+
+    expect(root).not.toHaveClassName('Overlay--visible');
+  });
+
   describe('extractId', () => {
     it('returns a unique ID provided by the ID prop', () => {
       const id = 'custom-overlay';

yarn.lock

@@ -9419,6 +9419,12 @@ react-is@^16.5.0:
   version "16.5.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.0.tgz#2ec7c192709698591efe13722fab3ef56144ba55"
 
+react-keydown@1.9.7:
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/react-keydown/-/react-keydown-1.9.7.tgz#cd168d4b0194b6ef71bca47e5c1cbc5d24ab5498"
+  dependencies:
+    core-js "^2.5.0"
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"