feat(Forms): add confirmRemove to Iterate.RemoveButton

dnbexperience · Nov 22, 2024 · 062874c · 062874c
1 parent bc46bf3
commit 062874c
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 16 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx
@@ -205,7 +205,7 @@ export const ArrayFromFormHandler = () => {
                 </Field.Composition>
 
                 <Iterate.Toolbar>
-                  <Iterate.RemoveButton />
+                  <Iterate.RemoveButton confirmRemove />
                 </Iterate.Toolbar>
               </Iterate.AnimatedContainer>
             </Iterate.Array>
@@ -549,7 +549,7 @@ export const WithArrayValidator = () => {
                 width="medium"
                 size="medium"
               />
-              <Iterate.RemoveButton />
+              <Iterate.RemoveButton confirmRemove />
             </Flex.Horizontal>
           </Iterate.Array>
 
@@ -593,7 +593,10 @@ export const FilledViewAndEditContainer = () => {
                   <Iterate.EditContainer.DoneButton />
                   <Iterate.EditContainer.CancelButton />
                 </Flex.Horizontal>
-                <Iterate.ViewContainer.RemoveButton left={false} />
+                <Iterate.ViewContainer.RemoveButton
+                  confirmRemove
+                  left={false}
+                />
               </Flex.Horizontal>
             </Iterate.Toolbar>
           )

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react'
 import classnames from 'classnames'
-import { Button } from '../../../../components'
+import { Button, Dialog } from '../../../../components'
 import { ButtonProps } from '../../../../components/Button'
 import IterateItemContext from '../IterateItemContext'
 import { useTranslation } from '../../hooks'
@@ -12,7 +12,9 @@ import {
 import { trash } from '../../../../icons'
 
 export type Props = ButtonProps &
-  DataValueReadWriteComponentProps<unknown[]>
+  DataValueReadWriteComponentProps<unknown[]> & {
+    confirmRemove?: boolean
+  }
 
 function RemoveButton(props: Props) {
   const iterateItemContext = useContext(IterateItemContext)
@@ -22,7 +24,7 @@ function RemoveButton(props: Props) {
     throw new Error('RemoveButton must be inside an Iterate.Array')
   }
 
-  const { text, children, className, ...restProps } = props
+  const { text, children, className, confirmRemove, ...restProps } = props
   const buttonProps = omitDataValueReadWriteProps(restProps)
   const translation = useTranslation().RemoveButton
   const textContent = text || children || translation.text
@@ -38,20 +40,36 @@ function RemoveButton(props: Props) {
     }
   }, [handleRemove, handleRemoveItem])
 
+  const triggerAttributes: ButtonProps = {
+    className: classnames(
+      'dnb-forms-iterate-remove-element-button',
+      className
+    ),
+    text: textContent,
+    variant: textContent ? 'tertiary' : 'secondary',
+    icon: trash,
+    icon_position: 'left',
+    ...buttonProps,
+  }
+
+  if (confirmRemove) {
+    return (
+      <Dialog
+        variant="confirmation"
+        triggerAttributes={triggerAttributes}
+        onConfirm={handleClick}
+      >
+        {translation.confirmRemoveText}
+      </Dialog>
+    )
+  }
+
   return (
     <Button
-      className={classnames(
-        'dnb-forms-iterate-remove-element-button',
-        className
-      )}
-      variant={textContent ? 'tertiary' : 'secondary'}
-      icon={trash}
-      icon_position="left"
+      {...triggerAttributes}
       on_click={handleClick}
       {...buttonProps}
-    >
-      {textContent}
-    </Button>
+    />
   )
 }
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButtonDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButtonDocs.ts
@@ -1,6 +1,11 @@
 import { PropertiesTableProps } from '../../../../shared/types'
 
 export const RemoveButtonProperties: PropertiesTableProps = {
+  confirmRemove: {
+    doc: 'Use `true` to show a confirmation dialog before removing the item.',
+    type: 'boolean',
+    status: 'optional',
+  },
   '[Button](/uilib/components/button/properties)': {
     doc: 'All button properties.',
     type: 'Various',

diff --git a/...ges/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/__tests__/RemoveButton.test.tsx b/...ges/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/__tests__/RemoveButton.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { render, fireEvent, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import IterateItemContext from '../../IterateItemContext'
 import RemoveButton from '../RemoveButton'
 import nbNO from '../../../constants/locales/nb-NO'
@@ -16,6 +17,10 @@ describe('RemoveButton', () => {
     </IterateItemContext.Provider>
   )
 
+  afterEach(() => {
+    handleRemove.mockReset()
+  })
+
   it('should call handleRemove when clicked inside an Iterate element', () => {
     render(<RemoveButton>Remove Button</RemoveButton>, { wrapper })
 
@@ -120,4 +125,32 @@ describe('RemoveButton', () => {
 
     expect(screen.getByText(remove)).toBeInTheDocument()
   })
+
+  describe('confirmRemove', () => {
+    it('should show Dialog before removing', async () => {
+      render(<RemoveButton confirmRemove />, { wrapper })
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(handleRemove).toHaveBeenCalledTimes(0)
+
+      await userEvent.click(
+        document.querySelector(
+          '.dnb-dialog__inner button.dnb-button--primary'
+        )
+      )
+
+      expect(handleRemove).toHaveBeenCalledTimes(1)
+    })
+
+    it('should show Dialog with translation before removing', async () => {
+      render(<RemoveButton confirmRemove />, { wrapper })
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(
+        document.querySelector('.dnb-dialog__inner')
+      ).toHaveTextContent(nb.confirmRemoveText)
+    })
+  })
 })
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
@@ -33,6 +33,7 @@ export default {
     },
     RemoveButton: {
       text: 'Remove',
+      confirmRemoveText: 'Are you sure you want to delete this?',
     },
     SectionViewContainer: {
       editButton: 'Edit',

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
@@ -32,6 +32,7 @@ export default {
     },
     RemoveButton: {
       text: 'Fjern',
+      confirmRemoveText: 'Er du sikker på at du vil slette dette?',
     },
     SectionViewContainer: {
       editButton: 'Endre',