diff --git a/app/src/pages/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetup.test.tsx b/app/src/pages/OnDeviceDisplay/ProtocolSetup/__tests__/ProtocolSetup.test.tsx index 2d3c5a8d6ad..532d350d0e9 100644 --- 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 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', () => {
mock ConfirmAttachedModal
) mockUseDoorQuery.mockReturnValue({ data: mockDoorStatus } as any) - mockOpenDoorAlertModal.mockReturnValue(
mock OpenDoorAlertModal
) + when(mockUseToaster) + .calledWith() + .mockReturnValue(({ + makeSnackbar: MOCK_MAKE_SNACKBAR, + } as unknown) as any) }) afterEach(() => { @@ -372,7 +375,7 @@ 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', @@ -380,7 +383,10 @@ describe('ProtocolSetup', () => { }, } 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 index a69a5ec1522..f289fab6b82 100644 --- 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({ @@ -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' ? ( - - ) : null} {/* Empty box to detect scrolling */} {/* Protocol Setup Header */} @@ -545,9 +559,10 @@ function PrepareToRun({ } />