refactor(protocol-designer): fix dropdown selection for moveLabware

protocol-designer/src/components/OffDeckLabwareSlideout.tsx

@@ -92,6 +92,7 @@ export const OffDeckLabwareSlideout = (
     >
       {offDeck == null ? (
         <Flex
+          height="100%"
           borderRadius={BORDERS.borderRadius8}
           alignItems={ALIGN_CENTER}
           backgroundColor={COLORS.grey30}

protocol-designer/src/components/StepEditForm/fields/LabwareField.tsx

@@ -14,6 +14,5 @@ export const LabwareField = (props: FieldProps): JSX.Element => {
     props.name === 'dispense_labware'
       ? [...options, ...disposalOptions]
       : [...options]
-
   return <StepFormDropdown {...props} options={allOptions} />
 }

protocol-designer/src/components/StepEditForm/fields/MoveLabwareField.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { useSelector } from 'react-redux'
+import { getMoveLabwareOptions } from '../../../ui/labware/selectors'
+import { StepFormDropdown } from './StepFormDropdownField'
+import type { FieldProps } from '../types'
+
+export const MoveLabwareField = (props: FieldProps): JSX.Element => {
+  const options = useSelector(getMoveLabwareOptions)
+  return <StepFormDropdown {...props} options={options} />
+}

protocol-designer/src/components/StepEditForm/fields/StepFormDropdownField.tsx

@@ -27,7 +27,6 @@ export const StepFormDropdown = (props: StepFormDropdownProps): JSX.Element => {
   const availableOptionIds = options.map(opt => opt.value)
   // @ts-expect-error (ce, 2021-06-21) unknown not assignable to string
   const fieldValue = availableOptionIds.includes(value) ? String(value) : null
-
   return (
     <DropdownField
       name={name}

protocol-designer/src/components/StepEditForm/fields/index.ts

@@ -12,6 +12,7 @@ export { DelayFields } from './DelayFields'
 export { DisposalVolumeField } from './DisposalVolumeField'
 export { FlowRateField } from './FlowRateField'
 export { LabwareField } from './LabwareField'
+export { MoveLabwareField } from './MoveLabwareField'
 export { LabwareLocationField } from './LabwareLocationField'
 export { PathField } from './PathField/PathField'
 export { PipetteField } from './PipetteField'

protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx

@@ -59,7 +59,9 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
             {...propsForFields.magnetAction}
             options={[
               {
-                name: t('step_edit_form.field.magnetAction.options.engage'),
+                name: t(
+                  'form:step_edit_form.field.magnetAction.options.engage'
+                ),
                 value: 'engage',
               },
             ]}
@@ -68,15 +70,17 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
             {...propsForFields.magnetAction}
             options={[
               {
-                name: t('step_edit_form.field.magnetAction.options.disengage'),
+                name: t(
+                  'form:step_edit_form.field.magnetAction.options.disengage'
+                ),
                 value: 'disengage',
               },
             ]}
           />
         </FormGroup>
         {magnetAction === 'engage' && (
           <FormGroup
-            label={t('step_edit_form.field.engageHeight.label')}
+            label={t('form:step_edit_form.field.engageHeight.label')}
             className={styles.magnet_form_group}
           >
             <TextField

protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx

@@ -12,9 +12,9 @@ import {
   useHoverTooltip,
 } from '@opentrons/components'
 import {
-  LabwareField,
   LabwareLocationField,
   CheckboxRowField,
+  MoveLabwareField,
 } from '../../fields'
 import styles from '../../StepEditForm.module.css'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
@@ -50,7 +50,7 @@ export const MoveLabwareForm = (props: StepFormProps): JSX.Element => {
           label={t('form:step_edit_form.labwareLabel.movedLabware')}
           className={styles.large_field}
         >
-          <LabwareField {...propsForFields.labware} />
+          <MoveLabwareField {...propsForFields.labware} />
         </FormGroup>
         {robotType === FLEX_ROBOT_TYPE ? (
           <Flex
@@ -69,6 +69,7 @@ export const MoveLabwareForm = (props: StepFormProps): JSX.Element => {
                   {...propsForFields.useGripper}
                   disabled={!isGripperAttached}
                   label={t('form:step_edit_form.field.useGripper.label')}
+                  tooltipContent={null}
                 />
               </FormGroup>
             </div>

protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx

@@ -276,7 +276,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null {
               backgroundColor={COLORS.grey35}
               padding={SPACING.spacing8}
               border={BORDERS.lineBorder}
-              borderRadius={BORDERS.borderRadiusFull}
+              borderRadius={BORDERS.borderRadius16}
             >
               <Text
                 as="h4"

protocol-designer/src/components/modals/EditModulesModal/index.tsx

@@ -180,9 +180,13 @@ export const EditModulesModal = (props: EditModulesModalProps): JSX.Element => {
       //  TODO(jr, 8/31/23): this is a bit hacky since the TCGEN2 slot is only B1 instead of B1 and A1
       //  so we have to manually check if slot A1 has issues as well as looking at selectedSlot
       //  this probably deserves a more elegant refactor
-      (selectedModel === THERMOCYCLER_MODULE_V2 && hasSlotIssue('A1')) ||
-      hasSlotIssue(selectedSlot)
+      selectedModel === THERMOCYCLER_MODULE_V2 &&
+      hasSlotIssue('A1')
     ) {
+      errors.selectedSlot = t('module_placement.SLOT_OCCUPIED_TC.body', {
+        selectedSlot,
+      })
+    } else if (hasSlotIssue(selectedSlot)) {
       errors.selectedSlot = t('module_placement.SLOT_OCCUPIED.body', {
         selectedSlot,
       })
@@ -342,68 +346,68 @@ const EditModulesModalComponent = (
           height="3.125rem"
           alignItems={ALIGN_CENTER}
         >
-          <Flex gridGap={SPACING.spacing8}>
-            <FormGroup label="Model">
-              <Box width="4rem">
-                <ModelDropdown
-                  fieldName="selectedModel"
-                  tabIndex={0}
-                  options={getModuleOptionsForRobotType(
-                    MODELS_FOR_MODULE_TYPE[moduleType],
-                    robotType
+          <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
+            <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
+              <FormGroup label="Model">
+                <Box width="4rem">
+                  <ModelDropdown
+                    fieldName="selectedModel"
+                    tabIndex={0}
+                    options={getModuleOptionsForRobotType(
+                      MODELS_FOR_MODULE_TYPE[moduleType],
+                      robotType
+                    )}
+                    field={field}
+                    fieldState={fieldState}
+                  />
+                </Box>
+              </FormGroup>
+              {showSlotOption && (
+                <>
+                  {!enableSlotSelection && (
+                    <Tooltip {...tooltipProps}>{slotOptionTooltip}</Tooltip>
                   )}
-                  field={field}
-                  fieldState={fieldState}
-                />
-              </Box>
-            </FormGroup>
-            {showSlotOption && (
-              <>
-                {!enableSlotSelection && (
-                  <Tooltip {...tooltipProps}>{slotOptionTooltip}</Tooltip>
-                )}
 
-                <Box {...targetProps} height="3.125rem">
-                  <FormGroup label="Position">
-                    <Box
-                      width={robotType === FLEX_ROBOT_TYPE ? '8rem' : '18rem'}
-                    >
-                      <Controller
-                        name="selectedSlot"
-                        control={control}
-                        render={({ field, fieldState }) => (
-                          <SlotDropdown
-                            fieldName="selectedSlot"
-                            options={getAllModuleSlotsByType(
-                              moduleType,
-                              robotType
-                            )}
-                            disabled={!enableSlotSelection}
-                            tabIndex={1}
-                            field={field}
-                            fieldState={fieldState}
-                          />
-                        )}
-                      />
-                    </Box>
-                  </FormGroup>
-                </Box>
-              </>
-            )}
+                  <Box {...targetProps} height="3.125rem">
+                    <FormGroup label="Position">
+                      <Box
+                        width={robotType === FLEX_ROBOT_TYPE ? '8rem' : '18rem'}
+                      >
+                        <Controller
+                          name="selectedSlot"
+                          control={control}
+                          render={({ field, fieldState }) => (
+                            <SlotDropdown
+                              fieldName="selectedSlot"
+                              options={getAllModuleSlotsByType(
+                                moduleType,
+                                robotType
+                              )}
+                              disabled={!enableSlotSelection}
+                              tabIndex={1}
+                              field={field}
+                              fieldState={fieldState}
+                            />
+                          )}
+                        />
+                      </Box>
+                    </FormGroup>
+                  </Box>
+                </>
+              )}
+            </Flex>
+            <Box>
+              {slotIssue ? (
+                <PDAlert
+                  alertType="warning"
+                  title={t('alert:module_placement.SLOT_OCCUPIED.title')}
+                  //  TODO(Jr, 3/18/24): add decription back: validation.selectedSlot
+                  //  when we fix designs in the future
+                  description={''}
+                />
+              ) : null}
+            </Box>
           </Flex>
-          <Box>
-            {slotIssue ? (
-              <PDAlert
-                alertType="warning"
-                title={
-                  robotType === OT2_ROBOT_TYPE
-                    ? t('alert:module_placement.SLOT_OCCUPIED.title')
-                    : validation.selectedSlot
-                }
-                description={''}
-              />
-            ) : null}
-          </Box>
         </Flex>
 
         {robotType === OT2_ROBOT_TYPE ? (

protocol-designer/src/components/modals/FilePipettesModal/FilePipettesModal.module.css

@@ -22,7 +22,7 @@
 
 .new_file_modal {
   line-height: 1.5;
-  height: 100%;
+  max-height: 100%;
   padding: 2rem;
   min-height: 38rem;
 

protocol-designer/src/ui/labware/__tests__/selectors.test.ts

@@ -177,39 +177,6 @@ describe('labware selectors', () => {
       ])
     })
 
-    it('should return labware options for move labware with tips and trash', () => {
-      const labwareEntities = {
-        ...tipracks,
-        ...trash,
-        ...otherLabware,
-      }
-      const initialDeckSetup = {
-        labware: labwareEntities,
-        modules: {},
-        pipettes: {},
-      }
-
-      const presavedStepForm = {
-        stepType: 'moveLabware',
-      }
-      expect(
-        //  @ts-expect-error(jr, 7/17/23): resultFunc doesn't exist on type Selector<Options>
-        getLabwareOptions.resultFunc(
-          labwareEntities,
-          names,
-          initialDeckSetup,
-          presavedStepForm,
-          {},
-          {}
-        )
-      ).toEqual([
-        { name: 'Opentrons Tip Rack 10 µL', value: 'tiprack10Id' },
-        { name: 'Opentrons Tip Rack 1000 µL', value: 'tiprack100Id' },
-        { name: 'Source Plate', value: 'wellPlateId' },
-        { name: 'Trash', value: mockTrash },
-      ])
-    })
-
     it('should return labware options with module prefixes when a labware is on module', () => {
       const labware = {
         wellPlateId: {
@@ -345,7 +312,7 @@ describe('labware selectors', () => {
         )
       ).toEqual([
         { name: 'Trash', value: mockTrash },
-        { name: 'Well Plate', value: 'wellPlateId' },
+        { name: 'Well Plate in Magnetic Module', value: 'wellPlateId' },
       ])
     })
   })