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(