feat(protocol-designer, step-generation): add comment to step form (#…

…15577)

closes RAUT-1051

protocol-designer/src/components/StepCreationButton.tsx

@@ -108,6 +108,7 @@ export const StepCreationButton = (): JSX.Element => {
   const getSupportedSteps = (): Array<
     Exclude<StepType, 'manualIntervention'>
   > => [
+    'comment',
     'moveLabware',
     'moveLiquid',
     'mix',
@@ -130,6 +131,7 @@ export const StepCreationButton = (): JSX.Element => {
     Exclude<StepType, 'manualIntervention'>,
     boolean
   > = {
+    comment: true,
     moveLabware: true,
     moveLiquid: true,
     mix: true,

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

@@ -7,6 +7,7 @@ import {
   MoveLabwareForm,
   MoveLiquidForm,
   PauseForm,
+  CommentForm,
   MagnetForm,
   TemperatureForm,
   ThermocyclerForm,
@@ -33,6 +34,7 @@ const STEP_FORM_MAP: StepFormMap = {
   temperature: TemperatureForm,
   thermocycler: ThermocyclerForm,
   heaterShaker: HeaterShakerForm,
+  comment: CommentForm,
 }
 
 interface Props {

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

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { FormGroup, SPACING } from '@opentrons/components'
+import { TextField } from '../../fields'
+import type { StepFormProps } from '../../types'
+
+import styles from '../../StepEditForm.module.css'
+
+export function CommentForm(props: StepFormProps): JSX.Element {
+  const { t } = useTranslation(['tooltip', 'application', 'form'])
+
+  const { propsForFields } = props
+
+  return (
+    <div className={styles.form_wrapper}>
+      <div className={styles.section_header}>
+        <span className={styles.section_header_text}>
+          {t('application:stepType.comment')}
+        </span>
+      </div>
+      <div
+        className={styles.section_wrapper}
+        style={{ paddingTop: SPACING.spacing16 }}
+      >
+        <FormGroup label={t('form:step_edit_form.field.comment.label')}>
+          <TextField
+            {...propsForFields.message}
+            className={styles.large_field}
+          />
+        </FormGroup>
+      </div>
+    </div>
+  )
+}

protocol-designer/src/components/StepEditForm/forms/index.ts

@@ -6,3 +6,4 @@ export { MagnetForm } from './MagnetForm'
 export { TemperatureForm } from './TemperatureForm'
 export { ThermocyclerForm } from './ThermocyclerForm'
 export { HeaterShakerForm } from './HeaterShakerForm'
+export { CommentForm } from './CommentForm'

protocol-designer/src/components/steplist/CommentStepItems.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import type { CommentArgs } from '@opentrons/step-generation'
+
+import styles from './StepItem.module.css'
+
+interface CommentStepItemProps {
+  commentArgs: CommentArgs
+}
+
+export function CommentStepItems(
+  props: CommentStepItemProps
+): JSX.Element | null {
+  const { commentArgs } = props
+  const message = commentArgs.message
+
+  return (
+    <>
+      <div className={styles.substep_header}>
+        <span>Comment</span>
+      </div>
+      <div className={styles.substep_content}>{`"${message}"`}</div>
+    </>
+  )
+}

protocol-designer/src/components/steplist/StepItem.tsx

@@ -25,6 +25,7 @@ import { ModuleStepItems, ModuleStepItemRow } from './ModuleStepItems'
 import { PauseStepItems } from './PauseStepItems'
 import { MoveLabwareHeader } from './MoveLabwareHeader'
 import { SourceDestSubstep } from './SourceDestSubstep'
+import { CommentStepItems } from './CommentStepItems'
 import styles from './StepItem.module.css'
 
 import type { AdditionalEquipmentEntities } from '@opentrons/step-generation'
@@ -314,6 +315,10 @@ export const StepItemContents = (
     return <PauseStepItems pauseArgs={substeps.pauseStepArgs} />
   }
 
+  if (substeps && substeps.substepType === 'comment') {
+    return <CommentStepItems commentArgs={substeps.commentStepArgs} />
+  }
+
   if (substeps && substeps.substepType === 'magnet') {
     return (
       <ModuleStepItems

protocol-designer/src/file-data/helpers/index.ts

@@ -77,6 +77,8 @@ export const commandCreatorFromStepArgs = (
         StepGeneration.heaterShaker,
         args
       )
+    case 'comment':
+      return StepGeneration.curryCommandCreator(StepGeneration.comment, args)
   }
   // @ts-expect-error we've exhausted all command creators, but keeping this console warn
   // for when we impelement the next command creator

protocol-designer/src/form-types.ts

@@ -86,6 +86,7 @@ export type StepFieldName = string
 // | 'mix_y_position
 // TODO Ian 2019-01-16 factor out to some constants.js ? See #2926
 export type StepType =
+  | 'comment'
   | 'moveLabware'
   | 'moveLiquid'
   | 'mix'
@@ -96,6 +97,7 @@ export type StepType =
   | 'thermocycler'
   | 'heaterShaker'
 export const stepIconsByType: Record<StepType, IconName> = {
+  comment: 'comment',
   moveLabware: 'move-xy',
   moveLiquid: 'ot-transfer',
   mix: 'ot-mix',
@@ -248,6 +250,17 @@ export interface HydratedMoveLabwareFormData {
     useGripper: boolean
   }
 }
+
+export interface HydratedCommentFormData {
+  id: string
+  stepType: 'comment'
+  stepName: string
+  stepDetails?: string | null
+  fields: {
+    message: string
+  }
+}
+
 export interface HydratedMixFormDataLegacy {
   id: string
   stepType: 'mix'

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

@@ -29,6 +29,7 @@
   "module_and_slot": "{{moduleLongName}} in Slot {{slotName}}",
   "stepType": {
     "mix": "mix",
+    "comment": "comment",
     "moveLabware": "move labware",
     "moveLiquid": "transfer",
     "pause": "pause",

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

@@ -104,6 +104,7 @@
       "step_name": { "label": "Step Name" },
       "step_notes": { "label": "Step Notes" },
       "mix": { "label": "mix" },
+      "comment": { "label": "comment" },
       "pauseAction": {
         "options": {
           "untilResume": "Pause until told to resume",

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

@@ -181,6 +181,9 @@ const stepFieldHelperMap: Record<StepFieldName, StepFieldHelpers> = {
     ),
     castValue: Number,
   },
+  message: {
+    getErrors: composeErrors(requiredField),
+  },
   aspirate_labware: {
     getErrors: composeErrors(requiredField),
     hydrate: getLabwareOrAdditionalEquipmentEntity,

protocol-designer/src/steplist/formLevel/getDefaultsForStepType.ts

@@ -99,6 +99,10 @@ export function getDefaultsForStepType(
         blowout_flowRate: null,
       }
 
+    case 'comment':
+      return {
+        message: null,
+      }
     case 'moveLabware':
       return {
         labware: null,

protocol-designer/src/steplist/formLevel/getDisabledFields/index.ts

@@ -15,6 +15,7 @@ function _getDisabledFields(hydratedForm: HydratedFormdata): Set<string> {
     case 'heaterShaker':
       return getDisabledFieldsHeaterShaker(hydratedForm)
 
+    case 'comment':
     case 'pause':
     case 'magnet':
     case 'thermocycler':

protocol-designer/src/steplist/formLevel/stepFormToArgs/commentFormToArgs.ts

@@ -0,0 +1,16 @@
+import type { CommentArgs } from '@opentrons/step-generation'
+import type { HydratedCommentFormData } from '../../../form-types'
+
+export const commentFormToArgs = (
+  hydratedFormData: HydratedCommentFormData
+): CommentArgs => {
+  const { fields, stepName, stepDetails } = hydratedFormData
+  const { message } = fields
+
+  return {
+    commandCreatorFnName: 'comment',
+    description: stepDetails,
+    name: stepName,
+    message,
+  }
+}

protocol-designer/src/steplist/formLevel/stepFormToArgs/index.ts

@@ -8,9 +8,11 @@ import { thermocyclerFormToArgs } from './thermocyclerFormToArgs'
 import { heaterShakerFormToArgs } from './heaterShakerFormToArgs'
 import { moveLiquidFormToArgs } from './moveLiquidFormToArgs'
 import { moveLabwareFormToArgs } from './moveLabwareFormToArgs'
+import { commentFormToArgs } from './commentFormToArgs'
 import type { CommandCreatorArgs } from '@opentrons/step-generation'
 import type {
   FormData,
+  HydratedCommentFormData,
   HydratedHeaterShakerFormData,
   HydratedMagnetFormData,
   HydratedMixFormDataLegacy,
@@ -64,6 +66,14 @@ export const stepFormToArgs = (hydratedForm: FormData): StepArgs => {
       return moveLabwareFormToArgs(moveLabwareFormData)
     }
 
+    case 'comment': {
+      const commentFormData: HydratedCommentFormData = {
+        ...castForm,
+        fields: castForm,
+      }
+      return commentFormToArgs(commentFormData)
+    }
+
     default:
       console.warn(`stepFormToArgs not implemented for ${castForm.stepType}`)
       return null

protocol-designer/src/steplist/generateSubstepItem.ts

@@ -376,6 +376,13 @@ export function generateSubstepItem(
     }
   }
 
+  if (stepArgs.commandCreatorFnName === 'comment') {
+    return {
+      substepType: 'comment',
+      commentStepArgs: stepArgs,
+    }
+  }
+
   if (
     stepArgs.commandCreatorFnName === 'consolidate' ||
     stepArgs.commandCreatorFnName === 'distribute' ||

protocol-designer/src/steplist/types.ts

@@ -1,6 +1,7 @@
 import type { THERMOCYCLER_PROFILE, THERMOCYCLER_STATE } from '../constants'
 import type {
   CommandCreatorArgs,
+  CommentArgs,
   MoveLabwareArgs,
   PauseArgs,
   ThermocyclerProfileStepArgs,
@@ -113,6 +114,12 @@ export interface PauseSubstepItem {
   substepType: 'pause'
   pauseStepArgs: PauseArgs // Pause substeps use same data as processed form
 }
+
+export interface CommentSubstepItem {
+  substepType: 'comment'
+  commentStepArgs: CommentArgs
+}
+
 export interface MoveLabwareSubstepItem {
   substepType: 'moveLabware'
   moveLabwareArgs: MoveLabwareArgs // Move labware substeps use same data as processed form
@@ -165,6 +172,7 @@ export type SubstepItemData =
   | ThermocyclerStateSubstepItem
   | HeaterShakerSubstepItem
   | MoveLabwareSubstepItem
+  | CommentSubstepItem
 export type Substeps = Record<StepIdType, SubstepItemData | null | undefined>
 export type StepFormErrors = FormError[]
 export interface StepArgsAndErrors {

protocol-designer/src/ui/steps/selectors.ts

@@ -150,7 +150,10 @@ export const getHoveredStepLabware = createSelector(
     }
 
     // step types that have no labware that gets highlighted
-    if (!(stepArgs.commandCreatorFnName === 'delay')) {
+    if (
+      !(stepArgs.commandCreatorFnName === 'delay') &&
+      !(stepArgs.commandCreatorFnName === 'comment')
+    ) {
       console.warn(
         //  @ts-expect-error: should only reach this warning when new step is added and
         //  highlighted wells is not yet implemented

step-generation/src/commandCreators/index.ts

@@ -24,4 +24,5 @@ export {
   touchTip,
   moveLabware,
   moveToAddressableArea,
+  comment,
 } from './atomic'

step-generation/src/index.ts

@@ -3,6 +3,7 @@ export {
   waitForTemperature,
   blowout,
   consolidate,
+  comment,
   distribute,
   deactivateTemperature,
   delay,

step-generation/src/types.ts

@@ -437,6 +437,11 @@ export interface MoveLabwareArgs extends CommonArgs {
   newLocation: LabwareLocation
 }
 
+export interface CommentArgs extends CommonArgs {
+  commandCreatorFnName: 'comment'
+  message: string
+}
+
 export type CommandCreatorArgs =
   | ConsolidateArgs
   | DistributeArgs
@@ -452,6 +457,7 @@ export type CommandCreatorArgs =
   | ThermocyclerStateStepArgs
   | HeaterShakerArgs
   | MoveLabwareArgs
+  | CommentArgs
 
 export interface LocationLiquidState {
   [ingredGroup: string]: { volume: number }