fix(protocol-designer): form warnings always show in form (#16846)

clsoes RQA-3598

Author: jerader

protocol-designer/src/organisms/Alerts/FormAlerts.tsx

@@ -29,7 +29,7 @@ import type { ProfileFormError } from '../../steplist/formLevel/profileErrors'
 import type { MakeAlert } from './types'
 
 interface FormAlertsProps {
-  showFormErrorsAndWarnings: boolean
+  showFormErrors: boolean
   focusedField?: StepFieldName | null
   dirtyFields?: StepFieldName[]
   page: number
@@ -41,7 +41,7 @@ interface WarningType {
 }
 
 function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
-  const { showFormErrorsAndWarnings, focusedField, dirtyFields, page } = props
+  const { showFormErrors, focusedField, dirtyFields, page } = props
 
   const { t } = useTranslation('alert')
   const dispatch = useDispatch()
@@ -78,7 +78,7 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
     dirtyFields: dirtyFields ?? [],
     errors: formLevelErrorsForUnsavedForm,
     page,
-    showErrors: showFormErrorsAndWarnings,
+    showErrors: showFormErrors,
   })
 
   const profileItemsById: Record<string, ProfileItem> | null | undefined =
@@ -180,28 +180,19 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
     }
   }
 
-  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 ? (
+  return [...formErrors, ...timelineWarnings, ...formWarnings].length > 0 ? (
     <Flex
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing4}
       padding={`${SPACING.spacing16} ${SPACING.spacing16} 0`}
     >
+      {showFormErrors
+        ? formErrors.map((error, key) => makeAlert('error', error, key))
+        : null}
       {timelineWarnings.map((warning, key) =>
         makeAlert('warning', warning, key)
       )}
+      {formWarnings.map((warning, key) => makeAlert('warning', warning, key))}
     </Flex>
   ) : null
 }

protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx

@@ -37,7 +37,7 @@ describe('FormAlerts', () => {
     props = {
       focusedField: null,
       dirtyFields: [],
-      showFormErrorsAndWarnings: false,
+      showFormErrors: false,
       page: 0,
     }
     vi.mocked(getFormLevelErrorsForUnsavedForm).mockReturnValue([])
@@ -64,7 +64,6 @@ 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',

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -122,10 +122,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
   }))
   const timeline = useSelector(getRobotStateTimeline)
   const [toolboxStep, setToolboxStep] = useState<number>(0)
-  const [
-    showFormErrorsAndWarnings,
-    setShowFormErrorsAndWarnings,
-  ] = useState<boolean>(false)
+  const [showFormErrors, setShowFormErrors] = useState<boolean>(false)
   const [tab, setTab] = useState<LiquidHandlingTab>('aspirate')
   const visibleFormWarnings = getVisibleFormWarnings({
     focusedField,
@@ -140,7 +137,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
       ...dynamicFormLevelErrorsForUnsavedForm,
     ],
     page: toolboxStep,
-    showErrors: showFormErrorsAndWarnings,
+    showErrors: showFormErrors,
   })
   const [isRename, setIsRename] = useState<boolean>(false)
   const icon = stepIconsByType[formData.stepType]
@@ -187,7 +184,6 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
       })
     }
   }
-
   const handleSaveClick = (): void => {
     if (canSave) {
       const duration = new Date().getTime() - analyticsStartTime.getTime()
@@ -212,7 +208,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
       )
       dispatch(analyticsEvent(stepDuration))
     } else {
-      setShowFormErrorsAndWarnings(true)
+      setShowFormErrors(true)
       if (tab === 'aspirate' && isDispenseError && !isAspirateError) {
         setTab('dispense')
       }
@@ -227,9 +223,9 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
     if (isMultiStepToolbox && toolboxStep === 0) {
       if (!isErrorOnCurrentPage) {
         setToolboxStep(1)
-        setShowFormErrorsAndWarnings(false)
+        setShowFormErrors(false)
       } else {
-        setShowFormErrorsAndWarnings(true)
+        setShowFormErrors(true)
         handleScrollToTop()
       }
     } else {
@@ -279,7 +275,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
                 width="100%"
                 onClick={() => {
                   setToolboxStep(0)
-                  setShowFormErrorsAndWarnings(false)
+                  setShowFormErrors(false)
                 }}
               >
                 {i18n.format(t('shared:back'), 'capitalize')}
@@ -308,7 +304,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
           <FormAlerts
             focusedField={focusedField}
             dirtyFields={dirtyFields}
-            showFormErrorsAndWarnings={showFormErrorsAndWarnings}
+            showFormErrors={showFormErrors}
             page={toolboxStep}
           />
           <ToolsComponent
@@ -318,9 +314,9 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
               focusHandlers,
               toolboxStep,
               visibleFormErrors,
-              showFormErrors: showFormErrorsAndWarnings,
+              showFormErrors,
               focusedField,
-              setShowFormErrorsAndWarnings,
+              setShowFormErrors,
               tab,
               setTab,
             }}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx

