diff --git a/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx index 339813e2bc0..9ddf34be224 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/ModulesAndOtherTile.tsx @@ -170,10 +170,23 @@ export function ModulesAndOtherTile(props: WizardTileProps): JSX.Element { if (!enableDeckModification || robotType === OT2_ROBOT_TYPE) { if (values.pipettesByMount.left.pipetteName === 'p1000_96') { goBack(4) - } else if (values.pipettesByMount.right.pipetteName === '') { + } else if ( + values.pipettesByMount.right.pipetteName === '' && + robotType === FLEX_ROBOT_TYPE + ) { goBack(3) - } else { + } else if ( + values.pipettesByMount.right.pipetteName === '' && + robotType === OT2_ROBOT_TYPE + ) { + goBack(2) + } else if ( + values.pipettesByMount.right.pipetteName !== '' && + robotType === FLEX_ROBOT_TYPE + ) { goBack(2) + } else { + goBack() } } else { goBack() diff --git a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx index 537b458601f..f08d7338d7d 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTypeTile.tsx @@ -88,7 +88,12 @@ export function PipetteTypeTile(props: PipetteTypeTileProps): JSX.Element { return ( - + { let next = getByRole('button', { name: 'Next' }) next.click() // add protocol name - getByText('Step 1 / 7') + getByText('Step 1 / 6') const inputField = getByLabelText('MetadataTile_protocolName') fireEvent.change(inputField, { target: { value: 'mockName' } }) next = getByRole('button', { name: 'Next' }) next.click() - getByText('Step 2 / 7') + getByText('Step 2 / 6') // select P20 Single-Channel GEN2 getByLabelText('EquipmentOption_flex_P20 Single-Channel GEN2').click() next = getByRole('button', { name: 'Next' }) next.click() - getByText('Step 3 / 7') + getByText('Step 3 / 6') // select 10uL tipracks getByLabelText('EquipmentOption_flex_10uL tipracks').click() next = getByRole('button', { name: 'Next' }) next.click() - getByText('Step 4 / 7') + getByText('Step 4 / 6') // select none for 2nd pipette getByLabelText('EquipmentOption_flex_None').click() next = getByRole('button', { name: 'Next' }) next.click() - getByText('Step 7 / 7') + getByText('Step 6 / 6') // no modules and continue getByRole('button', { name: 'Review file details' }).click() expect(mockCreateNewProtocol).toHaveBeenCalled() diff --git a/protocol-designer/src/components/modals/CreateFileWizard/index.tsx b/protocol-designer/src/components/modals/CreateFileWizard/index.tsx index f7e6c78acd9..87e3c9fff6c 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/index.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/index.tsx @@ -85,6 +85,15 @@ const WIZARD_STEPS: WizardStep[] = [ 'staging_area', 'modulesAndOther', ] +const WIZARD_STEPS_OT2: WizardStep[] = [ + 'robotType', + 'metadata', + 'first_pipette_type', + 'first_pipette_tips', + 'second_pipette_type', + 'second_pipette_tips', + 'modulesAndOther', +] export function CreateFileWizard(): JSX.Element | null { const { t } = useTranslation() @@ -95,7 +104,10 @@ export function CreateFileWizard(): JSX.Element | null { ) const enableDeckModification = useSelector(getEnableDeckModification) - const [currentStepIndex, setCurrentStepIndex] = React.useState(0) + const [currentStepIndex, setCurrentStepIndex] = React.useState(0) + const [wizardSteps, setWizardSteps] = React.useState( + WIZARD_STEPS + ) React.useEffect(() => { // re-initialize wizard step count when modal is closed @@ -262,18 +274,18 @@ export function CreateFileWizard(): JSX.Element | null { ) - const currentWizardStep = WIZARD_STEPS[currentStepIndex] + const currentWizardStep = wizardSteps[currentStepIndex] const goBack = (stepsBack: number = 1): void => { if (currentStepIndex >= 0 + stepsBack) { setCurrentStepIndex(currentStepIndex - stepsBack) } } const proceed = (stepsForward: number = 1): void => { - if (currentStepIndex + stepsForward < WIZARD_STEPS.length) { + if (currentStepIndex + stepsForward < wizardSteps.length) { setCurrentStepIndex(currentStepIndex + stepsForward) } } @@ -285,6 +297,7 @@ export function CreateFileWizard(): JSX.Element | null { createProtocolFile={createProtocolFile} proceed={proceed} goBack={goBack} + setWizardSteps={setWizardSteps} /> ) : null @@ -392,10 +405,25 @@ interface CreateFileFormProps { createProtocolFile: (values: FormState) => void goBack: () => void proceed: () => void + setWizardSteps: React.Dispatch> } function CreateFileForm(props: CreateFileFormProps): JSX.Element { - const { currentWizardStep, createProtocolFile, proceed, goBack } = props + const { + currentWizardStep, + createProtocolFile, + proceed, + goBack, + setWizardSteps, + } = props + + const handleProceedRobotType = (robotType: string): void => { + if (robotType === OT2_ROBOT_TYPE) { + setWizardSteps(WIZARD_STEPS_OT2) + } else { + setWizardSteps(WIZARD_STEPS) + } + } const contentsByWizardStep: { [wizardStep in WizardStep]: ( @@ -403,7 +431,14 @@ function CreateFileForm(props: CreateFileFormProps): JSX.Element { ) => JSX.Element } = { robotType: (formikProps: FormikProps) => ( - + { + handleProceedRobotType(formikProps.values.fields.robotType) + proceed() + }} + /> ), metadata: (formikProps: FormikProps) => ( diff --git a/protocol-designer/src/components/modules/FlexSlotMap.tsx b/protocol-designer/src/components/modules/FlexSlotMap.tsx index 90dc24e9ed3..0f46be8f3a7 100644 --- a/protocol-designer/src/components/modules/FlexSlotMap.tsx +++ b/protocol-designer/src/components/modules/FlexSlotMap.tsx @@ -45,16 +45,15 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element { viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`} > {deckDef.locations.orderedSlots.map(slotDef => ( - <> - - + ))} - {selectedSlots.map(selectedSlot => { + {selectedSlots.map((selectedSlot, index) => { const slot = deckDef.locations.orderedSlots.find( slot => slot.id === selectedSlot ) @@ -85,7 +84,7 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element { return (