feat(app): add ODD modal for incompatible modules

This is a blocking modal takeover that pops when you have incompatible
modules (as determined by the machine) connected to your flex, and goes
away when you remove them.

Closes RSQ-6

app/src/App/OnDeviceDisplayApp.tsx

@@ -20,6 +20,7 @@ import { OnDeviceLocalizationProvider } from '../LocalizationProvider'
 import { ToasterOven } from '../organisms/ToasterOven'
 import { MaintenanceRunTakeover } from '../organisms/TakeoverModal'
 import { FirmwareUpdateTakeover } from '../organisms/FirmwareUpdateModal/FirmwareUpdateTakeover'
+import { IncompatibleModuleTakeover } from '../organisms/IncompatibleModuleModal/IncompatibleModuleTakeover'
 import { EstopTakeover } from '../organisms/EmergencyStop'
 import { ConnectViaEthernet } from '../pages/ConnectViaEthernet'
 import { ConnectViaUSB } from '../pages/ConnectViaUSB'
@@ -179,6 +180,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
               ) : (
                 <>
                   <EstopTakeover />
+                  <IncompatibleModuleTakeover />
                   <MaintenanceRunTakeover>
                     <FirmwareUpdateTakeover />
                     <NiceModal.Provider>

app/src/assets/localization/en/incompatible_modules.json

@@ -0,0 +1,4 @@
+{
+  "incompatible_modules_attached": "incompatible module detected",
+  "remove_before_running_protocol": "Remove the following hardware before running a protocol:"
+}

app/src/assets/localization/en/index.ts

@@ -27,6 +27,7 @@ import robot_controls from './robot_controls.json'
 import run_details from './run_details.json'
 import top_navigation from './top_navigation.json'
 import error_recovery from './error_recovery.json'
+import incompatible_modules from './incompatible_modules.json'
 
 export const en = {
   shared,
@@ -58,4 +59,5 @@ export const en = {
   run_details,
   top_navigation,
   error_recovery,
+  incompatible_modules,
 }

app/src/organisms/IncompatibleModuleModal/IncompatibleModuleModalBody.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { useTranslation, Trans } from 'react-i18next'
+import capitalize from 'lodash/capitalize'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  StyledText,
+TYPOGRAPHY,
+    OVERFLOW_SCROLL,
+
+} from '@opentrons/components'
+import {
+    getModuleDisplayName
+} from '@opentrons/shared-data'
+import type { AttachedModule } from '@opentrons/api-client'
+import { Modal } from '../../molecules/Modal'
+import { ListItem } from '../../atoms/ListItem'
+import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+
+export interface IncompatibleModuleModalBodyProps {
+  modules: AttachedModule[]
+}
+
+export function IncompatibleModuleModalBody(
+  props: IncompatibleModuleModalBodyProps
+): JSX.Element {
+  const { t } = useTranslation('incompatible_modules')
+  const incompatibleModuleHeader: ModalHeaderBaseProps = {
+    title: capitalize(t('incompatible_modules_attached')),
+  }
+  const { modules } = props
+  return (
+      <Modal header={incompatibleModuleHeader}>
+          <Flex flexDirection={DIRECTION_COLUMN} width="100%">
+              <StyledText as="p" marginBottom={SPACING.spacing32} >
+                  <Trans t={t} i18nKey="remove_before_running_protocol" />
+              </StyledText>
+              <Flex overflowY={OVERFLOW_SCROLL} flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8} maxHeight='196px'>
+                  {...modules.map(module => (
+                      <ListItem key={module.id} type="noActive">
+                          <StyledText as="p" key={module.id} fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+                              {getModuleDisplayName(module.moduleModel)}
+                          </StyledText>
+                      </ListItem>
+                  ))}
+              </Flex>
+          </Flex>
+      </Modal>
+  )
+}

app/src/organisms/IncompatibleModuleModal/IncompatibleModuleTakeover.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation, Trans } from 'react-i18next'
+import capitalize from 'lodash/capitalize'
+import { IncompatibleModuleModalBody } from './IncompatibleModuleModalBody'
+import { getTopPortalEl } from '../../App/portal'
+import { useIncompatibleModulesAttached } from './hooks'
+
+const POLL_INTERVAL_MS = 5000
+
+export function IncompatibleModuleTakeover(): JSX.Element {
+  const incompatibleModules = useIncompatibleModulesAttached({
+    refetchInterval: POLL_INTERVAL_MS,
+  })
+  return (
+    <>
+      {incompatibleModules.length !== 0
+        ? createPortal(
+            <IncompatibleModuleModalBody modules={incompatibleModules} />,
+            getTopPortalEl()
+          )
+        : null}
+    </>
+  )
+}