fix(protocol-designer): set form field value if 1 option, add newLoca…

…tion error (#17490)

In `DropdownStepFormField`, if the length of `options` passed in changes
to 1, we need to set the form field value for this component to the
single value

Closes RQA-3955

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

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import {
@@ -79,6 +80,12 @@ export function DropdownStepFormField(
     }
   }
 
+  useEffect(() => {
+    if (options.length === 1) {
+      updateValue(options[0].value)
+    }
+  }, [options.length])
+
   return (
     <Flex padding={padding ?? SPACING.spacing16}>
       {options.length > 1 || options.length === 0 ? (
@@ -138,6 +145,11 @@ export function DropdownStepFormField(
               </Flex>
             </Flex>
           </ListItem>
+          {errorToShow != null ? (
+            <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.red50}>
+              {errorToShow}
+            </StyledText>
+          ) : null}
         </Flex>
       )}
     </Flex>

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

@@ -59,6 +59,15 @@ describe('MagnetTools', () => {
           updateValue: vi.fn(),
           value: 'engage',
         },
+        moduleId: {
+          onFieldFocus: vi.fn(),
+          onFieldBlur: vi.fn(),
+          errorToShow: null,
+          disabled: false,
+          name: 'magnetAction',
+          updateValue: vi.fn(),
+          value: 'engage',
+        },
         engageHeight: {
           onFieldFocus: vi.fn(),
           onFieldBlur: vi.fn(),