refactor(protocol-designer): ot-2 slot map is now a normal size

components/src/slotmap/SlotMap.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import cx from 'classnames'
-import { FLEX_ROBOT_TYPE, RobotType } from '@opentrons/shared-data'
 import { Icon } from '../icons'
 import styles from './styles.css'
 
@@ -14,7 +13,6 @@
   collisionSlots?: string[]
   /** Optional error styling */
   isError?: boolean
-  robotType?: RobotType
 }
 
 const OT2_SLOT_MAP_SLOTS = [
@@ -24,24 +22,15 @@
   ['1', '2', '3'],
 ]
 
-const FLEX_SLOT_MAP_SLOTS = [
-  ['A1', 'A2', 'A3'],
-  ['B1', 'B2', 'B3'],
-  ['C1', 'C2', 'C3'],
-  ['D1', 'D2', 'D3'],
-]
-
 const slotWidth = 33
 const slotHeight = 23
 const iconSize = 20
 const numRows = 4
 const numCols = 3
 
 export function SlotMap(props: SlotMapProps): JSX.Element {
-  const { collisionSlots, occupiedSlots, isError, robotType } = props
-  const slots =
-    robotType === FLEX_ROBOT_TYPE ? FLEX_SLOT_MAP_SLOTS : OT2_SLOT_MAP_SLOTS
-
+  const { collisionSlots, occupiedSlots, isError } = props
+  const slots = OT2_SLOT_MAP_SLOTS
   return (
     <svg
       viewBox={`-1,-1,${slotWidth * numCols + 2}, ${slotHeight * numRows + 2}`}

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

@@ -40,9 +40,10 @@ export const WellSelectionField = (props: Props): JSX.Element => {
   const stepId = useSelector(getSelectedStepId)
   const pipetteEntities = useSelector(stepFormSelectors.getPipetteEntities)
   const wellSelectionLabwareKey = useSelector(getWellSelectionLabwareKey)
-  const primaryWellCount = Array.isArray(selectedWells)
-    ? selectedWells.length.toString()
-    : undefined
+  const primaryWellCount =
+    Array.isArray(selectedWells) && selectedWells.length > 0
+      ? selectedWells.length.toString()
+      : undefined
   const pipette = pipetteId != null ? pipetteEntities[pipetteId] : null
   const is8Channel = pipette != null ? pipette.spec.channels === 8 : false
 

protocol-designer/src/components/modals/EditModulesModal/EditModules.css

@@ -39,16 +39,3 @@
 .button_margin {
   margin-left: 1rem;
 }
-
-.slot_map_container {
-  flex: 0 1 13rem;
-  padding: 0 3rem 0;
-}
-
-.slot_map_container_modal {
-  display: flex;
-  height: 16rem;
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-  justify-content: center;
-}

protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx

@@ -11,11 +11,9 @@ import { getRobotType } from '../../../../file-data/selectors'
 import { getInitialDeckSetup } from '../../../../step-forms/selectors'
 import { getLabwareIsCompatible } from '../../../../utils/labwareModuleCompatibility'
 import { getDisableModuleRestrictions } from '../../../../feature-flags/selectors'
-import { ConnectedSlotMap } from '../ConnectedSlotMap'
 import { EditModulesModal } from '../index'
 import type { ModuleOnDeck } from '../../../../step-forms'
 
-jest.mock('../ConnectedSlotMap')
 jest.mock('../../../../file-data/selectors')
 jest.mock('../../../../step-forms/selectors')
 jest.mock('../../../../utils/labwareModuleCompatibility')
@@ -39,9 +37,6 @@ const mockGetLabwareIsCompatible = getLabwareIsCompatible as jest.MockedFunction
 const mockGetDisableModuleRestrictions = getDisableModuleRestrictions as jest.MockedFunction<
   typeof getDisableModuleRestrictions
 >
-const mockConnectedSlotMap = ConnectedSlotMap as jest.MockedFunction<
-  typeof ConnectedSlotMap
->
 const mockSlotMap = SlotMap as jest.MockedFunction<typeof SlotMap>
 const render = (props: React.ComponentProps<typeof EditModulesModal>) => {
   return renderWithProviders(<EditModulesModal {...props} />, {
@@ -97,7 +92,6 @@ describe('Edit Modules Modal', () => {
     mockGetLabwareIsCompatible.mockReturnValue(true)
     mockGetDisableModuleRestrictions.mockReturnValue(false)
     mockDeckLocationSelect.mockReturnValue(<div>mock DeckLocationSelect</div>)
-    mockConnectedSlotMap.mockReturnValue(<div>mock ConnectedSlotMap</div>)
     mockSlotMap.mockReturnValue(<div>mock SlotMap</div>)
   })
   it('renders the edit modules modal for a temp on a flex', () => {
@@ -112,7 +106,7 @@ describe('Edit Modules Modal', () => {
     mockGetRobotType.mockReturnValue(OT2_ROBOT_TYPE)
     render(props)
     screen.getByText('Temperature module')
-    screen.getByText('mock ConnectedSlotMap')
+    screen.getByText('mock SlotMap')
     fireEvent.click(screen.getByRole('button', { name: 'cancel' }))
     expect(props.onCloseClick).toHaveBeenCalled()
     screen.getByRole('button', { name: 'save' })

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

@@ -68,7 +68,6 @@ import { PDAlert } from '../../alerts/PDAlert'
 import { isModuleWithCollisionIssue } from '../../modules'
 import { ModelDropdown } from './ModelDropdown'
 import { SlotDropdown } from './SlotDropdown'
-import { ConnectedSlotMap } from './ConnectedSlotMap'
 import styles from './EditModules.css'
 
 import type { ModuleOnDeck } from '../../../step-forms/types'
@@ -407,24 +406,23 @@ const EditModulesModalComponent = (
           <Controller
             name="selectedSlot"
             control={control}
-            render={({ field, fieldState }) =>
-              moduleType === THERMOCYCLER_MODULE_TYPE ? (
-                <Flex
-                  height="16rem"
-                  justifyContent={JUSTIFY_CENTER}
-                  paddingY={SPACING.spacing16}
-                >
+            render={({ field, fieldState }) => (
+              <Flex
+                height="16rem"
+                justifyContent={JUSTIFY_CENTER}
+                paddingY={SPACING.spacing16}
+              >
+                {moduleType === THERMOCYCLER_MODULE_TYPE ? (
                   <SlotMap occupiedSlots={['7', '8', '10', '11']} />
-                </Flex>
-              ) : (
-                <ConnectedSlotMap
-                  robotType={OT2_ROBOT_TYPE}
-                  field={field}
-                  hasFieldError={!fieldState.error}
-                />
-              )
-            }
-          ></Controller>
+                ) : (
+                  <SlotMap
+                    occupiedSlots={[`${field.value}`]}
+                    isError={!fieldState.error}
+                  />
+                )}
+              </Flex>
+            )}
+          />
         ) : (
           <Flex height="20rem" justifyContent={JUSTIFY_CENTER}>
             <DeckLocationSelect

protocol-designer/src/components/modules/ModuleRow.tsx

@@ -163,7 +163,6 @@ export function ModuleRow(props: Props): JSX.Element {
                 <SlotMap
                   occupiedSlots={occupiedSlotsForMap}
                   collisionSlots={collisionSlots}
-                  robotType={robotType}
                 />
               </div>
             ))}