Merge branch 'protocol_designer-migrate-webpack-to-vite' of https://g…

…ithub.com/Opentrons/opentrons into protocol_designer-migrate-webpack-to-vite

app/src/App/portal.tsx

@@ -1,70 +1,19 @@
 import * as React from 'react'
-import ReactDom from 'react-dom'
 import { Box } from '@opentrons/components'
 
-// TODO(bc, 2021-02-23): this component should probably be named
-// something else for clarity, and may belong better in a
-// different directory than app/src/App/
-
-type PortalLevel = 'page' | 'top'
-
-interface Props {
-  children: React.ReactNode
-  level: PortalLevel
-}
-
-interface State {
-  hasRoot: boolean
+const TOP_PORTAL_ID = '__otAppTopPortalRoot'
+const MODAL_PORTAL_ID = '__otAppModalPortalRoot'
+export function getTopPortalEl(): HTMLElement {
+  return global.document.getElementById(TOP_PORTAL_ID) ?? global.document.body
 }
-
-interface PortalLevelInfo {
-  id: string
-  zIndex: number | string
-}
-
-const PORTAL_ROOT_PROPS_BY_LEVEL: Record<PortalLevel, PortalLevelInfo> = {
-  page: { id: '__otAppModalPortalRoot', zIndex: 1 },
-  top: { id: '__otAppTopPortalRoot', zIndex: 10 },
+export function getModalPortalEl(): HTMLElement {
+  return global.document.getElementById(MODAL_PORTAL_ID) ?? global.document.body
 }
 
-const getPortalRoot = (level: PortalLevel): HTMLElement | null =>
-  (global.document as HTMLDocument).getElementById(
-    PORTAL_ROOT_PROPS_BY_LEVEL[level].id
-  )
-
 export function PortalRoot(): JSX.Element {
-  return <Box {...PORTAL_ROOT_PROPS_BY_LEVEL.page} />
+  return <Box zIndex={1} id={MODAL_PORTAL_ID} />
 }
 
 export function TopPortalRoot(): JSX.Element {
-  return <Box {...PORTAL_ROOT_PROPS_BY_LEVEL.top} />
-}
-
-// the children of Portal are rendered into the PortalRoot if it exists in DOM
-export class Portal extends React.Component<Props, State> {
-  $root: Element | null | undefined
-
-  static defaultProps: { level: PortalLevel } = {
-    level: 'page',
-  }
-
-  constructor(props: Props) {
-    super(props)
-    this.$root = getPortalRoot(props.level)
-    this.state = { hasRoot: !!this.$root }
-  }
-
-  // on first launch, $portalRoot isn't in DOM; double check once we're mounted
-  // TODO(mc, 2018-10-08): prerender UI instead
-  componentDidMount(): void {
-    if (!this.$root) {
-      this.$root = getPortalRoot(this.props.level)
-      this.setState({ hasRoot: !!this.$root })
-    }
-  }
-
-  render(): React.ReactPortal | null {
-    if (!this.$root) return null
-    return ReactDom.createPortal(this.props.children, this.$root)
-  }
+  return <Box zIndex={10} id={TOP_PORTAL_ID} />
 }

app/src/molecules/modals/ErrorModal.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { Link } from 'react-router-dom'
 import { AlertModal } from '@opentrons/components'
-import { Portal } from '../../App/portal'
+import { getModalPortalEl } from '../../App/portal'
 
 import styles from './styles.module.css'
 import type { ButtonProps } from '@opentrons/components'
@@ -11,7 +12,7 @@ interface Props {
   description: string
   close?: () => unknown
   closeUrl?: string
-  error: { message?: string; [key: string]: unknown } | null
+  error: { message?: string;[key: string]: unknown } | null
 }
 
 const DEFAULT_HEADING = 'Unexpected Error'
@@ -33,19 +34,18 @@ export function ErrorModal(props: Props): JSX.Element {
     }
   }
 
-  return (
-    <Portal>
-      <AlertModal heading={heading} buttons={[closeButtonProps]} alertOverlay>
-        <p className={styles.error_modal_message}>
-          {error?.message ?? AN_UNKNOWN_ERROR_OCCURRED}
-        </p>
-        <p>{description}</p>
-        <p>
-          If you keep getting this message, try restarting your app and/or
-          robot. If this does not resolve the issue please contact Opentrons
-          Support.
-        </p>
-      </AlertModal>
-    </Portal>
+  return createPortal(
+    <AlertModal heading={heading} buttons={[closeButtonProps]} alertOverlay>
+      <p className={styles.error_modal_message}>
+        {error?.message ?? AN_UNKNOWN_ERROR_OCCURRED}
+      </p>
+      <p>{description}</p>
+      <p>
+        If you keep getting this message, try restarting your app and/or
+        robot. If this does not resolve the issue please contact Opentrons
+        Support.
+      </p>
+    </AlertModal>,
+    getModalPortalEl()
   )
 }

app/src/organisms/AdvancedSettings/ClearUnavailableRobots.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -23,7 +24,7 @@ import { TertiaryButton } from '../../atoms/buttons'
 import { ERROR_TOAST, SUCCESS_TOAST } from '../../atoms/Toast'
 import { useToaster } from '../../organisms/ToasterOven'
 import { LegacyModal } from '../../molecules/LegacyModal'
-import { Portal } from '../../App/portal'
+import { Portal, getTopPortalEl } from '../../App/portal'
 import {
   clearDiscoveryCache,
   getReachableRobots,
@@ -62,8 +63,7 @@ export function ClearUnavailableRobots(): JSX.Element {
   } = useConditionalConfirm(handleDeleteUnavailRobots, true)
   return (
     <>
-      {showConfirmDeleteUnavailRobots ? (
-        <Portal level="top">
+      {showConfirmDeleteUnavailRobots ? createPortal(
           <LegacyModal
             type="warning"
             title={t('clear_unavailable_robots')}
@@ -95,8 +95,8 @@ export function ClearUnavailableRobots(): JSX.Element {
                 </AlertPrimaryButton>
               </Flex>
             </Flex>
-          </LegacyModal>
-        </Portal>
+          </LegacyModal>,
+          getTopPortalEl()
       ) : null}
       <Flex
         alignItems={ALIGN_CENTER}

app/src/organisms/AnalyticsSettingsModal/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { useSelector, useDispatch } from 'react-redux'
 
 import {
@@ -8,7 +9,7 @@ import {
 
 import { Modal, OutlineButton, SPACING } from '@opentrons/components'
 import { AnalyticsToggle } from './AnalyticsToggle'
-import { Portal } from '../../App/portal'
+import { getModalPortalEl } from '../../App/portal'
 import type { Dispatch } from '../../redux/types'
 
 // TODO(bc, 2021-02-04): i18n
@@ -21,18 +22,17 @@ export function AnalyticsSettingsModal(): JSX.Element | null {
   const seen = useSelector(getAnalyticsOptInSeen)
   const setSeen = (): unknown => dispatch(setAnalyticsOptInSeen())
 
-  return !seen ? (
-    <Portal>
-      <Modal onCloseClick={setSeen} heading={TITLE} alertOverlay>
-        <AnalyticsToggle />
-        <OutlineButton
-          onClick={setSeen}
-          float="right"
-          margin={SPACING.spacing12}
-        >
-          {CONTINUE}
-        </OutlineButton>
-      </Modal>
-    </Portal>
+  return !seen ? createPortal(
+    <Modal onCloseClick={setSeen} heading={TITLE} alertOverlay>
+      <AnalyticsToggle />
+      <OutlineButton
+        onClick={setSeen}
+        float="right"
+        margin={SPACING.spacing12}
+      >
+        {CONTINUE}
+      </OutlineButton>
+    </Modal>,
+    getModalPortalEl()
   ) : null
 }

app/src/organisms/ApplyHistoricOffsets/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { useSelector } from 'react-redux'
 import pick from 'lodash/pick'
 import { Trans, useTranslation } from 'react-i18next'
@@ -14,7 +15,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   CheckboxField,
 } from '@opentrons/components'
-import { Portal } from '../../App/portal'
+import { getTopPortalEl } from '../../App/portal'
 import {
   LegacyModalHeader,
   LegacyModalShell,
@@ -107,8 +108,7 @@ export function ApplyHistoricOffsets(
       >
         {t(noOffsetData ? 'learn_more' : 'view_data')}
       </Link>
-      {showOffsetDataModal ? (
-        <Portal level="top">
+      {showOffsetDataModal ? createPortal(
           <LegacyModalShell
             maxWidth="40rem"
             header={
@@ -175,8 +175,8 @@ export function ApplyHistoricOffsets(
                 )
               ) : null}
             </Flex>
-          </LegacyModalShell>
-        </Portal>
+          </LegacyModalShell>,
+          getTopPortalEl()
       ) : null}
     </Flex>
   )

app/src/organisms/CalibrateDeck/index.tsx

@@ -1,5 +1,6 @@
 // Deck Calibration Orchestration Component
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
 
@@ -21,7 +22,7 @@ import {
 } from '../../organisms/CalibrationPanels'
 import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
-import { Portal } from '../../App/portal'
+import { getTopPortalEl } from '../../App/portal'
 
 import type { Mount } from '@opentrons/components'
 import type {
@@ -135,8 +136,7 @@ export function CalibrateDeck(
     currentStep != null && currentStep in PANEL_BY_STEP
       ? PANEL_BY_STEP[currentStep]
       : null
-  return (
-    <Portal level="top">
+  return createPortal(
       <LegacyModalShell
         width="47rem"
         header={
@@ -178,8 +178,8 @@ export function CalibrateDeck(
             allowChangeTipRack
           />
         )}
-      </LegacyModalShell>
-    </Portal>
+      </LegacyModalShell>,
+      getTopPortalEl()
   )
 }
 

app/src/organisms/CalibratePipetteOffset/index.tsx

@@ -1,5 +1,6 @@
 // Pipette Offset Calibration Orchestration Component
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
 
@@ -21,7 +22,7 @@ import {
 } from '../../organisms/CalibrationPanels'
 import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
-import { Portal } from '../../App/portal'
+import { getTopPortalEl } from '../../App/portal'
 
 import type { Mount } from '@opentrons/components'
 import type {
@@ -121,8 +122,7 @@ export function CalibratePipetteOffset(
     currentStep != null && currentStep in PANEL_BY_STEP
       ? PANEL_BY_STEP[currentStep]
       : null
-  return (
-    <Portal level="top">
+  return createPortal(
       <LegacyModalShell
         width="47rem"
         header={
@@ -164,8 +164,8 @@ export function CalibratePipetteOffset(
             defaultTipracks={instrument?.defaultTipracks}
           />
         )}
-      </LegacyModalShell>
-    </Portal>
+      </LegacyModalShell>,
+      getTopPortalEl()
   )
 }