fix: errornotice after revert

src/components/form/DefaultFormErrorNotice.tsx

@@ -1,59 +1,44 @@
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox } from '@dhis2/ui'
-import { FormState } from 'final-form'
-import React, { useEffect, useRef } from 'react'
-import { useFormState } from 'react-final-form'
+import React from 'react'
 import css from './DefaultFormErrorNotice.module.css'
-
-const formStateSubscriptions = {
-    errors: true,
-    submitError: true,
-    submitFailed: true,
-    hasValidationErrors: true,
-    hasSubmitErrors: true,
-    dirtySinceLastSubmit: true,
-}
-
-type FormStateErrors = Pick<
-    FormState<unknown>,
-    keyof typeof formStateSubscriptions
->
+import { useFormStateErrors } from './useFormStateErrors'
 
 export function DefaultFormErrorNotice() {
-    const partialFormState: FormStateErrors = useFormState({
-        subscription: formStateSubscriptions,
-    })
-    // only show after trying to submit
-    if (
-        !partialFormState.submitFailed ||
-        (partialFormState.submitFailed && partialFormState.dirtySinceLastSubmit)
-    ) {
+    const formStateErrors = useFormStateErrors()
+
+    if (!formStateErrors.shouldShowErrors) {
         return null
     }
-
-    if (partialFormState.hasValidationErrors) {
-        return <ValidationErrors formStateErrors={partialFormState} />
+    if (formStateErrors.hasValidationErrors) {
+        return (
+            <ValidationErrorNotice>
+                <ErrorList
+                    errors={errorsWithLabels(
+                        formStateErrors.validationErrors || {}
+                    )}
+                />
+            </ValidationErrorNotice>
+        )
     }
 
-    if (partialFormState.hasSubmitErrors) {
-        return <ServerSubmitError formStateErrors={partialFormState} />
+    if (formStateErrors.hasSubmitErrors) {
+        return (
+            <ServerSubmitErrorNotice>
+                {formStateErrors.submitError}
+            </ServerSubmitErrorNotice>
+        )
     }
     return null
 }
 
-const ValidationErrors = ({
-    formStateErrors,
+export const ValidationErrorNotice = ({
+    children,
 }: {
-    formStateErrors: FormStateErrors
+    children: React.ReactNode
 }) => {
-    const ref = useRef<HTMLDivElement>(null)
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.scrollIntoView({ behavior: 'smooth' })
-        }
-    }, [])
     return (
-        <div ref={ref}>
+        <div>
             <NoticeBox
                 className={css.noticeBox}
                 warning
@@ -64,17 +49,13 @@ const ValidationErrors = ({
                         'Some fields have validation errors. Please fix them before saving.'
                     )}
                 </p>
-                {formStateErrors.errors && (
-                    <ErrorList errors={formStateErrors.errors} />
-                )}
+                {children}
             </NoticeBox>
         </div>
     )
 }
 
-const ErrorList = ({ errors }: { errors: Record<string, string> }) => {
-    const labels = getFieldLabelsBestEffort()
-
+export const ErrorList = ({ errors }: { errors: Record<string, string> }) => {
     return (
         <ul style={{ padding: '0 16px' }}>
             {Object.entries(errors).map(([key, value]) => {
@@ -85,7 +66,7 @@ const ErrorList = ({ errors }: { errors: Record<string, string> }) => {
                                 fontWeight: '600',
                             }}
                         >
-                            {labels.get(key) || key}:
+                            {key}:
                         </span>
                         <span>{JSON.stringify(value)}</span>
                     </li>
@@ -95,29 +76,33 @@ const ErrorList = ({ errors }: { errors: Record<string, string> }) => {
     )
 }
 
-const ServerSubmitError = ({
-    formStateErrors,
+export const ServerSubmitErrorNotice = ({
+    children,
 }: {
-    formStateErrors: FormStateErrors
+    children: React.ReactNode
 }) => {
-    const ref = useRef<HTMLDivElement>(null)
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.scrollIntoView({ behavior: 'smooth' })
-        }
-    }, [])
     return (
-        <div ref={ref}>
+        <div>
             <NoticeBox
+                className={css.noticeBox}
                 error
                 title={i18n.t('Something went wrong when submitting the form')}
             >
-                <p>{formStateErrors.submitError}</p>
+                <p>{children}</p>
             </NoticeBox>
         </div>
     )
 }
 
+const errorsWithLabels = (errors: Record<string, string>) => {
+    const labels = getFieldLabelsBestEffort()
+    return Object.fromEntries(
+        Object.entries(errors).map(([key, value]) => {
+            return [labels.get(key) || key, value]
+        })
+    )
+}
+
 /**
  * We don't have a good way to get the translated labels, so for now
  * we get these from the DOM. This is a best-effort approach.

src/components/form/index.ts

@@ -3,3 +3,4 @@ export { DefaultEditFormContents } from './DefaultFormContents'
 export * from './attributes'
 export * from './helpers'
 export * from './FormBase'
+export * from './useFormStateErrors'

src/pages/dataSets/New.tsx

@@ -4,6 +4,7 @@ import {
     SectionedFormLayout,
     DefaultSectionedFormFooter,
     DefaultSectionedFormSidebar,
+    SectionedFormErrorNotice,
 } from '../../components'
 import { SectionedFormProvider, SECTIONS_MAP, useOnSubmitNew } from '../../lib'
 import { DataSetFormContents } from './form/DataSetFormContents'
@@ -29,6 +30,7 @@ export const Component = () => {
                         >
                             <form onSubmit={handleSubmit}>
                                 <DataSetFormContents />
+                                <SectionedFormErrorNotice />
                             </form>
                         </SectionedFormLayout>
                     )