feat(components, protocol-designer): add Thermocycler step details UI

components/src/atoms/ListItem/__tests__/ListItem.test.tsx

@@ -26,7 +26,6 @@ describe('ListItem', () => {
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_error')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red35}`)
-    expect(listItem).toHaveStyle(`padding: 0`)
     expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should render correct style - noActive', () => {
@@ -35,7 +34,6 @@ describe('ListItem', () => {
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_noActive')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey30}`)
-    expect(listItem).toHaveStyle(`padding: 0`)
     expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should render correct style - success', () => {
@@ -44,7 +42,6 @@ describe('ListItem', () => {
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_success')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green35}`)
-    expect(listItem).toHaveStyle(`padding: 0`)
     expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should render correct style - warning', () => {
@@ -53,7 +50,6 @@ describe('ListItem', () => {
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_warning')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow35}`)
-    expect(listItem).toHaveStyle(`padding: 0`)
     expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should call on click when pressed', () => {

components/src/atoms/ListItem/index.tsx

@@ -56,7 +56,6 @@ export function ListItem(props: ListItemProps): JSX.Element {
     background-color: ${listItemProps.backgroundColor};
     width: 100%;
     height: ${FLEX_MAX_CONTENT};
-    padding: 0;
     border-radius: ${BORDERS.borderRadius4};
 
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {

components/src/organisms/Toolbox/index.tsx

@@ -87,7 +87,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
       height={height}
       {...positionStyles}
       borderRadius={BORDERS.borderRadius8}
-      minWidth="19.5rem"
+      width={width}
       flex="0"
     >
       <Flex

protocol-designer/src/assets/localization/en/protocol_steps.json

@@ -105,6 +105,8 @@
       "closed": "closed",
       "open": "open"
     },
+    "repeat": "Repeat {{repetitions}} times",
+    "substep_settings": "<text>Set block temperature to</text><tagTemperature/><text>for</text><tagDuration/>",
     "thermocycler_profile": {
       "end_hold": {
         "block": "<text>End at thermocycler block</text><tag/>",

protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx

@@ -304,11 +304,11 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
       const destinationLabwareName = labwareNicknamesById[dispense_labware]
       const aspirateWellsDisplay = getWellsForStepSummary(
         aspirate_wells as string[],
-        flatten(labwareEntities[aspirate_labware].def.ordering)
+        flatten(labwareEntities[aspirate_labware]?.def.ordering)
       )
       const dispenseWellsDisplay = getWellsForStepSummary(
         dispense_wells as string[],
-        flatten(labwareEntities[dispense_labware].def.ordering)
+        flatten(labwareEntities[dispense_labware]?.def.ordering)
       )
       stepSummaryContent = (
         <StyledTrans

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx

@@ -55,7 +55,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
   const isPipetteStep =
     savedStepFormData.stepType === 'moveLiquid' ||
     savedStepFormData.stepType === 'mix'
-  const isThermocyclerStep = savedStepFormData.stepType === 'thermocycler'
+  const isThermocyclerProfile = savedStepFormData.stepType === 'thermocycler'
 
   const duplicateStep = (
     stepId: StepIdType
@@ -76,7 +76,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
     <>
       <Flex
         ref={menuRootRef}
-        zIndex={5}
+        zIndex={12}
         top={top}
         left="19.5rem"
         position={POSITION_ABSOLUTE}
@@ -115,9 +115,10 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
             {formData != null ? null : (
               <MenuButton onClick={handleEdit}>{t('edit_step')}</MenuButton>
             )}
-            {isPipetteStep || isThermocyclerStep ? (
+            {isPipetteStep || isThermocyclerProfile ? (
               <MenuButton
                 onClick={() => {
+                  setStepOverflowMenu(false)
                   dispatch(hoverOnStep(stepId))
                   dispatch(toggleViewSubstep(stepId))
                 }}

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import {
+  FLEX_MAX_CONTENT,
   Flex,
   PrimaryButton,
   SPACING,
@@ -43,20 +44,18 @@ export function SubstepsToolbox(
   const highlightSubstep = (payload: SubstepIdentifier): HoverOnSubstepAction =>
     dispatch(hoverOnSubstep(payload))
 
-  if (substeps == null) {
+  if (substeps == null || formData == null) {
     return null
   }
 
-  const uiStepType = t(`application:stepType.${formData.stepType}`)
-
   return ('commandCreatorFnName' in substeps &&
     (substeps.commandCreatorFnName === 'transfer' ||
       substeps.commandCreatorFnName === 'consolidate' ||
       substeps.commandCreatorFnName === 'distribute' ||
       substeps.commandCreatorFnName === 'mix')) ||
     substeps.substepType === THERMOCYCLER_PROFILE ? (
     <Toolbox
-      width="396px"
+      width={FLEX_MAX_CONTENT}
       childrenPadding="0"
       confirmButton={
         <PrimaryButton
@@ -72,15 +71,17 @@ export function SubstepsToolbox(
       title={
         <StyledText desktopStyle="bodyLargeSemiBold">
           {i18n.format(
-            t(`protocol_steps:step_substeps`, { stepType: uiStepType }),
+            t(`protocol_steps:step_substeps`, {
+              stepType: formData?.stepName ?? formData.stepType,
+            }),
             'capitalize'
           )}
         </StyledText>
       }
     >
-      <Flex padding={SPACING.spacing12} width="100%">
+      <Flex padding={SPACING.spacing12}>
         {substeps.substepType === THERMOCYCLER_PROFILE ? (
-          <ThermocyclerProfileSubsteps />
+          <ThermocyclerProfileSubsteps key="substeps" stepId={stepId} />
         ) : (
           <PipettingSubsteps
             key="substeps"

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ThermocyclerProfileSubsteps.tsx

@@ -1,3 +1,121 @@
-export function ThermocyclerProfileSubsteps(): JSX.Element {
-  return <div>Wire this up</div>
+import { useSelector } from 'react-redux'
+import { Trans, useTranslation } from 'react-i18next'
+import {
+  ALIGN_CENTER,
+  ALIGN_FLEX_END,
+  DIRECTION_COLUMN,
+  FLEX_MAX_CONTENT,
+  Flex,
+  ListItem,
+  SPACING,
+  StyledText,
+  Tag,
+} from '@opentrons/components'
+import { getSavedStepForms } from '../../../../step-forms/selectors'
+
+import type { ProfileStepItem } from '../../../../form-types'
+import type { ThermocyclerCycleType } from '../StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle'
+import type { ThermocyclerStepType } from '../StepForm/StepTools/ThermocyclerTools/ThermocyclerStep'
+
+interface ThermocyclerProfileSubstepsProps {
+  stepId: string
+}
+export function ThermocyclerProfileSubsteps(
+  props: ThermocyclerProfileSubstepsProps
+): JSX.Element {
+  const { stepId } = props
+
+  const { t } = useTranslation('protocol_steps')
+
+  const savedStepForms = useSelector(getSavedStepForms)
+  const step = savedStepForms[stepId]
+  const orderedSubsteps = step.orderedProfileItems.map(
+    (id: string) => step.profileItemsById[id]
+  )
+
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing4}
+      width={FLEX_MAX_CONTENT}
+    >
+      {orderedSubsteps.map(
+        (substep: ThermocyclerStepType | ThermocyclerCycleType) => {
+          const content =
+            substep.type === 'profileCycle' ? (
+              <Flex
+                flexDirection={DIRECTION_COLUMN}
+                gridGap={SPACING.spacing12}
+              >
+                {substep.steps.map((profileStep: ProfileStepItem) => {
+                  const {
+                    temperature,
+                    durationMinutes,
+                    durationSeconds,
+                  } = profileStep
+                  return (
+                    <ThermocyclerSubstep
+                      key={profileStep.id}
+                      temperature={temperature}
+                      duration={`${durationMinutes}:${durationSeconds}`}
+                    />
+                  )
+                })}
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  alignSelf={ALIGN_FLEX_END}
+                >
+                  {t('thermocycler_module.repeat', {
+                    repetitions: substep.repetitions,
+                  })}
+                </StyledText>
+              </Flex>
+            ) : (
+              <ThermocyclerSubstep
+                temperature={substep.temperature}
+                duration={`${substep.durationMinutes}:${substep.durationSeconds}`}
+              />
+            )
+          return (
+            <ListItem
+              key={substep.id}
+              type="noActive"
+              width="100%"
+              padding={SPACING.spacing12}
+            >
+              {content}
+            </ListItem>
+          )
+        }
+      )}
+    </Flex>
+  )
+}
+
+interface ThermocyclerSubstepProps {
+  temperature: string
+  duration: string
+}
+
+function ThermocyclerSubstep(props: ThermocyclerSubstepProps): JSX.Element {
+  const { temperature, duration } = props
+  const { t } = useTranslation(['application', 'protocol_steps'])
+  return (
+    <Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
+      <Trans
+        t={t}
+        i18nKey="protocol_steps:thermocycler_module.substep_settings"
+        components={{
+          text: <StyledText desktopStyle="bodyDefaultRegular" />,
+          tagTemperature: (
+            <Tag
+              type="default"
+              text={`${temperature}${t('application:units.degrees')}`}
+            />
+          ),
+          tagDuration: <Tag type="default" text={duration} />,
+        }}
+      />
+    </Flex>
+  )
 }

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/ThermocyclerProfileSubsteps.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../../../__testing-utils__'
+import { i18n } from '../../../../../assets/localization'
+import { getSavedStepForms } from '../../../../../step-forms/selectors'
+import { ThermocyclerProfileSubsteps } from '../ThermocyclerProfileSubsteps'
+import type { FormData } from '../../../../../form-types'
+
+const render = (
+  props: React.ComponentProps<typeof ThermocyclerProfileSubsteps>
+) => {
+  return renderWithProviders(<ThermocyclerProfileSubsteps {...props} />, {
+    i18nInstance: i18n,
+  })[0]
+}
+vi.mock('../../../../../step-forms/selectors')
+const THERMOCYCLER_STEP_ID = 'tcStep123'
+const MOCK_THERMOCYCLER_ORDERED_SUBSTEP_IDS = [
+  '292b0d70-fa06-4ab1-adc9-f26c589babf4',
+  '0965e0de-2d01-4e4e-8fb3-1e66306fe7e5',
+]
+const MOCK_THERMOCYCLER_SUBSTEP_ITEMS = {
+  '292b0d70-fa06-4ab1-adc9-f26c589babf4': {
+    id: '292b0d70-fa06-4ab1-adc9-f26c589babf4',
+    title: '',
+    steps: [
+      {
+        durationMinutes: '00',
+        durationSeconds: '30',
+        id: 'f90cc374-2eeb-4205-80c6-63c5c77215a5',
+        temperature: '10',
+        title: 'cyclestep1',
+        type: 'profileStep',
+      },
+      {
+        durationMinutes: '1',
+        durationSeconds: '30',
+        id: '462b3d8f-bb8a-4e11-ae98-8f1d46e8507e',
+        temperature: '55',
+        title: 'cyclestep2',
+        type: 'profileStep',
+      },
+    ],
+    type: 'profileCycle',
+    repetitions: '28',
+  },
+  '0965e0de-2d01-4e4e-8fb3-1e66306fe7e5': {
+    durationMinutes: '5',
+    durationSeconds: '00',
+    id: '0965e0de-2d01-4e4e-8fb3-1e66306fe7e5',
+    temperature: '39',
+    title: 'last step',
+    type: 'profileStep',
+  },
+}
+
+describe('TimelineToolbox', () => {
+  let props: React.ComponentProps<typeof ThermocyclerProfileSubsteps>
+  beforeEach(() => {
+    props = { stepId: THERMOCYCLER_STEP_ID }
+    vi.mocked(getSavedStepForms).mockReturnValue({
+      [THERMOCYCLER_STEP_ID]: ({
+        orderedProfileItems: MOCK_THERMOCYCLER_ORDERED_SUBSTEP_IDS,
+        profileItemsById: MOCK_THERMOCYCLER_SUBSTEP_ITEMS,
+      } as unknown) as FormData,
+    })
+  })
+  it('renders all profile steps, including cycles and steps', () => {
+    render(props)
+    expect(screen.getAllByText('Set block temperature to').length === 3)
+    screen.getByText('10°C')
+    screen.getByText('55°C')
+    screen.getByText('39°C')
+    screen.getByText('00:30')
+    screen.getByText('1:30')
+    screen.getByText('5:00')
+  })
+})

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

@@ -71,9 +71,9 @@ export function ProtocolSteps(): JSX.Element {
       gridGap={SPACING.spacing16}
       height="calc(100vh - 4rem)"
       justifyContent={JUSTIFY_SPACE_BETWEEN}
+      padding={SPACING.spacing12}
     >
       <TimelineToolbox />
-      {selectedSubstep ? <SubstepsToolbox stepId={selectedSubstep} /> : null}
       <Flex
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
@@ -118,7 +118,7 @@ export function ProtocolSteps(): JSX.Element {
           </Flex>
         </Flex>
         {enableHoyKeyDisplay ? (
-          <Box position={POSITION_FIXED} left="20.25rem" bottom="0.75rem">
+          <Box position={POSITION_FIXED} left="21rem" bottom="0.75rem">
             <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
               <Tag text={t('double_click_to_edit')} type="default" />
               <Tag text={t('shift_click_to_select_all')} type="default" />
@@ -127,6 +127,7 @@ export function ProtocolSteps(): JSX.Element {
           </Box>
         ) : null}
       </Flex>
+      {selectedSubstep ? <SubstepsToolbox stepId={selectedSubstep} /> : null}
       <StepForm />
       {isMultiSelectMode ? <BatchEditToolbox /> : null}
     </Flex>