From 77d608beca3a15fadb2f8d91c0b285b46f0be095 Mon Sep 17 00:00:00 2001 From: Brent Hagen Date: Mon, 5 Aug 2024 23:59:35 -0400 Subject: [PATCH 1/2] refactor(app): change map view action button behavior changes the deck hardware and labware map views from modals to page content. alters the floating action button to remove the default icon. close 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 +----- .../organisms/ProtocolSetupLabware/index.tsx | 104 +++++++++-------- ...iewModal.tsx => ModulesAndDeckMapView.tsx} | 31 +---- ...est.tsx => ModulesAndDeckMapView.test.tsx} | 15 +-- .../ProtocolSetupModulesAndDeck.test.tsx | 8 +- .../ProtocolSetupModulesAndDeck/index.tsx | 109 ++++++++++-------- 9 files changed, 149 insertions(+), 215 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/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) }} /> From b76c746a3596e5eb8fa5c94465f0565386baf614 Mon Sep 17 00:00:00 2001 From: Brent Hagen Date: Tue, 6 Aug 2024 10:27:56 -0400 Subject: [PATCH 2/2] fix test --- .../__tests__/ProtocolSetupLabware.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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') })