feedback fixes + tests

packages/core/admin/admin/src/translations/en.json

@@ -210,9 +210,11 @@
   "app.components.BlockLink.documentation": "Read the documentation",
   "app.components.BlockLink.documentation.content": "Discover the concepts, reference guides and tutorials.",
   "app.components.Button.cancel": "Cancel",
+  "app.components.Button.confirm": "Confirm",
   "app.components.Button.reset": "Reset",
   "app.components.Button.save": "Save",
   "app.components.ComingSoonPage.comingSoon": "Coming soon",
+  "app.components.ConfirmDialog.title": "Confirmation",
   "app.components.DownloadInfo.download": "Download in progress...",
   "app.components.DownloadInfo.text": "This could take a minute. Thanks for your patience.",
   "app.components.EmptyAttributes.title": "There are no fields yet",

packages/core/helper-plugin/lib/src/components/ConfirmDialog/ConfirmDialog.stories.mdx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs';
 import { Button } from '@strapi/parts/Button';
+import CheckIcon from '@strapi/icons/CheckIcon';
+import HelpIcon from '@strapi/icons/HelpIcon';
 import ConfirmDialog from './index';
 
 <Meta title="components/ConfirmDialog" />
@@ -43,7 +45,40 @@ TODO
       return (
         <>
           <Button onClick={handleToggle}>Click me</Button>
-          <ConfirmDialog isConfirmButtonLoading={true} isVisible={dialogOpen} onToggleDialog={handleToggle} onConfirm={handleDelete} />
+          <ConfirmDialog 
+            isConfirmButtonLoading={true} 
+            isVisible={dialogOpen} 
+            onToggleDialog={handleToggle} 
+            onConfirm={handleDelete} 
+          />
+        </>
+      );
+    }}
+  </Story>
+  <Story name="confirm-custom">
+    {() => {
+      const [dialogOpen, setDialogOpen] = useState(false);
+      const handleToggle = () => setDialogOpen(prev => !prev);
+      const handleDelete = () => {
+        handleToggle();
+        alert('you deleted your item');
+      };
+      const isLoading = false;
+      return (
+        <>
+          <Button onClick={handleToggle}>Click me</Button>
+          <ConfirmDialog 
+            bodyText={{id: 'app.components', defaultMessage: 'Are you sure you want to unpublish it?'}}
+            iconBody={<HelpIcon/>}
+            iconRightButton={<CheckIcon/>}
+            isConfirmButtonLoading={isLoading} 
+            isVisible={dialogOpen} 
+            onToggleDialog={handleToggle} 
+            onConfirm={handleDelete} 
+            title={{id: 'app.components.ConfirmDialog.title', defaultMessage: 'Confirmation'}}
+            rightButtonText={{id: 'app.components.Button.save', defaultMessage: 'Save'}}
+            variantRightButton='success-light'
+          />
         </>
       );
     }}

packages/core/helper-plugin/lib/src/components/ConfirmDialog/index.js

@@ -9,7 +9,19 @@ import { Button } from '@strapi/parts/Button';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
 import DeleteIcon from '@strapi/icons/DeleteIcon';
 
