fix(app,components): fix module controls no module connected case (#14784)

* fix(app,components): fix module controls no module connected case

Author: koji

app/src/organisms/Devices/ProtocolRun/ProtocolRunModuleControls.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
   JUSTIFY_CENTER,
+  InfoScreen,
   SPACING,
-  StyledText,
 } from '@opentrons/components'
 import { ModuleCard } from '../../ModuleCard'
 import { useModuleRenderInfoForProtocolById } from '../hooks'
@@ -73,8 +72,6 @@ export const ProtocolRunModuleControls = ({
   robotName,
   runId,
 }: ProtocolRunModuleControlsProps): JSX.Element => {
-  const { t } = useTranslation('protocol_details')
-
   const {
     attachPipetteRequired,
     calibratePipetteRequired,
@@ -97,18 +94,15 @@ export const ProtocolRunModuleControls = ({
   const rightColumnModules = attachedModules?.slice(halfAttachedModulesSize)
 
   return attachedModules.length === 0 ? (
-    <Flex justifyContent={JUSTIFY_CENTER}>
-      <StyledText as="p" color={COLORS.grey50} marginY={SPACING.spacing16}>
-        {t('connect_modules_to_see_controls')}
-      </StyledText>
-    </Flex>
-  ) : (
     <Flex
-      gridGap={SPACING.spacing8}
-      paddingTop={SPACING.spacing16}
-      paddingBottom={SPACING.spacing8}
-      paddingX={SPACING.spacing16}
+      justifyContent={JUSTIFY_CENTER}
+      padding={SPACING.spacing16}
+      backgroundColor={COLORS.white}
     >
+      <InfoScreen contentType="moduleControls" />
+    </Flex>
+  ) : (
+    <Flex gridGap={SPACING.spacing8} padding={SPACING.spacing16}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         flex="50%"

app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx

@@ -10,12 +10,12 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
+  Icon,
+  InfoScreen,
   SPACING,
   StyledText,
   TYPOGRAPHY,
-  NoParameters,
   useHoverTooltip,
-  Icon,
 } from '@opentrons/components'
 
 import { Banner } from '../../../atoms/Banner'
@@ -78,7 +78,7 @@ export function ProtocolRunRuntimeParameters({
       </Flex>
       {!hasParameter ? (
         <Flex padding={SPACING.spacing16}>
-          <NoParameters />
+          <InfoScreen contentType="parameters" />
         </Flex>
       ) : (
         <>

app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx

@@ -3,7 +3,7 @@ import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 
-import { NoParameters } from '@opentrons/components'
+import { InfoScreen } from '@opentrons/components'
 import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
 import { useMostRecentCompletedAnalysis } from '../../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
@@ -16,10 +16,10 @@ import type {
 } from '@opentrons/shared-data'
 
 vi.mock('@opentrons/components', async importOriginal => {
-  const actual = await importOriginal<typeof NoParameters>()
+  const actual = await importOriginal<typeof InfoScreen>()
   return {
     ...actual,
-    NoParameters: vi.fn(),
+    InfoScreen: vi.fn(),
   }
 })
 vi.mock('../../../LabwarePositionCheck/useMostRecentCompletedAnalysis')
@@ -94,7 +94,7 @@ describe('ProtocolRunRuntimeParameters', () => {
     props = {
       runId: RUN_ID,
     }
-    vi.mocked(NoParameters).mockReturnValue(<div>mock NoParameter</div>)
+    vi.mocked(InfoScreen).mockReturnValue(<div>mock InfoScreen</div>)
     when(vi.mocked(useMostRecentCompletedAnalysis))
       .calledWith(RUN_ID)
       .thenReturn({
@@ -151,7 +151,7 @@ describe('ProtocolRunRuntimeParameters', () => {
     screen.getByText('No offsets')
   })
 
-  it('should render mock NoParameter component when RunTimeParameters are empty', () => {
+  it('should render mock InfoScreen component when RunTimeParameters are empty', () => {
     when(vi.mocked(useMostRecentCompletedAnalysis))
       .calledWith(RUN_ID)
       .thenReturn({
@@ -160,7 +160,7 @@ describe('ProtocolRunRuntimeParameters', () => {
     render(props)
     screen.getByText('Parameters')
     expect(screen.queryByText('Default values')).not.toBeInTheDocument()
-    screen.getByText('mock NoParameter')
+    screen.getByText('mock InfoScreen')
   })
 
   // ToDo Additional test will be implemented when chip component is added

app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx

@@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next'
 import {
   DIRECTION_COLUMN,
   Flex,
+  InfoScreen,
+  ParametersTable,
   SPACING,
   StyledText,
   TYPOGRAPHY,
-  ParametersTable,
-  NoParameters,
 } from '@opentrons/components'
 import { Banner } from '../../../atoms/Banner'
 
@@ -48,7 +48,7 @@ export function ProtocolParameters({
           <ParametersTable runTimeParameters={runTimeParameters} t={t} />
         </Flex>
       ) : (
-        <NoParameters />
+        <InfoScreen contentType="parameters" />
       )}
     </Flex>
   )

components/src/molecules/ParametersTable/NoParameters.tsx components/src/molecules/ParametersTable/InfoScreen.tsx

@@ -7,7 +7,15 @@ import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
 
-export function NoParameters(): JSX.Element {
+interface InfoScreenProps {
+  contentType: 'parameters' | 'moduleControls'
+}
+
+export function InfoScreen({ contentType }: InfoScreenProps): JSX.Element {
+  const bodyText =
+    contentType === 'parameters'
+      ? 'No parameters specified in this protocol'
+      : 'Connect modules to see controls'
   return (
     <Flex
       alignItems={ALIGN_CENTER}
@@ -17,7 +25,7 @@ export function NoParameters(): JSX.Element {
       backgroundColor={COLORS.grey30}
       borderRadius={BORDERS.borderRadius8}
       padding={`${SPACING.spacing40} ${SPACING.spacing16}`}
-      data-testid="NoRunTimeParameter"
+      data-testid={`InfoScreen_${contentType}`}
     >
       <Icon
         name="ot-alert"
@@ -26,7 +34,7 @@ export function NoParameters(): JSX.Element {
         aria-label="alert"
       />
       <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-        No parameters specified in this protocol
+        {bodyText}
       </StyledText>
     </Flex>
   )

components/src/molecules/ParametersTable/__tests__/InfoScreen.test.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { InfoScreen } from '../InfoScreen'
+
+const render = (props: React.ComponentProps<typeof InfoScreen>) => {
+  return renderWithProviders(<InfoScreen {...props} />)
+}
+
+describe('InfoScreen', () => {
+  let props: React.ComponentProps<typeof InfoScreen>
+
+  beforeEach(() => {
+    props = {
+      contentType: 'parameters',
+    }
+  })
+
+  it('should render text and icon with proper color - parameters', () => {
+    render(props)
+    screen.getByLabelText('alert')
+    screen.getByText('No parameters specified in this protocol')
+  })
+
+  it('should render text and icon with proper color - module controls', () => {
+    props = {
+      contentType: 'moduleControls',
+    }
+    render(props)
+    screen.getByLabelText('alert')
+    screen.getByText('Connect modules to see controls')
+  })
+
+  it('should have proper styles', () => {
+    render(props)
+    expect(screen.getByTestId('InfoScreen_parameters')).toHaveStyle(
+      `background-color: ${COLORS.grey30}`
+    )
+    expect(screen.getByTestId('InfoScreen_parameters')).toHaveStyle(
+      `border-radius: ${BORDERS.borderRadius8}`
+    )
+    expect(screen.getByLabelText('alert')).toHaveStyle(
+      `color: ${COLORS.grey60}`
+    )
+  })
+})

components/src/molecules/ParametersTable/__tests__/NoParameters.test.tsx

@@ -1,4 +1,4 @@
 export * from './LocationIcon'
 export * from './RoundTab'
 export * from './ParametersTable'
-export * from './ParametersTable/NoParameters'
+export * from './ParametersTable/InfoScreen'