isConfirmButtonLoading props + updated tests

2025-12-28 07:33:17 +00:00 · 2021-09-02 09:37:44 +02:00 · 2021-09-02 09:37:44 +02:00 · d9a71f8320
commit d9a71f8320
parent bddb9037d9
7 changed files with 204 additions and 180 deletions
--- a/packages/core/admin/admin/src/components/Notifications/tests/index.test.js
+++ b/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;
--- a/packages/core/admin/admin/src/pages/ApplicationInfosPage/tests/index.test.js
+++ b/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;
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
+++ b/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%;
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
+++ b/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%;
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
+++ b/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%;
--- a/packages/core/helper-plugin/lib/src/components/ConfirmDialog/ConfirmDialog.stories.mdx
+++ b/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} />
        </>
      );
    }}
--- a/packages/core/helper-plugin/lib/src/components/ConfirmDialog/index.js
+++ b/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;