From 53f59132b8fda491e37e573dcf090133a0d379ef Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 2 Apr 2024 17:48:45 -0400 Subject: [PATCH] fix(app,components): fix module controls no module connected case Connect modules to see controls doesn't align with the design. This PR fixes. The component is the same as NoParameters component so I rename and add a new prop to use only one component. close AUTH-264 --- .../ProtocolRun/ProtocolRunModuleControls.tsx | 22 ++++----- .../ProtocolRunRunTimeParameters.tsx | 4 +- .../ProtocolRunRuntimeParameters.test.tsx | 12 +++-- .../ProtocolParameters/index.tsx | 6 +-- ...rameters.tsx => ProtocolRunEmptyState.tsx} | 14 +++++- .../__tests__/NoParameters.test.tsx | 32 ------------- .../__tests__/ProtocolRunEmptyState.test.tsx | 48 +++++++++++++++++++ components/src/molecules/index.tsx | 2 +- 8 files changed, 81 insertions(+), 59 deletions(-) rename components/src/molecules/ParametersTable/{NoParameters.tsx => ProtocolRunEmptyState.tsx} (71%) delete mode 100644 components/src/molecules/ParametersTable/__tests__/NoParameters.test.tsx create mode 100644 components/src/molecules/ParametersTable/__tests__/ProtocolRunEmptyState.test.tsx diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunModuleControls.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunModuleControls.tsx index 690ae1b43d0..2a668e321a4 100644 --- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunModuleControls.tsx +++ b/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, + ProtocolRunEmptyState, 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 ? ( - - - {t('connect_modules_to_see_controls')} - - - ) : ( + + + ) : ( + {!hasParameter ? ( - + ) : ( <> diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx index 36c71e6d363..2c61cea21ee 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx +++ b/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 { ProtocolRunEmptyState } from '@opentrons/components' import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { useMostRecentCompletedAnalysis } from '../../../LabwarePositionCheck/useMostRecentCompletedAnalysis' @@ -16,7 +16,7 @@ import type { } from '@opentrons/shared-data' vi.mock('@opentrons/components', async importOriginal => { - const actual = await importOriginal() + const actual = await importOriginal() return { ...actual, NoParameters: vi.fn(), @@ -94,7 +94,9 @@ describe('ProtocolRunRuntimeParameters', () => { props = { runId: RUN_ID, } - vi.mocked(NoParameters).mockReturnValue(
mock NoParameter
) + vi.mocked(ProtocolRunEmptyState).mockReturnValue( +
mock ProtocolRunEmptyState
+ ) when(vi.mocked(useMostRecentCompletedAnalysis)) .calledWith(RUN_ID) .thenReturn({ @@ -151,7 +153,7 @@ describe('ProtocolRunRuntimeParameters', () => { screen.getByText('No offsets') }) - it('should render mock NoParameter component when RunTimeParameters are empty', () => { + it('should render mock ProtocolRunEmptyState component when RunTimeParameters are empty', () => { when(vi.mocked(useMostRecentCompletedAnalysis)) .calledWith(RUN_ID) .thenReturn({ @@ -160,7 +162,7 @@ describe('ProtocolRunRuntimeParameters', () => { render(props) screen.getByText('Parameters') expect(screen.queryByText('Default values')).not.toBeInTheDocument() - screen.getByText('mock NoParameter') + screen.getByText('mock ProtocolRunEmptyState') }) // ToDo Additional test will be implemented when chip component is added diff --git a/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx b/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx index 69be8a3a468..81c0c0ccee8 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx @@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next' import { DIRECTION_COLUMN, Flex, + ParametersTable, + ProtocolRunEmptyState, SPACING, StyledText, TYPOGRAPHY, - ParametersTable, - NoParameters, } from '@opentrons/components' import { Banner } from '../../../atoms/Banner' @@ -48,7 +48,7 @@ export function ProtocolParameters({ ) : ( - + )} ) diff --git a/components/src/molecules/ParametersTable/NoParameters.tsx b/components/src/molecules/ParametersTable/ProtocolRunEmptyState.tsx similarity index 71% rename from components/src/molecules/ParametersTable/NoParameters.tsx rename to components/src/molecules/ParametersTable/ProtocolRunEmptyState.tsx index 27f9566b8cd..f0d77616c9f 100644 --- a/components/src/molecules/ParametersTable/NoParameters.tsx +++ b/components/src/molecules/ParametersTable/ProtocolRunEmptyState.tsx @@ -7,7 +7,17 @@ import { Icon } from '../../icons' import { Flex } from '../../primitives' import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles' -export function NoParameters(): JSX.Element { +interface ProtocolRunEmptyStateProps { + contentType?: 'parameters' | 'moduleControls' +} + +export function ProtocolRunEmptyState({ + contentType = 'parameters', +}: ProtocolRunEmptyStateProps): JSX.Element { + const bodyText = + contentType === 'parameters' + ? 'No parameters specified in this protocol' + : 'Connect modules to see controls' return ( - No parameters specified in this protocol + {bodyText} ) diff --git a/components/src/molecules/ParametersTable/__tests__/NoParameters.test.tsx b/components/src/molecules/ParametersTable/__tests__/NoParameters.test.tsx deleted file mode 100644 index 660a6936d51..00000000000 --- a/components/src/molecules/ParametersTable/__tests__/NoParameters.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react' -import { screen } from '@testing-library/react' -import { describe, it, expect } from 'vitest' - -import { renderWithProviders } from '../../../testing/utils' -import { BORDERS, COLORS } from '../../../helix-design-system' -import { NoParameters } from '../NoParameters' - -const render = () => { - return renderWithProviders() -} - -describe('NoParameters', () => { - it('should render text and icon with proper color', () => { - render() - screen.getByLabelText('alert') - screen.getByText('No parameters specified in this protocol') - }) - - it('should have proper styles', () => { - render() - expect(screen.getByTestId('NoRunTimeParameter')).toHaveStyle( - `background-color: ${COLORS.grey30}` - ) - expect(screen.getByTestId('NoRunTimeParameter')).toHaveStyle( - `border-radius: ${BORDERS.borderRadius8}` - ) - expect(screen.getByLabelText('alert')).toHaveStyle( - `color: ${COLORS.grey60}` - ) - }) -}) diff --git a/components/src/molecules/ParametersTable/__tests__/ProtocolRunEmptyState.test.tsx b/components/src/molecules/ParametersTable/__tests__/ProtocolRunEmptyState.test.tsx new file mode 100644 index 00000000000..3dbd24d499a --- /dev/null +++ b/components/src/molecules/ParametersTable/__tests__/ProtocolRunEmptyState.test.tsx @@ -0,0 +1,48 @@ +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 { ProtocolRunEmptyState } from '../ProtocolRunEmptyState' + +const render = (props: React.ComponentProps) => { + return renderWithProviders() +} + +describe('NoParameters', () => { + let props: React.ComponentProps + + 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('NoRunTimeParameter')).toHaveStyle( + `background-color: ${COLORS.grey30}` + ) + expect(screen.getByTestId('NoRunTimeParameter')).toHaveStyle( + `border-radius: ${BORDERS.borderRadius8}` + ) + expect(screen.getByLabelText('alert')).toHaveStyle( + `color: ${COLORS.grey60}` + ) + }) +}) diff --git a/components/src/molecules/index.tsx b/components/src/molecules/index.tsx index 3231c2f93a9..b1808fd960a 100644 --- a/components/src/molecules/index.tsx +++ b/components/src/molecules/index.tsx @@ -1,4 +1,4 @@ export * from './LocationIcon' export * from './RoundTab' export * from './ParametersTable' -export * from './ParametersTable/NoParameters' +export * from './ParametersTable/ProtocolRunEmptyState'