diff --git a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx
index 7410fd9b2cf..0f208869825 100644
--- 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 (
-
-
-
- {t('labware_name')}
-
-
- {t('quantity')}
-
-
- {labwareDetails?.map((labware, index) => (
-
- ))}
-
+ <>
+ {labwareDetails.length > 0 ? (
+
+
+
+ {t('labware_name')}
+
+
+ {t('quantity')}
+
+
+ {labwareDetails?.map((labware, index) => (
+
+ ))}
+
+ ) : (
+
+ )}
+ >
)
}
diff --git a/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx b/app/src/organisms/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx
index 90d4bd61af2..14f1f956295 100644
--- 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()
+ 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(mock InfoScreen
)
})
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
index cd6db0d622b..17b4c792a98 100644
--- 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
index a6f3b78a358..88a40257f80 100644
--- 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(