feat(app): add LPC Success Toast

closes #8486

app/src/assets/localization/en/protocol_info.json

@@ -46,5 +46,6 @@
  "rerunning_protocol_modal_header": "How Rerunning A Protocol Works",
  "rerunning_protocol_modal_body": "<block>Opentrons displays the connected robot’s last protocol run on on the Protocol Upload page. If you run again, Opentrons loads this protocol and applies Labware Offset data if any exists.</block><block>Clicking “Run Again” will take you directly to the Run tab. If you’d like to review the deck setup or run Labware Position Check before running the protocol, navigate to the Protocol tab.</block><block>If you recalibrate your robot, it will clear the last run from the upload page.</block>",
  "rerunning_protocol_modal_link": "Learn more about Labware Offset Data",
- "no_labware_offset_data": "No Labware Offset data"
+ "no_labware_offset_data": "No Labware Offset data",
+ "labware_positon_check_complete_toast": "Labware Position Check complete. {{num_offsets}} Labware Offsets created."
 }

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

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import '@testing-library/jest-dom'
+import { renderWithProviders } from '@opentrons/components'
+import { AlertItem } from '@opentrons/components/src/alerts'
+import { i18n } from '../../../i18n'
+import { RunSetupCard } from '../RunSetupCard'
+import { MetadataCard } from '../MetadataCard'
+import { ProtocolSetup } from '..'
+import { fireEvent } from '@testing-library/dom'
+
+jest.mock('../MetadataCard')
+jest.mock('../RunSetupCard')
+jest.mock('@opentrons/components/src/alerts')
+
+const mockMetadataCard = MetadataCard as jest.MockedFunction<
+ typeof MetadataCard
+>
+const mockRunSetupCard = RunSetupCard as jest.MockedFunction<
+ typeof RunSetupCard
+>
+const mockAlertItem = AlertItem as jest.MockedFunction<typeof AlertItem>
+
+describe('ProtocolSetup', () => {
+ const render = () => {
+ return renderWithProviders(<ProtocolSetup />, { i18nInstance: i18n })[0]
+ }
+
+ beforeEach(() => {
+ mockMetadataCard.mockReturnValue(<div>Mock MetadataCard</div>)
+ mockRunSetupCard.mockReturnValue(<div>Mock ReunSetupCard</div>)
+ mockAlertItem.mockReturnValue(<div>Mock AlertItem</div>)
+ })
+
+ afterEach(() => {
+ jest.resetAllMocks()
+ })
+
+ it('renders metadata and run setup card', () => {
+ const { getByText } = render()
+ getByText('Mock MetadataCard')
+ getByText('Mock ReunSetupCard')
+ })
+ it('renders LPC success toast and is clickable', () => {
+ const { getByText } = render()
+ const successToast = getByText('Mock AlertItem')
+ fireEvent.click(successToast)
+ })
+})

app/src/organisms/ProtocolSetup/index.tsx

@@ -9,6 +9,9 @@ import {
  Flex,
  Text,
  Link,
+ AlertItem,
+ SPACING_1,
+ SPACING_2,
 } from '@opentrons/components'
 import { RunSetupCard } from './RunSetupCard'
 import { MetadataCard } from './MetadataCard'
@@ -18,22 +21,39 @@ const feedbackFormLink =
 
 export function ProtocolSetup(): JSX.Element {
  const { t } = useTranslation('protocol_setup')
+ const [dismissed, setDismissed] = React.useState(false)
  return (
- <Flex
- flexDirection={DIRECTION_COLUMN}
- padding={SPACING_3}
- alignItems={ALIGN_CENTER}
- >
- <MetadataCard />
- <RunSetupCard />
- <Text
- fontSize={FONT_SIZE_BODY_2}
- paddingTop={SPACING_3}
- color={C_DARK_GRAY}
+ <>
+ <Flex
+ flexDirection={DIRECTION_COLUMN}
+ padding={`${SPACING_1} ${SPACING_2} ${SPACING_1} ${SPACING_2}`}
  >
- {t('protocol_upload_revamp_feedback')}
- <Link href={feedbackFormLink}> {t('feedback_form_link')}</Link>
- </Text>
- </Flex>
+ {!dismissed && (
+ <AlertItem
+ type="success"
+ onCloseClick={() => setDismissed(true)}
+ title={t('labware_positon_check_complete_toast', {
+ num_offsets: 2, // TODO wire up num_offsets!
+ })}
+ />
+ )}
+ </Flex>
+ <Flex
+ flexDirection={DIRECTION_COLUMN}
+ alignItems={ALIGN_CENTER}
+ padding={`${SPACING_1} ${SPACING_3} ${SPACING_3} ${SPACING_3}`}
+ >
+ <MetadataCard />
+ <RunSetupCard />
+ <Text
+ fontSize={FONT_SIZE_BODY_2}
+ paddingTop={SPACING_3}
+ color={C_DARK_GRAY}
+ >
+ {t('protocol_upload_revamp_feedback')}
+ <Link href={feedbackFormLink}> {t('feedback_form_link')}</Link>
+ </Text>
+ </Flex>
+ </>
  )
 }