feat(events-v2) Improve scrolling for event modal (#13710)

Make the event modal scroll like other modals in the application.
Instead of scrolling the contents of the modal, the modal scrolls on-top
of a scroll locked element. I've separated the modal dialog into component
for a few reasons:

* It was making EventDetails pretty chunky.
* Having a separate component makes it easier to change over to
  reach-ui/dialog down the road or to add scroll locking & accessibility
  features if we don't want to pull reach in.

Refs SEN-733

src/sentry/static/sentry/app/components/modalDialog.jsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import styled from 'react-emotion';
+import PropTypes from 'prop-types';
+
+import InlineSvg from 'app/components/inlineSvg';
+import space from 'app/styles/space';
+import {callIfFunction} from 'app/utils/callIfFunction';
+
+/**
+ * Simple/Naive implementation of a dialog/modal window.
+ *
+ * The API this component exposes is intentionally compatible with
+ * reach-ui/dialog as in the near future we should replace this component
+ * with that library. This implementation doesn't handle
+ * focus-lock and has poorer accessibility support.
+ */
+class ModalDialog extends React.Component {
+  static propTypes = {
+    /**
+     * Function that returns the close button element
+     * will be passed an object of options with `handleDismiss`
+     * event handler for closing the modal
+     */
+    dismissButton: PropTypes.func,
+
+    /**
+     * Callback invoked when the modal is closed if set.
+     */
+    onDismiss: PropTypes.func.isRequired,
+
+    /**
+     * Whether or not the modal should display open.
+     */
+    isOpen: PropTypes.bool,
+
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    isOpen: true,
+  };
+
+  handleClose = event => {
+    event.preventDefault();
+    callIfFunction(this.props.onDismiss);
+  };
+
+  renderDismiss() {
+    const {dismissButton} = this.props;
+    if (dismissButton) {
+      return dismissButton({handleDismiss: this.handleClose});
+    }
+    return <DismissButton onClick={this.handleClose} size={30} />;
+  }
+
+  render() {
+    const {isOpen, children, className} = this.props;
+
+    if (!isOpen) {
+      return null;
+    }
+
+    return (
+      <ModalScrollTrap>
+        <ModalOverlay />
+        <ModalContainer aria-modal="true" className={className}>
+          {this.renderDismiss()}
+          {children}
+        </ModalContainer>
+      </ModalScrollTrap>
+    );
+  }
+}
+
+const ModalOverlay = styled('div')`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: ${p => p.theme.foreground};
+  opacity: 0.5;
+  z-index: ${p => p.theme.zIndex.modal};
+`;
+
+const ModalScrollTrap = styled('div')`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: ${p => p.theme.zIndex.modal};
+`;
+
+// Define some basic styling. Each modal usage
+// can pass a className prop with more styles.
+const ModalContainer = styled('div')`
+  position: absolute;
+  background: #fff;
+
+  margin: ${space(3)};
+  padding: ${space(3)};
+
+  border: 1px solid ${p => p.theme.borderLight};
+  border-radius: ${p => p.theme.borderRadius};
+  box-shadow: ${p => p.theme.dropShadowHeavy};
+
+  z-index: ${p => p.theme.zIndex.modal};
+`;
+
+const CircleButton = styled('button')`
+  background: #fff;
+  border-radius: ${p => p.size / 2}px;
+  padding: ${p => p.size / 4}px;
+  line-height: ${p => p.size * 0.4}px;
+  height: ${p => p.size}px;
+  box-shadow: ${p => p.theme.dropShadowLight};
+  border: 1px solid ${p => p.theme.borderDark};
+
+  position: absolute;
+  top: -${p => p.size / 2}px;
+  right: -${p => p.size / 2}px;
+`;
+
+const DismissButton = props => {
+  const iconSize = props.size * 0.4;
+  return (
+    <CircleButton size={props.size} onClick={props.onClick}>
+      <InlineSvg src="icon-close" size={`${iconSize}px`} />
+    </CircleButton>
+  );
+};
+DismissButton.propTypes = {
+  onClick: PropTypes.func,
+  size: PropTypes.number.isRequired,
+};
+
+export default ModalDialog;

src/sentry/static/sentry/app/views/organizationEventsV2/eventDetails.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import styled from 'react-emotion';
 import {browserHistory} from 'react-router';
 import PropTypes from 'prop-types';
 import {omit} from 'lodash';
+import {css} from 'react-emotion';
 
 import SentryTypes from 'app/sentryTypes';
 import AsyncComponent from 'app/components/asyncComponent';
-import InlineSvg from 'app/components/inlineSvg';
+import ModalDialog from 'app/components/modalDialog';
 import withApi from 'app/utils/withApi';
+import theme from 'app/utils/theme';
 import space from 'app/styles/space';
 
 import EventModalContent from './eventModalContent';
@@ -26,6 +27,19 @@ const slugValidator = function(props, propName, componentName) {
   return null;
 };
 
+const modalStyles = css`
+  top: 0px;
+  left: 0px;
+  right: 0px;
+
+  margin: ${space(3)};
+  padding: ${space(3)};
+
+  @media (max-width: ${theme.breakpoints[1]}) {
+    margin: ${space(2)};
+  }
+`;
+
 class EventDetails extends AsyncComponent {
   static propTypes = {
     organization: SentryTypes.Organization.isRequired,
@@ -73,8 +87,7 @@ class EventDetails extends AsyncComponent {
     ];
   }
 
-  handleClose = event => {
-    event.preventDefault();
+  onDismiss = () => {
     const {location} = this.props;
     // Remove modal related query parameters.
     const query = omit(location.query, ['groupSlug', 'eventSlug']);
@@ -97,23 +110,12 @@ class EventDetails extends AsyncComponent {
     throw new Error('Could not determine projectId');
   }
 
-  componentDidMount() {
-    this.restoreOverflow = document.body.style.overflow;
-
-    document.body.style.overflow = 'hidden';
-  }
-
-  componentWillUnmount() {
-    document.body.style.overflow = this.restoreOverflow;
-  }
-
   renderBody() {
     const {organization, view, location} = this.props;
     const {event} = this.state;
 
     return (
-      <ModalContainer>
-        <CloseButton onClick={this.handleClose} size={30} />
+      <ModalDialog onDismiss={this.onDismiss} className={modalStyles}>
         <EventModalContent
           onTabChange={this.handleTabChange}
           event={event}
@@ -122,67 +124,13 @@ class EventDetails extends AsyncComponent {
           view={view}
           location={location}
         />
-      </ModalContainer>
+      </ModalDialog>
     );
   }
 
   renderLoading() {
-    return (
-      <ModalContainer>
-        <CloseButton onClick={this.handleClose} size={30} />
-        {super.renderLoading()}
-      </ModalContainer>
-    );
+    return <ModalDialog className={modalStyles}>{super.renderLoading()}</ModalDialog>;
   }
 }
 
-const ModalContainer = styled('div')`
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  background: #fff;
-
-  margin: ${space(3)};
-  padding: ${space(3)};
-
-  border: 1px solid ${p => p.theme.borderLight};
-  border-radius: ${p => p.theme.borderRadius};
-  box-shadow: ${p => p.theme.dropShadowHeavy};
-
-  z-index: ${p => p.theme.zIndex.modal};
-
-  @media (max-width: ${p => p.theme.breakpoints[1]}) {
-    margin: ${space(2)};
-  }
-`;
-
-const CircleButton = styled('button')`
-  background: #fff;
-  border-radius: ${p => p.size / 2}px;
-  padding: ${p => p.size / 4}px;
-  line-height: ${p => p.size * 0.4}px;
-  height: ${p => p.size}px;
-  box-shadow: ${p => p.theme.dropShadowLight};
-  border: 1px solid ${p => p.theme.borderDark};
-
-  position: absolute;
-  top: -${p => p.size / 2}px;
-  right: -${p => p.size / 2}px;
-`;
-
-const CloseButton = props => {
-  const iconSize = props.size * 0.4;
-  return (
-    <CircleButton size={props.size} onClick={props.onClick}>
-      <InlineSvg src="icon-close" size={`${iconSize}px`} />
-    </CircleButton>
-  );
-};
-CloseButton.propTypes = {
-  onClick: PropTypes.func,
-  size: PropTypes.number.isRequired,
-};
-
 export default withApi(EventDetails);

src/sentry/static/sentry/app/views/organizationEventsV2/eventModalContent.jsx

@@ -108,6 +108,7 @@ EventMetadata.propTypes = {
 };
 
 const OverflowHeader = styled('h2')`
+  line-height: 1.2;
   ${overflowEllipsis}
 `;
 
@@ -121,8 +122,6 @@ const MetadataContainer = styled('div')`
 
 const ColumnGrid = styled('div')`
   display: grid;
-  max-height: 100%;
-  overflow: auto;
 
   grid-template-columns: 70% 28%;
   grid-template-rows: auto;

tests/js/spec/views/organizationEventsV2/eventDetails.spec.jsx

@@ -142,7 +142,7 @@ describe('OrganizationEventsV2 > EventDetails', function() {
       />,
       TestStubs.routerContext()
     );
-    const button = wrapper.find('CloseButton');
+    const button = wrapper.find('DismissButton');
     button.simulate('click');
     expect(browserHistory.push).toHaveBeenCalledWith({
       pathname: '/organizations/org-slug/events/',
@@ -163,7 +163,7 @@ describe('OrganizationEventsV2 > EventDetails', function() {
       />,
       TestStubs.routerContext()
     );
-    const button = wrapper.find('CloseButton');
+    const button = wrapper.find('DismissButton');
     button.simulate('click');
     expect(browserHistory.push).toHaveBeenCalledWith({
       pathname: '/organizations/org-slug/events/',