fix(app,components): fix add a new case to info screen for labware (#…

…15041) * fix(app,components): fix add a new case to info screen for labware
Opentrons · Apr 30, 2024 · 2f89575 · 2f89575
1 parent e182bb9
commit 2f89575
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 32 deletions.
diff --git a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx
@@ -8,6 +8,7 @@ import {
  DIRECTION_ROW,
  Flex,
  Icon,
+ InfoScreen,
  POSITION_ABSOLUTE,
  POSITION_RELATIVE,
  SPACING,
@@ -55,36 +56,42 @@ export const ProtocolLabwareDetails = (
  : []
 
  return (
- <Flex flexDirection={DIRECTION_COLUMN} width="100%">
- <Flex flexDirection={DIRECTION_ROW}>
- <StyledText
- as="label"
- fontWeight={TYPOGRAPHY.fontWeightSemiBold}
- marginBottom={SPACING.spacing8}
- data-testid="ProtocolLabwareDetails_labware_name"
- width="66%"
- >
- {t('labware_name')}
- </StyledText>
- <StyledText
- as="label"
- fontWeight={TYPOGRAPHY.fontWeightSemiBold}
- data-testid="ProtocolLabwareDetails_quantity"
- >
- {t('quantity')}
- </StyledText>
- </Flex>
- {labwareDetails?.map((labware, index) => (
- <ProtocolLabwareDetailItem
- key={index}
- namespace={labware.params.namespace}
- displayName={labware.result?.definition?.metadata?.displayName}
- quantity={labware.quantity}
- labware={{ definition: labware.result?.definition }}
- data-testid={`ProtocolLabwareDetails_item_${index}`}
- />
- ))}
- </Flex>
+ <>
+ {labwareDetails.length > 0 ? (
+ <Flex flexDirection={DIRECTION_COLUMN} width="100%">
+ <Flex flexDirection={DIRECTION_ROW}>
+ <StyledText
+ as="label"
+ fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+ marginBottom={SPACING.spacing8}
+ data-testid="ProtocolLabwareDetails_labware_name"
+ width="66%"
+ >
+ {t('labware_name')}
+ </StyledText>
+ <StyledText
+ as="label"
+ fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+ data-testid="ProtocolLabwareDetails_quantity"
+ >
+ {t('quantity')}
+ </StyledText>
+ </Flex>
+ {labwareDetails?.map((labware, index) => (
+ <ProtocolLabwareDetailItem
+ key={index}
+ namespace={labware.params.namespace}
+ displayName={labware.result?.definition?.metadata?.displayName}
+ quantity={labware.quantity}
+ labware={{ definition: labware.result?.definition }}
+ data-testid={`ProtocolLabwareDetails_item_${index}`}
+ />
+ ))}
+ </Flex>
+ ) : (
+ <InfoScreen contentType="labware" />
+ )}
+ </>
  )
 }
 

diff --git a/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx b/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
@@ -1,12 +1,21 @@
 import * as React from 'react'
 import { screen } from '@testing-library/react'
-import { describe, it, beforeEach } from 'vitest'
+import { describe, it, beforeEach, vi } from 'vitest'
+import { InfoScreen } from '@opentrons/components'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { ProtocolLabwareDetails } from '../ProtocolLabwareDetails'
 
 import type { LoadLabwareRunTimeCommand } from '@opentrons/shared-data'
 
+vi.mock('@opentrons/components', async importOriginal => {
+ const actual = await importOriginal<typeof InfoScreen>()
+ return {
+ ...actual,
+ InfoScreen: vi.fn(),
+ }
+})
+
 const mockRequiredLabwareDetails = [
  {
  id: '568fd127-5554-4e19-b303-a8aeb6d8547d',
@@ -70,6 +79,7 @@ describe('ProtocolLabwareDetails', () => {
  props = {
  requiredLabwareDetails: mockRequiredLabwareDetails,
  }
+ vi.mocked(InfoScreen).mockReturnValue(<div>mock InfoScreen</div>)
  })
 
  it('should render an opentrons labware', () => {
@@ -136,4 +146,12 @@ describe('ProtocolLabwareDetails', () => {
  screen.getByText('Quantity')
  screen.getByText('2')
  })
+
+ it('should render mock infoscreen when no labware', () => {
+ props = {
+ requiredLabwareDetails: [],
+ }
+ render(props)
+ screen.getByText('mock InfoScreen')
+ })
 })
diff --git a/components/src/molecules/ParametersTable/InfoScreen.tsx b/components/src/molecules/ParametersTable/InfoScreen.tsx
@@ -8,7 +8,7 @@ import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
 
 interface InfoScreenProps {
- contentType: 'parameters' | 'moduleControls' | 'runNotStarted'
+ contentType: 'parameters' | 'moduleControls' | 'runNotStarted' | 'labware'
  t?: any
 }
 
@@ -30,6 +30,9 @@ export function InfoScreen({ contentType, t }: InfoScreenProps): JSX.Element {
  case 'runNotStarted':
  bodyText = t != null ? t('run_never_started') : 'Run was never started'
  break
+ case 'labware':
+ bodyText = 'No labware specified in this protocol'
+ break
  default:
  bodyText = contentType
  }

diff --git a/components/src/molecules/ParametersTable/__tests__/InfoScreen.test.tsx b/components/src/molecules/ParametersTable/__tests__/InfoScreen.test.tsx
@@ -34,6 +34,24 @@ describe('InfoScreen', () => {
  screen.getByText('Connect modules to see controls')
  })
 
+ it('should render text and icon with proper color - run not started', () => {
+ props = {
+ contentType: 'runNotStarted',
+ }
+ render(props)
+ screen.getByLabelText('alert')
+ screen.getByText('Run was never started')
+ })
+
+ it('should render text and icon with proper color - labware', () => {
+ props = {
+ contentType: 'labware',
+ }
+ render(props)
+ screen.getByLabelText('alert')
+ screen.getByText('No labware specified in this protocol')
+ })
+
  it('should have proper styles', () => {
  render(props)
  expect(screen.getByTestId('InfoScreen_parameters')).toHaveStyle(