diff --git a/components/src/slotmap/SlotMap.tsx b/components/src/slotmap/OT2SlotMap.tsx similarity index 81% rename from components/src/slotmap/SlotMap.tsx rename to components/src/slotmap/OT2SlotMap.tsx index e3c08cd7e7f..9c90826a462 100644 --- a/components/src/slotmap/SlotMap.tsx +++ b/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 ( { +describe('OT2SlotMap', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/slotmap/index.ts b/components/src/slotmap/index.ts index a7b03221e16..b0abb4530e3 100644 --- a/components/src/slotmap/index.ts +++ b/components/src/slotmap/index.ts @@ -1 +1 @@ -export * from './SlotMap' +export * from './OT2SlotMap' diff --git a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx b/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx index 0ba354a2a0a..fc5244bd1fc 100644 --- a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx +++ b/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 diff --git a/protocol-designer/src/components/modals/EditModulesModal/ConnectedSlotMap.tsx b/protocol-designer/src/components/modals/EditModulesModal/ConnectedSlotMap.tsx deleted file mode 100644 index 5f35bb34e81..00000000000 --- a/protocol-designer/src/components/modals/EditModulesModal/ConnectedSlotMap.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react' -import { ControllerRenderProps } from 'react-hook-form' -import { SlotMap } from '@opentrons/components' -import { RobotType } from '@opentrons/shared-data' -import type { EditModulesFormValues } from './index' - -import styles from './EditModules.css' - -interface ConnectedSlotMapProps { - robotType: RobotType - field: ControllerRenderProps - hasFieldError?: boolean -} - -export const ConnectedSlotMap = ( - props: ConnectedSlotMapProps -): JSX.Element | null => { - const { robotType, field, hasFieldError } = props - - return field.value ? ( -
- -
- ) : null -} diff --git a/protocol-designer/src/components/modals/EditModulesModal/EditModules.css b/protocol-designer/src/components/modals/EditModulesModal/EditModules.css index f3e747130cd..954b6e91a0e 100644 --- a/protocol-designer/src/components/modals/EditModulesModal/EditModules.css +++ b/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; -} diff --git a/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx b/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx index 762bbdb5608..c48139f86bd 100644 --- a/protocol-designer/src/components/modals/EditModulesModal/__tests__/EditModulesModal.test.tsx +++ b/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 +const mockOT2SlotMap = OT2SlotMap as jest.MockedFunction const render = (props: React.ComponentProps) => { return renderWithProviders(, { i18nInstance: i18n, @@ -97,8 +92,7 @@ describe('Edit Modules Modal', () => { mockGetLabwareIsCompatible.mockReturnValue(true) mockGetDisableModuleRestrictions.mockReturnValue(false) mockDeckLocationSelect.mockReturnValue(
mock DeckLocationSelect
) - mockConnectedSlotMap.mockReturnValue(
mock ConnectedSlotMap
) - mockSlotMap.mockReturnValue(
mock SlotMap
) + mockOT2SlotMap.mockReturnValue(
mock SlotMap
) }) 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' }) diff --git a/protocol-designer/src/components/modals/EditModulesModal/index.tsx b/protocol-designer/src/components/modals/EditModulesModal/index.tsx index 25f4b9dfdc0..356b33cfa2d 100644 --- a/protocol-designer/src/components/modals/EditModulesModal/index.tsx +++ b/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 = ( - moduleType === THERMOCYCLER_MODULE_TYPE ? ( - - - - ) : ( - - ) - } - > + render={({ field, fieldState }) => ( + + {moduleType === THERMOCYCLER_MODULE_TYPE ? ( + + ) : ( + + )} + + )} + /> ) : ( ) : (
-
))}