chore(modals): Emotion CSS + Reduce bootstrap imports (#17892)

src/sentry/static/sentry/app/actionCreators/modal.tsx

@@ -50,10 +50,7 @@ export async function openSudo({onClose, ...args}: OpenSudoModalOptions = {}) {
   );
   const {default: Modal} = mod;
 
-  openModal(deps => <Modal {...deps} {...args} />, {
-    modalClassName: 'sudo-modal',
-    onClose,
-  });
+  openModal(deps => <Modal {...deps} {...args} />, {onClose});
 }
 
 export async function openDiffModal(options: ModalOptions) {
@@ -62,9 +59,7 @@ export async function openDiffModal(options: ModalOptions) {
   );
   const {default: Modal, modalCss} = mod;
 
-  openModal(deps => <Modal {...deps} {...options} />, {
-    modalCss,
-  });
+  openModal(deps => <Modal {...deps} {...options} />, {modalCss});
 }
 
 type CreateTeamModalOptions = {
@@ -84,9 +79,7 @@ export async function openCreateTeamModal(options: CreateTeamModalOptions) {
   );
   const {default: Modal} = mod;
 
-  openModal(deps => <Modal {...deps} {...options} />, {
-    modalClassName: 'create-team-modal',
-  });
+  openModal(deps => <Modal {...deps} {...options} />);
 }
 
 type CreateOwnershipRuleModalOptions = {
@@ -104,22 +97,18 @@ export async function openCreateOwnershipRule(options: CreateOwnershipRuleModalO
   const mod = await import(
     /* webpackChunkName: "CreateOwnershipRuleModal" */ 'app/components/modals/createOwnershipRuleModal'
   );
-  const {default: Modal} = mod;
+  const {default: Modal, modalCss} = mod;
 
-  openModal(deps => <Modal {...deps} {...options} />, {
-    modalClassName: 'create-ownership-rule-modal',
-  });
+  openModal(deps => <Modal {...deps} {...options} />, {modalCss});
 }
 
 export async function openCommandPalette(options: ModalOptions = {}) {
   const mod = await import(
     /* webpackChunkName: "CommandPalette" */ 'app/components/modals/commandPalette'
   );
-  const {default: Modal} = mod;
+  const {default: Modal, modalCss} = mod;
 
-  openModal(deps => <Modal {...deps} {...options} />, {
-    modalClassName: 'command-palette',
-  });
+  openModal(deps => <Modal {...deps} {...options} />, {modalCss});
 }
 
 export async function openRecoveryOptions(options: ModalOptions = {}) {
@@ -163,11 +152,9 @@ export async function openHelpSearchModal() {
   const mod = await import(
     /* webpackChunkName: "HelpSearchModal" */ 'app/components/modals/helpSearchModal'
   );
-  const {default: Modal} = mod;
+  const {default: Modal, modalCss} = mod;
 
-  openModal(deps => <Modal {...deps} />, {
-    modalClassName: 'help-search-modal',
-  });
+  openModal(deps => <Modal {...deps} />, {modalCss});
 }
 
 export type SentryAppDetailsModalOptions = {

src/sentry/static/sentry/app/actionCreators/navigation.tsx

@@ -14,16 +14,15 @@ export function navigateTo(to: string, router: InjectedRouter) {
 
   if (needOrg || needProject) {
     openModal(
-      ({closeModal, Header, Body}) => (
+      modalProps => (
         <ContextPickerModal
-          Header={Header}
-          Body={Body}
+          {...modalProps}
           nextPath={to}
           needOrg={needOrg}
           needProject={needProject}
           comingFromProjectId={comingFromProjectId}
           onFinish={path => {
-            closeModal();
+            modalProps.closeModal();
             setTimeout(() => router.push(path), 0);
           }}
         />

src/sentry/static/sentry/app/components/contextPickerModal.tsx

@@ -1,4 +1,3 @@
-import {ModalBody, ModalHeader} from 'react-bootstrap';
 import ReactSelect, {components} from 'react-select';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -17,23 +16,14 @@ import replaceRouterParams from 'app/utils/replaceRouterParams';
 import space from 'app/styles/space';
 import Link from 'app/components/links/link';
 import IdBadge from 'app/components/idBadge';
+import {ModalRenderProps} from 'app/actionCreators/modal';
 
-type Props = {
+type Props = ModalRenderProps & {
   /**
    * The destination route
    */
   nextPath: string;
 
-  /**
-   * Container for modal header
-   */
-  Header: typeof ModalHeader;
-
-  /**
-   * Container for modal body
-   */
-  Body: typeof ModalBody;
-
   /**
    * List of available organizations
    */

src/sentry/static/sentry/app/components/globalModal.tsx

@@ -89,8 +89,8 @@ class GlobalModal extends React.Component<Props> {
         {({css, cx}) => (
           <Modal
             className={cx(
-              options && options.modalClassName,
-              options && options.modalCss && css(options.modalCss)
+              options?.modalClassName,
+              options?.modalCss && css(options.modalCss)
             )}
             dialogClassName={options && options.dialogClassName}
             show={visible}

src/sentry/static/sentry/app/components/modals/commandPalette.jsx

@@ -1,4 +1,4 @@
-import {ClassNames} from '@emotion/core';
+import {ClassNames, css} from '@emotion/core';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
@@ -33,13 +33,13 @@ class CommandPaletteModal extends React.Component {
     return (
       <Body>
         <ClassNames>
-          {({css}) => (
+          {({css: injectedCss}) => (
             <Search
               {...this.props}
               entryPoint="command_palette"
               minSearch={1}
               maxResults={10}
-              dropdownStyle={css`
+              dropdownStyle={injectedCss`
                 width: 100%;
                 border: transparent;
                 border-top-left-radius: 0;
@@ -70,6 +70,12 @@ class CommandPaletteModal extends React.Component {
 
 export default CommandPaletteModal;
 
+export const modalCss = css`
+  .modal-content {
+    padding: 0;
+  }
+`;
+
 const InputWrapper = styled('div')`
   padding: 2px;
 `;

src/sentry/static/sentry/app/components/modals/createOwnershipRuleModal.jsx

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {css} from '@emotion/core';
 
 import {t} from 'app/locale';
 import ProjectOwnershipModal from 'app/views/settings/project/projectOwnership/modal';
 import SentryTypes from 'app/sentryTypes';
+import theme from 'app/utils/theme';
 
 class CreateOwnershipRuleModal extends React.Component {
   static propTypes = {
@@ -42,4 +44,16 @@ class CreateOwnershipRuleModal extends React.Component {
   }
 }
 
+export const modalCss = css`
+  @media (min-width: ${theme.breakpoints[0]}) {
+    .modal-dialog {
+      width: 80%;
+      margin-left: -40%;
+    }
+  }
+  .modal-content {
+    overflow: initial;
+  }
+`;
+
 export default CreateOwnershipRuleModal;

src/sentry/static/sentry/app/components/modals/helpSearchModal.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
-import {ClassNames} from '@emotion/core';
+import {ClassNames, css} from '@emotion/core';
 
 import {t} from 'app/locale';
 import Search from 'app/components/search';
@@ -19,14 +19,14 @@ class HelpSearchModal extends React.Component {
     return (
       <Body>
         <ClassNames>
-          {({css}) => (
+          {({css: injectedCss}) => (
             <Search
               {...this.props}
               sources={[HelpSource]}
               entryPoint="sidebar_help"
               minSearch={3}
               maxResults={10}
-              dropdownStyle={css`
+              dropdownStyle={injectedCss`
                 width: 100%;
                 border: transparent;
                 border-top-left-radius: 0;
@@ -71,4 +71,10 @@ const Input = styled('input')`
   }
 `;
 
+export const modalCss = css`
+  .modal-content {
+    padding: 0;
+  }
+`;
+
 export default HelpSearchModal;

src/sentry/static/sentry/app/components/modals/inviteMembersModal/index.tsx

@@ -502,7 +502,7 @@ const StatusMessage = styled('div')<{status?: 'success' | 'error'}>`
   }
 `;
 
-const modalCss = css`
+export const modalCss = css`
   padding: 50px;
 
   .modal-dialog {
@@ -513,5 +513,4 @@ const modalCss = css`
   }
 `;
 
-export {modalCss};
 export default withLatestContext(withTeams(InviteMembersModal));

src/sentry/static/sentry/app/components/modals/redirectToProject.tsx

@@ -1,5 +1,4 @@
 import * as ReactRouter from 'react-router';
-import {ModalBody, ModalHeader} from 'react-bootstrap';
 import React from 'react';
 import styled from '@emotion/styled';
 
@@ -7,12 +6,12 @@ import {t, tct} from 'app/locale';
 import Button from 'app/components/button';
 import Text from 'app/components/text';
 import recreateRoute from 'app/utils/recreateRoute';
+import {ModalRenderProps} from 'app/actionCreators/modal';
 
-type Props = ReactRouter.WithRouterProps & {
-  slug: string;
-  Header: typeof ModalHeader;
-  Body: typeof ModalBody;
-};
+type Props = ModalRenderProps &
+  ReactRouter.WithRouterProps & {
+    slug: string;
+  };
 
 type State = {
   timer: number;

src/sentry/static/sentry/app/views/organizationIntegrations/pluginDetailedView.tsx

@@ -110,15 +110,14 @@ class PluginDetailedView extends AbstractIntegrationDetailedView<
       eventName: 'Integrations: Plugin Add to Project Clicked',
     });
     modal.openModal(
-      ({closeModal, Header, Body}) => (
+      modalProps => (
         <ContextPickerModal
-          Header={Header}
-          Body={Body}
+          {...modalProps}
           nextPath={`/settings/${organization.slug}/projects/:projectId/plugins/${plugin.id}/`}
           needProject
           needOrg={false}
           onFinish={path => {
-            closeModal();
+            modalProps.closeModal();
             router.push(path);
           }}
         />