Add back the error notification

dnbexperience · Sep 11, 2024 · 590eb8e · 590eb8e
1 parent b85792c
commit 590eb8e
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 9 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx
@@ -15,7 +15,7 @@ Change log for the Eufemia Forms extension.
 
 ## v10.48
 
-- Make [Iterate.Toolbar](/uilib/extensions/forms/Iterate/Toolbar/) customizable when used inside [Iterate.Array](/uilib/extensions/forms/Iterate/Array/).
+- Make [Iterate.Toolbar](/uilib/extensions/forms/Iterate/Toolbar/) customizable.
 
 ## v10.46
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/CancelButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/CancelButton.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useContext, useEffect, useRef } from 'react'
 import { Button } from '../../../../components'
 import useTranslation from '../../hooks/useTranslation'
 import IterateItemContext from '../IterateItemContext'
+import ToolbarContext from '../Toolbar/ToolbarContext'
 import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'
 import { close } from '../../../../icons'
 import { ButtonProps } from '../../../../components/Button'
@@ -20,8 +21,9 @@ export default function EditToolbarTools(props: Props) {
     isNew,
     index,
   } = useContext(IterateItemContext) || {}
-  const { hasError, setShowBoundaryErrors } =
+  const { hasError, hasVisibleError, setShowBoundaryErrors } =
     useContext(FieldBoundaryContext) || {}
+  const { setShowError } = useContext(ToolbarContext) || {}
 
   const { cancelButton, removeButton } =
     useTranslation().IterateEditContainer
@@ -39,16 +41,22 @@ export default function EditToolbarTools(props: Props) {
   const cancelHandler = useCallback(() => {
     if (hasError && initialContainerMode === 'auto') {
       setShowBoundaryErrors?.(true)
+      if (hasVisibleError) {
+        setShowError(true)
+      }
     } else {
       restoreOriginalValue?.(valueBackupRef.current)
+      setShowError(false)
       setShowBoundaryErrors?.(false)
       switchContainerMode?.('view')
     }
   }, [
     hasError,
+    hasVisibleError,
     initialContainerMode,
     restoreOriginalValue,
     setShowBoundaryErrors,
+    setShowError,
     switchContainerMode,
   ])
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/DoneButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/DoneButton.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useContext, useEffect, useRef } from 'react'
 import { Button } from '../../../../components'
 import useTranslation from '../../hooks/useTranslation'
 import IterateItemContext from '../IterateItemContext'
+import ToolbarContext from '../Toolbar/ToolbarContext'
 import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'
 import PushContainerContext from '../PushContainer/PushContainerContext'
 import { check } from '../../../../icons'
