refactor(app): split InterventionModal to molecule (#15174)

The implementation of the intervention modal (i.e., manual move labware)
in the desktop app was sort of manually open-coded in the intervention
modal organism. We're going to need modals styled in this way elsewhere,
so split it out into an app molecule with some overridable styles.

Also, make its background wrapper position: absolute instead of
position: fixed, for the same reasons as #15166 - when this modal is
hung off of the modal portal rather than the top portal, it should allow
interaction with the navbar and the breadcrumbs. This should not affect
the modal's use in the actual InterventionRequired organism, since in
the organism the modal is hung off of the top portal.

Closes RSQ-6

## Testing
- [x] The new storybook component should render
- [x] Move labware and pause modals on desktop should still render as in
~figma~ the shipping app
- [x] Move labware and pause modals on desktop should continue to ~(a)
visually overlap and (b)~ inhibit interaction with the navbar and
breadcrumbs

the shipping app has these modals confined to the route component area,
while figma has them overlapping everything with a small padding to the
viewport boundary. this pr doesn't change that. the navbar and route
breadcrumbs are still non interactive.

app/src/molecules/InterventionModal/InterventionModal.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { StyledText } from '@opentrons/components'
+import { InterventionModal as InterventionModalComponent } from './'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'App/Molecules/InterventionModal',
+  component: InterventionModalComponent,
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof InterventionModalComponent>
+> = args => <InterventionModalComponent {...args} />
+
+export const ErrorIntervention = Template.bind({})
+ErrorIntervention.args = {
+  robotName: 'Otie',
+  type: 'error',
+  heading: <StyledText as="h3">Oh no, an error!</StyledText>,
+  iconName: 'alert-circle',
+  children: <StyledText as="p">Heres some error content</StyledText>,
+}
+
+export const InterventionRequiredIntervention = Template.bind({})
+InterventionRequiredIntervention.args = {
+  robotName: 'Otie',
+  type: 'intervention-required',
+  heading: <StyledText as="h3">Looks like theres something to do</StyledText>,
+  children: <StyledText as="p">Youve got to intervene!</StyledText>,
+}

app/src/molecules/InterventionModal/__tests__/InterventionModal.test.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { screen } from '@testing-library/react'
+import { COLORS, BORDERS } from '@opentrons/components'
+import { renderWithProviders } from '../../../__testing-utils__'
+import { InterventionModal } from '../'
+import type { ModalType } from '../'
+
+const render = (props: React.ComponentProps<typeof InterventionModal>) => {
+  return renderWithProviders(<InterventionModal {...props} />)[0]
+}
+
+describe('InterventionModal', () => {
+  let props: React.ComponentProps<typeof InterventionModal>
+
+  beforeEach(() => {
+    props = {
+      heading: 'mock intervention heading',
+      children: 'mock intervention children',
+      iconName: 'alert-circle',
+      type: 'intervention-required',
+    }
+  })
+  ;(['intervention-required', 'error'] as ModalType[]).forEach(type => {
+    const color =
+      type === 'intervention-required' ? COLORS.blue50 : COLORS.red50
+    it(`renders with the ${type} style`, () => {
+      render({ ...props, type })
+      const header = screen.getByTestId('__otInterventionModalHeader')
+      expect(header).toHaveStyle(`background-color: ${color}`)
+      const modal = screen.getByTestId('__otInterventionModal')
+      expect(modal).toHaveStyle(`border: 6px ${BORDERS.styleSolid} ${color}`)
+    })
+  })
+  it('uses intervention-required if prop is not passed', () => {
+    render({ ...props, type: undefined })
+    const header = screen.getByTestId('__otInterventionModalHeader')
+    expect(header).toHaveStyle(`background-color: ${COLORS.blue50}`)
+    const modal = screen.getByTestId('__otInterventionModal')
+    expect(modal).toHaveStyle(
+      `border: 6px ${BORDERS.styleSolid} ${COLORS.blue50}`
+    )
+  })
+  it('renders passed elements', () => {
+    render(props)
+    screen.getByText('mock intervention children')
+    screen.getByText('mock intervention heading')
+  })
+  it('renders an icon if an icon is specified', () => {
+    const { container } = render(props)
+    // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
+    const icon = container.querySelector(
+      '[aria-roledescription="alert-circle"]'
+    )
+    expect(icon).not.toBeNull()
+  })
+  it('does not render an icon if no icon is specified', () => {
+    const { container } = render({ ...props, iconName: undefined })
+    // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
+    const icon = container.querySelector(
+      '[aria-roledescription="alert-circle"]'
+    )
+    expect(icon).toBeNull()
+  })
+})

app/src/molecules/InterventionModal/index.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react'
+import {
+  ALIGN_CENTER,
+  BORDERS,
+  Box,
+  COLORS,
+  Flex,
+  Icon,
+  JUSTIFY_CENTER,
+  OVERFLOW_AUTO,
+  POSITION_ABSOLUTE,
+  POSITION_RELATIVE,
+  POSITION_STICKY,
+  SPACING,
+} from '@opentrons/components'
+import type { IconName } from '@opentrons/components'
+
+export type ModalType = 'intervention-required' | 'error'
+
+const BASE_STYLE = {
+  position: POSITION_ABSOLUTE,
+  alignItems: ALIGN_CENTER,
+  justifyContent: JUSTIFY_CENTER,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  'data-testid': '__otInterventionModalHeaderBase',
+} as const
+
+const BORDER_STYLE_BASE = `6px ${BORDERS.styleSolid}`
+
+const MODAL_STYLE = {
+  backgroundColor: COLORS.white,
+  position: POSITION_RELATIVE,
+  overflowY: OVERFLOW_AUTO,
+  maxHeight: '100%',
+  width: '47rem',
+  borderRadius: BORDERS.borderRadius8,
+  boxShadow: BORDERS.smallDropShadow,
+  'data-testid': '__otInterventionModal',
+} as const
+
+const HEADER_STYLE = {
+  alignItems: ALIGN_CENTER,
+  gridGap: SPACING.spacing12,
+  padding: `${SPACING.spacing20} ${SPACING.spacing32}`,
+  color: COLORS.white,
+  position: POSITION_STICKY,
+  top: 0,
+  'data-testid': '__otInterventionModalHeader',
+} as const
+
+const WRAPPER_STYLE = {
+  position: POSITION_ABSOLUTE,
+  left: '0',
+  right: '0',
+  top: '0',
+  bottom: '0',
+  zIndex: '1',
+  backgroundColor: `${COLORS.black90}${COLORS.opacity40HexCode}`,
+  cursor: 'default',
+  'data-testid': '__otInterventionModalWrapper',
+} as const
+
+const INTERVENTION_REQUIRED_COLOR = COLORS.blue50
+const ERROR_COLOR = COLORS.red50
+
+export interface InterventionModalProps {
+  /** optional modal heading **/
+  heading?: React.ReactNode
+  /** overall style hint */
+  type?: ModalType
+  /** optional icon name */
+  iconName?: IconName | null | undefined
+  /** modal contents */
+  children: React.ReactNode
+}
+
+export function InterventionModal(props: InterventionModalProps): JSX.Element {
+  const modalType = props.type ?? 'intervention-required'
+  const headerColor =
+    modalType === 'error' ? ERROR_COLOR : INTERVENTION_REQUIRED_COLOR
+  const border = `${BORDER_STYLE_BASE} ${
+    modalType === 'error' ? ERROR_COLOR : INTERVENTION_REQUIRED_COLOR
+  }`
+  return (
+    <Flex {...WRAPPER_STYLE}>
+      <Flex {...BASE_STYLE} zIndex={10}>
+        <Box
+          {...MODAL_STYLE}
+          border={border}
+          onClick={(e: React.MouseEvent) => {
+            e.stopPropagation()
+          }}
+        >
+          <Flex {...HEADER_STYLE} backgroundColor={headerColor}>
+            {props.iconName != null ? (
+              <Icon name={props.iconName} size={SPACING.spacing32} />
+            ) : null}
+            {props.heading != null ? props.heading : null}
+          </Flex>
+          {props.children}
+        </Box>
+      </Flex>
+    </Flex>
+  )
+}

app/src/organisms/InterventionModal/index.tsx

@@ -12,14 +12,8 @@ import {
   DISPLAY_FLEX,
   Flex,
   Icon,
-  JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
   Link,
-  OVERFLOW_AUTO,
-  POSITION_ABSOLUTE,
-  POSITION_FIXED,
-  POSITION_RELATIVE,
-  POSITION_STICKY,
   PrimaryButton,
   SPACING,
   TYPOGRAPHY,
@@ -28,6 +22,7 @@ import {
 
 import { SmallButton } from '../../atoms/buttons'
 import { Modal } from '../../molecules/Modal'
+import { InterventionModal as InterventionModalMolecule } from '../../molecules/InterventionModal'
 import { getIsOnDevice } from '../../redux/config'
 import { PauseInterventionContent } from './PauseInterventionContent'
 import { MoveLabwareInterventionContent } from './MoveLabwareInterventionContent'
@@ -40,39 +35,6 @@ import { useRobotType } from '../Devices/hooks'
 const LEARN_ABOUT_MANUAL_STEPS_URL =
   'https://support.opentrons.com/s/article/Manual-protocol-steps'
 
-const BASE_STYLE = {
-  position: POSITION_ABSOLUTE,
-  alignItems: ALIGN_CENTER,
-  justifyContent: JUSTIFY_CENTER,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-} as const
-
-const MODAL_STYLE = {
-  backgroundColor: COLORS.white,
-  position: POSITION_RELATIVE,
-  overflowY: OVERFLOW_AUTO,
-  maxHeight: '100%',
-  width: '47rem',
-  border: `6px ${BORDERS.styleSolid} ${COLORS.blue50}`,
-  borderRadius: BORDERS.borderRadius8,
-  boxShadow: BORDERS.smallDropShadow,
-} as const
-
-const HEADER_STYLE = {
-  alignItems: ALIGN_CENTER,
-  gridGap: SPACING.spacing12,
-  padding: `${SPACING.spacing20} ${SPACING.spacing32}`,
-  color: COLORS.white,
-  backgroundColor: COLORS.blue50,
-  position: POSITION_STICKY,
-  top: 0,
-} as const
-
 const CONTENT_STYLE = {
   display: DISPLAY_FLEX,
   flexDirection: DIRECTION_COLUMN,
@@ -181,51 +143,31 @@ export function InterventionModal({
       </Flex>
     </Modal>
   ) : (
-    <Flex
-      position={POSITION_FIXED}
-      left="0"
-      right="0"
-      top="0"
-      bottom="0"
-      zIndex="1"
-      backgroundColor={`${COLORS.black90}${COLORS.opacity40HexCode}`}
-      cursor="default"
+    <InterventionModalMolecule
+      heading={<StyledText as="h1">{headerTitle}</StyledText>}
+      iconName={iconName}
+      type="intervention-required"
     >
-      <Flex {...BASE_STYLE} zIndex={10}>
-        <Box
-          {...MODAL_STYLE}
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation()
-          }}
-        >
-          <Flex {...HEADER_STYLE}>
-            {iconName != null ? (
-              <Icon name={iconName} size={SPACING.spacing32} />
-            ) : null}
-            <StyledText as="h1">{headerTitle}</StyledText>
-          </Flex>
-          <Box {...CONTENT_STYLE}>
-            {childContent}
-            <Box {...FOOTER_STYLE}>
-              <Link
-                css={TYPOGRAPHY.darkLinkH4SemiBold}
-                href={LEARN_ABOUT_MANUAL_STEPS_URL}
-                external
-              >
-                {t('protocol_info:manual_steps_learn_more')}
-                <Icon
-                  name="open-in-new"
-                  marginLeft={SPACING.spacing4}
-                  size="0.5rem"
-                />
-              </Link>
-              <PrimaryButton onClick={onResume}>
-                {t('confirm_and_resume')}
-              </PrimaryButton>
-            </Box>
-          </Box>
+      <Box {...CONTENT_STYLE}>
+        {childContent}
+        <Box {...FOOTER_STYLE}>
+          <Link
+            css={TYPOGRAPHY.darkLinkH4SemiBold}
+            href={LEARN_ABOUT_MANUAL_STEPS_URL}
+            external
+          >
+            {t('protocol_info:manual_steps_learn_more')}
+            <Icon
+              name="open-in-new"
+              marginLeft={SPACING.spacing4}
+              size="0.5rem"
+            />
+          </Link>
+          <PrimaryButton onClick={onResume}>
+            {t('confirm_and_resume')}
+          </PrimaryButton>
         </Box>
-      </Flex>
-    </Flex>
+      </Box>
+    </InterventionModalMolecule>
   )
 }