fix(protocol-designer): timeline warnings appear when reopening form (#…

…16632) closes RQA-3450
Opentrons · Oct 30, 2024 · cbadc4d · cbadc4d
1 parent 094be6e
commit cbadc4d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/protocol-designer/src/organisms/Alerts/FormAlerts.tsx b/protocol-designer/src/organisms/Alerts/FormAlerts.tsx
@@ -28,12 +28,14 @@ import type { ProfileFormError } from '../../steplist/formLevel/profileErrors'
 import type { MakeAlert } from './types'
 
 interface FormAlertsProps {
+  showFormErrorsAndWarnings: boolean
   focusedField?: StepFieldName | null
   dirtyFields?: StepFieldName[]
 }
 
 function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
-  const { focusedField, dirtyFields } = props
+  const { showFormErrorsAndWarnings, focusedField, dirtyFields } = props
+
   const { t } = useTranslation('alert')
   const dispatch = useDispatch()
   const formLevelErrorsForUnsavedForm = useSelector(
@@ -120,17 +122,13 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
       </Banner>
     </Flex>
   )
+
   const formErrors = [
-    ...visibleFormErrors.reduce((acc, error) => {
-      return error.showAtForm ?? true
-        ? {
-            ...acc,
-            title: error.title,
-            description: error.body || null,
-            showAtForm: error.showAtForm ?? true,
-          }
-        : acc
-    }, []),
+    ...visibleFormErrors.map(error => ({
+      title: error.title,
+      description: error.body ?? null,
+      showAtForm: error.showAtForm ?? true,
+    })),
     ...visibleDynamicFieldFormErrors.map(error => ({
       title: error.title,
       description: error.body || null,
@@ -161,14 +159,26 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
       )
     }
   }
-  return [...formErrors, ...formWarnings, ...timelineWarnings].length > 0 ? (
+
+  if (showFormErrorsAndWarnings) {
+    return [...formErrors, ...formWarnings].length > 0 ? (
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing4}
+        padding={`${SPACING.spacing16} ${SPACING.spacing16} 0`}
+      >
+        {formErrors.map((error, key) => makeAlert('error', error, key))}
+        {formWarnings.map((warning, key) => makeAlert('warning', warning, key))}
+      </Flex>
+    ) : null
+  }
+
+  return timelineWarnings.length > 0 ? (
     <Flex
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing4}
       padding={`${SPACING.spacing16} ${SPACING.spacing16} 0`}
     >
-      {formErrors.map((error, key) => makeAlert('error', error, key))}
-      {formWarnings.map((warning, key) => makeAlert('warning', warning, key))}
       {timelineWarnings.map((warning, key) =>
         makeAlert('warning', warning, key)
       )}

diff --git a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx
@@ -37,6 +37,7 @@ describe('FormAlerts', () => {
     props = {
       focusedField: null,
       dirtyFields: [],
+      showFormErrorsAndWarnings: false,
     }
     vi.mocked(getFormLevelErrorsForUnsavedForm).mockReturnValue([])
     vi.mocked(getFormWarningsForSelectedStep).mockReturnValue([])
@@ -62,6 +63,7 @@ describe('FormAlerts', () => {
     expect(vi.mocked(dismissTimelineWarning)).toHaveBeenCalled()
   })
   it('renders a form level warning that is dismissible', () => {
+    props.showFormErrorsAndWarnings = true
     vi.mocked(getFormWarningsForSelectedStep).mockReturnValue([
       {
         type: 'TIP_POSITIONED_LOW_IN_TUBE',

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -244,9 +244,11 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
           </Flex>
         }
       >
-        {showFormErrorsAndWarnings ? (
-          <FormAlerts focusedField={focusedField} dirtyFields={dirtyFields} />
-        ) : null}
+        <FormAlerts
+          focusedField={focusedField}
+          dirtyFields={dirtyFields}
+          showFormErrorsAndWarnings={showFormErrorsAndWarnings}
+        />
         <ToolsComponent
           {...{
             formData,

diff --git a/...ol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx b/...ol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx
@@ -128,7 +128,7 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
         nozzles={String(propsForFields.nozzles.value) ?? null}
         hasFormError={
           visibleFormErrors?.some(error =>
-            error.dependentFields.includes('aspirate_labware')
+            error.dependentFields.includes('aspirate_wells')
           ) ?? false
         }
       />