feat(app): add robot is busy banner to device details (#13932)

* feat(app): add robot is busy banner to device details

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

@@ -33,7 +33,8 @@
  "current_temp": "Current: {{temp}} °C",
  "current_version": "Current Version",
  "deck_cal_missing": "Pipette Offset calibration missing. Calibrate deck first.",
- "deck_configuration_is_not_available": "Deck configuration is not available when run is in progress",
+ "deck_configuration_is_not_available_when_run_is_in_progress": "Deck configuration is not available when run is in progress",
+ "deck_configuration_is_not_available_when_robot_is_busy": "Deck configuration is not available when the robot is busy",
  "deck_configuration": "deck configuration",
  "deck_fixture_setup_instructions": "Deck fixture setup instructions",
  "deck_fixture_setup_modal_bottom_description_desktop": "For detailed instructions for different types of fixtures, scan the QR code or go to the link below.",

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx

@@ -1,14 +1,24 @@
 import * as React from 'react'
-import { DeckConfigurator, renderWithProviders } from '@opentrons/components'
+import { when, resetAllWhenMocks } from 'jest-when'
+
+import {
+ DeckConfigurator,
+ partialComponentPropsMatcher,
+ renderWithProviders,
+} from '@opentrons/components'
 import {
+ useCurrentMaintenanceRun,
  useDeckConfigurationQuery,
  useUpdateDeckConfigurationMutation,
 } from '@opentrons/react-api-client'
+
 import { i18n } from '../../../i18n'
 import { useRunStatuses } from '../../Devices/hooks'
 import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructionsModal'
 import { DeviceDetailsDeckConfiguration } from '../'
 
+import type { MaintenanceRun } from '@opentrons/api-client'
+
 jest.mock('@opentrons/components/src/hardware-sim/DeckConfigurator/index')
 jest.mock('@opentrons/react-api-client')
 jest.mock('../DeckFixtureSetupInstructionsModal')
@@ -22,6 +32,9 @@ const RUN_STATUSES = {
  isRunTerminal: false,
  isRunIdle: false,
 }
+const mockCurrnetMaintenanceRun = {
+ data: { id: 'mockMaintenanceRunId' },
+} as MaintenanceRun
 
 const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction<
  typeof useDeckConfigurationQuery
@@ -38,6 +51,9 @@ const mockDeckConfigurator = DeckConfigurator as jest.MockedFunction<
 const mockUseRunStatuses = useRunStatuses as jest.MockedFunction<
  typeof useRunStatuses
 >
+const mockUseCurrentMaintenanceRun = useCurrentMaintenanceRun as jest.MockedFunction<
+ typeof useCurrentMaintenanceRun
+>
 
 const render = (
  props: React.ComponentProps<typeof DeviceDetailsDeckConfiguration>
@@ -61,8 +77,15 @@ describe('DeviceDetailsDeckConfiguration', () => {
  mockDeckFixtureSetupInstructionsModal.mockReturnValue(
  <div>mock DeckFixtureSetupInstructionsModal</div>
  )
- mockDeckConfigurator.mockReturnValue(<div>mock DeckConfigurator</div>)
+ when(mockDeckConfigurator).mockReturnValue(<div>mock DeckConfigurator</div>)
  mockUseRunStatuses.mockReturnValue(RUN_STATUSES)
+ mockUseCurrentMaintenanceRun.mockReturnValue({
+ data: {},
+ } as any)
+ })
+
+ afterEach(() => {
+ resetAllWhenMocks()
  })
 
  it('should render text and button', () => {
@@ -83,9 +106,23 @@ describe('DeviceDetailsDeckConfiguration', () => {
  it('should render banner and make deck configurator disabled when running', () => {
  RUN_STATUSES.isRunRunning = true
  mockUseRunStatuses.mockReturnValue(RUN_STATUSES)
- const [{ getByText, queryAllByRole }] = render(props)
+ when(mockDeckConfigurator)
+ .calledWith(partialComponentPropsMatcher({ readOnly: true }))
+ .mockReturnValue(<div>disabled mock DeckConfigurator</div>)
+ const [{ getByText }] = render(props)
  getByText('Deck configuration is not available when run is in progress')
- // Note (kk:10/27/2023) detects Setup Instructions buttons
- expect(queryAllByRole('button').length).toBe(1)
+ getByText('disabled mock DeckConfigurator')
+ })
+
+ it('should render banner and make deck configurator disabled when a maintenance run exists', () => {
+ mockUseCurrentMaintenanceRun.mockReturnValue({
+ data: mockCurrnetMaintenanceRun,
+ } as any)
+ when(mockDeckConfigurator)
+ .calledWith(partialComponentPropsMatcher({ readOnly: true }))
+ .mockReturnValue(<div>disabled mock DeckConfigurator</div>)
+ const [{ getByText }] = render(props)
+ getByText('Deck configuration is not available when the robot is busy')
+ getByText('disabled mock DeckConfigurator')
  })
 })

app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx

@@ -17,6 +17,7 @@ import {
  TYPOGRAPHY,
 } from '@opentrons/components'
 import {
+ useCurrentMaintenanceRun,
  useDeckConfigurationQuery,
  useUpdateDeckConfigurationMutation,
 } from '@opentrons/react-api-client'
@@ -33,6 +34,8 @@ import { useRunStatuses } from '../Devices/hooks'
 
 import type { Cutout } from '@opentrons/shared-data'
 
+const RUN_REFETCH_INTERVAL = 5000
+
 interface DeviceDetailsDeckConfigurationProps {
  robotName: string
 }
@@ -56,6 +59,10 @@ export function DeviceDetailsDeckConfiguration({
  const deckConfig = useDeckConfigurationQuery().data ?? []
  const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
  const { isRunRunning } = useRunStatuses()
+ const { data: maintenanceRunData } = useCurrentMaintenanceRun({
+ refetchInterval: RUN_REFETCH_INTERVAL,
+ })
+ const isMaintenanceRunExisting = maintenanceRunData?.data?.id != null
 
  const handleClickAdd = (fixtureLocation: Cutout): void => {
  setTargetFixtureLocation(fixtureLocation)
@@ -124,13 +131,22 @@ export function DeviceDetailsDeckConfiguration({
  gridGap={SPACING.spacing16}
  paddingX={SPACING.spacing16}
  paddingBottom={SPACING.spacing32}
- paddingTop={isRunRunning ? undefined : SPACING.spacing32}
+ paddingTop={
+ isRunRunning || isMaintenanceRunExisting
+ ? undefined
+ : SPACING.spacing32
+ }
  width="100%"
  flexDirection={DIRECTION_COLUMN}
  >
  {isRunRunning ? (
  <Banner type="warning">
- {t('deck_configuration_is_not_available')}
+ {t('deck_configuration_is_not_available_when_run_is_in_progress')}
+ </Banner>
+ ) : null}
+ {isMaintenanceRunExisting ? (
+ <Banner type="warning">
+ {t('deck_configuration_is_not_available_when_robot_is_busy')}
  </Banner>
  ) : null}
  <Flex gridGap={SPACING.spacing40}>
@@ -142,7 +158,7 @@ export function DeviceDetailsDeckConfiguration({
  flexDirection={DIRECTION_COLUMN}
  >
  <DeckConfigurator
- readOnly={isRunRunning}
+ readOnly={isRunRunning || isMaintenanceRunExisting}
  deckConfig={deckConfig}
  handleClickAdd={handleClickAdd}
  handleClickRemove={handleClickRemove}