feat(protocol-designer): update heater shaker form fields (#16580)

This PR overhauls the new PD heater shaker form. I consolidate shake
duration form field (minutes and seconds) into a single time field. I
also fix the function of the HS form toggle input fields and update
errors, maskers, and default values for the form. I also add form-level
HS form errors to catch required fields when they are toggled but no
input is given.

Closes AUTH-864, Closes AUTH-966

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

@@ -43,7 +43,7 @@
     "thermocycler": "thermocycler"
   },
   "temperature": "Temperature (˚C)",
-  "time": "Time (hh:mm:ss)",
+  "time": "Time",
   "units": {
     "cycles": "cycles",
     "degrees": "°C",
@@ -55,6 +55,7 @@
     "rpm": "rpm",
     "seconds": "s",
     "time": "mm:ss",
+    "time_hms": "hh:mm:ss",
     "times": "x"
   },
   "update": "UPDATE",

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

@@ -72,23 +72,24 @@
         "range": "between {{min}} and {{max}}"
       },
       "heaterShaker": {
+        "duration": "Duration",
         "latch": {
-          "setLatch": "Labware Latch",
-          "toggleOff": "Closed & Locked",
+          "setLatch": "Labware latch",
+          "toggleOff": "Close",
           "toggleOn": "Open"
         },
         "shaker": {
-          "setShake": "Set shake speed",
-          "toggleOff": "Deactivated",
+          "setShake": "Shake speed",
+          "toggleOff": "Deactivate",
           "toggleOn": "Active"
         },
         "temperature": {
-          "setTemperature": "Set temperature",
-          "toggleOff": "Deactivated",
+          "setTemperature": "Temperature",
+          "toggleOff": "Deactivate",
           "toggleOn": "Active"
         },
         "timer": {
-          "heaterShakerSetTimer": "Set timer"
+          "heaterShakerSetTimer": "Timer"
         }
       },
       "location": {
@@ -144,6 +145,7 @@
         }
       },
       "pauseAction": {
+        "duration": "Delay duration",
         "options": {
           "untilResume": "Pause until told to resume",
           "untilTemperature": "Pause until temperature reached",

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

@@ -93,6 +93,7 @@
   "select_volume": "Select a volume",
   "shake": "Shake",
   "single": "Single path",
+  "speed": "Speed",
   "starting_deck_state": "Starting deck state",
   "step_substeps": "{{stepType}} details",
   "temperature": "Temperature",

protocol-designer/src/atoms/ToggleButton/index.tsx

@@ -1,7 +1,7 @@
 import type * as React from 'react'
 import { css } from 'styled-components'
 
-import { Btn, Icon, COLORS } from '@opentrons/components'
+import { Btn, Icon, COLORS, Flex } from '@opentrons/components'
 
 import type { StyleProps } from '@opentrons/components'
 
@@ -38,8 +38,8 @@ const TOGGLE_ENABLED_STYLES = css`
 `
 
 interface ToggleButtonProps extends StyleProps {
-  label: string
   toggledOn: boolean
+  label?: string | null
   disabled?: boolean | null
   id?: string
   onClick?: (e: React.MouseEvent) => void
@@ -59,7 +59,9 @@ export function ToggleButton(props: ToggleButtonProps): JSX.Element {
       css={props.toggledOn ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
       {...buttonProps}
     >
-      <Icon name={iconName} height="1rem" />
+      <Flex>
+        <Icon name={iconName} size="2rem" />
+      </Flex>
     </Btn>
   )
 }

protocol-designer/src/components/StepEditForm/index.tsx

@@ -187,7 +187,7 @@ const StepEditFormManager = (
               : ''
           }
           handleCancelClick={saveStepForm}
-          handleContinueClick={confirmAddPauseUntilTempStep}
+          handleContinueClick={handleSave}
           // TODO (nd: 10/21/2024) can remove this prop once redesign FF removed
           moduleType={
             showAddPauseUntilTempStepModal

protocol-designer/src/form-types.ts

@@ -366,6 +366,7 @@ export interface HydratedHeaterShakerFormData {
   heaterShakerSetTimer: 'true' | 'false' | null
   heaterShakerTimerMinutes: string | null
   heaterShakerTimerSeconds: string | null
+  heaterShakerTimer?: string | null
   id: string
   latchOpen: boolean
   moduleId: string

protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx

@@ -18,12 +18,11 @@ interface ToggleExpandStepFormFieldProps extends FieldProps {
   fieldTitle: string
   isSelected: boolean
   units: string
-  onLabel: string
-  offLabel: string
   toggleUpdateValue: (value: unknown) => void
   toggleValue: unknown
+  onLabel?: string
+  offLabel?: string
   caption?: string
-  islabel?: boolean
 }
 export function ToggleExpandStepFormField(
   props: ToggleExpandStepFormFieldProps
@@ -38,16 +37,24 @@ export function ToggleExpandStepFormField(
     toggleUpdateValue,
     toggleValue,
     caption,
-    islabel,
     ...restProps
   } = props
 
+  const resetFieldValue = (): void => {
+    restProps.updateValue('null')
+  }
+
   const onToggleUpdateValue = (): void => {
     if (typeof toggleValue === 'boolean') {
       toggleUpdateValue(!toggleValue)
+      if (toggleValue) {
+        resetFieldValue()
+      }
     } else if (toggleValue === 'engage' || toggleValue === 'disengage') {
       const newToggleValue = toggleValue === 'engage' ? 'disengage' : 'engage'
       toggleUpdateValue(newToggleValue)
+    } else if (toggleValue == null) {
+      toggleUpdateValue(true)
     }
   }
 
@@ -60,16 +67,10 @@ export function ToggleExpandStepFormField(
       >
         <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
           <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
-          <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
-            {islabel ? (
-              <StyledText
-                desktopStyle="bodyDefaultRegular"
-                color={COLORS.grey60}
-              >
-                {isSelected ? onLabel : offLabel}
-              </StyledText>
-            ) : null}
-
+          <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
+            <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+              {isSelected ? onLabel : offLabel ?? null}
+            </StyledText>
             <ToggleButton
               onClick={() => {
                 onToggleUpdateValue()

protocol-designer/src/molecules/ToggleStepFormField/index.tsx

@@ -62,14 +62,16 @@ export function ToggleStepFormField(
               >
                 {isSelected ? onLabel : offLabel}
               </StyledText>
-              <ToggleButton
-                disabled={isDisabled}
-                onClick={() => {
-                  toggleUpdateValue(!toggleValue)
-                }}
-                label={isSelected ? onLabel : offLabel}
-                toggledOn={isSelected}
-              />
+              {isDisabled ? null : (
+                <ToggleButton
+                  disabled={isDisabled}
+                  onClick={() => {
+                    toggleUpdateValue(!toggleValue)
+                  }}
+                  label={isSelected ? onLabel : offLabel}
+                  toggledOn={isSelected}
+                />
+              )}
             </Flex>
           </Flex>
         </Flex>

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx

@@ -12,9 +12,7 @@ import {
 } from '@opentrons/components'
 import { getHeaterShakerLabwareOptions } from '../../../../../../ui/modules/selectors'
 import {
-  CheckboxExpandStepFormField,
   DropdownStepFormField,
-  InputStepFormField,
   ToggleExpandStepFormField,
   ToggleStepFormField,
 } from '../../../../../../molecules'
@@ -90,7 +88,7 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
           toggleValue={propsForFields.setShake.value}
           toggleUpdateValue={propsForFields.setShake.updateValue}
           title={t('form:step_edit_form.field.heaterShaker.shaker.setShake')}
-          fieldTitle={t('protocol_steps:shake')}
+          fieldTitle={t('protocol_steps:speed')}
           isSelected={formData.setShake === true}
           units={t('units.rpm')}
           onLabel={t('form:step_edit_form.field.heaterShaker.shaker.toggleOn')}
@@ -112,25 +110,17 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
               : null
           }
         />
-        <CheckboxExpandStepFormField
+        <ToggleExpandStepFormField
+          {...propsForFields.heaterShakerTimer}
+          toggleValue={propsForFields.heaterShakerSetTimer.value}
+          toggleUpdateValue={propsForFields.heaterShakerSetTimer.updateValue}
           title={t(
             'form:step_edit_form.field.heaterShaker.timer.heaterShakerSetTimer'
           )}
-          checkboxValue={propsForFields.heaterShakerSetTimer.value}
-          isChecked={propsForFields.heaterShakerSetTimer.value === true}
-          checkboxUpdateValue={propsForFields.heaterShakerSetTimer.updateValue}
-        >
-          {/* TODO: wire up the new timer with the combined field */}
-          {formData.heaterShakerSetTimer === true ? (
-            <InputStepFormField
-              showTooltip={false}
-              padding="0"
-              title={t('protocol_steps:time')}
-              {...propsForFields.heaterShakerTimerMinutes}
-              units="HH:MM:SS"
-            />
-          ) : null}
-        </CheckboxExpandStepFormField>
+          fieldTitle={t('form:step_edit_form.field.heaterShaker.duration')}
+          isSelected={formData.heaterShakerSetTimer === true}
+          units={t('application:units.time')}
+        />
       </Flex>
     </Flex>
   )

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx

@@ -123,7 +123,6 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
             'form:step_edit_form.field.magnetAction.options.disengage'
           )}
           caption={engageHeightCaption}
-          islabel={true}
         />
       </Flex>
     </Flex>

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PauseTools/index.tsx

@@ -139,10 +139,11 @@ export function PauseTools(props: StepFormProps): JSX.Element {
                 >
                   <InputStepFormField
                     {...propsForFields.pauseTime}
-                    title={t('application:time')}
+                    title={t('form:step_edit_form.field.pauseAction.duration')}
                     value={propsForFields.pauseTime.value as string}
                     updateValue={propsForFields.pauseTime.updateValue}
                     errorToShow={propsForFields.pauseTime.errorToShow}
+                    units={t('application:units.time_hms')}
                     padding="0"
                     showTooltip={false}
                   />
@@ -193,7 +194,7 @@ export function PauseTools(props: StepFormProps): JSX.Element {
             gridGap={SPACING.spacing4}
             paddingX={SPACING.spacing16}
           >
-            <StyledText desktopStyle="captionRegular">
+            <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
               {i18n.format(
                 t('form:step_edit_form.field.pauseMessage.label'),
                 'capitalize'

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

@@ -180,7 +180,7 @@ function StepFormManager(props: StepFormManagerProps): JSX.Element | null {
               : ''
           }
           handleCancelClick={saveStepForm}
-          handleContinueClick={confirmAddPauseUntilTempStep}
+          handleContinueClick={handleSave}
           moduleType={
             showAddPauseUntilTempStepModal
               ? TEMPERATURE_MODULE_TYPE

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

@@ -327,8 +327,7 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
     case 'heaterShaker':
       const {
         latchOpen,
-        heaterShakerTimerMinutes,
-        heaterShakerTimerSeconds,
+        heaterShakerTimer,
         moduleId: heaterShakerModuleId,
         targetHeaterShakerTemperature,
         targetSpeed,
@@ -343,26 +342,25 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
               i18nKey="protocol_steps:heater_shaker.active.temperature"
               values={{ module: moduleDisplayName }}
               tagText={
-                targetHeaterShakerTemperature != null
+                targetHeaterShakerTemperature
                   ? `${targetHeaterShakerTemperature}${t(
                       'application:units.degrees'
                     )}`
                   : t('protocol_steps:heater_shaker.active.ambient')
               }
             />
-            {targetSpeed != null ? (
+            {targetSpeed ? (
               <StyledTrans
                 i18nKey="protocol_steps:heater_shaker.active.shake"
                 tagText={`${targetSpeed}${t('application:units.rpm')}`}
               />
             ) : null}
           </Flex>
           <Flex gridGap={SPACING.spacing20}>
-            {heaterShakerTimerMinutes != null &&
-            heaterShakerTimerSeconds != null ? (
+            {heaterShakerTimer ? (
               <StyledTrans
                 i18nKey="protocol_steps:heater_shaker.active.time"
-                tagText={`${heaterShakerTimerMinutes}:${heaterShakerTimerSeconds}`}
+                tagText={heaterShakerTimer}
               />
             ) : null}
             <StyledTrans

protocol-designer/src/steplist/fieldLevel/errors.ts

@@ -35,15 +35,15 @@ export const requiredField: ErrorChecker = (value: unknown) =>
   !value ? FIELD_ERRORS.REQUIRED : null
 export const isTimeFormat: ErrorChecker = (value: unknown): string | null => {
   const timeRegex = new RegExp(/^\d{1,2}:\d{1,2}:\d{1,2}$/g)
-  return (typeof value === 'string' && timeRegex.test(value)) || value == null
+  return (typeof value === 'string' && timeRegex.test(value)) || !value
     ? null
     : FIELD_ERRORS.BAD_TIME_HMS
 }
 export const isTimeFormatMinutesSeconds: ErrorChecker = (
   value: unknown
 ): string | null => {
   const timeRegex = new RegExp(/^\d{1,2}:\d{1,2}$/g)
-  return (typeof value === 'string' && timeRegex.test(value)) || value == null
+  return (typeof value === 'string' && timeRegex.test(value)) || !value
     ? null
     : FIELD_ERRORS.BAD_TIME_MS
 }

protocol-designer/src/steplist/fieldLevel/index.ts

@@ -8,6 +8,7 @@ import {
   temperatureRangeFieldValue,
   realNumber,
   isTimeFormat,
+  isTimeFormatMinutesSeconds,
 } from './errors'
 import {
   maskToInteger,
@@ -345,6 +346,11 @@ const stepFieldHelperMap: Record<StepFieldName, StepFieldHelpers> = {
     maskValue: composeMaskers(maskToInteger, onlyPositiveNumbers),
     castValue: Number,
   },
+  heaterShakerTimer: {
+    maskValue: composeMaskers(maskToTime),
+    getErrors: composeErrors(isTimeFormatMinutesSeconds),
+    castValue: String,
+  },
   pauseAction: {
     getErrors: composeErrors(requiredField),
   },