From f6601d67cfabeeea7dd91b85601b0d4a0e29df94 Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 16 Oct 2023 11:29:45 -0400 Subject: [PATCH 1/5] rename component to include deck --- .../LocationConflictModal.tsx | 169 +++++++++++------- .../FixtureTable.tsx | 73 +++++--- .../SetupInstructionsModal.tsx | 0 .../__tests__/FixtureTable.test.tsx | 0 .../__tests__/ProtocolSetupModules.test.tsx | 0 .../__tests__/SetupInstructionsModal.test.tsx | 0 .../__tests__/utils.test.tsx | 0 .../index.tsx | 6 +- .../utils.ts | 0 .../OnDeviceDisplay/ProtocolSetup/index.tsx | 9 +- 10 files changed, 159 insertions(+), 98 deletions(-) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/FixtureTable.tsx (67%) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/SetupInstructionsModal.tsx (100%) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/__tests__/FixtureTable.test.tsx (100%) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/__tests__/ProtocolSetupModules.test.tsx (100%) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/__tests__/SetupInstructionsModal.test.tsx (100%) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/__tests__/utils.test.tsx (100%) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/index.tsx (99%) rename app/src/organisms/{ProtocolSetupModules => ProtocolSetupModulesAndDeck}/utils.ts (100%) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx index b8658ce73b0..977dc0c0b76 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx @@ -33,18 +33,26 @@ import type { FixtureLoadName, ModuleModel, } from '@opentrons/shared-data' +import { Modal } from '../../../../molecules/Modal' interface LocationConflictModalProps { onCloseClick: () => void cutout: Cutout requiredFixture?: FixtureLoadName requiredModule?: ModuleModel + isOnDevice?: boolean } export const LocationConflictModal = ( props: LocationConflictModalProps ): JSX.Element => { - const { onCloseClick, cutout, requiredFixture, requiredModule } = props + const { + onCloseClick, + cutout, + requiredFixture, + requiredModule, + isOnDevice, + } = props const { t, i18n } = useTranslation(['protocol_setup', 'shared']) const deckConfig = useDeckConfigurationQuery().data ?? [] const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation() @@ -73,23 +81,18 @@ export const LocationConflictModal = ( return ( - - - - {t('deck_conflict')} - - - } - onClose={onCloseClick} - width="27.75rem" - > - + {isOnDevice ? ( + , }} /> - - - {t('slot_location', { slotName: cutout })} - + + ) : ( + - + + {t('deck_conflict')} + + + } + onClose={onCloseClick} + width="27.75rem" + > + + , + strong: , + }} + /> + + - - {t('protocol_specifies')} - - - {requiredFixture && getFixtureDisplayName(requiredFixture)} - {requiredModule && getModuleDisplayName(requiredModule)} - - + {t('slot_location', { slotName: cutout })} + - + + + + {t('protocol_specifies')} + + - {t('currently_configured')} + {requiredFixture && getFixtureDisplayName(requiredFixture)} + {requiredModule && getModuleDisplayName(requiredModule)} - - {currentFixtureDisplayName} + + + + + {t('currently_configured')} + + + + {currentFixtureDisplayName} + + - - - - {i18n.format(t('shared:cancel'), 'capitalize')} - - - {t('update_deck')} - + + + {i18n.format(t('shared:cancel'), 'capitalize')} + + + {t('update_deck')} + + - - + + )} ) } diff --git a/app/src/organisms/ProtocolSetupModules/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx similarity index 67% rename from app/src/organisms/ProtocolSetupModules/FixtureTable.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx index ada85859e21..6802ad70bf7 100644 --- a/app/src/organisms/ProtocolSetupModules/FixtureTable.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx @@ -24,6 +24,7 @@ import { NOT_CONFIGURED, useLoadedFixturesConfigStatus, } from '../../resources/deck_configuration/hooks' +import { LocationConflictModal } from '../Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal' import { StyledText } from '../../atoms/text' import { Chip } from '../../atoms/Chip' import { useFeatureFlag } from '../../redux/config' @@ -55,6 +56,11 @@ export function FixtureTable({ completedAt: 'fakeTimestamp', status: 'succeeded', } + const [ + showLocationConflictModal, + setShowLocationConflictModal, + ] = React.useState(false) + const requiredFixtureDetails = enableDeckConfig && mostRecentAnalysis?.commands != null ? [ @@ -89,6 +95,7 @@ export function FixtureTable({ configurationStatus === NOT_CONFIGURED let chipLabel: JSX.Element + let handleClick = () => {} if (statusNotReady) { chipLabel = ( <> @@ -105,6 +112,7 @@ export function FixtureTable({ ) + handleClick = () => setShowLocationConflictModal(true) } else if (configurationStatus === CONFIGURED) { chipLabel = ( ) + // shouldn't run into this case } else { chipLabel =
status label unknown
} return ( - console.log('wire this up')} - marginBottom={ - index === requiredFixtureDetails.length - 1 - ? SPACING.spacing68 - : 'none' - } - > - - - {getFixtureDisplayName(fixture.params.loadName)} - - - - - + <> + {showLocationConflictModal ? ( + setShowLocationConflictModal(false)} + cutout={fixture.params.location.cutout} + requiredFixture={fixture.params.loadName} + isOnDevice={true} + /> + ) : null} - {chipLabel} + + + {getFixtureDisplayName(fixture.params.loadName)} + + + + + + + {chipLabel} + - + ) })} diff --git a/app/src/organisms/ProtocolSetupModules/SetupInstructionsModal.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx similarity index 100% rename from app/src/organisms/ProtocolSetupModules/SetupInstructionsModal.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx diff --git a/app/src/organisms/ProtocolSetupModules/__tests__/FixtureTable.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx similarity index 100% rename from app/src/organisms/ProtocolSetupModules/__tests__/FixtureTable.test.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx diff --git a/app/src/organisms/ProtocolSetupModules/__tests__/ProtocolSetupModules.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModules.test.tsx similarity index 100% rename from app/src/organisms/ProtocolSetupModules/__tests__/ProtocolSetupModules.test.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModules.test.tsx diff --git a/app/src/organisms/ProtocolSetupModules/__tests__/SetupInstructionsModal.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx similarity index 100% rename from app/src/organisms/ProtocolSetupModules/__tests__/SetupInstructionsModal.test.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/SetupInstructionsModal.test.tsx diff --git a/app/src/organisms/ProtocolSetupModules/__tests__/utils.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/utils.test.tsx similarity index 100% rename from app/src/organisms/ProtocolSetupModules/__tests__/utils.test.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/utils.test.tsx diff --git a/app/src/organisms/ProtocolSetupModules/index.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx similarity index 99% rename from app/src/organisms/ProtocolSetupModules/index.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx index 510243f51fc..5ffa1525b1c 100644 --- a/app/src/organisms/ProtocolSetupModules/index.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx @@ -302,7 +302,7 @@ function RowModule({ ) } -interface ProtocolSetupModulesProps { +interface ProtocolSetupModulesAndDeckProps { runId: string setSetupScreen: React.Dispatch> } @@ -310,10 +310,10 @@ interface ProtocolSetupModulesProps { /** * an ODD screen on the Protocol Setup page */ -export function ProtocolSetupModules({ +export function ProtocolSetupModulesAndDeck({ runId, setSetupScreen, -}: ProtocolSetupModulesProps): JSX.Element { +}: ProtocolSetupModulesAndDeckProps): JSX.Element { const { i18n, t } = useTranslation('protocol_setup') const { chainLiveCommands, isCommandMutationLoading } = useChainLiveCommands() const [ diff --git a/app/src/organisms/ProtocolSetupModules/utils.ts b/app/src/organisms/ProtocolSetupModulesAndDeck/utils.ts similarity index 100% rename from app/src/organisms/ProtocolSetupModules/utils.ts rename to app/src/organisms/ProtocolSetupModulesAndDeck/utils.ts diff --git a/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx b/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx index 6dfaa1e0201..3226c91f281 100644 --- a/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx +++ b/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx @@ -49,11 +49,11 @@ import { import { useMostRecentCompletedAnalysis } from '../../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis' import { getProtocolModulesInfo } from '../../../organisms/Devices/ProtocolRun/utils/getProtocolModulesInfo' import { ProtocolSetupLabware } from '../../../organisms/ProtocolSetupLabware' -import { ProtocolSetupModules } from '../../../organisms/ProtocolSetupModules' +import { ProtocolSetupModulesAndDeck } from '../../../organisms/ProtocolSetupModulesAndDeck' import { ProtocolSetupLiquids } from '../../../organisms/ProtocolSetupLiquids' import { ProtocolSetupInstruments } from '../../../organisms/ProtocolSetupInstruments' import { useLaunchLPC } from '../../../organisms/LabwarePositionCheck/useLaunchLPC' -import { getUnmatchedModulesForProtocol } from '../../../organisms/ProtocolSetupModules/utils' +import { getUnmatchedModulesForProtocol } from '../../../organisms/ProtocolSetupModulesAndDeck/utils' import { ConfirmCancelRunModal } from '../../../organisms/OnDeviceDisplay/RunningProtocol' import { getAreInstrumentsReady, @@ -701,7 +701,10 @@ export function ProtocolSetup(): JSX.Element { ), modules: ( - + ), labware: ( From d85a2f97cb93eeaba0adb5406126a0d1f9cd6ae1 Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 16 Oct 2023 16:40:15 -0400 Subject: [PATCH 2/5] feat(app): wire up location conflict modal for ODD closes RAUT-673 --- .../localization/en/protocol_setup.json | 1 + .../LocationConflictModal.tsx | 98 ++++++++++++++++--- .../__tests__/LocationConflictModal.test.tsx | 17 ++++ .../organisms/ProtocolSetupLabware/index.tsx | 4 +- .../FixtureTable.tsx | 1 + .../__tests__/FixtureTable.test.tsx | 14 ++- ...x => ProtocolSetupModulesAndDeck.test.tsx} | 27 +++-- .../ProtocolSetupModulesAndDeck/index.tsx | 18 ++++ .../__tests__/ProtocolSetup.test.tsx | 20 ++-- 9 files changed, 161 insertions(+), 39 deletions(-) rename app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/{ProtocolSetupModules.test.tsx => ProtocolSetupModulesAndDeck.test.tsx} (92%) diff --git a/app/src/assets/localization/en/protocol_setup.json b/app/src/assets/localization/en/protocol_setup.json index 3901544645a..d2569ad2d88 100644 --- a/app/src/assets/localization/en/protocol_setup.json +++ b/app/src/assets/localization/en/protocol_setup.json @@ -144,6 +144,7 @@ "must_have_labware_and_pip": "Protocol must load labware and a pipette", "n_a": "N/A", "no_data": "no data", + "confirm_removal": "Confirm removal", "no_labware_offset_data": "no labware offset data yet", "no_modules_or_fixtures": "No modules or fixtures are specified for this protocol.", "no_modules_specified": "no modules are specified for this protocol.", diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx index 977dc0c0b76..4be286e2344 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx @@ -17,6 +17,8 @@ import { JUSTIFY_END, ALIGN_CENTER, Box, + JUSTIFY_SPACE_BETWEEN, + BORDERS, } from '@opentrons/components' import { getFixtureDisplayName, @@ -26,6 +28,8 @@ import { import { Portal } from '../../../../App/portal' import { LegacyModal } from '../../../../molecules/LegacyModal' import { StyledText } from '../../../../atoms/text' +import { Modal } from '../../../../molecules/Modal' +import { SmallButton } from '../../../../atoms/buttons/SmallButton' import type { Cutout, @@ -33,7 +37,6 @@ import type { FixtureLoadName, ModuleModel, } from '@opentrons/shared-data' -import { Modal } from '../../../../molecules/Modal' interface LocationConflictModalProps { onCloseClick: () => void @@ -84,27 +87,92 @@ export const LocationConflictModal = ( {isOnDevice ? ( - , - strong: , - }} - /> + + , + strong: , + }} + /> + + + {t('slot_location', { slotName: cutout })} + + + + + {t('protocol_specifies')} + + + + {requiredFixture && getFixtureDisplayName(requiredFixture)} + {requiredModule && getModuleDisplayName(requiredModule)} + + + + + {t('currently_configured')} + + + {currentFixtureDisplayName} + + + + + + + + ) : ( { getByRole('button', { name: 'Update deck' }).click() expect(mockUpdate).toHaveBeenCalled() }) + it('should render correct info for a odd', () => { + props = { + ...props, + isOnDevice: true, + } + const { getByText, getAllByText } = render(props) + getByText('Deck location conflict') + getByText('Slot B3') + getByText('Protocol specifies') + getByText('Currently configured') + getAllByText('Staging Area Slot') + getByText('Trash Bin') + getByText('Cancel').click() + expect(props.onCloseClick).toHaveBeenCalled() + getByText('Confirm removal').click() + expect(mockUpdate).toHaveBeenCalled() + }) }) diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index dcc69a22223..2f9233fb206 100644 --- a/app/src/organisms/ProtocolSetupLabware/index.tsx +++ b/app/src/organisms/ProtocolSetupLabware/index.tsx @@ -50,7 +50,7 @@ import { Modal } from '../../molecules/Modal' import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis' import { getLabwareSetupItemGroups } from '../../pages/Protocols/utils' import { getProtocolModulesInfo } from '../Devices/ProtocolRun/utils/getProtocolModulesInfo' -import { getAttachedProtocolModuleMatches } from '../ProtocolSetupModules/utils' +import { getAttachedProtocolModuleMatches } from '../ProtocolSetupModulesAndDeck/utils' import { getLabwareRenderInfo } from '../Devices/ProtocolRun/utils/getLabwareRenderInfo' import { getNestedLabwareInfo, @@ -68,7 +68,7 @@ import type { HeaterShakerModule, Modules } from '@opentrons/api-client' import type { LabwareSetupItem } from '../../pages/Protocols/utils' import type { ModalHeaderBaseProps } from '../../molecules/Modal/types' import type { SetupScreens } from '../../pages/OnDeviceDisplay/ProtocolSetup' -import type { AttachedProtocolModuleMatch } from '../ProtocolSetupModules/utils' +import type { AttachedProtocolModuleMatch } from '../ProtocolSetupModulesAndDeck/utils' const OT3_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [ 'DECK_BASE', diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx index 6802ad70bf7..ab3b9f1b1cc 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx @@ -56,6 +56,7 @@ export function FixtureTable({ completedAt: 'fakeTimestamp', status: 'succeeded', } + const [ showLocationConflictModal, setShowLocationConflictModal, diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx index b8b3bbec870..0c61a94202a 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/FixtureTable.test.tsx @@ -9,11 +9,13 @@ import { import { i18n } from '../../../i18n' import { useLoadedFixturesConfigStatus } from '../../../resources/deck_configuration/hooks' import { useFeatureFlag } from '../../../redux/config' +import { LocationConflictModal } from '../../Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal' import { FixtureTable } from '../FixtureTable' import type { LoadFixtureRunTimeCommand } from '@opentrons/shared-data' jest.mock('../../../redux/config') jest.mock('../../../resources/deck_configuration/hooks') +jest.mock('../../Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal') const mockUseFeatureFlag = useFeatureFlag as jest.MockedFunction< typeof useFeatureFlag @@ -21,7 +23,9 @@ const mockUseFeatureFlag = useFeatureFlag as jest.MockedFunction< const mockUseLoadedFixturesConfigStatus = useLoadedFixturesConfigStatus as jest.MockedFunction< typeof useLoadedFixturesConfigStatus > - +const mockLocationConflictModal = LocationConflictModal as jest.MockedFunction< + typeof LocationConflictModal +> const mockLoadedFixture = { id: 'stubbed_load_fixture', commandType: 'loadFixture', @@ -68,6 +72,9 @@ describe('FixtureTable', () => { mockUseLoadedFixturesConfigStatus.mockReturnValue([ { ...mockLoadedFixture, configurationStatus: 'configured' }, ]) + mockLocationConflictModal.mockReturnValue( +
mock location conflict modal
+ ) }) it('should render table header and contents', () => { @@ -100,7 +107,8 @@ describe('FixtureTable', () => { props = { mostRecentAnalysis: { commands: [mockLoadedStagingAreaFixture] } as any, } - const [{ getByText }] = render(props) - getByText('Location conflict') + const [{ getByText, getAllByText }] = render(props) + getByText('Location conflict').click() + getAllByText('mock location conflict modal') }) }) diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModules.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx similarity index 92% rename from app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModules.test.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx index 7302481a8cd..37f22dc24a0 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModules.test.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx @@ -16,13 +16,13 @@ import ot3StandardDeckDef from '@opentrons/shared-data/deck/definitions/3/ot3_st import { i18n } from '../../../i18n' import { useChainLiveCommands } from '../../../resources/runs/hooks' -import { mockRobotSideAnalysis } from '../../../organisms/CommandText/__fixtures__' +import { mockRobotSideAnalysis } from '../../CommandText/__fixtures__' import { useAttachedModules, useRunCalibrationStatus, -} from '../../../organisms/Devices/hooks' -import { useMostRecentCompletedAnalysis } from '../../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis' -import { getProtocolModulesInfo } from '../../../organisms/Devices/ProtocolRun/utils/getProtocolModulesInfo' +} from '../../Devices/hooks' +import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis' +import { getProtocolModulesInfo } from '../../Devices/ProtocolRun/utils/getProtocolModulesInfo' import { mockApiHeaterShaker } from '../../../redux/modules/__fixtures__' import { mockProtocolModuleInfo } from '../../ProtocolSetupInstruments/__fixtures__' import { getLocalRobot } from '../../../redux/discovery' @@ -32,10 +32,11 @@ import { getAttachedProtocolModuleMatches, getUnmatchedModulesForProtocol, } from '../utils' -import { SetupInstructionsModal } from '../SetupInstructionsModal' +import { LocationConflictModal } from '../../Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal' import { ModuleWizardFlows } from '../../ModuleWizardFlows' +import { SetupInstructionsModal } from '../SetupInstructionsModal' import { FixtureTable } from '../FixtureTable' -import { ProtocolSetupModules } from '..' +import { ProtocolSetupModulesAndDeck } from '..' jest.mock('@opentrons/react-api-client') jest.mock('../../../resources/runs/hooks') @@ -51,6 +52,7 @@ jest.mock('../utils') jest.mock('../SetupInstructionsModal') jest.mock('../../ModuleWizardFlows') jest.mock('../FixtureTable') +jest.mock('../../Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal') const mockGetDeckDefFromRobotType = getDeckDefFromRobotType as jest.MockedFunction< typeof getDeckDefFromRobotType @@ -94,6 +96,9 @@ const mockFixtureTable = FixtureTable as jest.MockedFunction< const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction< typeof useDeckConfigurationQuery > +const mockLocationConflictModal = LocationConflictModal as jest.MockedFunction< + typeof LocationConflictModal +> const ROBOT_NAME = 'otie' const RUN_ID = '1' @@ -120,7 +125,7 @@ const mockFixture = { const render = () => { return renderWithProviders( - @@ -131,7 +136,7 @@ const render = () => { ) } -describe('ProtocolSetupModules', () => { +describe('ProtocolSetupModulesAndDeck', () => { let mockChainLiveCommands = jest.fn() beforeEach(() => { @@ -160,6 +165,9 @@ describe('ProtocolSetupModules', () => { ...mockConnectedRobot, name: ROBOT_NAME, }) + mockLocationConflictModal.mockReturnValue( +
mock location conflict modal
+ ) mockUseDeckConfigurationQuery.mockReturnValue({ data: [mockFixture], } as UseQueryResult) @@ -352,6 +360,7 @@ describe('ProtocolSetupModules', () => { .mockReturnValue(true) const [{ getByText }] = render() getByText('mock FixtureTable') - getByText('Location conflict') + getByText('Location conflict').click() + getByText('mock location conflict modal') }) }) diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx index 5ffa1525b1c..6653be92e43 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx @@ -59,6 +59,7 @@ import { } from './utils' import { SetupInstructionsModal } from './SetupInstructionsModal' import { ModuleWizardFlows } from '../ModuleWizardFlows' +import { LocationConflictModal } from '../Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal' import { getModuleTooHot } from '../Devices/getModuleTooHot' import { FixtureTable } from './FixtureTable' @@ -224,6 +225,10 @@ function RowModule({ isNonConnectingModule || module.attachedModuleMatch != null const [showModuleWizard, setShowModuleWizard] = React.useState(false) + const [ + showLocationConflictModal, + setShowLocationConflictModal, + ] = React.useState(false) return ( <> @@ -238,6 +243,14 @@ function RowModule({ } /> ) : null} + {showLocationConflictModal && conflictedFixture != null ? ( + setShowLocationConflictModal(false)} + cutout={conflictedFixture.fixtureLocation} + requiredModule={module.moduleDef.model} + isOnDevice={true} + /> + ) : null} setShowLocationConflictModal(true) + : undefined + } > -const mockProtocolSetupModules = ProtocolSetupModules as jest.MockedFunction< - typeof ProtocolSetupModules +const mockProtocolSetupModulesAndDeck = ProtocolSetupModulesAndDeck as jest.MockedFunction< + typeof ProtocolSetupModulesAndDeck > const mockGetUnmatchedModulesForProtocol = getUnmatchedModulesForProtocol as jest.MockedFunction< typeof getUnmatchedModulesForProtocol @@ -210,8 +210,8 @@ describe('ProtocolSetup', () => { mockLaunchLPC = jest.fn() mockUseLPCDisabledReason.mockReturnValue(null) mockUseAttachedModules.mockReturnValue([]) - mockProtocolSetupModules.mockReturnValue( -
Mock ProtocolSetupModules
+ mockProtocolSetupModulesAndDeck.mockReturnValue( +
Mock ProtocolSetupModulesAndDeck
) mockProtocolSetupLiquids.mockReturnValue(
Mock ProtocolSetupLiquids
@@ -335,9 +335,9 @@ describe('ProtocolSetup', () => { .calledWith([], mockProtocolModuleInfo) .mockReturnValue({ missingModuleIds: [], remainingAttachedModules: [] }) const [{ getByText, queryByText }] = render(`/runs/${RUN_ID}/setup/`) - expect(queryByText('Mock ProtocolSetupModules')).toBeNull() + expect(queryByText('Mock ProtocolSetupModulesAndDeck')).toBeNull() queryByText('Modules')?.click() - getByText('Mock ProtocolSetupModules') + getByText('Mock ProtocolSetupModulesAndDeck') }) it('should launch protocol setup liquids screen when click liquids', () => { From af4e765c646e593a7ad99713e9bcef4d001e364c Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 16 Oct 2023 16:43:54 -0400 Subject: [PATCH 3/5] alphabetize --- app/src/assets/localization/en/protocol_setup.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/assets/localization/en/protocol_setup.json b/app/src/assets/localization/en/protocol_setup.json index d2569ad2d88..5a3a79a18a9 100644 --- a/app/src/assets/localization/en/protocol_setup.json +++ b/app/src/assets/localization/en/protocol_setup.json @@ -40,6 +40,7 @@ "configured": "configured", "confirm_heater_shaker_module_modal_description": "Before the run begins, module should have both anchors fully extended for a firm attachment. The thermal adapter should be attached to the module. ", "confirm_heater_shaker_module_modal_title": "Confirm Heater-Shaker Module is attached", + "confirm_removal": "Confirm removal", "connect_all_hardware": "Connect and calibrate all hardware first", "connect_all_mod": "Connect all modules first", "connection_info_not_available": "Connection info not available once run has started", @@ -144,7 +145,6 @@ "must_have_labware_and_pip": "Protocol must load labware and a pipette", "n_a": "N/A", "no_data": "no data", - "confirm_removal": "Confirm removal", "no_labware_offset_data": "no labware offset data yet", "no_modules_or_fixtures": "No modules or fixtures are specified for this protocol.", "no_modules_specified": "no modules are specified for this protocol.", From 8a47c47a0b160eba954d4d1bcba7820ee8ebb62d Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 16 Oct 2023 17:03:21 -0400 Subject: [PATCH 4/5] fix lint --- app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx index ab3b9f1b1cc..8f7dc7e207c 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx @@ -96,7 +96,7 @@ export function FixtureTable({ configurationStatus === NOT_CONFIGURED let chipLabel: JSX.Element - let handleClick = () => {} + let handleClick if (statusNotReady) { chipLabel = ( <> From 1cfa446f7948d78f7330284ac244746b7db81a91 Mon Sep 17 00:00:00 2001 From: Jethary Date: Tue, 17 Oct 2023 15:49:49 -0400 Subject: [PATCH 5/5] address comments --- .../LocationConflictModal.tsx | 19 +++++++++++-------- .../FixtureTable.tsx | 2 ++ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx index 4be286e2344..c2ac2721c19 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx @@ -54,7 +54,7 @@ export const LocationConflictModal = ( cutout, requiredFixture, requiredModule, - isOnDevice, + isOnDevice = false, } = props const { t, i18n } = useTranslation(['protocol_setup', 'shared']) const deckConfig = useDeckConfigurationQuery().data ?? [] @@ -87,7 +87,6 @@ export const LocationConflictModal = ( {isOnDevice ? ( - + , }} /> - + - {requiredFixture && getFixtureDisplayName(requiredFixture)} - {requiredModule && getModuleDisplayName(requiredModule)} + {requiredFixture != null && + getFixtureDisplayName(requiredFixture)} + {requiredModule != null && + getModuleDisplayName(requiredModule)} - {requiredFixture && getFixtureDisplayName(requiredFixture)} - {requiredModule && getModuleDisplayName(requiredModule)} + {requiredFixture != null && + getFixtureDisplayName(requiredFixture)} + {requiredModule != null && + getModuleDisplayName(requiredModule)} ) + // TODO(jr, 10/17/23): wire this up + // handleClick = () => setShowNotConfiguredModal(true) // shouldn't run into this case } else {