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

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<typeof Btn> {
+  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}
       >
-        <Icon
-          color={contentColor}
-          height="3rem"
-          name={iconName}
-          width="3.75rem"
-        />
-        <LegacyStyledText>{buttonText}</LegacyStyledText>
+        {iconName != null ? (
+          <Icon
+            color={contentColor}
+            height="3rem"
+            name={iconName}
+            width="3.75rem"
+          />
+        ) : null}
+        <StyledText oddStyle="level4HeaderSemiBold">{buttonText}</StyledText>
       </Flex>
     </Btn>
   )

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}`

app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx → 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,14 +99,14 @@ export function LabwareMapViewModal(
   )
 
   return (
-    <Modal header={modalHeader} modalSize="large" onOutsideClick={onCloseClick}>
+    <Flex height="27.75rem">
       <BaseDeck
         deckConfig={deckConfig}
         deckLayerBlocklist={getStandardDeckViewLayerBlockList(FLEX_ROBOT_TYPE)}
         robotType={FLEX_ROBOT_TYPE}
         labwareOnDeck={labwareLocations}
         modulesOnDeck={modulesOnDeck}
       />
-    </Modal>
+    </Flex>
   )
 }

app/src/organisms/ProtocolSetupLabware/__tests__/LabwareMapViewModal.test.tsx → 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,49 +50,26 @@ vi.mock('@opentrons/components', async importOriginal => {
   }
 })
 
-const render = (props: React.ComponentProps<typeof LabwareMapViewModal>) => {
+const render = (props: React.ComponentProps<typeof LabwareMapView>) => {
   return renderWithProviders(
     <MemoryRouter>
-      <LabwareMapViewModal {...props} />
+      <LabwareMapView {...props} />
     </MemoryRouter>,
     {
       i18nInstance: i18n,
     }
   )[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(<div>mock base deck</div>)
-
-    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: {},

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')
   })