refactor(app, components): parametersTable moved to Components dir for PL

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

@@ -2,13 +2,15 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import { formatRunTimeParameterValue } from '@opentrons/shared-data'
 import {
   ALIGN_CENTER,
   BORDERS,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
+  NoParameters,
   SPACING,
   StyledText,
   TYPOGRAPHY,
@@ -17,9 +19,7 @@ import {
 import { Banner } from '../../../atoms/Banner'
 import { Divider } from '../../../atoms/structure'
 // import { Chip } from '../../../atoms/Chip'
-import { NoParameter } from '../../ProtocolDetails/ProtocolParameters/NoParameter'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
-import { formatRunTimeParameterValue } from '../../ProtocolDetails/ProtocolParameters/utils'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
@@ -221,7 +221,7 @@ export function ProtocolRunRuntimeParameters({
       </Flex>
       {!hasParameter ? (
         <Flex padding={SPACING.spacing16}>
-          <NoParameter />
+          <NoParameters t={t} />
         </Flex>
       ) : (
         <>

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

@@ -3,9 +3,9 @@ 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 { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
-import { NoParameter } from '../../../ProtocolDetails/ProtocolParameters/NoParameter'
 import { useMostRecentCompletedAnalysis } from '../../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 
 import { ProtocolRunRuntimeParameters } from '../ProtocolRunRunTimeParameters'
@@ -14,8 +14,15 @@ import type {
   CompletedProtocolAnalysis,
   RunTimeParameter,
 } from '@opentrons/shared-data'
+import type * as Components from '@opentrons/components'
 
-vi.mock('../../../ProtocolDetails/ProtocolParameters/NoParameter')
+vi.mock('@opentrons/components', async importOriginal => {
+  const actual = await importOriginal<typeof Components>()
+  return {
+    ...actual,
+    NoParameters: vi.fn(),
+  }
+})
 vi.mock('../../../LabwarePositionCheck/useMostRecentCompletedAnalysis')
 
 const RUN_ID = 'mockId'
@@ -88,7 +95,7 @@ describe('ProtocolRunRuntimeParameters', () => {
     props = {
       runId: RUN_ID,
     }
-    vi.mocked(NoParameter).mockReturnValue(<div>mock NoParameter</div>)
+    vi.mocked(NoParameters).mockReturnValue(<div>mock NoParameter</div>)
     when(vi.mocked(useMostRecentCompletedAnalysis))
       .calledWith(RUN_ID)
       .thenReturn({

app/src/organisms/ProtocolDetails/ProtocolParameters/__tests__/ProtocolParameters.test.tsx

@@ -4,13 +4,10 @@ import { screen } from '@testing-library/react'
 
 import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
-import { NoParameter } from '../NoParameter'
 import { ProtocolParameters } from '..'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
-vi.mock('../NoParameter')
-
 const mockRunTimeParameter: RunTimeParameter[] = [
   {
     displayName: 'Trash Tips',
@@ -87,7 +84,6 @@ describe('ProtocolParameters', () => {
     props = {
       runTimeParameters: mockRunTimeParameter,
     }
-    vi.mocked(NoParameter).mockReturnValue(<div>mock NoParameter</div>)
   })
 
   afterEach(() => {
@@ -131,6 +127,6 @@ describe('ProtocolParameters', () => {
       runTimeParameters: [],
     }
     render(props)
-    screen.getByText('mock NoParameter')
+    screen.getByText('No parameters specified in this protocol')
   })
 })

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

@@ -1,18 +1,16 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import {
-  BORDERS,
   DIRECTION_COLUMN,
   Flex,
   SPACING,
   StyledText,
   TYPOGRAPHY,
+  ParametersTable,
+  NoParameters,
 } from '@opentrons/components'
 import { Banner } from '../../../atoms/Banner'
-import { NoParameter } from './NoParameter'
-import { formatRunTimeParameterValue } from './utils'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
@@ -47,112 +45,11 @@ export function ProtocolParameters({
               </StyledText>
             </Flex>
           </Banner>
-          <ProtocolParameterItems runTimeParameters={runTimeParameters} />
+          <ParametersTable runTimeParameters={runTimeParameters} t={t} />
         </Flex>
       ) : (
-        <NoParameter />
+        <NoParameters t={t} />
       )}
     </Flex>
   )
 }
-
-interface ProtocolParameterItemsProps {
-  runTimeParameters: RunTimeParameter[]
-}
-
-function ProtocolParameterItems({
-  runTimeParameters,
-}: ProtocolParameterItemsProps): JSX.Element {
-  const { t } = useTranslation('protocol_details')
-  const formatRange = (
-    runTimeParameter: RunTimeParameter,
-    minMax: string
-  ): string => {
-    const { type } = runTimeParameter
-    const choices =
-      'choices' in runTimeParameter ? runTimeParameter.choices : []
-    const count = choices.length
-
-    switch (type) {
-      case 'int':
-      case 'float':
-        return minMax
-      case 'boolean':
-        return t('on_off')
-      case 'str':
-        if (count > 2) {
-          return t('choices', { count })
-        } else {
-          return choices.map(choice => choice.displayName).join(', ')
-        }
-    }
-    return ''
-  }
-
-  return (
-    <StyledTable>
-      <thead>
-        <StyledTableHeader>{t('name')}</StyledTableHeader>
-        <StyledTableHeader>{t('default_value')}</StyledTableHeader>
-        <StyledTableHeader>{t('range')}</StyledTableHeader>
-      </thead>
-      <tbody>
-        {runTimeParameters.map((parameter: RunTimeParameter, index: number) => {
-          const min = 'min' in parameter ? parameter.min : 0
-          const max = 'max' in parameter ? parameter.max : 0
-          return (
-            <StyledTableRow
-              isLast={index === runTimeParameters.length - 1}
-              key={`runTimeParameter-${index}`}
-            >
-              <StyledTableCell isLast={index === runTimeParameters.length - 1}>
-                <StyledText as="p">{parameter.displayName}</StyledText>
-              </StyledTableCell>
-              <StyledTableCell isLast={index === runTimeParameters.length - 1}>
-                <StyledText as="p">
-                  {formatRunTimeParameterValue(parameter, t)}
-                </StyledText>
-              </StyledTableCell>
-              <StyledTableCell isLast={index === runTimeParameters.length - 1}>
-                <StyledText as="p">
-                  {formatRange(parameter, `${min}-${max}`)}
-                </StyledText>
-              </StyledTableCell>
-            </StyledTableRow>
-          )
-        })}
-      </tbody>
-    </StyledTable>
-  )
-}
-
-const StyledTable = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  text-align: left;
-`
-
-const StyledTableHeader = styled.th`
-  ${TYPOGRAPHY.labelSemiBold}
-  padding: ${SPACING.spacing8};
-  border-bottom: ${BORDERS.lineBorder};
-`
-
-interface StyledTableRowProps {
-  isLast: boolean
-}
-
-const StyledTableRow = styled.tr<StyledTableRowProps>`
-  padding: ${SPACING.spacing8};
-  border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};
-`
-
-interface StyledTableCellProps {
-  isLast: boolean
-}
-
-const StyledTableCell = styled.td<StyledTableCellProps>`
-  padding-left: ${SPACING.spacing8};
-  padding-top: ${SPACING.spacing12};
-  padding-bottom: ${props => (props.isLast ? 0 : SPACING.spacing12)};
-`

app/src/organisms/ProtocolSetupParameters/ViewOnlyParameters.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { formatRunTimeParameterValue } from '@opentrons/shared-data'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -16,7 +17,6 @@ import { ChildNavigation } from '../ChildNavigation'
 import { Chip } from '../../atoms/Chip'
 import { useToaster } from '../ToasterOven'
 import { mockData } from './index'
-import { formatRunTimeParameterValue } from '../ProtocolDetails/ProtocolParameters/utils'
 
 import type { SetupScreens } from '../../pages/ProtocolSetup'
 

app/src/organisms/ProtocolSetupParameters/index.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom'
 import { useCreateRunMutation, useHost } from '@opentrons/react-api-client'
 import { useQueryClient } from 'react-query'
+import { formatRunTimeParameterValue } from '@opentrons/shared-data'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
@@ -13,7 +14,6 @@ import {
 import { ProtocolSetupStep } from '../../pages/ProtocolSetup'
 import { ChildNavigation } from '../ChildNavigation'
 import { ResetValuesModal } from './ResetValuesModal'
-import { formatRunTimeParameterValue } from '../ProtocolDetails/ProtocolParameters/utils'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
 import type { LabwareOffsetCreateData } from '@opentrons/api-client'

app/src/pages/ProtocolDetails/Parameters.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
+import { formatRunTimeParameterValue } from '@opentrons/shared-data'
 import {
   BORDERS,
   COLORS,
@@ -13,7 +14,6 @@ import {
 import { useToaster } from '../../organisms/ToasterOven'
 import { useRunTimeParameters } from '../Protocols/hooks'
 import { EmptySection } from './EmptySection'
-import { formatRunTimeParameterValue } from '../../organisms/ProtocolDetails/ProtocolParameters/utils'
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
 const Table = styled('table')`

components/src/index.ts

@@ -22,7 +22,7 @@ export * from './tabbedNav'
 export * from './slotmap'
 export * from './structure'
 export * from './tooltips'
-
+export * from './parametersTable'
 // styles
 export * from './styles'
 // new ui-overhaul style vars

app/src/organisms/ProtocolDetails/ProtocolParameters/NoParameter.tsx → components/src/parametersTable/NoParameters.tsx

@@ -1,21 +1,16 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 
-import {
-  ALIGN_CENTER,
-  BORDERS,
-  COLORS,
-  DIRECTION_COLUMN,
-  Flex,
-  Icon,
-  SPACING,
-  StyledText,
-  TYPOGRAPHY,
-} from '@opentrons/components'
-
-export function NoParameter(): JSX.Element {
-  const { t } = useTranslation('protocol_details')
+import { BORDERS, COLORS } from '../helix-design-system'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants/index'
+import { StyledText } from '../atoms/StyledText'
+import { Icon } from '../icons'
+import { Flex } from '../primitives'
+import { ALIGN_CENTER, DIRECTION_COLUMN } from '../styles'
 
+interface NoParametersProps {
+  t?: any
+}
+export function NoParameters({ t }: NoParametersProps): JSX.Element {
   return (
     <Flex
       alignItems={ALIGN_CENTER}
@@ -34,7 +29,9 @@ export function NoParameter(): JSX.Element {
         aria-label="alert"
       />
       <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-        {t('no_parameters')}
+        {t != null
+          ? t('no_parameters')
+          : 'No parameters specified in this protocol'}
       </StyledText>
     </Flex>
   )

app/src/organisms/ProtocolDetails/ProtocolParameters/__tests__/NoParameter.test.tsx → components/src/parametersTable/__tests__/NoParameters.test.tsx

@@ -2,28 +2,25 @@ import * as React from 'react'
 import { screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
 
-import { BORDERS, COLORS } from '@opentrons/components'
+import { renderWithProviders } from '../../testing/utils'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { NoParameters } from '../NoParameters'
 
-import { renderWithProviders } from '../../../../__testing-utils__'
-import { i18n } from '../../../../i18n'
-
-import { NoParameter } from '../NoParameter'
-
-const render = () => {
-  return renderWithProviders(<NoParameter />, {
-    i18nInstance: i18n,
-  })
+const render = (props: React.ComponentProps<typeof NoParameters>) => {
+  return renderWithProviders(<NoParameters {...props} />)
 }
 
-describe('NoParameter', () => {
+const tMock = (key: string) => key
+
+describe('NoParameters', () => {
   it('should render text and icon with proper color', () => {
-    render()
+    render({})
     screen.getByLabelText('alert')
     screen.getByText('No parameters specified in this protocol')
   })
 
   it('should have proper styles', () => {
-    render()
+    render({})
     expect(screen.getByTestId('NoRunTimeParameter')).toHaveStyle(
       `background-color: ${COLORS.grey30}`
     )
@@ -34,4 +31,11 @@ describe('NoParameter', () => {
       `color: ${COLORS.grey60}`
     )
   })
+
+  it('should render the raw i18n value if a t is provided', () => {
+    render({
+      t: tMock,
+    })
+    screen.getByText('no_parameters')
+  })
 })