fix(protocol-designer): single item dropdown update the value automat…

…ically
Opentrons · Nov 6, 2024 · 88bef03 · 88bef03
1 parent f66ffb9
commit 88bef03
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 69 deletions.
diff --git 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
@@ -17,7 +17,6 @@ export function LabwareField(props: FieldProps): JSX.Element {
       ? [...options, ...disposalOptions]
       : [...options]
 
-  console.log('name', name)
   return (
     <DropdownStepFormField
       {...props}

diff --git a/...-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx b/...-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
@@ -1,12 +1,10 @@
-import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   Box,
   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/...l-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/TemperatureTools/index.tsx b/...l-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/TemperatureTools/index.tsx
@@ -1,15 +1,12 @@
-import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import {
   Box,
   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
                       )