isConfirmButtonLoading props + updated tests

packages/core/admin/admin/src/components/Notifications/tests/index.test.js

@@ -31,24 +31,6 @@ describe('<Notifications />', () => {
     );
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c0 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: space-around;
-        -webkit-justify-content: space-around;
-        -ms-flex-pack: space-around;
-        justify-content: space-around;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
       .c2 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -68,6 +50,24 @@ describe('<Notifications />', () => {
         margin-top: 0px;
       }
 
+      .c0 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: space-around;
+        -webkit-justify-content: space-around;
+        -ms-flex-pack: space-around;
+        justify-content: space-around;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
       .c1 {
         position: fixed;
         top: 46px;

packages/core/admin/admin/src/pages/ApplicationInfosPage/tests/index.test.js

@@ -32,6 +32,51 @@ describe('Application page', () => {
     } = render(App);
 
     expect(firstChild).toMatchInlineSnapshot(`
+      .c12 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c12 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .c12 > * + * {
+        margin-top: 20px;
+      }
+
+      .c13 {
+        font-weight: 500;
+        font-size: 1rem;
+        line-height: 1.25;
+        color: #32324d;
+      }
+
+      .c17 {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
+      }
+
+      .c18 {
+        font-weight: 600;
+        line-height: 1.14;
+      }
+
+      .c19 {
+        font-weight: 600;
+        font-size: 0.6875rem;
+        line-height: 1.45;
+        text-transform: uppercase;
+      }
+
       .c1 {
         padding-bottom: 56px;
       }
@@ -142,51 +187,6 @@ describe('Application page', () => {
         word-break: break-all;
       }
 
-      .c13 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c17 {
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #32324d;
-      }
-
-      .c18 {
-        font-weight: 600;
-        line-height: 1.14;
-      }
-
-      .c19 {
-        font-weight: 600;
-        font-size: 0.6875rem;
-        line-height: 1.45;
-        text-transform: uppercase;
-      }
-
-      .c12 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c12 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c12 > * + * {
-        margin-top: 20px;
-      }
-
       .c21 {
         font-weight: 400;
         font-size: 0.875rem;

packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js

@@ -406,21 +406,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         outline: none;
       }
 
-      .c2 {
-        margin: 0 auto;
-        width: 552px;
-      }
-
-      .c4 {
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c5 {
-        height: 4.5rem;
-      }
-
       .c30 {
         font-weight: 500;
         font-size: 0.75rem;
@@ -504,6 +489,21 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         background: #4945ff;
       }
 
+      .c2 {
+        margin: 0 auto;
+        width: 552px;
+      }
+
+      .c4 {
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c5 {
+        height: 4.5rem;
+      }
+
       .c28 {
         display: inline-block;
         width: 100%;

packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js

@@ -423,21 +423,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         outline: none;
       }
 
-      .c8 {
-        margin: 0 auto;
-        width: 552px;
-      }
-
-      .c11 {
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c12 {
-        height: 4.5rem;
-      }
-
       .c41 {
         font-weight: 400;
         font-size: 0.875rem;
@@ -526,6 +511,21 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         background: #4945ff;
       }
 
+      .c8 {
+        margin: 0 auto;
+        width: 552px;
+      }
+
+      .c11 {
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c12 {
+        height: 4.5rem;
+      }
+
       .c39 {
         display: inline-block;
         width: 100%;

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js

@@ -32,6 +32,89 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
     );
 
     expect(container.firstChild).toMatchInlineSnapshot(`
+      .c30 {
+        font-weight: 500;
+        font-size: 0.75rem;
+        line-height: 1.33;
+        color: #32324d;
+      }
+
+      .c26 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 4px;
+        background: #ffffff;
+        border: 1px solid #dcdce4;
+      }
+
+      .c26 svg {
+        height: 12px;
+        width: 12px;
+      }
+
+      .c26 svg > g,
+      .c26 svg path {
+        fill: #ffffff;
+      }
+
+      .c26[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c27 {
+        padding: 8px 16px;
+        background: #4945ff;
+        border: none;
+        border: 1px solid #4945ff;
+        background: #4945ff;
+      }
+
+      .c27 .c29 {
+        color: #ffffff;
+      }
+
+      .c27[aria-disabled='true'] {
+        border: 1px solid #dcdce4;
+        background: #eaeaef;
+      }
+
+      .c27[aria-disabled='true'] .c29 {
+        color: #666687;
+      }
+
+      .c27[aria-disabled='true'] svg > g,
+      .c27[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c27[aria-disabled='true']:active {
+        border: 1px solid #dcdce4;
+        background: #eaeaef;
+      }
+
+      .c27[aria-disabled='true']:active .c29 {
+        color: #666687;
+      }
+
+      .c27[aria-disabled='true']:active svg > g,
+      .c27[aria-disabled='true']:active svg path {
+        fill: #666687;
+      }
+
+      .c27:hover {
+        border: 1px solid #7b79ff;
+        background: #7b79ff;
+      }
+
+      .c27:active {
+        border: 1px solid #4945ff;
+        background: #4945ff;
+      }
+
       .c14 {
         font-weight: 600;
         font-size: 2rem;
@@ -345,89 +428,6 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         flex-direction: column;
       }
 
-      .c30 {
-        font-weight: 500;
-        font-size: 0.75rem;
-        line-height: 1.33;
-        color: #32324d;
-      }
-
-      .c26 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        cursor: pointer;
-        padding: 8px;
-        border-radius: 4px;
-        background: #ffffff;
-        border: 1px solid #dcdce4;
-      }
-
-      .c26 svg {
-        height: 12px;
-        width: 12px;
-      }
-
-      .c26 svg > g,
-      .c26 svg path {
-        fill: #ffffff;
-      }
-
-      .c26[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c27 {
-        padding: 8px 16px;
-        background: #4945ff;
-        border: none;
-        border: 1px solid #4945ff;
-        background: #4945ff;
-      }
-
-      .c27 .c29 {
-        color: #ffffff;
-      }
-
-      .c27[aria-disabled='true'] {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c27[aria-disabled='true'] .c29 {
-        color: #666687;
-      }
-
-      .c27[aria-disabled='true'] svg > g,
-      .c27[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c27[aria-disabled='true']:active {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c27[aria-disabled='true']:active .c29 {
-        color: #666687;
-      }
-
-      .c27[aria-disabled='true']:active svg > g,
-      .c27[aria-disabled='true']:active svg path {
-        fill: #666687;
-      }
-
-      .c27:hover {
-        border: 1px solid #7b79ff;
-        background: #7b79ff;
-      }
-
-      .c27:active {
-        border: 1px solid #4945ff;
-        background: #4945ff;
-      }
-
       .c28 {
         display: inline-block;
         width: 100%;

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

@@ -22,10 +22,28 @@ TODO
         handleToggle();
         alert('you deleted your item');
       };
+      const isLoading = false;
       return (
         <>
           <Button onClick={handleToggle}>Click me</Button>
-          <ConfirmDialog isVisible={dialogOpen} onToggleDialog={handleToggle} onConfirm={handleDelete} />
+          <ConfirmDialog isConfirmButtonLoading={isLoading} isVisible={dialogOpen} onToggleDialog={handleToggle} onConfirm={handleDelete} />
+        </>
+      );
+    }}
+  </Story>
+  <Story name="confirm-loading">
+    {() => {
+      const [dialogOpen, setDialogOpen] = useState(false);
+      const handleToggle = () => setDialogOpen(prev => !prev);
+      const handleDelete = () => {
+        handleToggle();
+        alert('you deleted your item');
+      };
+      const isLoading = true;
+      return (
+        <>
+          <Button onClick={handleToggle}>Click me</Button>
+          <ConfirmDialog isConfirmButtonLoading={true} isVisible={dialogOpen} onToggleDialog={handleToggle} onConfirm={handleDelete} />
         </>
       );
     }}

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

@@ -9,7 +9,7 @@ import { Button } from '@strapi/parts/Button';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
 import DeleteIcon from '@strapi/icons/DeleteIcon';
 
-const ConfirmDialog = ({ onToggleDialog, onConfirm, isVisible }) => {
+const ConfirmDialog = ({ isConfirmButtonLoading, onToggleDialog, onConfirm, isVisible }) => {
   const { formatMessage } = useIntl();
 
   if (!isVisible) {
@@ -50,6 +50,7 @@ const ConfirmDialog = ({ onToggleDialog, onConfirm, isVisible }) => {
             variant="danger-light"
             startIcon={<DeleteIcon />}
             id="confirm-delete"
+            loading={isConfirmButtonLoading}
           >
             {formatMessage({ id: 'app.components.Button.confirm', defaultMessage: 'Confirm' })}
           </Button>
@@ -59,10 +60,15 @@ const ConfirmDialog = ({ onToggleDialog, onConfirm, isVisible }) => {
   );
 };
 
+ConfirmDialog.defaultProps = {
+  isConfirmButtonLoading: false,
+};
+
 ConfirmDialog.propTypes = {
-  onToggleDialog: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
+  isConfirmButtonLoading: PropTypes.bool,
   isVisible: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
 };
 
 export default ConfirmDialog;