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

components/src/slotmap/SlotMap.tsx → components/src/slotmap/OT2SlotMap.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 @@ export interface SlotMapProps {
   collisionSlots?: string[]
   /** Optional error styling */
   isError?: boolean
-  robotType?: RobotType
 }
 
 const OT2_SLOT_MAP_SLOTS = [
@@ -24,24 +22,15 @@ const OT2_SLOT_MAP_SLOTS = [
   ['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
-
+export function OT2SlotMap(props: SlotMapProps): JSX.Element {
+  const { collisionSlots, occupiedSlots, isError } = props
+  const slots = OT2_SLOT_MAP_SLOTS
   return (
     <svg
       viewBox={`-1,-1,${slotWidth * numCols + 2}, ${slotHeight * numRows + 2}`}

components/src/slotmap/__tests__/SlotMap.test.tsx → components/src/slotmap/__tests__/OT2SlotMap.test.tsx

@@ -1,3 +1,3 @@
-describe('SlotMap', () => {
+describe('OT2SlotMap', () => {
   it.todo('replace deprecated enzyme test')
 })

components/src/slotmap/index.ts

@@ -1 +1 @@
-export * from './SlotMap'
+export * from './OT2SlotMap'

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

@@ -4,24 +4,22 @@ import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
   DeckLocationSelect,
   renderWithProviders,
-  SlotMap,
+  OT2SlotMap,
 } from '@opentrons/components'
 import { i18n } from '../../../../localization'
 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')
 jest.mock('../../../../feature-flags/selectors')
 jest.mock('@opentrons/components/src/hooks/useSelectDeckLocation/index')
-jest.mock('@opentrons/components/src/slotmap/SlotMap')
+jest.mock('@opentrons/components/src/slotmap/OT2SlotMap')
 
 const mockGetRobotType = getRobotType as jest.MockedFunction<
   typeof getRobotType
@@ -39,10 +37,7 @@ 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 mockOT2SlotMap = OT2SlotMap as jest.MockedFunction<typeof OT2SlotMap>
 const render = (props: React.ComponentProps<typeof EditModulesModal>) => {
   return renderWithProviders(<EditModulesModal {...props} />, {
     i18nInstance: i18n,
@@ -97,8 +92,7 @@ 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>)
+    mockOT2SlotMap.mockReturnValue(<div>mock SlotMap</div>)
   })
   it('renders the edit modules modal for a temp on a flex', () => {
     render(props)
@@ -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

@@ -27,7 +27,7 @@ import {
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_FLEX_END,
-  SlotMap,
+  OT2SlotMap,
   usePrevious,
 } from '@opentrons/components'
 import {
@@ -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}
-                >
-                  <SlotMap occupiedSlots={['7', '8', '10', '11']} />
-                </Flex>
-              ) : (
-                <ConnectedSlotMap
-                  robotType={OT2_ROBOT_TYPE}
-                  field={field}
-                  hasFieldError={!fieldState.error}
-                />
-              )
-            }
-          ></Controller>
+            render={({ field, fieldState }) => (
+              <Flex
+                height="16rem"
+                justifyContent={JUSTIFY_CENTER}
+                paddingY={SPACING.spacing16}
+              >
+                {moduleType === THERMOCYCLER_MODULE_TYPE ? (
+                  <OT2SlotMap occupiedSlots={['7', '8', '10', '11']} />
+                ) : (
+                  <OT2SlotMap
+                    occupiedSlots={[`${field.value}`]}
+                    isError={!fieldState.error}
+                  />
+                )}
+              </Flex>
+            )}
+          />
         ) : (
           <Flex height="20rem" justifyContent={JUSTIFY_CENTER}>
             <DeckLocationSelect

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

@@ -5,7 +5,7 @@ import upperFirst from 'lodash/upperFirst'
 import {
   LabeledValue,
   OutlineButton,
-  SlotMap,
+  OT2SlotMap,
   Tooltip,
   useHoverTooltip,
   ModuleIcon,
@@ -51,7 +51,7 @@ export function ModuleRow(props: Props): JSX.Element {
   const slot = moduleOnDeck?.slot
   /*
   TODO (ka 2020-2-3): This logic is very specific to this individual implementation
-  of SlotMap. Kept it here (for now?) because it spells out the different cases.
+  of OT2SlotMap. Kept it here (for now?) because it spells out the different cases.
   */
   let slotDisplayName = null
   let occupiedSlotsForMap: string[] = []
@@ -160,10 +160,9 @@ export function ModuleRow(props: Props): JSX.Element {
               />
             ) : (
               <div {...targetProps}>
-                <SlotMap
+                <OT2SlotMap
                   occupiedSlots={occupiedSlotsForMap}
                   collisionSlots={collisionSlots}
-                  robotType={robotType}
                 />
               </div>
             ))}