hide gripper toggle for ot2 and disable when gripper not attached

Opentrons · Jun 22, 2023 · 0515d9e · 0515d9e
1 parent 913236c
commit 0515d9e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 16 deletions.
diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx b/protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx
@@ -1,16 +1,35 @@
 import * as React from 'react'
-import { FormGroup } from '@opentrons/components'
+import { useSelector } from 'react-redux'
+import {
+  FormGroup,
+  Tooltip,
+  TOOLTIP_BOTTOM,
+  TOOLTIP_FIXED,
+  useHoverTooltip,
+} from '@opentrons/components'
 import { i18n } from '../../../../localization'
 import {
   LabwareField,
   ToggleRowField,
   LabwareLocationField,
 } from '../../fields'
 import styles from '../../StepEditForm.css'
-import type { StepFormProps } from '../../types'
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import { getRobotType } from '../../../../file-data/selectors'
+import { getAdditionalEquipment } from '../../../../step-forms/selectors'
+import { StepFormProps } from '../../types'
 
 export const MoveLabwareForm = (props: StepFormProps): JSX.Element => {
   const { propsForFields } = props
+  const robotType = useSelector(getRobotType)
+  const additionalEquipment = useSelector(getAdditionalEquipment)
+  const isGripperAttached = Object.values(additionalEquipment).some(
+    equipment => equipment?.name === 'gripper'
+  )
+  const [targetProps, tooltipProps] = useHoverTooltip({
+    placement: TOOLTIP_BOTTOM,
+    strategy: TOOLTIP_FIXED,
+  })
 
   return (
     <div className={styles.form_wrapper}>
@@ -26,16 +45,34 @@ export const MoveLabwareForm = (props: StepFormProps): JSX.Element => {
         >
           <LabwareField {...propsForFields.labware} />
         </FormGroup>
-        <FormGroup
-          className={styles.small_field}
-          label={i18n.t('form.step_edit_form.field.useGripper.label')}
-        >
-          <ToggleRowField
-            {...propsForFields.useGripper}
-            offLabel={i18n.t('form.step_edit_form.field.useGripper.toggleOff')}
-            onLabel={i18n.t('form.step_edit_form.field.useGripper.toggleOn')}
-          />
-        </FormGroup>
+        {robotType === FLEX_ROBOT_TYPE ? (
+          <>
+            {!isGripperAttached ? (
+              <Tooltip {...tooltipProps}>
+                {i18n.t(
+                  'tooltip.step_fields.moveLabware.disabled.gripper_not_used'
+                )}
+              </Tooltip>
+            ) : null}
+            <div {...targetProps}>
+              <FormGroup
+                className={styles.small_field}
+                label={i18n.t('form.step_edit_form.field.useGripper.label')}
+              >
+                <ToggleRowField
+                  {...propsForFields.useGripper}
+                  disabled={!isGripperAttached}
+                  offLabel={i18n.t(
+                    'form.step_edit_form.field.useGripper.toggleOff'
+                  )}
+                  onLabel={i18n.t(
+                    'form.step_edit_form.field.useGripper.toggleOn'
+                  )}
+                />
+              </FormGroup>
+            </div>
+          </>
+        ) : null}
       </div>
       <div className={styles.form_row}>
         <FormGroup

diff --git a/protocol-designer/src/components/modules/__tests__/EditModulesCard.test.tsx b/protocol-designer/src/components/modules/__tests__/EditModulesCard.test.tsx
@@ -8,6 +8,7 @@ import {
   TEMPERATURE_MODULE_TYPE,
   TEMPERATURE_MODULE_V1,
   OT2_ROBOT_TYPE,
+  FLEX_ROBOT_TYPE,
 } from '@opentrons/shared-data'
 import { TEMPERATURE_DEACTIVATED } from '@opentrons/step-generation'
 import { selectors as featureFlagSelectors } from '../../../feature-flags'
@@ -78,7 +79,7 @@ describe('EditModulesCard', () => {
       tiprackDefURI: 'tiprack300',
     }
     mockGetAdditionalEquipment.mockReturnValue({})
-    mockGetRobotType.mockReturnValue('OT-2 Standard')
+    mockGetRobotType.mockReturnValue(OT2_ROBOT_TYPE)
     getDisableModuleRestrictionsMock.mockReturnValue(false)
     getPipettesForEditPipetteFormMock.mockReturnValue({
       left: crashablePipette,
@@ -224,7 +225,7 @@ describe('EditModulesCard', () => {
     })
   })
   it('displays module row with module to add when no moduleData for Flex', () => {
-    mockGetRobotType.mockReturnValue('OT-3 Standard')
+    mockGetRobotType.mockReturnValue(FLEX_ROBOT_TYPE)
     const wrapper = render(props)
     const SUPPORTED_MODULE_TYPES_FILTERED = SUPPORTED_MODULE_TYPES.filter(
       moduleType => moduleType !== 'magneticModuleType'
@@ -240,14 +241,14 @@ describe('EditModulesCard', () => {
     })
   })
   it('displays gripper row with no gripper', () => {
-    mockGetRobotType.mockReturnValue('OT-3 Standard')
+    mockGetRobotType.mockReturnValue(FLEX_ROBOT_TYPE)
     const wrapper = render(props)
     expect(wrapper.find(GripperRow)).toHaveLength(1)
     expect(wrapper.find(GripperRow).props().isGripperAdded).toEqual(false)
   })
   it('displays gripper row with gripper attached', () => {
     const mockGripperId = 'gripeprId'
-    mockGetRobotType.mockReturnValue('OT-3 Standard')
+    mockGetRobotType.mockReturnValue(FLEX_ROBOT_TYPE)
     mockGetAdditionalEquipment.mockReturnValue({
       [mockGripperId]: { name: 'gripper', id: mockGripperId },
     })

diff --git a/protocol-designer/src/localization/en/tooltip.json b/protocol-designer/src/localization/en/tooltip.json
@@ -70,6 +70,11 @@
         "blowout_checkbox": "Redundant with disposal volume"
       }
     },
+    "moveLabware": {
+      "disabled": {
+        "gripper_not_used": "Attach Gripper to move labware"
+      }
+    },
     "batch_edit": {
       "disabled": {
         "pipette-different": "Cannot edit unless selected steps share the same pipette.",