feat(protocol-designer): correct step count in create file wizard (#1…

…3807) closes RAUT-775
Opentrons · Oct 19, 2023 · 6708e7a · 6708e7a
1 parent 07af61e
commit 6708e7a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 24 deletions.
diff --git 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
@@ -88,7 +88,12 @@ export function PipetteTypeTile(props: PipetteTypeTileProps): JSX.Element {
 
   return (
     <HandleEnter onEnter={proceed}>
-      <Flex flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing32}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        padding={SPACING.spacing32}
+        height="auto"
+        overflowY="auto"
+      >
         <Flex
           flexDirection={DIRECTION_COLUMN}
           height="26rem"

diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/CreateFileWizard.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/CreateFileWizard.test.tsx
@@ -116,27 +116,27 @@ describe('CreateFileWizard', () => {
     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
@@ -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<number>(0)
+  const [wizardSteps, setWizardSteps] = React.useState<WizardStep[]>(
+    WIZARD_STEPS
+  )
 
   React.useEffect(() => {
     // re-initialize wizard step count when modal is closed
@@ -262,18 +274,18 @@ export function CreateFileWizard(): JSX.Element | null {
     <WizardHeader
       title={t('modal.create_file_wizard.create_new_protocol')}
       currentStep={currentStepIndex}
-      totalSteps={WIZARD_STEPS.length - 1}
+      totalSteps={wizardSteps.length - 1}
       onExit={handleCancel}
     />
   )
-  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}
       />
     </ModalShell>
   ) : null
@@ -392,18 +405,40 @@ interface CreateFileFormProps {
   createProtocolFile: (values: FormState) => void
   goBack: () => void
   proceed: () => void
+  setWizardSteps: React.Dispatch<React.SetStateAction<WizardStep[]>>
 }
 
 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]: (
       formikProps: FormikProps<FormState>
     ) => JSX.Element
   } = {
     robotType: (formikProps: FormikProps<FormState>) => (
-      <RobotTypeTile {...{ ...formikProps, proceed, goBack }} />
+      <RobotTypeTile
+        {...formikProps}
+        goBack={goBack}
+        proceed={() => {
+          handleProceedRobotType(formikProps.values.fields.robotType)
+          proceed()
+        }}
+      />
     ),
     metadata: (formikProps: FormikProps<FormState>) => (
       <MetadataTile {...formikProps} proceed={proceed} goBack={goBack} />

diff --git 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 => (
-        <>
-          <DeckSlotLocation
-            slotName={slotDef.id}
-            deckDefinition={deckDef}
-            slotClipColor={COLORS.transparent}
-            slotBaseColor={COLORS.light1}
-          />
-        </>
+        <DeckSlotLocation
+          key={slotDef.id}
+          slotName={slotDef.id}
+          deckDefinition={deckDef}
+          slotClipColor={COLORS.transparent}
+          slotBaseColor={COLORS.light1}
+        />
       ))}
-      {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 (
           <RobotCoordsForeignObject
-            key={`${selectedSlot}_${slot?.id}`}
+            key={`${selectedSlot}_${slot?.id}_${index}`}
             width={xDimension}
             height={yDimension}
             x={x}