-const ConfirmDialog = ({ isConfirmButtonLoading, onToggleDialog, onConfirm, isVisible }) => {
+const ConfirmDialog = ({
+  bodyText,
+  iconRightButton,
+  iconBody,
+  isConfirmButtonLoading,
+  isVisible,
+  leftButtonText,
+  onToggleDialog,
+  onConfirm,
+  rightButtonText,
+  title,
+  variantRightButton,
+}) => {
   const { formatMessage } = useIntl();
 
   if (!isVisible) {
@@ -20,19 +32,19 @@ const ConfirmDialog = ({ isConfirmButtonLoading, onToggleDialog, onConfirm, isVi
     <Dialog
       onClose={onToggleDialog}
       title={formatMessage({
-        id: 'Settings.webhooks.confirmation',
+        id: title.id,
-        defaultMessage: 'Confirmation',
+        defaultMessage: title.defaultMessage,
       })}
       labelledBy="confirmation"
       describedBy="confirm-description"
     >
-      <DialogBody icon={<AlertWarningIcon />}>
+      <DialogBody icon={iconBody}>
         <Stack size={2}>
           <Row justifyContent="center">
             <Text id="confirm-description">
               {formatMessage({
-                id: 'Settings.webhooks.confirmation.delete',
+                id: bodyText.id,
-                defaultMessage: 'Are you sure you want to delete this?',
+                defaultMessage: bodyText.defaultMessage,
               })}
             </Text>
           </Row>
@@ -41,18 +53,24 @@ const ConfirmDialog = ({ isConfirmButtonLoading, onToggleDialog, onConfirm, isVi
       <DialogFooter
         startAction={
           <Button onClick={onToggleDialog} variant="tertiary">
-            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
+            {formatMessage({
+              id: leftButtonText.id,
+              defaultMessage: leftButtonText.defaultMessage,
+            })}
           </Button>
         }
         endAction={
           <Button
             onClick={onConfirm}
-            variant="danger-light"
+            variant={variantRightButton}
-            startIcon={<DeleteIcon />}
+            startIcon={iconRightButton}
             id="confirm-delete"
             loading={isConfirmButtonLoading}
           >
-            {formatMessage({ id: 'app.components.Button.confirm', defaultMessage: 'Confirm' })}
+            {formatMessage({
+              id: rightButtonText.id,
+              defaultMessage: rightButtonText.defaultMessage,
+            })}
           </Button>
         }
       />
@@ -61,14 +79,52 @@ const ConfirmDialog = ({ isConfirmButtonLoading, onToggleDialog, onConfirm, isVi
 };
 
 ConfirmDialog.defaultProps = {
+  bodyText: {
+    id: 'components.popUpWarning.message',
+    defaultMessage: 'Are you sure you want to delete this?',
+  },
+  iconBody: <AlertWarningIcon />,
+  iconRightButton: <DeleteIcon />,
   isConfirmButtonLoading: false,
+  leftButtonText: {
+    id: 'app.components.Button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  rightButtonText: {
+    id: 'app.components.Button.confirm',
+    defaultMessage: 'Confirm',
+  },
+  title: {
+    id: 'app.components.ConfirmDialog.title',
+    defaultMessage: 'Confirmation',
+  },
+  variantRightButton: 'danger-light',
 };
 
 ConfirmDialog.propTypes = {
+  bodyText: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  iconBody: PropTypes.node,
+  iconRightButton: PropTypes.node,
   isConfirmButtonLoading: PropTypes.bool,
   isVisible: PropTypes.bool.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onToggleDialog: PropTypes.func.isRequired,
+  leftButtonText: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  rightButtonText: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  title: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  variantRightButton: PropTypes.string,
 };
 
 export default ConfirmDialog;

packages/core/helper-plugin/lib/src/components/ConfirmDialog/tests/index.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { ThemeProvider, lightTheme } from '@strapi/parts';
+import ConfirmDialog from '../index';
+
+const App = (
+  <ThemeProvider theme={lightTheme}>
+    <IntlProvider locale="en" messages={{ en: {} }} textComponent="span">
+      <ConfirmDialog isVisible={true} onConfirm={jest.fn()} onToggleDialog={jest.fn()} />
+    </IntlProvider>
+  </ThemeProvider>
+);
+
+describe('ConfirmDialog', () => {
+  it('renders and matches the snapshot', async () => {
+    const {
+      container: { firstChild },
+    } = render(App);
+
+    expect(firstChild).toMatchInlineSnapshot(`
+      .c0 {
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
+      <div
+        class="c0"
+      >
+        <p
+          aria-live="polite"
+          id="live-region-log"
+          role="log"
+        />
+        <p
+          aria-live="polite"
+          id="live-region-status"
+          role="status"
+        />
+        <p
+          aria-live="assertive"
+          id="live-region-alert"
+          role="alert"
+        />
+      </div>
+    `);
+  });
+
+  it('renders and matches the snapshot', async () => {
+    const {
+      container: { firstChild },
+    } = render(App);
+
+    await waitFor(() => {
+      expect(screen.getByText('Are you sure you want to delete this?')).toBeInTheDocument();
+    });
+  });
+
+  it('renders and matches the snapshot', async () => {
+    const AppCustom = (
+      <ThemeProvider theme={lightTheme}>
+        <IntlProvider locale="en" messages={{ en: {} }} textComponent="span">
+          <ConfirmDialog
+            bodyText={{
+              id: 'app.components',
+              defaultMessage: 'Are you sure you want to unpublish it?',
+            }}
+            isVisible={true}
+            onConfirm={jest.fn()}
+            onToggleDialog={jest.fn()}
+            title={{ id: 'app.components.ConfirmDialog.title', defaultMessage: 'Confirmation' }}
+            rightButtonText={{ id: 'app.components.Button.save', defaultMessage: 'Save' }}
+          />
+        </IntlProvider>
+      </ThemeProvider>
+    );
+
+    const {
+      container: { firstChild },
+    } = render(AppCustom);
+
+    await waitFor(() => {
+      expect(screen.getByText('Are you sure you want to unpublish it?')).toBeInTheDocument();
+    });
+  });
+});