@@ -56,7 +56,7 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
     propsForFields,
     formData,
     visibleFormErrors,
-    setShowFormErrorsAndWarnings,
+    setShowFormErrors,
     tab,
     setTab,
   } = props
@@ -101,7 +101,7 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
     isActive: tab === 'aspirate',
     onClick: () => {
       setTab('aspirate')
-      setShowFormErrorsAndWarnings?.(false)
+      setShowFormErrors?.(false)
     },
   }
   const dispenseTab = {
@@ -110,7 +110,7 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
     isActive: tab === 'dispense',
     onClick: () => {
       setTab('dispense')
-      setShowFormErrorsAndWarnings?.(false)
+      setShowFormErrors?.(false)
     },
   }
   const hideWellOrderField =

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PauseTools/index.tsx

@@ -34,11 +34,7 @@ import type { ChangeEvent } from 'react'
 import type { StepFormProps } from '../../types'
 
 export function PauseTools(props: StepFormProps): JSX.Element {
-  const {
-    propsForFields,
-    visibleFormErrors,
-    setShowFormErrorsAndWarnings,
-  } = props
+  const { propsForFields, visibleFormErrors, setShowFormErrors } = props
 
   const tempModuleLabwareOptions = useSelector(
     uiModuleSelectors.getTemperatureLabwareOptions
@@ -101,7 +97,7 @@ export function PauseTools(props: StepFormProps): JSX.Element {
         <RadioButton
           onChange={(e: ChangeEvent<any>) => {
             propsForFields.pauseAction.updateValue(e.currentTarget.value)
-            setShowFormErrorsAndWarnings?.(false)
+            setShowFormErrors?.(false)
           }}
           buttonLabel={t(
             'form:step_edit_form.field.pauseAction.options.untilResume'
@@ -113,7 +109,7 @@ export function PauseTools(props: StepFormProps): JSX.Element {
         <RadioButton
           onChange={(e: ChangeEvent<any>) => {
             propsForFields.pauseAction.updateValue(e.currentTarget.value)
-            setShowFormErrorsAndWarnings?.(false)
+            setShowFormErrors?.(false)
           }}
           buttonLabel={t(
             'form:step_edit_form.field.pauseAction.options.untilTime'
@@ -125,7 +121,7 @@ export function PauseTools(props: StepFormProps): JSX.Element {
         <RadioButton
           onChange={(e: ChangeEvent<any>) => {
             propsForFields.pauseAction.updateValue(e.currentTarget.value)
-            setShowFormErrorsAndWarnings?.(false)
+            setShowFormErrors?.(false)
           }}
           buttonLabel={t(
             'form:step_edit_form.field.pauseAction.options.untilTemperature'

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx

@@ -25,7 +25,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element {
     showFormErrors = true,
     visibleFormErrors,
     focusedField,
-    setShowFormErrorsAndWarnings,
+    setShowFormErrors,
   } = props
   const { t } = useTranslation('form')
 
@@ -49,7 +49,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element {
           onChange={() => {
             setContentType('thermocyclerState')
             propsForFields.thermocyclerFormType.updateValue('thermocyclerState')
-            setShowFormErrorsAndWarnings?.(false)
+            setShowFormErrors?.(false)
           }}
           isSelected={contentType === 'thermocyclerState'}
         />
@@ -64,7 +64,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element {
             propsForFields.thermocyclerFormType.updateValue(
               'thermocyclerProfile'
             )
-            setShowFormErrorsAndWarnings?.(false)
+            setShowFormErrors?.(false)
           }}
           isSelected={contentType === 'thermocyclerProfile'}
         />

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts

@@ -30,7 +30,7 @@ export interface StepFormProps {
   visibleFormErrors: StepFormErrors
   showFormErrors: boolean
   focusedField?: string | null
-  setShowFormErrorsAndWarnings?: React.Dispatch<React.SetStateAction<boolean>>
+  setShowFormErrors?: React.Dispatch<React.SetStateAction<boolean>>
   tab: LiquidHandlingTab
   setTab: React.Dispatch<React.SetStateAction<LiquidHandlingTab>>
 }