refactor(app): fully wire up LPC success toast

closes #8486

app/src/App/index.tsx

@@ -57,7 +57,9 @@ export const AppComponent = (): JSX.Element => {
  <Route path="/calibrate" component={CalibratePanel} />
  <Route path="/run" component={RunPanel} />
  </Switch>
+ <TopPortalRoot />
  <Box position={POSITION_RELATIVE} width="100%" height="100%">
+ <ModalPortalRoot />
  <Switch>
  <Route path="/robots/:name?">
  <Robots />
@@ -76,10 +78,8 @@ export const AppComponent = (): JSX.Element => {
  </Route>
  <Redirect exact from="/" to="/robots" />
  </Switch>
- <ModalPortalRoot />
  <Alerts />
  </Box>
- <TopPortalRoot />
  </Flex>
  </ApiHostProvider>
  )

app/src/organisms/ProtocolSetup/LabwareOffsetSuccessToast.tsx

@@ -7,8 +7,8 @@ import {
  SPACING_2,
 } from '@opentrons/components'
 import { useTranslation } from 'react-i18next'
-import { useCurrentProtocolRun } from '../ProtocolUpload/hooks'
 import { Portal } from '../../App/portal'
+import { useCurrentProtocolRun } from '../ProtocolUpload/hooks'
 
 interface LabwareOffsetSuccessToastProps {
  onCloseClick: () => unknown
@@ -22,7 +22,7 @@ export function LabwareOffsetSuccessToast(
  const labwareOffsets = currentRunData?.labwareOffsets
 
  return (
- <Portal level="top">
+ <Portal level="page">
  <Flex
  flexDirection={DIRECTION_COLUMN}
  padding={`${SPACING_1} ${SPACING_2}`}

app/src/organisms/ProtocolSetup/LabwarePositionCheck/SummaryScreen.tsx

@@ -21,10 +21,11 @@ import { LabwareOffsetsSummary } from './LabwareOffsetsSummary'
 import { useIntroInfo, useLabwareOffsets, LabwareOffsets } from './hooks'
 import type { SavePositionCommandData } from './types'
 import type { ProtocolFile } from '@opentrons/shared-data'
-import { LabwareOffsetSuccessToast } from '../LabwareOffsetSuccessToast'
 
 export const SummaryScreen = (props: {
  savePositionCommandData: SavePositionCommandData
+ onLabwarePositionCheckComplete: () => void
+ onCloseClick: () => unknown
 }): JSX.Element | null => {
  const { savePositionCommandData } = props
  const [offsets, setLabwareOffsets] = React.useState<LabwareOffsets>([])
@@ -36,7 +37,6 @@ export const SummaryScreen = (props: {
  .catch((e: Error) =>
  console.error(`error getting labware offsetsL ${e.message}`)
  )
- const [showLPCSuccessToast, setShowLPCSuccessToast] = React.useState(true)
 
  if (introInfo == null) return null
  if (protocolData == null) return null
@@ -73,14 +73,11 @@ export const SummaryScreen = (props: {
  <PrimaryBtn
  title={t('close_and_apply_offset_data')}
  backgroundColor={C_BLUE}
- onClick={() =>
- showLPCSuccessToast && (
- <LabwareOffsetSuccessToast
- onCloseClick={() => setShowLPCSuccessToast(false)}
- />
- )
- }
- id={'Lpc_summaryScreen_applyOffsetButton'}
+ onClick={() => {
+ props.onLabwarePositionCheckComplete()
+ props.onCloseClick()
+ }}
+ id={'SummaryScreen_applyOffsetButton'}
  >
  {t('close_and_apply_offset_data')}
  </PrimaryBtn>

app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/LabwarePositionCheck.test.tsx

@@ -58,6 +58,7 @@ describe('LabwarePositionCheck', () => {
  beforeEach(() => {
  props = {
  onCloseClick: jest.fn(),
+ onLabwarePositionCheckComplete: jest.fn(),
  }
  when(mockUseSteps)
  .calledWith()

app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/SummaryScreen.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { when } from 'jest-when'
+import { fireEvent } from '@testing-library/dom'
 import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 import { useProtocolDetails } from '../../../RunDetails/hooks'
@@ -9,15 +10,12 @@ import { SummaryScreen } from '../SummaryScreen'
 import { LabwareOffsetsSummary } from '../LabwareOffsetsSummary'
 import { useIntroInfo, useLabwareOffsets } from '../hooks'
 import { Section } from '../types'
-import { LabwareOffsetSuccessToast } from '../../LabwareOffsetSuccessToast'
-import { fireEvent, getByText, screen } from '@testing-library/dom'
 
 jest.mock('../SectionList')
 jest.mock('../hooks')
 jest.mock('../DeckMap')
 jest.mock('../../../RunDetails/hooks')
 jest.mock('../LabwareOffsetsSummary')
-jest.mock('../../LabwareOffsetSuccessToast')
 
 const mockSectionList = SectionList as jest.MockedFunction<typeof SectionList>
 const mockUseIntroInfo = useIntroInfo as jest.MockedFunction<
@@ -26,7 +24,6 @@ const mockUseIntroInfo = useIntroInfo as jest.MockedFunction<
 const mockUseProtocolDetails = useProtocolDetails as jest.MockedFunction<
  typeof useProtocolDetails
 >
-
 const mockDeckmap = DeckMap as jest.MockedFunction<typeof DeckMap>
 
 const mockLabwareOffsetsSummary = LabwareOffsetsSummary as jest.MockedFunction<
@@ -35,9 +32,6 @@ const mockLabwareOffsetsSummary = LabwareOffsetsSummary as jest.MockedFunction<
 const mockUseLabwareOffsets = useLabwareOffsets as jest.MockedFunction<
  typeof useLabwareOffsets
 >
-const mockLabwareOffsetsSuccessToast = LabwareOffsetSuccessToast as jest.MockedFunction<
- typeof LabwareOffsetSuccessToast
->
 
 const MOCK_SECTIONS = ['PRIMARY_PIPETTE_TIPRACKS' as Section]
 const LABWARE_DEF_ID = 'LABWARE_DEF_ID'
@@ -51,6 +45,8 @@ const render = () => {
  return renderWithProviders(
  <SummaryScreen
  savePositionCommandData={{ someLabwareIf: ['commandId1', 'commandId2'] }}
+ onLabwarePositionCheckComplete={jest.fn()}
+ onCloseClick={jest.fn()}
  />,
  {
  i18nInstance: i18n,
@@ -62,9 +58,6 @@ describe('SummaryScreen', () => {
  beforeEach(() => {
  mockSectionList.mockReturnValue(<div>Mock SectionList</div>)
  mockDeckmap.mockReturnValue(<div>Mock DeckMap</div>)
- mockLabwareOffsetsSuccessToast.mockReturnValue(
- <div>Mock LabwareOffsetSuccessToast</div>
- )
  mockLabwareOffsetsSummary.mockReturnValue(
  <div>Mock Labware Offsets Summary </div>
  )
@@ -107,13 +100,11 @@ describe('SummaryScreen', () => {
  getByText('Mock Labware Offsets Summary')
  getByText('Labware Position Check Complete')
  })
- it('renders button and clicks it', () => {
+ it('renders apply offset button and clicks it', () => {
  const { getByRole } = render()
- expect(screen.queryByText('Mock LabwareOffsetSuccessToast')).toBeNull()
  const button = getByRole('button', {
  name: 'Close and apply labware offset data',
  })
  fireEvent.click(button)
- expect(screen.queryByText('Mock LabwareOffsetSuccessToast')).not.toBeNull()
  })
 })

app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx

@@ -23,6 +23,7 @@ import type { SavePositionCommandData } from './types'
 
 interface LabwarePositionCheckModalProps {
  onCloseClick: () => unknown
+ onLabwarePositionCheckComplete: () => void
 }
 export const LabwarePositionCheck = (
  props: LabwarePositionCheckModalProps
@@ -34,7 +35,6 @@ export const LabwarePositionCheck = (
  setSavePositionCommandData,
  ] = React.useState<SavePositionCommandData>({})
  const [isRestartingRun, setIsRestartingRun] = React.useState<boolean>(false)
-
  const {
  confirm: confirmExitLPC,
  showConfirmation,
@@ -139,7 +139,11 @@ export const LabwarePositionCheck = (
  },
  }}
  >
- <SummaryScreen savePositionCommandData={savePositionCommandData}/>
+ <SummaryScreen
+ savePositionCommandData={savePositionCommandData}
+ onLabwarePositionCheckComplete={props.onLabwarePositionCheckComplete}
+ onCloseClick={props.onCloseClick}
+ />
  </ModalPage>
  )
  } else if (currentCommandIndex !== 0) {

app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx

@@ -19,6 +19,7 @@ import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fi
 import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json'
 import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../../../i18n'
+import { LabwareOffsetSuccessToast } from '../../../LabwareOffsetSuccessToast'
 import { LabwarePositionCheck } from '../../../LabwarePositionCheck'
 import {
  useModuleRenderInfoById,
@@ -38,6 +39,7 @@ jest.mock('../LabwareInfoOverlay')
 jest.mock('../ExtraAttentionWarning')
 jest.mock('../../../hooks')
 jest.mock('../utils/getModuleTypesThatRequireExtraAttention')
+jest.mock('../../../LabwareOffsetSuccessToast')
 jest.mock('@opentrons/components', () => {
  const actualComponents = jest.requireActual('@opentrons/components')
  return {
@@ -87,6 +89,9 @@ const mockUseModuleRenderInfoById = useModuleRenderInfoById as jest.MockedFuncti
 const mockLabwarePostionCheck = LabwarePositionCheck as jest.MockedFunction<
  typeof LabwarePositionCheck
 >
+const mockLabwareOffsetSuccessToast = LabwareOffsetSuccessToast as jest.MockedFunction<
+ typeof LabwareOffsetSuccessToast
+>
 
 const deckSlotsById = standardDeckDef.locations.orderedSlots.reduce(
  (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
@@ -143,6 +148,13 @@ describe('LabwareSetup', () => {
  .mockImplementation(({ onCloseClick }) => (
  <div onClick={onCloseClick}>mock LabwareOffsetModal </div>
  ))
+ when(mockLabwareOffsetSuccessToast)
+ .calledWith(
+ componentPropsMatcher({
+ onCloseClick: expect.anything(),
+ })
+ )
+ .mockReturnValue(<div>mock LabwareOffsetSuccessToast </div>)
 
  when(mockLabwareRender)
  .mockReturnValue(<div></div>) // this (default) empty div will be returned when LabwareRender isn't called with expected labware definition
@@ -339,4 +351,16 @@ describe('LabwareSetup', () => {
  const { getByText } = render()
  getByText('mock extra attention warning with magnetic module and TC')
  })
+ it('should render LPC success toast when apply LPC offsets button is clicked', () => {
+ expect(screen.queryByText('mock LabwareOffsetSuccessToast')).toBeNull()
+ when(mockLabwarePostionCheck)
+ .calledWith(
+ partialComponentPropsMatcher({
+ onLabwarePositionCheckComplete: expect.anything(),
+ })
+ )
+ .mockImplementation(({ onLabwarePositionCheckComplete }) => (
+ <div onClick={onLabwarePositionCheckComplete}></div>
+ ))
+ })
 })

app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/index.tsx

@@ -34,6 +34,7 @@ import { LabwareInfoOverlay } from './LabwareInfoOverlay'
 import { LabwareOffsetModal } from './LabwareOffsetModal'
 import { getModuleTypesThatRequireExtraAttention } from './utils/getModuleTypesThatRequireExtraAttention'
 import { ExtraAttentionWarning } from './ExtraAttentionWarning'
+import { LabwareOffsetSuccessToast } from '../../LabwareOffsetSuccessToast'
 
 const DECK_LAYER_BLOCKLIST = [
  'calibrationMarkings',
@@ -67,8 +68,15 @@ export const LabwareSetup = (): JSX.Element | null => {
  showLabwarePositionCheckModal,
  setShowLabwarePositionCheckModal,
  ] = React.useState<boolean>(false)
+ const [showLPCSuccessToast, setShowLPCSuccessToast] = React.useState(false)
+
  return (
  <React.Fragment>
+ {showLPCSuccessToast && (
+ <LabwareOffsetSuccessToast
+ onCloseClick={() => setShowLPCSuccessToast(false)}
+ />
+ )}
  {showLabwareHelpModal && (
  <LabwareOffsetModal
  onCloseClick={() => setShowLabwareHelpModal(false)}
@@ -77,6 +85,7 @@ export const LabwareSetup = (): JSX.Element | null => {
  {showLabwarePositionCheckModal && (
  <LabwarePositionCheck
  onCloseClick={() => setShowLabwarePositionCheckModal(false)}
+ onLabwarePositionCheckComplete={() => setShowLPCSuccessToast(true)}
  />
  )}
  <Flex

app/src/organisms/ProtocolSetup/__tests__/LabwareOffsetSuccessToast.test.tsx

@@ -118,12 +118,12 @@ describe(' LabwareOffsetSuccessToast', () => {
  jest.resetAllMocks()
  })
 
- it('renders LPC success toast and is clickable', () => {
+ it('renders LPC success toast and is clickable with 0 offsets', () => {
  const { getByText } = render(props)
  const successToast = getByText('No Labware Offsets created')
  fireEvent.click(successToast)
  })
- it('renders LPC success toast and is clickable', () => {
+ it('renders LPC success toast and is clickable with 2 offsets', () => {
  mockAlertItem.mockReturnValue(<div>2 Labware Offsets created</div>)
  when(mockUseCurrentProtocolRun)
  .calledWith()