fix(app): fix check door status in protocol setup for odd (#13635)

close RQA-1702
Opentrons · Sep 22, 2023 · 73e3966 · 73e3966
1 parent ab96703
commit 73e3966
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 31 deletions.
diff --git a/app/src/pages/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetup.test.tsx b/app/src/pages/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetup.test.tsx
@@ -16,6 +16,7 @@ import { getDeckDefFromRobotType } from '@opentrons/shared-data'
 import ot3StandardDeckDef from '@opentrons/shared-data/deck/definitions/3/ot3_standard.json'
 
 import { i18n } from '../../../../i18n'
+import { useToaster } from '../../../../organisms/ToasterOven'
 import { mockRobotSideAnalysis } from '../../../../organisms/CommandText/__fixtures__'
 import {
   useAttachedModules,
@@ -36,7 +37,6 @@ import {
 } from '../../../../organisms/RunTimeControl/hooks'
 import { useIsHeaterShakerInProtocol } from '../../../../organisms/ModuleCard/hooks'
 import { ConfirmAttachedModal } from '../ConfirmAttachedModal'
-import { OpenDoorAlertModal } from '../../../../organisms/OpenDoorAlertModal'
 import { ProtocolSetup } from '..'
 
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
@@ -72,7 +72,7 @@ jest.mock('../../../../organisms/ProtocolSetupLiquids')
 jest.mock('../../../../organisms/ModuleCard/hooks')
 jest.mock('../../../../redux/config')
 jest.mock('../ConfirmAttachedModal')
-jest.mock('../../../../organisms/OpenDoorAlertModal')
+jest.mock('../../../../organisms/ToasterOven')
 
 const mockGetDeckDefFromRobotType = getDeckDefFromRobotType as jest.MockedFunction<
   typeof getDeckDefFromRobotType
@@ -132,9 +132,7 @@ const mockConfirmAttachedModal = ConfirmAttachedModal as jest.MockedFunction<
 const mockUseDoorQuery = useDoorQuery as jest.MockedFunction<
   typeof useDoorQuery
 >
-const mockOpenDoorAlertModal = OpenDoorAlertModal as jest.MockedFunction<
-  typeof OpenDoorAlertModal
->
+const mockUseToaster = useToaster as jest.MockedFunction<typeof useToaster>
 
 const render = (path = '/') => {
   return renderWithProviders(
@@ -200,6 +198,7 @@ const mockDoorStatus = {
     doorRequiredClosedForProtocol: true,
   },
 }
+const MOCK_MAKE_SNACKBAR = jest.fn()
 
 describe('ProtocolSetup', () => {
   let mockLaunchLPC: jest.Mock
@@ -280,7 +279,11 @@ describe('ProtocolSetup', () => {
       <div>mock ConfirmAttachedModal</div>
     )
     mockUseDoorQuery.mockReturnValue({ data: mockDoorStatus } as any)
-    mockOpenDoorAlertModal.mockReturnValue(<div>mock OpenDoorAlertModal</div>)
+    when(mockUseToaster)
+      .calledWith()
+      .mockReturnValue(({
+        makeSnackbar: MOCK_MAKE_SNACKBAR,
+      } as unknown) as any)
   })
 
   afterEach(() => {
@@ -372,15 +375,18 @@ describe('ProtocolSetup', () => {
     expect(getAllByTestId('Skeleton').length).toBeGreaterThan(0)
   })
 
-  it('should render open door alert modal when door is open', () => {
+  it('should render toast and make a button disabled when a robot door is open', () => {
     const mockOpenDoorStatus = {
       data: {
         status: 'open',
         doorRequiredClosedForProtocol: true,
       },
     }
     mockUseDoorQuery.mockReturnValue({ data: mockOpenDoorStatus } as any)
-    const [{ getByText }] = render(`/runs/${RUN_ID}/setup/`)
-    getByText('mock OpenDoorAlertModal')
+    const [{ getByRole }] = render(`/runs/${RUN_ID}/setup/`)
+    getByRole('button', { name: 'play' }).click()
+    expect(MOCK_MAKE_SNACKBAR).toBeCalledWith(
+      'Close the robot door before starting the run.'
+    )
   })
 })
diff --git a/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx b/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx
@@ -74,7 +74,6 @@ import {
 import { getIsHeaterShakerAttached } from '../../../redux/config'
 import { ConfirmAttachedModal } from './ConfirmAttachedModal'
 import { getLatestCurrentOffsets } from '../../../organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/utils'
-import { OpenDoorAlertModal } from '../../../organisms/OpenDoorAlertModal'
 
 import type { OnDeviceRouteParams } from '../../../App/types'
 
@@ -246,32 +245,42 @@ interface PlayButtonProps {
   ready: boolean
   onPlay?: () => void
   disabled?: boolean
+  isDoorOpen: boolean
 }
 
 function PlayButton({
   disabled = false,
   onPlay,
   ready,
+  isDoorOpen,
 }: PlayButtonProps): JSX.Element {
   const playButtonStyle = css`
     -webkit-tap-highlight-color: transparent;
     &:focus {
-      background-color: ${ready ? COLORS.bluePressed : COLORS.darkBlack40};
+      background-color: ${ready && !isDoorOpen
+        ? COLORS.bluePressed
+        : COLORS.darkBlack40};
       color: ${COLORS.white};
     }
 
     &:hover {
-      background-color: ${ready ? COLORS.blueEnabled : COLORS.darkBlack20};
+      background-color: ${ready && !isDoorOpen
+        ? COLORS.blueEnabled
+        : COLORS.darkBlack20};
       color: ${COLORS.white};
     }
 
     &:focus-visible {
       box-shadow: ${ODD_FOCUS_VISIBLE};
-      background-color: ${ready ? COLORS.blueEnabled : COLORS.darkBlack20};
+      background-color: ${ready && !isDoorOpen
+        ? COLORS.blueEnabled
+        : COLORS.darkBlack20};
     }
 
     &:active {
-      background-color: ${ready ? COLORS.bluePressed : COLORS.darkBlack40};
+      background-color: ${ready && !isDoorOpen
+        ? COLORS.bluePressed
+        : COLORS.darkBlack40};
       color: ${COLORS.white};
     }
 
@@ -284,7 +293,9 @@ function PlayButton({
     <Btn
       alignItems={ALIGN_CENTER}
       backgroundColor={
-        disabled || !ready ? COLORS.darkBlack20 : COLORS.blueEnabled
+        disabled || !ready || isDoorOpen
+          ? COLORS.darkBlack20
+          : COLORS.blueEnabled
       }
       borderRadius="6.25rem"
       display={DISPLAY_FLEX}
@@ -297,7 +308,9 @@ function PlayButton({
       css={playButtonStyle}
     >
       <Icon
-        color={disabled || !ready ? COLORS.darkBlack60 : COLORS.white}
+        color={
+          disabled || !ready || isDoorOpen ? COLORS.darkBlack60 : COLORS.white
+        }
         name="play-icon"
         size="2.5rem"
       />
@@ -415,19 +428,23 @@ function PrepareToRun({
   const isReadyToRun = areInstrumentsReady && !isMissingModules
 
   const onPlay = (): void => {
-    if (
-      isHeaterShakerInProtocol &&
-      isReadyToRun &&
-      (runStatus === RUN_STATUS_IDLE || runStatus === RUN_STATUS_STOPPED)
-    ) {
-      confirmAttachment()
+    if (isDoorOpen) {
+      makeSnackbar(t('shared:close_robot_door'))
     } else {
-      if (isReadyToRun) {
-        play()
+      if (
+        isHeaterShakerInProtocol &&
+        isReadyToRun &&
+        (runStatus === RUN_STATUS_IDLE || runStatus === RUN_STATUS_STOPPED)
+      ) {
+        confirmAttachment()
       } else {
-        makeSnackbar(
-          i18n.format(t('complete_setup_before_proceeding'), 'capitalize')
-        )
+        if (isReadyToRun) {
+          play()
+        } else {
+          makeSnackbar(
+            i18n.format(t('complete_setup_before_proceeding'), 'capitalize')
+          )
+        }
       }
     }
   }
@@ -495,9 +512,6 @@ function PrepareToRun({
     doorStatus?.data.doorRequiredClosedForProtocol
   return (
     <>
-      {isReadyToRun && isDoorOpen && setupScreen === 'prepare to run' ? (
-        <OpenDoorAlertModal />
-      ) : null}
       {/* Empty box to detect scrolling */}
       <Flex ref={scrollRef} />
       {/* Protocol Setup Header */}
@@ -545,9 +559,10 @@ function PrepareToRun({
               }
             />
             <PlayButton
-              disabled={isLoading || isDoorOpen}
+              disabled={isLoading}
               onPlay={!isLoading ? onPlay : undefined}
               ready={!isLoading ? isReadyToRun : false}
+              isDoorOpen={isDoorOpen}
             />
           </Flex>
         </Flex>