style(app): reformat TC run profile command text on ODD (#14092)

Closes RQA-1937

Author: mjhuff

app/src/organisms/CommandText/__tests__/CommandText.test.tsx

@@ -742,7 +742,7 @@ describe('CommandText', () => {
     )[0]
     getByText('Setting Target Temperature of Heater-Shaker to 20°C')
   })
-  it('renders correct text for thermocycler/runProfile', () => {
+  it('renders correct text for thermocycler/runProfile on Desktop', () => {
     const mockProfileSteps = [
       { holdSeconds: 10, celsius: 20 },
       { holdSeconds: 30, celsius: 40 },
@@ -773,6 +773,40 @@ describe('CommandText', () => {
     getByText('temperature: 20°C, seconds: 10')
     getByText('temperature: 40°C, seconds: 30')
   })
+  it('renders correct text for thermocycler/runProfile on ODD', () => {
+    const mockProfileSteps = [
+      { holdSeconds: 10, celsius: 20 },
+      { holdSeconds: 30, celsius: 40 },
+    ]
+    const { getByText, queryByText } = renderWithProviders(
+      <CommandText
+        command={{
+          commandType: 'thermocycler/runProfile',
+          params: { profile: mockProfileSteps, moduleId: 'abc123' },
+          id: 'def456',
+          result: {},
+          status: 'queued',
+          error: null,
+          createdAt: 'fake_timestamp',
+          startedAt: null,
+          completedAt: null,
+        }}
+        robotSideAnalysis={mockRobotSideAnalysis}
+        robotType={FLEX_ROBOT_TYPE}
+        isOnDevice={true}
+      />,
+      {
+        i18nInstance: i18n,
+      }
+    )[0]
+    getByText(
+      'Thermocycler starting 2 repetitions of cycle composed of the following steps:'
+    )
+    getByText('temperature: 20°C, seconds: 10')
+    expect(
+      queryByText('temperature: 40°C, seconds: 30')
+    ).not.toBeInTheDocument()
+  })
   it('renders correct text for heaterShaker/setAndWaitForShakeSpeed', () => {
     const { getByText } = renderWithProviders(
       <CommandText

app/src/organisms/CommandText/index.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Flex, DIRECTION_COLUMN, SPACING } from '@opentrons/components'
+import {
+  Flex,
+  DIRECTION_COLUMN,
+  SPACING,
+  ALIGN_CENTER,
+} from '@opentrons/components'
 import { getPipetteNameSpecs, RunTimeCommand } from '@opentrons/shared-data'
 import {
   getAddressableAreaDisplayName,
@@ -48,9 +53,16 @@ interface Props extends StyleProps {
   command: RunTimeCommand
   robotSideAnalysis: CompletedProtocolAnalysis
   robotType: RobotType
+  isOnDevice?: boolean
 }
 export function CommandText(props: Props): JSX.Element | null {
-  const { command, robotSideAnalysis, robotType, ...styleProps } = props
+  const {
+    command,
+    robotSideAnalysis,
+    robotType,
+    isOnDevice = false,
+    ...styleProps
+  } = props
   const { t } = useTranslation('protocol_command_text')
 
   switch (command.commandType) {
@@ -96,20 +108,31 @@ export function CommandText(props: Props): JSX.Element | null {
       const { profile } = command.params
       const steps = profile.map(
         ({ holdSeconds, celsius }: { holdSeconds: number; celsius: number }) =>
-          t('tc_run_profile_steps', { celsius: celsius, seconds: holdSeconds })
+          t('tc_run_profile_steps', {
+            celsius: celsius,
+            seconds: holdSeconds,
+          }).trim()
       )
       return (
-        <Flex flexDirection={DIRECTION_COLUMN} {...styleProps}>
+        <Flex
+          flexDirection={DIRECTION_COLUMN}
+          {...styleProps}
+          alignItems={isOnDevice ? ALIGN_CENTER : undefined}
+        >
           <StyledText as="p" marginBottom={SPACING.spacing4} {...styleProps}>
             {t('tc_starting_profile', {
               repetitions: Object.keys(steps).length,
             })}
           </StyledText>
           <StyledText as="p" marginLeft={SPACING.spacing16}>
             <ul>
-              {steps.map((step: string, index: number) => (
-                <li key={index}> {step}</li>
-              ))}
+              {isOnDevice ? (
+                <li>{steps[0]}</li>
+              ) : (
+                steps.map((step: string, index: number) => (
+                  <li key={index}> {step}</li>
+                ))
+              )}
             </ul>
           </StyledText>
         </Flex>

app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx

@@ -235,6 +235,7 @@ export function CurrentRunningProtocolCommand({
             command={currentCommand}
             robotSideAnalysis={robotSideAnalysis}
             robotType={robotType}
+            isOnDevice={true}
           />
         ) : null}
       </Flex>

app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx

@@ -241,6 +241,7 @@ export function RunningProtocolCommandList({
                       robotSideAnalysis={robotSideAnalysis}
                       robotType={robotType}
                       css={COMMAND_ROW_STYLE}
+                      isOnDevice={true}
                     />
                   </Flex>
                 </Flex>