fix(errorbox): allow to close box, fix styling

src/components/form/DefaultFormErrorNotice.module.css

@@ -1,3 +1,7 @@
 .noticeBox {
     max-width: 640px;
 }
+
+.errorList {
+    padding: 0;
+}

src/components/form/DefaultFormErrorNotice.tsx

@@ -57,7 +57,7 @@ export const ValidationErrorNotice = ({
 
 export const ErrorList = ({ errors }: { errors: Record<string, string> }) => {
     return (
-        <ul style={{ padding: '0 16px' }}>
+        <ul className={css.errorList}>
             {Object.entries(errors).map(([key, value]) => {
                 return (
                     <li key={key} style={{ display: 'flex', gap: '8px' }}>

src/components/form/useFormStateErrors.ts

@@ -1,4 +1,5 @@
 import { FormState, FormSubscription } from 'final-form'
+import { useCallback, useEffect, useState } from 'react'
 import { useFormState } from 'react-final-form'
 
 const formStateSubscriptions = {
@@ -8,6 +9,7 @@ const formStateSubscriptions = {
     hasValidationErrors: true,
     hasSubmitErrors: true,
     dirtySinceLastSubmit: true,
+    modifiedSinceLastSubmit: true,
 } satisfies FormSubscription
 
 type FinalFormErrorProps = Pick<
@@ -30,6 +32,7 @@ export const useFormStateErrors = (): FormErrorState => {
         hasValidationErrors,
         submitError,
         submitFailed,
+        modifiedSinceLastSubmit,
     }: FinalFormErrorProps = useFormState({
         subscription: formStateSubscriptions,
     })
@@ -40,6 +43,7 @@ export const useFormStateErrors = (): FormErrorState => {
     const shouldShowErrors =
         (hasAnyError && submitFailed && !dirtySinceLastSubmit) ||
         (submitFailed && hasSubmitErrors)
+
     return {
         dirtySinceLastSubmit,
         hasSubmitErrors,
@@ -48,5 +52,6 @@ export const useFormStateErrors = (): FormErrorState => {
         submitError,
         submitFailed,
         validationErrors: errors,
+        modifiedSinceLastSubmit,
     }
 }

src/components/sectionedForm/SectionForm.module.css

@@ -47,13 +47,34 @@
     inset-block-end: 0;
     padding: var(--spacers-dp16);
     z-index: 1;
+    display: flex;
 }
-.bottomNoticeBox {
-    max-width: 640px;
+.errorNoticeBox {
+    min-width: 640px;
     max-height: 300px;
-    overflow-y: auto;
+    overflow: auto;
+}
+
+/* This basically selects the wrapper (inside UI) of the box-content*/
+.errorNoticeBox > div:nth-child(2) {
+    flex-grow: 1;
+    /* icon in title takes 24+12px, so calc this and fix overflow issues */
+    max-width: calc(100% - 36px);
+}
+.errorNoticeBoxHeader {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--fontSizes-dp16);
+    font-weight: bold;
+}
+
+.errorNoticeBoxHeader h6 {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 19px;
+    margin: 0px;
 }
 
-.bottomNoticeBox > div {
-    /* width: 100%; */
+.errorNoticeBoxContent {
+    overflow: auto;
 }

src/components/sectionedForm/SectionedFormErrorNotice.tsx

@@ -1,5 +1,6 @@
-import { NoticeBox } from '@dhis2/ui'
-import React from 'react'
+import i18n from '@dhis2/d2-i18n'
+import { IconCross16, NoticeBox } from '@dhis2/ui'
+import React, { useEffect, useState } from 'react'
 import { useSectionedFormContext } from '../../lib'
 import { useFormStateErrors } from '../form'
 import {
@@ -18,8 +19,14 @@ export function SectionedFormErrorNotice() {
 export function SectionedFormErrors() {
     const formStateErrors = useFormStateErrors()
     const context = useSectionedFormContext()
+    const [closed, setClosed] = useState(false)
 
-    if (!formStateErrors.shouldShowErrors) {
+    useEffect(() => {
+        // allow error box to show again if closed
+        setClosed(false)
+    }, [formStateErrors.modifiedSinceLastSubmit])
+
+    if (!formStateErrors.shouldShowErrors || !!closed) {
         return null
     }
 
@@ -30,16 +37,22 @@ export function SectionedFormErrors() {
             )
         )
         return (
-            <NoticeBox className={css.bottomNoticeBox} warning>
-                <div
-                    style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                    }}
-                >
-                    <div>Validation errors</div>
+            <NoticeBox className={css.errorNoticeBox} warning>
+                {/* minor hack, because title-prop only allows string, and we want to include a button*/}
+                <div className={css.errorNoticeBoxHeader}>
+                    <h6>{i18n.t('Validation errors')}</h6>
+                    <span onClick={() => setClosed((prev) => !prev)}>
+                        <IconCross16 />
+                    </span>
                 </div>
-                <div>
+                <div className={css.errorNoticeBoxContent}>
+                    <ErrorList errors={errorsWithlabels} />
+                    <ErrorList errors={errorsWithlabels} />
+                    <ErrorList errors={errorsWithlabels} />
+                    <ErrorList errors={errorsWithlabels} />
+                    <ErrorList errors={errorsWithlabels} />
+                    <ErrorList errors={errorsWithlabels} />
+                    <ErrorList errors={errorsWithlabels} />
                     <ErrorList errors={errorsWithlabels} />
                 </div>
             </NoticeBox>

src/components/sectionedForm/SectionedFormLayout.module.css

@@ -20,6 +20,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    position: relative;
 }
 
 .sidebar {

src/pages/dataSets/New.tsx

@@ -30,8 +30,8 @@ export const Component = () => {
                         >
                             <form onSubmit={handleSubmit}>
                                 <DataSetFormContents />
-                                <SectionedFormErrorNotice />
                             </form>
+                            <SectionedFormErrorNotice />
                         </SectionedFormLayout>
                     )
                 }}