@@ -12,9 +13,11 @@ type Props = ButtonProps
 export default function DoneButton(props: Props) {
   const { switchContainerMode, containerMode, arrayValue, index } =
     useContext(IterateItemContext) || {}
-  const { hasError, setShowBoundaryErrors } =
+  const { hasError, hasVisibleError, setShowBoundaryErrors } =
     useContext(FieldBoundaryContext) || {}
   const { commitHandleRef } = useContext(PushContainerContext) || {}
+  useContext(FieldBoundaryContext) || {}
+  const { setShowError } = useContext(ToolbarContext) || {}
 
   const { doneButton } = useTranslation().IterateEditContainer
   const valueBackupRef = useRef<unknown>()
@@ -31,8 +34,12 @@ export default function DoneButton(props: Props) {
   const doneHandler = useCallback(() => {
     if (hasError) {
       setShowBoundaryErrors?.(true)
+      if (hasVisibleError) {
+        setShowError(true)
+      }
     } else {
       setShowBoundaryErrors?.(false)
+      setShowError(false)
       if (commitHandleRef) {
         commitHandleRef.current?.()
       } else {
@@ -42,7 +49,9 @@ export default function DoneButton(props: Props) {
   }, [
     commitHandleRef,
     hasError,
+    hasVisibleError,
     setShowBoundaryErrors,
+    setShowError,
     switchContainerMode,
   ])
 

diff --git a/...ufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx b/...ufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx
@@ -521,6 +521,60 @@ describe('EditContainer and ViewContainer', () => {
     expect(document.querySelector('.dnb-form-status')).toBeInTheDocument()
   })
 
+  it('should show "errorInContainer" message', async () => {
+    render(
+      <Form.Handler>
+        <Iterate.Array value={[null]}>
+          <Iterate.EditContainer>
+            <Field.String required itemPath="/" />
+          </Iterate.EditContainer>
+        </Iterate.Array>
+      </Form.Handler>
+    )
+
+    expect(
+      document.querySelector('.dnb-form-status')
+    ).not.toBeInTheDocument()
+
+    const [doneButton, cancelButton] = Array.from(
+      document.querySelectorAll('button')
+    )
+    const input = document.querySelector('input')
+    fireEvent.submit(input)
+
+    expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(1)
+
+    fireEvent.submit(input)
+
+    expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(1)
+
+    await userEvent.click(doneButton)
+
+    expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(2)
+
+    await userEvent.type(input, 'x{Backspace}')
+
+    await waitFor(() => {
+      expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(0)
+    })
+
+    await userEvent.click(cancelButton)
+
+    // Expect 2, because we already have an error in the field
+    expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(2)
+    expect(
+      document.querySelectorAll('.dnb-form-status')[1]
+    ).toHaveTextContent(
+      nbNO['nb-NO'].IterateEditContainer.errorInContainer
+    )
+
+    await userEvent.type(input, 'x')
+
+    await waitFor(() => {
+      expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(0)
+    })
+  })
+
   it('should open in "edit" mode without focusing', async () => {
     const containerMode = {}
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx
@@ -1,9 +1,12 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { Hr } from '../../../../elements'
-import { Flex, Space } from '../../../../components'
+import { Flex, FormStatus, Space } from '../../../../components'
 import { SpaceAllProps } from '../../../../components/Space'
 import IterateItemContext from '../IterateItemContext'
+import ToolbarContext from './ToolbarContext'
+import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'
+import { useTranslation } from '../../hooks'
 
 export type ToolbarParams = {
   index: number
@@ -23,7 +26,17 @@ export default function Toolbar({
     index,
     value,
     arrayValue: items,
-  } = useContext(IterateItemContext)
+  } = useContext(IterateItemContext) || {}
+  const { errorInContainer } = useTranslation().IterateEditContainer
+  const { hasError, hasVisibleError } =
+    useContext(FieldBoundaryContext) || {}
+  const [showError, setShowError] = useState(false)
+
+  useEffect(() => {
+    if (showError && !hasError) {
+      setShowError(false)
+    }
+  }, [hasError, showError])
 
   if (typeof children === 'function') {
     children = children?.({ index, items, value })
@@ -41,9 +54,19 @@ export default function Toolbar({
     >
       <Hr space={0} />
 
-      <Flex.Horizontal top="x-small" gap="large">
-        {children}
-      </Flex.Horizontal>
+      <ToolbarContext.Provider value={{ setShowError }}>
+        <Flex.Horizontal top="x-small" gap="large">
+          {children}
+        </Flex.Horizontal>
+      </ToolbarContext.Provider>
+
+      <FormStatus
+        show={showError && hasVisibleError}
+        shellSpace={{ top: 'x-small' }}
+        no_animation={false}
+      >
+        {errorInContainer}
+      </FormStatus>
     </Space>
   )
 }

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/ToolbarContext.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/ToolbarContext.ts
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export interface ToolbarContextState {
+  setShowError?: (showError: boolean) => void
+}
+
+const ToolbarContext = React.createContext<
+  ToolbarContextState | undefined
+>(undefined)
+
+export default ToolbarContext
diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts
@@ -48,6 +48,7 @@ export default {
       removeButton: 'Remove',
       doneButton: 'Done',
       cancelButton: 'Cancel',
+      errorInContainer: 'Please correct the errors above',
     },
     IteratePushContainer: {
       createButton: 'Add',

diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts
@@ -48,6 +48,7 @@ export default {
       removeButton: 'Fjern',
       doneButton: 'Ferdig',
       cancelButton: 'Avbryt',
+      errorInContainer: 'Feilene ovenfor må rettes',
     },
     IteratePushContainer: {
       createButton: 'Legg til',