[YW][#3211] Add ESC key binding to document to close any modal on the…

… screen by calling the onHide callback.

Summary: Add document event listener on 'esc' key for the modal component.

Test Plan:
Try opening any modal, such as the new user introduction modal, full move confirm modal,
or region/zone selection modal when configuring a cloud provider. Confirm if pressing ESC closes the
modal on the screen.

Reviewers: ram, jason

Reviewed By: jason

Subscribers: ui

Differential Revision: https://phabricator.dev.yugabyte.com/D7973

managed/ui/src/components/common/forms/fields/YBModal.js

@@ -8,6 +8,20 @@ import './stylesheets/YBModal.scss';
 
 export default class YBModal extends Component {
 
+  escFunction = (event) => {
+    const { onHide } = this.props;
+    if (event.keyCode === 27) {
+      onHide(event);
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener("keydown", this.escFunction, false);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.escFunction, false);
+  }
+
   render() {
     const {visible, onHide, size, formName, onFormSubmit, title, submitLabel,
       cancelLabel,  error, submitting, asyncValidating, footerAccessory,

managed/ui/src/components/panels/UniverseDisplayPanel/UniverseDisplayPanel.js

@@ -10,7 +10,7 @@ import { YBCost, DescriptionItem } from 'components/common/descriptors';
 import { UniverseStatusContainer } from 'components/universes';
 import './UniverseDisplayPanel.scss';
 import { isNonEmptyObject } from "../../../utils/ObjectUtils";
-import { YBModal, YBButton } from '../../common/forms/fields';
+import { YBButton } from '../../common/forms/fields';
 import { getPrimaryCluster, getReadOnlyCluster, getClusterProviderUUIDs, getProviderMetadata } from "../../../utils/UniverseUtils";
 import { isNotHidden, isDisabled } from 'utils/LayoutUtils';
 
@@ -98,21 +98,7 @@ class UniverseDisplayItem extends Component {
 }
 
 export default class UniverseDisplayPanel extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      addUniverseModal: false
-    };
-  }
-
-
 
-  toggleUniverseModal = () => {
-    if (!this.state.addUniverseModal) {
-
-    }
-    this.setState({addUniverseModal: !this.state.addUniverseModal});
-  }
   render() {
     const self = this;
     const { universe: {universeList}, cloud: {providers}, customer: { currentCustomer } } = this.props;
@@ -152,11 +138,6 @@ export default class UniverseDisplayPanel extends Component {
           <Row className="list-group">
             {universeDisplayList}
           </Row>
-          <YBModal
-            className="mymodal"
-            visible={self.state.addUniverseModal}
-            onHide={() => this.toggleUniverseModal()}
-            title={''}></YBModal>
         </div>
       );
     } else if (getPromiseState(providers).isEmpty()) {

managed/ui/src/pages/AuthenticatedComponent.js

@@ -90,7 +90,7 @@ class AuthenticatedComponent extends Component {
           {this.props.children}
           <YBModal title={"Keyboard Shortcut"}
                    visible={showKeyboardShortcuts}
-                   onHide={this._toggleShortcutsHelp}>
+                   onHide={() => this.setState({showKeyboardShortcuts: false})}>
             <Table responsive>
               <thead>
                 <tr><th>Shortcut</th><th>Description</th></tr>