From 66c8a68b223ceead6a7d7344ad01519890955aa9 Mon Sep 17 00:00:00 2001
From: Jethary Rader <66035149+jerader@users.noreply.github.com>
Date: Mon, 8 Jul 2024 12:15:33 -0400
Subject: [PATCH] feat(protocol-designer, step-generation): add comment to step
 form (#15577)

closes RAUT-1051
---
 .../src/components/StepCreationButton.tsx     |  2 ++
 .../StepEditForm/StepEditFormComponent.tsx    |  2 ++
 .../StepEditForm/forms/CommentForm/index.tsx  | 34 +++++++++++++++++++
 .../components/StepEditForm/forms/index.ts    |  1 +
 .../components/steplist/CommentStepItems.tsx  | 24 +++++++++++++
 .../src/components/steplist/StepItem.tsx      |  5 +++
 .../src/file-data/helpers/index.ts            |  2 ++
 protocol-designer/src/form-types.ts           | 13 +++++++
 .../src/localization/en/application.json      |  1 +
 .../src/localization/en/form.json             |  1 +
 .../src/steplist/fieldLevel/index.ts          |  3 ++
 .../formLevel/getDefaultsForStepType.ts       |  4 +++
 .../formLevel/getDisabledFields/index.ts      |  1 +
 .../stepFormToArgs/commentFormToArgs.ts       | 16 +++++++++
 .../formLevel/stepFormToArgs/index.ts         | 10 ++++++
 .../src/steplist/generateSubstepItem.ts       |  7 ++++
 protocol-designer/src/steplist/types.ts       |  8 +++++
 protocol-designer/src/ui/steps/selectors.ts   |  5 ++-
 step-generation/src/commandCreators/index.ts  |  1 +
 step-generation/src/index.ts                  |  1 +
 step-generation/src/types.ts                  |  6 ++++
 21 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 protocol-designer/src/components/StepEditForm/forms/CommentForm/index.tsx
 create mode 100644 protocol-designer/src/components/steplist/CommentStepItems.tsx
 create mode 100644 protocol-designer/src/steplist/formLevel/stepFormToArgs/commentFormToArgs.ts

diff --git a/protocol-designer/src/components/StepCreationButton.tsx b/protocol-designer/src/components/StepCreationButton.tsx
index 16eb5fcacdf..a0aac17ceff 100644
--- a/protocol-designer/src/components/StepCreationButton.tsx
+++ b/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,
diff --git a/protocol-designer/src/components/StepEditForm/StepEditFormComponent.tsx b/protocol-designer/src/components/StepEditForm/StepEditFormComponent.tsx
index c19e958382c..c740475bfcc 100644
--- a/protocol-designer/src/components/StepEditForm/StepEditFormComponent.tsx
+++ b/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 {
diff --git a/protocol-designer/src/components/StepEditForm/forms/CommentForm/index.tsx b/protocol-designer/src/components/StepEditForm/forms/CommentForm/index.tsx
new file mode 100644
index 00000000000..277810c5bcb
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/protocol-designer/src/components/StepEditForm/forms/index.ts b/protocol-designer/src/components/StepEditForm/forms/index.ts
index 238e38e21d4..eb70ebc37e6 100644
--- a/protocol-designer/src/components/StepEditForm/forms/index.ts
+++ b/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'
diff --git a/protocol-designer/src/components/steplist/CommentStepItems.tsx b/protocol-designer/src/components/steplist/CommentStepItems.tsx
new file mode 100644
index 00000000000..8e4e4574b0f
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/protocol-designer/src/components/steplist/StepItem.tsx b/protocol-designer/src/components/steplist/StepItem.tsx
index c708f240b4b..6207b543223 100644
--- a/protocol-designer/src/components/steplist/StepItem.tsx
+++ b/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
diff --git a/protocol-designer/src/file-data/helpers/index.ts b/protocol-designer/src/file-data/helpers/index.ts
index f0dcd59b0db..72691c3d38e 100644
--- a/protocol-designer/src/file-data/helpers/index.ts
+++ b/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
diff --git a/protocol-designer/src/form-types.ts b/protocol-designer/src/form-types.ts
index 5c69e549788..eee523918b9 100644
--- a/protocol-designer/src/form-types.ts
+++ b/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'
diff --git a/protocol-designer/src/localization/en/application.json b/protocol-designer/src/localization/en/application.json
index d5889db6194..96a4f90e8e0 100644
--- a/protocol-designer/src/localization/en/application.json
+++ b/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",
diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json
index ce2fda12bc5..4c91e48028a 100644
--- a/protocol-designer/src/localization/en/form.json
+++ b/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",
diff --git a/protocol-designer/src/steplist/fieldLevel/index.ts b/protocol-designer/src/steplist/fieldLevel/index.ts
index b3551819fab..cd36ff69c41 100644
--- a/protocol-designer/src/steplist/fieldLevel/index.ts
+++ b/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,
diff --git a/protocol-designer/src/steplist/formLevel/getDefaultsForStepType.ts b/protocol-designer/src/steplist/formLevel/getDefaultsForStepType.ts
index 23ee6d1d5e3..915757e48cd 100644
--- a/protocol-designer/src/steplist/formLevel/getDefaultsForStepType.ts
+++ b/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,
diff --git a/protocol-designer/src/steplist/formLevel/getDisabledFields/index.ts b/protocol-designer/src/steplist/formLevel/getDisabledFields/index.ts
index bd4a8691e39..7fdd2a93ed9 100644
--- a/protocol-designer/src/steplist/formLevel/getDisabledFields/index.ts
+++ b/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':
diff --git a/protocol-designer/src/steplist/formLevel/stepFormToArgs/commentFormToArgs.ts b/protocol-designer/src/steplist/formLevel/stepFormToArgs/commentFormToArgs.ts
new file mode 100644
index 00000000000..15d71d56034
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/protocol-designer/src/steplist/formLevel/stepFormToArgs/index.ts b/protocol-designer/src/steplist/formLevel/stepFormToArgs/index.ts
index ed392b9a1ea..3fb774fcb91 100644
--- a/protocol-designer/src/steplist/formLevel/stepFormToArgs/index.ts
+++ b/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
diff --git a/protocol-designer/src/steplist/generateSubstepItem.ts b/protocol-designer/src/steplist/generateSubstepItem.ts
index 94fd68d77d2..99716d53cd2 100644
--- a/protocol-designer/src/steplist/generateSubstepItem.ts
+++ b/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' ||
diff --git a/protocol-designer/src/steplist/types.ts b/protocol-designer/src/steplist/types.ts
index f762d348847..06d797ddac0 100644
--- a/protocol-designer/src/steplist/types.ts
+++ b/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 {
diff --git a/protocol-designer/src/ui/steps/selectors.ts b/protocol-designer/src/ui/steps/selectors.ts
index 205137d1003..fe7a7ee4b3d 100644
--- a/protocol-designer/src/ui/steps/selectors.ts
+++ b/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
diff --git a/step-generation/src/commandCreators/index.ts b/step-generation/src/commandCreators/index.ts
index 9b4a07d8cba..f1192ab6383 100644
--- a/step-generation/src/commandCreators/index.ts
+++ b/step-generation/src/commandCreators/index.ts
@@ -24,4 +24,5 @@ export {
   touchTip,
   moveLabware,
   moveToAddressableArea,
+  comment,
 } from './atomic'
diff --git a/step-generation/src/index.ts b/step-generation/src/index.ts
index 7bc396f6187..b3ed62aaa09 100644
--- a/step-generation/src/index.ts
+++ b/step-generation/src/index.ts
@@ -3,6 +3,7 @@ export {
   waitForTemperature,
   blowout,
   consolidate,
+  comment,
   distribute,
   deactivateTemperature,
   delay,
diff --git a/step-generation/src/types.ts b/step-generation/src/types.ts
index e43898633ad..149d7060316 100644
--- a/step-generation/src/types.ts
+++ b/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 }