chore(js): Avoid ReactDOM default export (#33095)

static/app/bootstrap/exportGlobals.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import {findDOMNode, render} from 'react-dom';
 import * as ReactRouter from 'react-router';
 import * as Sentry from '@sentry/react';
 import moment from 'moment';
@@ -17,10 +17,7 @@ const globals = {
   Sentry,
   moment,
   Router: ReactRouter,
-  ReactDOM: {
-    findDOMNode: ReactDOM.findDOMNode,
-    render: ReactDOM.render,
-  },
+  ReactDOM: {findDOMNode, render},
 
   // django templates make use of these globals
   SentryApp: {},

static/app/bootstrap/renderDom.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import {render} from 'react-dom';
 
 export function renderDom(
   Component: React.ComponentType,
@@ -13,5 +13,5 @@ export function renderDom(
     return;
   }
 
-  ReactDOM.render(<Component {...props} />, rootEl);
+  render(<Component {...props} />, rootEl);
 }

static/app/bootstrap/renderPipelineView.tsx

@@ -1,15 +1,15 @@
-import ReactDOM from 'react-dom';
+import {render} from 'react-dom';
 
 import {ROOT_ELEMENT} from 'sentry/constants';
 import {PipelineInitialData} from 'sentry/types';
 import PipelineView from 'sentry/views/integrationPipeline/pipelineView';
 
-function render(pipelineName: string, props: PipelineInitialData['props']) {
+function renderDom(pipelineName: string, props: PipelineInitialData['props']) {
   const rootEl = document.getElementById(ROOT_ELEMENT);
-  ReactDOM.render(<PipelineView pipelineName={pipelineName} {...props} />, rootEl);
+  render(<PipelineView pipelineName={pipelineName} {...props} />, rootEl);
 }
 
 export function renderPipelineView() {
   const {name, props} = window.__pipelineInitialData;
-  render(name, props);
+  renderDom(name, props);
 }

static/app/components/clipboard.tsx

@@ -1,5 +1,5 @@
 import {cloneElement, Component, isValidElement} from 'react';
-import ReactDOM from 'react-dom';
+import {findDOMNode} from 'react-dom';
 import copy from 'copy-text-to-clipboard';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
@@ -39,7 +39,7 @@ class Clipboard extends Component<Props> {
     this.element?.removeEventListener('click', this.handleClick);
   }
 
-  element?: ReturnType<typeof ReactDOM.findDOMNode>;
+  element?: ReturnType<typeof findDOMNode>;
 
   handleClick = () => {
     const {value, hideMessages, successMessage, errorMessage, onSuccess, onError} =
@@ -66,7 +66,7 @@ class Clipboard extends Component<Props> {
     }
 
     // eslint-disable-next-line react/no-find-dom-node
-    this.element = ReactDOM.findDOMNode(ref);
+    this.element = findDOMNode(ref);
     this.element?.addEventListener('click', this.handleClick);
   };
 

static/app/components/clippedBox.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import {findDOMNode} from 'react-dom';
 import styled from '@emotion/styled';
 import color from 'color';
 
@@ -42,7 +42,7 @@ class ClippedBox extends React.PureComponent<Props, State> {
 
   componentDidMount() {
     // eslint-disable-next-line react/no-find-dom-node
-    const renderedHeight = (ReactDOM.findDOMNode(this) as HTMLElement).offsetHeight;
+    const renderedHeight = (findDOMNode(this) as HTMLElement).offsetHeight;
     this.calcHeight(renderedHeight);
   }
 
@@ -61,7 +61,7 @@ class ClippedBox extends React.PureComponent<Props, State> {
 
     if (!this.props.renderedHeight) {
       // eslint-disable-next-line react/no-find-dom-node
-      const renderedHeight = (ReactDOM.findDOMNode(this) as HTMLElement).offsetHeight;
+      const renderedHeight = (findDOMNode(this) as HTMLElement).offsetHeight;
 
       if (renderedHeight < this.props.clipHeight) {
         this.reveal();

static/app/components/contextPickerModal.tsx

@@ -1,5 +1,5 @@
 import {Component, Fragment} from 'react';
-import ReactDOM from 'react-dom';
+import {findDOMNode} from 'react-dom';
 import {components, StylesConfig} from 'react-select';
 import styled from '@emotion/styled';
 
@@ -167,7 +167,7 @@ class ContextPickerModal extends Component<Props> {
     }
 
     // eslint-disable-next-line react/no-find-dom-node
-    const el = ReactDOM.findDOMNode(ref) as HTMLElement;
+    const el = findDOMNode(ref) as HTMLElement;
 
     if (el !== null) {
       const input = el.querySelector('input');

static/app/components/forms/textCopyInput.tsx

@@ -1,6 +1,6 @@
 import {CSSProperties} from 'react';
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import {findDOMNode} from 'react-dom';
 import styled from '@emotion/styled';
 
 import Button from 'sentry/components/button';
@@ -79,7 +79,7 @@ class TextCopyInput extends React.Component<Props> {
 
     // We use findDOMNode here because `this.textRef` is not a dom node,
     // it's a ref to AutoSelectText
-    const node = ReactDOM.findDOMNode(this.textRef.current); // eslint-disable-line react/no-find-dom-node
+    const node = findDOMNode(this.textRef.current); // eslint-disable-line react/no-find-dom-node
     if (!node || !(node instanceof HTMLElement)) {
       return;
     }

static/app/components/globalModal/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import {createPortal} from 'react-dom';
 import {browserHistory} from 'react-router';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -180,7 +180,7 @@ function GlobalModal({visible = false, options = {}, children, onClose}: Props)
   const clickClose = (e: React.MouseEvent) =>
     containerRef.current === e.target && allowClickClose && closeModal();
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <React.Fragment>
       <Backdrop
         style={backdrop && visible ? {opacity: 0.5, pointerEvents: 'auto'} : {}}

static/app/components/hovercard.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import ReactDOM from 'react-dom';
+import {createPortal} from 'react-dom';
 import {Manager, Popper, PopperProps, Reference} from 'react-popper';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
@@ -155,7 +155,7 @@ function Hovercard(props: HovercardProps): React.ReactElement {
           </span>
         )}
       </Reference>
-      {ReactDOM.createPortal(
+      {createPortal(
         <Popper placement={props.position ?? 'top'} modifiers={popperModifiers}>
           {({ref, style, placement, arrowProps, scheduleUpdate}) => {
             scheduleUpdateRef.current = scheduleUpdate;

static/app/components/passwordStrength.tsx

@@ -1,5 +1,5 @@
 import {Fragment} from 'react';
-import ReactDOM from 'react-dom';
+import {render} from 'react-dom';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
@@ -110,6 +110,6 @@ export const attachTo = ({input, element}) =>
   input.addEventListener(
     'input',
     throttle(e => {
-      ReactDOM.render(<PasswordStrength value={e.target.value} />, element);
+      render(<PasswordStrength value={e.target.value} />, element);
     })
   );