From cfaffe430672a283b6704324ad7baf1085d64794 Mon Sep 17 00:00:00 2001 From: Brent Hagen Date: Tue, 6 Aug 2024 14:45:15 -0400 Subject: [PATCH] refactor(app): change map view action button behavior (#15897) changes the deck hardware and labware map views from modals to page content. alters the floating action button to remove the default icon. closes PLAT-391, PLAT-392 --- .../atoms/buttons/FloatingActionButton.tsx | 38 +++--- .../__tests__/FloatingActionButton.test.tsx | 3 - ...areMapViewModal.tsx => LabwareMapView.tsx} | 23 +--- ...Modal.test.tsx => LabwareMapView.test.tsx} | 33 +----- .../__tests__/ProtocolSetupLabware.test.tsx | 6 +- .../organisms/ProtocolSetupLabware/index.tsx | 104 +++++++++-------- ...iewModal.tsx => ModulesAndDeckMapView.tsx} | 31 +---- ...est.tsx => ModulesAndDeckMapView.test.tsx} | 15 +-- .../ProtocolSetupModulesAndDeck.test.tsx | 8 +- .../ProtocolSetupModulesAndDeck/index.tsx | 109 ++++++++++-------- 10 files changed, 153 insertions(+), 217 deletions(-) rename app/src/organisms/ProtocolSetupLabware/{LabwareMapViewModal.tsx => LabwareMapView.tsx} (84%) rename app/src/organisms/ProtocolSetupLabware/__tests__/{LabwareMapViewModal.test.tsx => LabwareMapView.test.tsx} (79%) rename app/src/organisms/ProtocolSetupModulesAndDeck/{ModulesAndDeckMapViewModal.tsx => ModulesAndDeckMapView.tsx} (62%) rename app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/{ModulesAndDeckMapViewModal.test.tsx => ModulesAndDeckMapView.test.tsx} (86%) diff --git a/app/src/atoms/buttons/FloatingActionButton.tsx b/app/src/atoms/buttons/FloatingActionButton.tsx index b7745f26f12..5905bdd8fce 100644 --- a/app/src/atoms/buttons/FloatingActionButton.tsx +++ b/app/src/atoms/buttons/FloatingActionButton.tsx @@ -1,5 +1,4 @@ import * as React from 'react' -import { useTranslation } from 'react-i18next' import { css } from 'styled-components' import { @@ -12,29 +11,21 @@ import { Icon, POSITION_FIXED, SPACING, - LegacyStyledText, - TYPOGRAPHY, + StyledText, } from '@opentrons/components' -import type { IconName, StyleProps } from '@opentrons/components' +import type { IconName } from '@opentrons/components' -interface FloatingActionButtonProps extends StyleProps { - buttonText?: React.ReactNode +interface FloatingActionButtonProps extends React.ComponentProps { + buttonText: string disabled?: boolean iconName?: IconName - onClick: React.MouseEventHandler } export function FloatingActionButton( props: FloatingActionButtonProps ): JSX.Element { - const { t } = useTranslation('protocol_setup') - const { - buttonText = t('map_view'), - disabled = false, - iconName = 'deck-map', - ...buttonProps - } = props + const { buttonText, disabled = false, iconName, ...buttonProps } = props const contentColor = disabled ? COLORS.grey50 : COLORS.white const FLOATING_ACTION_BUTTON_STYLE = css` @@ -65,9 +56,6 @@ export function FloatingActionButton( bottom={SPACING.spacing24} css={FLOATING_ACTION_BUTTON_STYLE} disabled={disabled} - fontSize={TYPOGRAPHY.fontSize28} - fontWeight={TYPOGRAPHY.fontWeightSemiBold} - lineHeight={TYPOGRAPHY.lineHeight36} padding={`${SPACING.spacing12} ${SPACING.spacing24}`} position={POSITION_FIXED} right={SPACING.spacing24} @@ -78,13 +66,15 @@ export function FloatingActionButton( flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8} > - - {buttonText} + {iconName != null ? ( + + ) : null} + {buttonText} ) diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx index 5f325c34d88..4d479fd93cf 100644 --- a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx @@ -31,9 +31,6 @@ describe('FloatingActionButton', () => { `padding: ${SPACING.spacing12} ${SPACING.spacing24}` ) expect(button).toHaveStyle(`background-color: ${COLORS.purple50}`) - expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSize28}`) - expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`) - expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight36}`) expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`) expect(button).toHaveStyle( `text-transform: ${TYPOGRAPHY.textTransformNone}` diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx similarity index 84% rename from app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx rename to app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx index e985386d461..e74d478ce70 100644 --- a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx +++ b/app/src/organisms/ProtocolSetupLabware/LabwareMapView.tsx @@ -1,14 +1,12 @@ import * as React from 'react' import map from 'lodash/map' -import { useTranslation } from 'react-i18next' -import { BaseDeck } from '@opentrons/components' +import { BaseDeck, Flex } from '@opentrons/components' import { FLEX_ROBOT_TYPE, getSimplestDeckConfigForProtocol, THERMOCYCLER_MODULE_V1, } from '@opentrons/shared-data' -import { Modal } from '../../molecules/Modal' import { getStandardDeckViewLayerBlockList } from '../Devices/ProtocolRun/utils/getStandardDeckViewLayerBlockList' import { getLabwareRenderInfo } from '../Devices/ProtocolRun/utils/getLabwareRenderInfo' @@ -18,44 +16,33 @@ import type { LabwareDefinition2, } from '@opentrons/shared-data' import type { LoadedLabwareByAdapter } from '@opentrons/api-client' -import type { ModalHeaderBaseProps } from '../../molecules/Modal/types' import type { AttachedProtocolModuleMatch } from '../ProtocolSetupModulesAndDeck/utils' -interface LabwareMapViewModalProps { +interface LabwareMapViewProps { attachedProtocolModuleMatches: AttachedProtocolModuleMatch[] handleLabwareClick: ( labwareDef: LabwareDefinition2, labwareId: string ) => void - onCloseClick: () => void initialLoadedLabwareByAdapter: LoadedLabwareByAdapter deckDef: DeckDefinition mostRecentAnalysis: CompletedProtocolAnalysis | null } -export function LabwareMapViewModal( - props: LabwareMapViewModalProps -): JSX.Element { +export function LabwareMapView(props: LabwareMapViewProps): JSX.Element { const { handleLabwareClick, - onCloseClick, attachedProtocolModuleMatches, initialLoadedLabwareByAdapter, deckDef, mostRecentAnalysis, } = props - const { t } = useTranslation('protocol_setup') const deckConfig = getSimplestDeckConfigForProtocol(mostRecentAnalysis) const labwareRenderInfo = mostRecentAnalysis != null ? getLabwareRenderInfo(mostRecentAnalysis, deckDef) : {} - const modalHeader: ModalHeaderBaseProps = { - title: t('map_view'), - hasExitIcon: true, - } - const modulesOnDeck = attachedProtocolModuleMatches.map(module => { const { moduleDef, nestedLabwareDef, nestedLabwareId, slotName } = module const labwareInAdapterInMod = @@ -112,7 +99,7 @@ export function LabwareMapViewModal( ) return ( - + - + ) } diff --git a/app/src/organisms/ProtocolSetupLabware/__tests__/LabwareMapViewModal.test.tsx b/app/src/organisms/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx similarity index 79% rename from app/src/organisms/ProtocolSetupLabware/__tests__/LabwareMapViewModal.test.tsx rename to app/src/organisms/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx index 04b4df83d09..532440223d2 100644 --- a/app/src/organisms/ProtocolSetupLabware/__tests__/LabwareMapViewModal.test.tsx +++ b/app/src/organisms/ProtocolSetupLabware/__tests__/LabwareMapView.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' import { when } from 'vitest-when' -import { fireEvent, screen } from '@testing-library/react' import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest' import { BaseDeck, EXTENDED_DECK_CONFIG_FIXTURE } from '@opentrons/components' @@ -16,7 +15,7 @@ import { i18n } from '../../../i18n' import { getLabwareRenderInfo } from '../../Devices/ProtocolRun/utils/getLabwareRenderInfo' import { getStandardDeckViewLayerBlockList } from '../../Devices/ProtocolRun/utils/getStandardDeckViewLayerBlockList' import { mockProtocolModuleInfo } from '../__fixtures__' -import { LabwareMapViewModal } from '../LabwareMapViewModal' +import { LabwareMapView } from '../LabwareMapView' import type { getSimplestDeckConfigForProtocol, @@ -51,10 +50,10 @@ vi.mock('@opentrons/components', async importOriginal => { } }) -const render = (props: React.ComponentProps) => { +const render = (props: React.ComponentProps) => { return renderWithProviders( - + , { i18nInstance: i18n, @@ -62,38 +61,15 @@ const render = (props: React.ComponentProps) => { )[0] } -describe('LabwareMapViewModal', () => { +describe('LabwareMapView', () => { beforeEach(() => { vi.mocked(getLabwareRenderInfo).mockReturnValue({}) - // vi.mocked(getSimplestDeckConfigForProtocol).mockReturnValue([]) }) afterEach(() => { vi.resetAllMocks() }) - it('should render nothing on the deck and calls exit button', () => { - vi.mocked(BaseDeck).mockReturnValue(
mock base deck
) - - const props = { - handleLabwareClick: vi.fn(), - onCloseClick: vi.fn(), - deckDef: (deckDefFixture as unknown) as DeckDefinition, - mostRecentAnalysis: ({ - commands: [], - labware: [], - } as unknown) as CompletedProtocolAnalysis, - initialLoadedLabwareByAdapter: {}, - attachedProtocolModuleMatches: [], - } - - render(props) - screen.getByText('Map View') - screen.getByText('mock base deck') - fireEvent.click(screen.getByLabelText('closeIcon')) - expect(props.onCloseClick).toHaveBeenCalled() - }) - it('should render a deck with modules and labware', () => { const mockLabwareOnDeck = [ { @@ -136,7 +112,6 @@ describe('LabwareMapViewModal', () => { }) render({ handleLabwareClick: vi.fn(), - onCloseClick: vi.fn(), deckDef: (deckDefFixture as unknown) as DeckDefinition, mostRecentAnalysis: ({} as unknown) as CompletedProtocolAnalysis, initialLoadedLabwareByAdapter: {}, diff --git a/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx b/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx index 7bfb4f63871..8182a8b73b3 100644 --- a/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx +++ b/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx @@ -110,10 +110,12 @@ describe('ProtocolSetupLabware', () => { expect(mockSetSetupScreen).toHaveBeenCalledWith('prepare to run') }) - it('should launch and close the deck map', () => { + it('should toggle between map view and list view', () => { render() + expect(screen.queryByText('List View')).toBeNull() fireEvent.click(screen.getByRole('button', { name: 'Map View' })) - fireEvent.click(screen.getByLabelText('closeIcon')) + expect(screen.queryByText('Map View')).toBeNull() + fireEvent.click(screen.getByRole('button', { name: 'List View' })) screen.getByText('Labware') }) diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index 9c962f55d7b..fa4d3926fdb 100644 --- a/app/src/organisms/ProtocolSetupLabware/index.tsx +++ b/app/src/organisms/ProtocolSetupLabware/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import styled, { css } from 'styled-components' + import { ALIGN_CENTER, ALIGN_FLEX_START, @@ -43,11 +44,11 @@ import { Modal } from '../../molecules/Modal' import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis' import { getLabwareSetupItemGroups } from '../../pages/Protocols/utils' +import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configuration' import { getProtocolModulesInfo } from '../Devices/ProtocolRun/utils/getProtocolModulesInfo' import { getAttachedProtocolModuleMatches } from '../ProtocolSetupModulesAndDeck/utils' import { getNestedLabwareInfo } from '../Devices/ProtocolRun/SetupLabware/getNestedLabwareInfo' -import { LabwareMapViewModal } from './LabwareMapViewModal' -import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configuration' +import { LabwareMapView } from './LabwareMapView' import type { UseQueryResult } from 'react-query' import type { @@ -83,7 +84,7 @@ export function ProtocolSetupLabware({ setSetupScreen, }: ProtocolSetupLabwareProps): JSX.Element { const { t } = useTranslation('protocol_setup') - const [showDeckMapModal, setShowDeckMapModal] = React.useState(false) + const [showMapView, setShowMapView] = React.useState(false) const [ showLabwareDetailsModal, setShowLabwareDetailsModal, @@ -202,18 +203,6 @@ export function ProtocolSetupLabware({ <> {createPortal( <> - {showDeckMapModal ? ( - { - setShowDeckMapModal(false) - }} - initialLoadedLabwareByAdapter={initialLoadedLabwareByAdapter} - /> - ) : null} {showLabwareDetailsModal && selectedLabware != null ? ( { @@ -269,45 +258,58 @@ export function ProtocolSetupLabware({ gridGap={SPACING.spacing8} marginTop={SPACING.spacing32} > - - - {t('location')} - - - {t('labware_name')} - - - {[...onDeckItems, ...offDeckItems].map((labware, i) => { - const labwareOnAdapter = onDeckItems.find( - item => - labware.initialLocation !== 'offDeck' && - 'labwareId' in labware.initialLocation && - item.labwareId === labware.initialLocation.labwareId - ) - return mostRecentAnalysis != null && labwareOnAdapter == null ? ( - - ) : null - })} + {showMapView ? ( + + ) : ( + <> + + + {t('location')} + + + {t('labware_name')} + + + {[...onDeckItems, ...offDeckItems].map((labware, i) => { + const labwareOnAdapter = onDeckItems.find( + item => + labware.initialLocation !== 'offDeck' && + 'labwareId' in labware.initialLocation && + item.labwareId === labware.initialLocation.labwareId + ) + return mostRecentAnalysis != null && labwareOnAdapter == null ? ( + + ) : null + })} + + )} { - setShowDeckMapModal(true) + setShowMapView(mapView => !mapView) }} /> diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapView.tsx similarity index 62% rename from app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapView.tsx index 13ade7df2d0..a6c3c6dddaa 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapView.tsx @@ -1,41 +1,28 @@ import React from 'react' -import { useTranslation } from 'react-i18next' -import { BaseDeck } from '@opentrons/components' +import { BaseDeck, Flex } from '@opentrons/components' import { FLEX_ROBOT_TYPE, getSimplestDeckConfigForProtocol, } from '@opentrons/shared-data' -import { Modal } from '../../molecules/Modal' import { ModuleInfo } from '../Devices/ModuleInfo' import { getStandardDeckViewLayerBlockList } from '../Devices/ProtocolRun/utils/getStandardDeckViewLayerBlockList' import type { CompletedProtocolAnalysis } from '@opentrons/shared-data' -import type { ModalHeaderBaseProps } from '../../molecules/Modal/types' import type { AttachedProtocolModuleMatch } from './utils' -// Note (kk:10/26/2023) once we are ready for removing ff, we will be able to update props -interface ModulesAndDeckMapViewModalProps { - setShowDeckMapModal: (showDeckMapModal: boolean) => void +interface ModulesAndDeckMapViewProps { attachedProtocolModuleMatches: AttachedProtocolModuleMatch[] runId: string protocolAnalysis: CompletedProtocolAnalysis | null } -export function ModulesAndDeckMapViewModal({ - setShowDeckMapModal, +export function ModulesAndDeckMapView({ attachedProtocolModuleMatches, runId, protocolAnalysis, -}: ModulesAndDeckMapViewModalProps): JSX.Element | null { - const { t } = useTranslation('protocol_setup') - - const modalHeader: ModalHeaderBaseProps = { - title: t('map_view'), - hasExitIcon: true, - } - +}: ModulesAndDeckMapViewProps): JSX.Element | null { if (protocolAnalysis == null) return null const deckConfig = getSimplestDeckConfigForProtocol(protocolAnalysis) @@ -54,13 +41,7 @@ export function ModulesAndDeckMapViewModal({ })) return ( - { - setShowDeckMapModal(false) - }} - > + - + ) } diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapViewModal.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx similarity index 86% rename from app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapViewModal.test.tsx rename to app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx index 283ef6fb2c3..e0551b3f4f3 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapViewModal.test.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ModulesAndDeckMapView.test.tsx @@ -10,7 +10,7 @@ import { import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import { ModulesAndDeckMapViewModal } from '../ModulesAndDeckMapViewModal' +import { ModulesAndDeckMapView } from '../ModulesAndDeckMapView' vi.mock('@opentrons/components/src/hardware-sim/BaseDeck') vi.mock('@opentrons/api-client') @@ -22,7 +22,6 @@ vi.mock('../../Devices/ModuleInfo') vi.mock('../../Devices/ProtocolRun/utils/getLabwareRenderInfo') const mockRunId = 'mockRunId' -const mockSetShowDeckMapModal = vi.fn() const PROTOCOL_ANALYSIS = { id: 'fake analysis', status: 'completed', @@ -101,20 +100,17 @@ vi.mock('@opentrons/components', async importOriginal => { } }) -const render = ( - props: React.ComponentProps -) => { - return renderWithProviders(, { +const render = (props: React.ComponentProps) => { + return renderWithProviders(, { i18nInstance: i18n, })[0] } -describe('ModulesAndDeckMapViewModal', () => { - let props: React.ComponentProps +describe('ModulesAndDeckMapView', () => { + let props: React.ComponentProps beforeEach(() => { props = { - setShowDeckMapModal: mockSetShowDeckMapModal, attachedProtocolModuleMatches: mockAttachedProtocolModuleMatches, runId: mockRunId, protocolAnalysis: PROTOCOL_ANALYSIS, @@ -131,7 +127,6 @@ describe('ModulesAndDeckMapViewModal', () => { it('should render BaseDeck map view', () => { render(props) - screen.getByText('Map View') screen.getByText('mock BaseDeck') }) }) diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx index 69f56957635..9f9cec5524d 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx @@ -33,7 +33,7 @@ import { LocationConflictModal } from '../../Devices/ProtocolRun/SetupModuleAndD import { ModuleWizardFlows } from '../../ModuleWizardFlows' import { SetupInstructionsModal } from '../SetupInstructionsModal' import { FixtureTable } from '../FixtureTable' -import { ModulesAndDeckMapViewModal } from '../ModulesAndDeckMapViewModal' +import { ModulesAndDeckMapView } from '../ModulesAndDeckMapView' import { ProtocolSetupModulesAndDeck } from '..' import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration' import { useRunStatus } from '../../RunTimeControl/hooks' @@ -54,7 +54,7 @@ vi.mock('../SetupInstructionsModal') vi.mock('../../ModuleWizardFlows') vi.mock('../FixtureTable') vi.mock('../../Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal') -vi.mock('../ModulesAndDeckMapViewModal') +vi.mock('../ModulesAndDeckMapView') vi.mock('../../RunTimeControl/hooks') const ROBOT_NAME = 'otie' @@ -327,10 +327,10 @@ describe('ProtocolSetupModulesAndDeck', () => { screen.getByText('mock location conflict modal') }) - it('should render ModulesAndDeckMapViewModal when tapping map view button', () => { + it('should render ModulesAndDeckMapView when tapping map view button', () => { render() fireEvent.click(screen.getByText('Map View')) screen.debug() - expect(vi.mocked(ModulesAndDeckMapViewModal)).toHaveBeenCalled() + expect(vi.mocked(ModulesAndDeckMapView)).toHaveBeenCalled() }) }) diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx index 349faeff2b6..60f8f4be6f9 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx @@ -31,7 +31,7 @@ import { import { SetupInstructionsModal } from './SetupInstructionsModal' import { FixtureTable } from './FixtureTable' import { ModuleTable } from './ModuleTable' -import { ModulesAndDeckMapViewModal } from './ModulesAndDeckMapViewModal' +import { ModulesAndDeckMapView } from './ModulesAndDeckMapView' import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configuration' import type { CutoutId, CutoutFixtureId } from '@opentrons/shared-data' @@ -68,7 +68,7 @@ export function ProtocolSetupModulesAndDeck({ showSetupInstructionsModal, setShowSetupInstructionsModal, ] = React.useState(false) - const [showDeckMapModal, setShowDeckMapModal] = React.useState(false) + const [showMapView, setShowMapView] = React.useState(false) const [ clearModuleMismatchBanner, setClearModuleMismatchBanner, @@ -113,14 +113,6 @@ export function ProtocolSetupModulesAndDeck({ setShowSetupInstructionsModal={setShowSetupInstructionsModal} /> ) : null} - {showDeckMapModal ? ( - - ) : null} , getTopPortalEl() )} @@ -143,53 +135,68 @@ export function ProtocolSetupModulesAndDeck({ marginTop="5.75rem" marginBottom={SPACING.spacing80} > - {isModuleMismatch && !clearModuleMismatchBanner ? ( - { - e.stopPropagation() - setClearModuleMismatchBanner(true) - }} - heading={t('extra_module_attached')} - message={t('module_mismatch_body')} + {showMapView ? ( + - ) : null} - - - - {i18n.format(t('deck_hardware'), 'titleCase')} - - {t('location')} - {t('status')} - - - {hasModules ? ( - + {isModuleMismatch && !clearModuleMismatchBanner ? ( + { + e.stopPropagation() + setClearModuleMismatchBanner(true) + }} + heading={t('extra_module_attached')} + message={t('module_mismatch_body')} /> ) : null} - - - + + + + {i18n.format(t('deck_hardware'), 'titleCase')} + + + {t('location')} + + {t('status')} + + + {hasModules ? ( + + ) : null} + + + + + )} { - setShowDeckMapModal(true) + setShowMapView(mapView => !mapView) }} />