From 88bef034624a2d95450c1cee8959889d8abd3dba Mon Sep 17 00:00:00 2001
From: Jethary <jethary@opentrons.com>
Date: Wed, 6 Nov 2024 11:53:32 -0500
Subject: [PATCH] fix(protocol-designer): single item dropdown update the value
 automatically

---
 .../molecules/DropdownStepFormField/index.tsx |  9 +++-
 .../StepForm/PipetteFields/LabwareField.tsx   |  1 -
 .../StepTools/HeaterShakerTools/index.tsx     | 37 +++-------------
 .../StepTools/TemperatureTools/index.tsx      | 43 ++++---------------
 4 files changed, 21 insertions(+), 69 deletions(-)

diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
index 869d272ddde..39da4a74ca9 100644
--- a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { useEffect } from 'react'
 import {
   COLORS,
   DIRECTION_COLUMN,
@@ -36,9 +37,15 @@ export function DropdownStepFormField(
   const { t } = useTranslation('tooltip')
   const availableOptionId = options.find(opt => opt.value === value)
 
+  useEffect(() => {
+    if (options.length === 1) {
+      updateValue(options[0].value)
+    }
+  }, [])
+
   return (
     <Flex padding={addPadding ? SPACING.spacing16 : 0}>
-      {options.length > 1 ? (
+      {options.length > 1 || options.length === 0 ? (
         <DropdownMenu
           tooltipText={tooltipContent != null ? t(`${tooltipContent}`) : null}
           width={width}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx
index f4c18fd695e..daa290efc18 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx
@@ -17,7 +17,6 @@ export function LabwareField(props: FieldProps): JSX.Element {
       ? [...options, ...disposalOptions]
       : [...options]
 
-  console.log('name', name)
   return (
     <DropdownStepFormField
       {...props}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
index 6a0315bb3bf..0abee471ef5 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
@@ -6,7 +5,6 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  ListItem,
   SPACING,
   StyledText,
 } from '@opentrons/components'
@@ -30,40 +28,15 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
   const { t } = useTranslation(['application', 'form', 'protocol_steps'])
   const moduleLabwareOptions = useSelector(getHeaterShakerLabwareOptions)
 
-  useEffect(() => {
-    if (moduleLabwareOptions.length === 1) {
-      propsForFields.moduleId.updateValue(moduleLabwareOptions[0].value)
-    }
-  }, [])
-
   const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
 
   return (
     <Flex flexDirection={DIRECTION_COLUMN}>
-      {moduleLabwareOptions.length > 1 ? (
-        <DropdownStepFormField
-          {...propsForFields.moduleId}
-          options={moduleLabwareOptions}
-          title={t('protocol_steps:module')}
-        />
-      ) : (
-        <Flex
-          flexDirection={DIRECTION_COLUMN}
-          padding={SPACING.spacing12}
-          gridGap={SPACING.spacing8}
-        >
-          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-            {t('protocol_steps:module')}
-          </StyledText>
-          <ListItem type="noActive">
-            <Flex padding={SPACING.spacing12}>
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {moduleLabwareOptions[0].name}
-              </StyledText>
-            </Flex>
-          </ListItem>
-        </Flex>
-      )}
+      <DropdownStepFormField
+        {...propsForFields.moduleId}
+        options={moduleLabwareOptions}
+        title={t('protocol_steps:module')}
+      />
       <Box borderBottom={`1px solid ${COLORS.grey30}`} />
       <Flex
         flexDirection={DIRECTION_COLUMN}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/TemperatureTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/TemperatureTools/index.tsx
index a0e0ca76e27..cc7eddf8c32 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/TemperatureTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/TemperatureTools/index.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import {
@@ -6,10 +5,8 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  ListItem,
   RadioButton,
   SPACING,
-  StyledText,
 } from '@opentrons/components'
 import {
   getTemperatureLabwareOptions,
@@ -19,6 +16,7 @@ import {
   DropdownStepFormField,
   InputStepFormField,
 } from '../../../../../../molecules'
+import type { ChangeEvent } from 'react'
 import type { StepFormProps } from '../../types'
 
 export function TemperatureTools(props: StepFormProps): JSX.Element {
@@ -28,38 +26,13 @@ export function TemperatureTools(props: StepFormProps): JSX.Element {
   const temperatureModuleIds = useSelector(getTemperatureModuleIds)
   const { setTemperature, moduleId } = formData
 
-  React.useEffect(() => {
-    if (moduleLabwareOptions.length === 1) {
-      propsForFields.moduleId.updateValue(moduleLabwareOptions[0].value)
-    }
-  }, [])
-
   return (
     <Flex flexDirection={DIRECTION_COLUMN}>
-      {moduleLabwareOptions.length > 1 ? (
-        <DropdownStepFormField
-          {...propsForFields.moduleId}
-          options={moduleLabwareOptions}
-          title={t('protocol_steps:module')}
-        />
-      ) : (
-        <Flex
-          flexDirection={DIRECTION_COLUMN}
-          padding={SPACING.spacing12}
-          gridGap={SPACING.spacing8}
-        >
-          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-            {t('protocol_steps:module')}
-          </StyledText>
-          <ListItem type="noActive">
-            <Flex padding={SPACING.spacing12}>
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {moduleLabwareOptions[0].name}
-              </StyledText>
-            </Flex>
-          </ListItem>
-        </Flex>
-      )}
+      <DropdownStepFormField
+        {...propsForFields.moduleId}
+        options={moduleLabwareOptions}
+        title={t('protocol_steps:module')}
+      />
       <Box borderBottom={`1px solid ${COLORS.grey30}`} />
       {temperatureModuleIds != null
         ? temperatureModuleIds.map(id =>
@@ -73,7 +46,7 @@ export function TemperatureTools(props: StepFormProps): JSX.Element {
                   <RadioButton
                     width="100%"
                     largeDesktopBorderRadius
-                    onChange={(e: React.ChangeEvent<any>) => {
+                    onChange={(e: ChangeEvent<any>) => {
                       propsForFields.setTemperature.updateValue(
                         e.currentTarget.value
                       )
@@ -96,7 +69,7 @@ export function TemperatureTools(props: StepFormProps): JSX.Element {
                   <RadioButton
                     width="100%"
                     largeDesktopBorderRadius
-                    onChange={(e: React.ChangeEvent<any>) => {
+                    onChange={(e: ChangeEvent<any>) => {
                       propsForFields.setTemperature.updateValue(
                         e.currentTarget.value
                       )