fix(protocol-designer): allow moving off-deck labware (#18464)

closes RQA-4226

Author: jerader

protocol-designer/src/assets/localization/en/shared.json

@@ -52,7 +52,9 @@
   "invalid_json_file": "Invalid JSON file",
   "invalid_python_body": "Protocol files must be created in Protocol Designer to be compatible.",
   "labware_detail": "Labware detail",
+  "labware_in_slot": "{{name}} in {{slot}}",
   "labware_name_conflict": "Duplicate labware name",
+  "labware_offdeck": "{{name}} off-deck",
   "labware": "Labware",
   "learn_more": "Learn more about the recent changes in the {{version}} release.",
   "left_right": "Left + Right",

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx

@@ -12,7 +12,7 @@ export function LabwareField(props: FieldProps): JSX.Element {
   const { name } = props
   const { i18n, t } = useTranslation(['protocol_steps', 'application'])
   const disposalOptions = useSelector(getDisposalOptions)
-  const options = useLabwareDropdownOptions('labware')
+  const options = useLabwareDropdownOptions('labware', false)
   const dispatch = useDispatch()
 
   const allOptions =

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/MoveLabwareField.tsx

@@ -7,8 +7,11 @@ import { useLabwareDropdownOptions } from '../../../../utils'
 
 import type { FieldProps } from '../../types'
 
-export function MoveLabwareField(props: FieldProps): JSX.Element {
-  const options = useLabwareDropdownOptions('moveLabware')
+interface MoveLabwareFieldProps extends FieldProps {
+  useGripper: boolean
+}
+export function MoveLabwareField(props: MoveLabwareFieldProps): JSX.Element {
+  const options = useLabwareDropdownOptions('moveLabware', props.useGripper)
   const dispatch = useDispatch()
   const { t } = useTranslation(['protocol_steps', 'application'])
   return (

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/index.tsx

@@ -56,6 +56,7 @@ export function MoveLabwareTools(props: StepFormProps): JSX.Element {
       <MoveLabwareField
         {...propsForFields.labware}
         errorToShow={getFormLevelError('labware', mappedErrorsToField)}
+        useGripper={propsForFields.useGripper.value === true}
       />
       <Divider marginY="0" />
       <LabwareLocationField

protocol-designer/src/pages/Designer/utils.ts

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { reduce } from 'lodash'
 
@@ -241,22 +242,27 @@ const getNickname = (
   nicknamesById: Record<string, string>,
   activeDeckSetup: AllTemporalPropertiesForTimelineFrame,
   labwareId: string,
-  robotType: RobotType
+  robotType: RobotType,
+  t: any
 ): string => {
   const { modules } = activeDeckSetup
   const stack = activeDeckSetup.labware[labwareId].stack
   const latestSlot = resolveSlotLocation(modules, stack, robotType)
-
-  let nickName: string = nicknamesById[labwareId]
+  const name = nicknamesById[labwareId]
+  let nickName: string = name
   if (latestSlot != null && latestSlot !== 'offDeck') {
-    nickName = `${nicknamesById[labwareId]} in ${latestSlot}`
+    nickName = t('labware_in_slot', { name, slot: latestSlot })
+  } else if (latestSlot != null && latestSlot === 'offDeck') {
+    nickName = t('labware_offdeck', { name })
   }
   return nickName
 }
 
 export const useLabwareDropdownOptions = (
-  type: 'moveLabware' | 'labware'
+  type: 'moveLabware' | 'labware',
+  useGripper: boolean
 ): DropdownOption[] => {
+  const { t } = useTranslation('shared')
   const labwareEntities = useSelector(getLabwareEntities)
   const activeDeckSetup = useSelector(getDeckSetupForActiveItem)
   const nicknamesById = useSelector(getLabwareNicknamesById)
@@ -279,18 +285,21 @@ export const useLabwareDropdownOptions = (
         nicknamesById,
         activeDeckSetup,
         labwareId,
-        robotType
+        robotType,
+        t
       )
       const isTiprack = getIsTiprack(labwareEntity.def)
-      const isOffDeck = deckSlot === 'offDeck'
+      const isFilterOffDeck =
+        deckSlot === 'offDeck' &&
+        (type === 'labware' || (type === 'moveLabware' && useGripper))
 
       //  filter out moving adapters, and labware in
       //  waste chute for moveLabware, labware off-deck and
       //  labware that is a tiprack for the labware dropdown only
       return isAdapter ||
         isLabwareInWasteChute ||
         (type === 'labware' && isTiprack) ||
-        isOffDeck
+        isFilterOffDeck
         ? acc
         : [
             ...acc,