refactor(app): split InterventionModal to molecule

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>
   )
 }