fix(protocol-designer): fix issues in select pipette screen (#16404)

* fix(protocol-designer): fix issues in select pipette screen
Opentrons · Oct 8, 2024 · a9b219e · a9b219e
1 parent d1de808
commit a9b219e
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 113 deletions.
diff --git a/protocol-designer/src/assets/localization/en/create_new_protocol.json b/protocol-designer/src/assets/localization/en/create_new_protocol.json
@@ -32,7 +32,7 @@
   "show_tips": "Show incompatible tips",
   "slots_limit_reached": "Slots limit reached",
   "stagingArea": "Staging area",
-  "swap": "Swap pipettes",
+  "swap_pipettes": "Swap pipettes",
   "tell_us": "Tell us about your protocol",
   "trash_required": "A trash entity is required",
   "trashBin": "Trash Bin",

diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -6,8 +6,8 @@
   "delete": "Delete step",
   "dispensed": "Dispensed",
   "duplicate": "Duplicate step",
-  "engage_height": "Engage height",
   "edit_step": "Edit step",
+  "engage_height": "Engage height",
   "final_deck_state": "Final deck state",
   "from": "from",
   "heater_shaker_settings": "Heater-shaker settings",

diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx
@@ -242,7 +242,6 @@ export function EditInstrumentsModal(
               leftInfo != null ? (
                 <PipetteInfoItem
                   mount="left"
-                  pipetteOnDeck={pipettesOnDeck}
                   pipetteName={leftPip.name}
                   tiprackDefURIs={leftPip.tiprackDefURI}
                   editClick={() => {
@@ -277,7 +276,6 @@ export function EditInstrumentsModal(
               rightInfo != null ? (
                 <PipetteInfoItem
                   mount="right"
-                  pipetteOnDeck={pipettesOnDeck}
                   pipetteName={rightPip.name}
                   tiprackDefURIs={rightPip.tiprackDefURI}
                   editClick={() => {

diff --git a/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx b/protocol-designer/src/organisms/PipetteInfoItem/__tests__/PipetteInfoItem.test.tsx
@@ -25,10 +25,6 @@ describe('PipetteInfoItem', () => {
       tiprackDefURIs: ['mockDefUri'],
       pipetteName: 'p1000_single',
       mount: 'left',
-      formPipettesByMount: {
-        left: { pipetteName: 'p1000_single' },
-        right: { pipetteName: 'p50_single' },
-      },
     }
 
     vi.mocked(getLabwareDefsByURI).mockReturnValue({
@@ -45,4 +41,19 @@ describe('PipetteInfoItem', () => {
     fireEvent.click(screen.getByText('Remove'))
     expect(props.cleanForm).toHaveBeenCalled()
   })
+
+  it('renders pipette with edit and remove buttons right pipette', () => {
+    props = {
+      ...props,
+      mount: 'right',
+    }
+    render(props)
+    screen.getByText('P1000 Single-Channel GEN1')
+    screen.getByText('Right pipette')
+    screen.getByText('mock display name')
+    fireEvent.click(screen.getByText('Edit'))
+    expect(props.editClick).toHaveBeenCalled()
+    fireEvent.click(screen.getByText('Remove'))
+    expect(props.cleanForm).toHaveBeenCalled()
+  })
 })
diff --git a/protocol-designer/src/organisms/PipetteInfoItem/index.tsx b/protocol-designer/src/organisms/PipetteInfoItem/index.tsx
@@ -15,30 +15,18 @@ import { getPipetteSpecsV2 } from '@opentrons/shared-data'
 import { BUTTON_LINK_STYLE } from '../../atoms'
 import { getLabwareDefsByURI } from '../../labware-defs/selectors'
 import type { PipetteMount, PipetteName } from '@opentrons/shared-data'
-import type { FormPipettesByMount, PipetteOnDeck } from '../../step-forms'
 
 interface PipetteInfoItemProps {
   mount: PipetteMount
   pipetteName: PipetteName
   tiprackDefURIs: string[]
   editClick: () => void
   cleanForm: () => void
-  formPipettesByMount?: FormPipettesByMount
-  pipetteOnDeck?: PipetteOnDeck[]
 }
 
 export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
-  const {
-    mount,
-    pipetteName,
-    tiprackDefURIs,
-    editClick,
-    cleanForm,
-    formPipettesByMount,
-    pipetteOnDeck,
-  } = props
+  const { mount, pipetteName, tiprackDefURIs, editClick, cleanForm } = props
   const { t, i18n } = useTranslation('create_new_protocol')
-  const oppositeMount = mount === 'left' ? 'right' : 'left'
   const allLabware = useSelector(getLabwareDefsByURI)
   const is96Channel = pipetteName === 'p1000_96'
   return (
@@ -73,33 +61,31 @@ export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
           </Flex>
         </Flex>
         <Flex
-          gridGap={SPACING.spacing20}
+          gridGap={SPACING.spacing16}
           textDecoration={TYPOGRAPHY.textDecorationUnderline}
         >
           <Btn
             onClick={editClick}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
             css={BUTTON_LINK_STYLE}
+            padding={SPACING.spacing4}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {t('edit')}
             </StyledText>
           </Btn>
-          {(formPipettesByMount != null &&
-            formPipettesByMount[oppositeMount].pipetteName == null) ||
-          (pipetteOnDeck != null && pipetteOnDeck.length === 1) ? null : (
-            <Btn
-              onClick={() => {
-                cleanForm()
-              }}
-              textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              css={BUTTON_LINK_STYLE}
-            >
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {t('remove')}
-              </StyledText>
-            </Btn>
-          )}
+          <Btn
+            onClick={() => {
+              cleanForm()
+            }}
+            textDecoration={TYPOGRAPHY.textDecorationUnderline}
+            css={BUTTON_LINK_STYLE}
+            padding={SPACING.spacing4}
+          >
+            <StyledText desktopStyle="bodyDefaultRegular">
+              {t('remove')}
+            </StyledText>
+          </Btn>
         </Flex>
       </Flex>
     </ListItem>

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import without from 'lodash/without'
+import { useLocation } from 'react-router-dom'
+
 import {
   Flex,
   SPACING,
@@ -16,6 +18,7 @@ import type { WizardTileProps } from './types'
 export function SelectGripper(props: WizardTileProps): JSX.Element | null {
   const { goBack, setValue, proceed, watch } = props
   const { t } = useTranslation(['create_new_protocol', 'shared'])
+  const location = useLocation()
   const [gripperStatus, setGripperStatus] = useState<'yes' | 'no' | null>(null)
   const additionalEquipment = watch('additionalEquipment')
 
@@ -44,6 +47,7 @@ export function SelectGripper(props: WizardTileProps): JSX.Element | null {
         header={t('add_gripper')}
         disabled={gripperStatus == null}
         goBack={() => {
+          location.state = 'gripper'
           goBack(1)
         }}
         proceed={handleProceed}