update the devices page robotcard

Author: mjhuff

app/src/organisms/Devices/RobotCard.tsx

@@ -41,6 +41,10 @@ import { useIsFlex } from './hooks'
 import { ReachableBanner } from './ReachableBanner'
 import { RobotOverflowMenu } from './RobotOverflowMenu'
 import { RobotStatusHeader } from './RobotStatusHeader'
+import {
+  ErrorRecoveryBanner,
+  useErrorRecoveryBanner,
+} from '../ErrorRecoveryBanner'
 
 import type { GripperData } from '@opentrons/api-client'
 import type { GripperModel } from '@opentrons/shared-data'
@@ -59,6 +63,8 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
     getRobotModelByName(state, robotName)
   )
 
+  const { showRecoveryBanner, recoveryIntent } = useErrorRecoveryBanner()
+
   return robot != null ? (
     <Flex
       alignItems={ALIGN_START}
@@ -87,6 +93,12 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
       >
         <UpdateRobotBanner robot={robot} marginRight={SPACING.spacing24} />
         <ReachableBanner robot={robot} />
+        {showRecoveryBanner ? (
+          <ErrorRecoveryBanner
+            recoveryIntent={recoveryIntent}
+            marginRight={SPACING.spacing24}
+          />
+        ) : null}
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
           <RobotStatusHeader
             local={local}

app/src/organisms/Devices/__tests__/RobotCard.test.tsx

@@ -31,6 +31,10 @@ import { UpdateRobotBanner } from '../../UpdateRobotBanner'
 import { RobotOverflowMenu } from '../RobotOverflowMenu'
 import { RobotStatusHeader } from '../RobotStatusHeader'
 import { RobotCard } from '../RobotCard'
+import {
+  ErrorRecoveryBanner,
+  useErrorRecoveryBanner,
+} from '../../ErrorRecoveryBanner'
 
 import type { State } from '../../../redux/types'
 
@@ -41,6 +45,7 @@ vi.mock('../../UpdateRobotBanner')
 vi.mock('../../../redux/config')
 vi.mock('../RobotOverflowMenu')
 vi.mock('../RobotStatusHeader')
+vi.mock('../../ErrorRecoveryBanner')
 
 const OT2_PNG_FILE_NAME = '/app/src/assets/images/OT2-R_HERO.png'
 const FLEX_PNG_FILE_NAME = '/app/src/assets/images/FLEX.png'
@@ -127,6 +132,13 @@ describe('RobotCard', () => {
     when(getRobotModelByName)
       .calledWith(MOCK_STATE, mockConnectableRobot.name)
       .thenReturn('OT-2')
+    vi.mocked(ErrorRecoveryBanner).mockReturnValue(
+      <div>MOCK_RECOVERY_BANNER</div>
+    )
+    vi.mocked(useErrorRecoveryBanner).mockReturnValue({
+      showRecoveryBanner: false,
+      recoveryIntent: 'recovering',
+    })
   })
 
   it('renders an OT-2 image when robot model is OT-2', () => {
@@ -161,4 +173,15 @@ describe('RobotCard', () => {
     render(props)
     screen.getByText('Mock RobotStatusHeader')
   })
+
+  it('renders the error recovery banner when another user is performing error recovery', () => {
+    vi.mocked(useErrorRecoveryBanner).mockReturnValue({
+      showRecoveryBanner: true,
+      recoveryIntent: 'recovering',
+    })
+
+    render(props)
+
+    screen.getByText('MOCK_RECOVERY_BANNER')
+  })
 })