feat: add loading circles to modals

src/pages/ExamsPage/components/AttemptList.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import { DataTable, TextFilter, CheckboxFilter } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import * as constants from 'data/constants';
-import ResetExamAttemptButton from './ResetExamAttemptButton';
-import ReviewExamAttemptButton from './ReviewExamAttemptButton';
+import ResetExamAttemptModal from './ResetExamAttemptModal';
+import ReviewExamAttemptModal from './ReviewExamAttemptModal';
 import messages from '../messages';
 
 // TODO: these should be updated to use intl messages
@@ -81,17 +81,17 @@ const StatusFilterChoices = [
   },
 ];
 
-// The button components must be compartmentalized here otherwise npm lint throws an unstable-nested-component error.
-const ResetButton = (row) => (
-  <ResetExamAttemptButton
+// The modal components must be compartmentalized here otherwise npm lint throws an unstable-nested-component error.
+const ResetModal = (row) => (
+  <ResetExamAttemptModal
     username={row.original.username}
     examName={row.original.exam_name}
     attemptId={row.original.attempt_id}
   />
 );
 
-const ReviewButton = (row) => (
-  <ReviewExamAttemptButton
+const ReviewModal = (row) => (
+  <ReviewExamAttemptModal
     username={row.original.username}
     examName={row.original.exam_name}
     attemptId={row.original.attempt_id}
@@ -120,12 +120,12 @@ const AttemptList = ({ attempts }) => {
           {
             id: 'action',
             Header: formatMessage(messages.examAttemptsTableHeaderAction),
-            Cell: ({ row }) => ResetButton(row),
+            Cell: ({ row }) => ResetModal(row),
           },
           {
             id: 'review',
             Header: formatMessage(messages.examAttemptsTableHeaderReview),
-            Cell: ({ row }) => ReviewButton(row),
+            Cell: ({ row }) => ReviewModal(row),
           },
         ]}
         data={attempts}

src/pages/ExamsPage/components/ResetExamAttemptButton.jsx → src/pages/ExamsPage/components/ResetExamAttemptModal.jsx

@@ -1,22 +1,34 @@
 import PropTypes from 'prop-types';
 
+import { useState } from 'react';
 import {
-  Button, useToggle, ModalDialog, ActionRow,
+  Button, useToggle, ModalDialog, ActionRow, StatefulButton,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useDeleteExamAttempt } from '../hooks';
 import messages from '../messages';
 
-const ResetExamAttemptButton = ({ username, examName, attemptId }) => {
+const ResetExamAttemptModal = ({ username, examName, attemptId }) => {
   const [isOpen, open, close] = useToggle(false);
   const resetExamAttempt = useDeleteExamAttempt();
+  const [resetButtonStatus, setResetButtonStatus] = useState('');
   const { formatMessage } = useIntl();
 
+  const ResetButtonProps = {
+    labels: {
+      default: formatMessage(messages.ResetExamAttemptButtonDefaultLabel),
+      pending: formatMessage(messages.ResetExamAttemptButtonPendingLabel),
+      complete: formatMessage(messages.ResetExamAttemptButtonCompelteLabel),
+      error: formatMessage(messages.ResetExamAttemptButtonErrorLabel),
+    },
+    variant: 'primary',
+  };
+
   return (
     <>
       <div className="d-flex">
         <Button variant="link" size="sm" onClick={open}>
-          {formatMessage(messages.ResetExamAttemptButtonTitle)}
+          {formatMessage(messages.ResetExamAttemptModalTitle)}
         </Button>
       </div>
       <ModalDialog
@@ -30,12 +42,12 @@ const ResetExamAttemptButton = ({ username, examName, attemptId }) => {
       >
         <ModalDialog.Header>
           <ModalDialog.Title>
-            {formatMessage(messages.ResetExamAttemptButtonModalTitle)}
+            {formatMessage(messages.ResetExamAttemptModalModalTitle)}
           </ModalDialog.Title>
         </ModalDialog.Header>
 
         <ModalDialog.Body>
-          <p>{formatMessage(messages.ResetExamAttemptButtonModalBody)}</p>
+          <p>{formatMessage(messages.ResetExamAttemptModalModalBody)}</p>
           <ul>
             <li>{formatMessage(messages.Username)}{username}</li>
             <li>{formatMessage(messages.ExamName)}{examName}</li>
@@ -45,27 +57,30 @@ const ResetExamAttemptButton = ({ username, examName, attemptId }) => {
         <ModalDialog.Footer>
           <ActionRow>
             <ModalDialog.CloseButton variant="tertiary">
-              {formatMessage(messages.ResetExamAttemptButtonCancel)}
+              {formatMessage(messages.ResetExamAttemptModalCancel)}
             </ModalDialog.CloseButton>
-            <Button
+            <StatefulButton
+              state={resetButtonStatus}
+              {...ResetButtonProps}
               variant="primary"
               onClick={e => { // eslint-disable-line no-unused-vars
+                setResetButtonStatus('pending');
                 resetExamAttempt(attemptId);
               }}
             >
-              {formatMessage(messages.ResetExamAttemptButtonConfirm)}
-            </Button>
+              {formatMessage(messages.ResetExamAttemptModalConfirm)}
+            </StatefulButton>
           </ActionRow>
         </ModalDialog.Footer>
       </ModalDialog>
     </>
   );
 };
 
-ResetExamAttemptButton.propTypes = {
+ResetExamAttemptModal.propTypes = {
   username: PropTypes.string.isRequired,
   examName: PropTypes.string.isRequired,
   attemptId: PropTypes.number.isRequired,
 };
 
-export default ResetExamAttemptButton;
+export default ResetExamAttemptModal;

src/pages/ExamsPage/components/ResetExamAttemptButton.test.jsx → src/pages/ExamsPage/components/ResetExamAttemptModal.test.jsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import ResetExamAttemptButton from './ResetExamAttemptButton';
+import ResetExamAttemptModal from './ResetExamAttemptModal';
 
 import * as hooks from '../hooks';
 
@@ -13,23 +13,23 @@ const mockMakeNetworkRequest = jest.fn();
 // nomally mocked for unit tests but required for rendering/snapshots
 jest.unmock('react');
 
-const resetButton = <ResetExamAttemptButton username="username" examName="examName" attemptId={0} />;
+const resetModal = <ResetExamAttemptModal username="username" examName="examName" attemptId={0} />;
 
-describe('ResetExamAttemptButton', () => {
+describe('ResetExamAttemptModal', () => {
   beforeEach(() => {
     jest.restoreAllMocks();
     hooks.useDeleteExamAttempt.mockReturnValue(mockMakeNetworkRequest);
   });
-  it('Test that the ResetExamAttemptButton matches snapshot', () => {
-    expect(render(resetButton)).toMatchSnapshot();
+  it('Test that the ResetExamAttemptModal matches snapshot', () => {
+    expect(render(resetModal)).toMatchSnapshot();
   });
   it('Modal appears upon clicking button', () => {
-    render(resetButton);
+    render(resetModal);
     screen.getByText('Reset').click();
     expect(screen.getByText('Please confirm your choice.')).toBeInTheDocument();
   });
   it('Clicking the No button closes the modal', () => {
-    render(resetButton);
+    render(resetModal);
     screen.getByText('Reset').click();
     screen.getByText('Cancel').click();
     // Using queryByText here allows the function to throw
@@ -38,7 +38,7 @@ describe('ResetExamAttemptButton', () => {
   it('Clicking the Yes button calls the deletion hook', () => {
     const mockDeleteExamAttempt = jest.fn();
     jest.spyOn(hooks, 'useDeleteExamAttempt').mockImplementation(() => mockDeleteExamAttempt);
-    render(resetButton);
+    render(resetModal);
     screen.getByText('Reset').click();
     screen.getByText('Yes, I\'m Sure').click();
     expect(mockDeleteExamAttempt).toHaveBeenCalledWith(0);

src/pages/ExamsPage/components/ReviewExamAttemptButton.jsx → src/pages/ExamsPage/components/ReviewExamAttemptModal.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 
+import { useState } from 'react';
 import {
-  Button, useToggle, ModalDialog, ActionRow,
+  Button, useToggle, ModalDialog, ActionRow, StatefulButton,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Info, Warning } from '@edx/paragon/icons';
@@ -22,14 +23,36 @@ const ReviewRequiredStatuses = [
   constants.ExamAttemptStatus.second_review_required,
 ];
 
-const ReviewExamAttemptButton = ({
+const ReviewExamAttemptModal = ({
   username, examName, attemptId, attemptStatus, severity, submissionReason,
 }) => {
   const [isOpen, open, close] = useToggle(false);
   const modifyExamAttempt = useModifyExamAttempt();
   const { currentExam } = useExamsData();
+  const [rejectButtonStatus, setRejectButtonStatus] = useState('');
+  const [verifyButtonStatus, setVerifyButtonStatus] = useState('');
   const { formatMessage } = useIntl();
 
+  const VerifyButtonProps = {
+    labels: {
+      default: formatMessage(messages.VerifyExamAttemptButtonDefaultLabel),
+      pending: formatMessage(messages.VerifyExamAttemptButtonPendingLabel),
+      complete: formatMessage(messages.VerifyExamAttemptButtonCompelteLabel),
+      error: formatMessage(messages.ReviewExamAttemptButtonErrorLabel),
+    },
+    variant: 'primary',
+  };
+
+  const RejectButtonProps = {
+    labels: {
+      default: formatMessage(messages.RejectExamAttemptButtonDefaultLabel),
+      pending: formatMessage(messages.RejectExamAttemptButtonPendingLabel),
+      complete: formatMessage(messages.RejectExamAttemptButtonCompelteLabel),
+      error: formatMessage(messages.ReviewExamAttemptButtonErrorLabel),
+    },
+    variant: 'primary',
+  };
+
   const getButton = (status) => {
     if (ReviewRequiredStatuses.includes(status)) {
       return (
@@ -70,7 +93,7 @@ const ReviewExamAttemptButton = ({
   return (
     <>
       <div className="d-flex text-danger">
-        { getButton(attemptStatus) }
+        {getButton(attemptStatus)}
       </div>
       <ModalDialog
         title="my dialog"
@@ -83,7 +106,7 @@ const ReviewExamAttemptButton = ({
       >
         <ModalDialog.Header>
           <ModalDialog.Title>
-            {formatMessage(messages.ReviewExamAttemptButtonModalTitle)}
+            {formatMessage(messages.ReviewExamAttemptModalTitle)}
           </ModalDialog.Title>
         </ModalDialog.Header>
 
@@ -106,29 +129,41 @@ const ReviewExamAttemptButton = ({
         <ModalDialog.Footer>
           <ActionRow>
             <ModalDialog.CloseButton variant="tertiary">
-              {formatMessage(messages.ReviewExamAttemptButtonCancel)}
+              {formatMessage(messages.ReviewExamAttemptModalCancel)}
             </ModalDialog.CloseButton>
-            { attemptStatus !== constants.ExamAttemptStatus.verified
+            {attemptStatus !== constants.ExamAttemptStatus.verified
               && (
-              <Button
-                variant="success"
-                onClick={e => { // eslint-disable-line no-unused-vars
-                  modifyExamAttempt(attemptId, constants.ExamAttemptActions.verify);
-                }}
-              >
-                {formatMessage(messages.ReviewExamAttemptButtonVerify)}
-              </Button>
+                <StatefulButton
+                  state={verifyButtonStatus}
+                  {...VerifyButtonProps}
+                  variant="success"
+                  onClick={e => { // eslint-disable-line no-unused-vars
+                    setVerifyButtonStatus('pending');
+                    modifyExamAttempt(attemptId, constants.ExamAttemptActions.verify);
+                    // TODO: Make this complete state only show after an exam attempt has been successfully modified
+                    // Or alternatively, we could have a toast message show up. Either way, we need to await the
+                    // call to modifyExamAttempt() before we show confirmation that it worked, so let's figure out
+                    // how to do that
+                    setRejectButtonStatus('complete');
+                  }}
+                >
+                  {formatMessage(messages.ReviewExamAttemptModalVerify)}
+                </StatefulButton>
               )}
-            { attemptStatus !== constants.ExamAttemptStatus.rejected
+            {attemptStatus !== constants.ExamAttemptStatus.rejected
               && (
-              <Button
-                variant="danger"
-                onClick={e => { // eslint-disable-line no-unused-vars
-                  modifyExamAttempt(attemptId, constants.ExamAttemptActions.reject);
-                }}
-              >
-                {formatMessage(messages.ReviewExamAttemptButtonReject)}
-              </Button>
+                <StatefulButton
+                  state={rejectButtonStatus}
+                  {...RejectButtonProps}
+                  variant="danger"
+                  onClick={e => { // eslint-disable-line no-unused-vars
+                    setRejectButtonStatus('pending');
+                    modifyExamAttempt(attemptId, constants.ExamAttemptActions.reject);
+                    setRejectButtonStatus('complete');
+                  }}
+                >
+                  {formatMessage(messages.ReviewExamAttemptModalReject)}
+                </StatefulButton>
               )}
           </ActionRow>
         </ModalDialog.Footer>
@@ -137,7 +172,7 @@ const ReviewExamAttemptButton = ({
   );
 };
 
-ReviewExamAttemptButton.propTypes = {
+ReviewExamAttemptModal.propTypes = {
   username: PropTypes.string.isRequired,
   examName: PropTypes.string.isRequired,
   attemptId: PropTypes.number.isRequired,
@@ -146,9 +181,9 @@ ReviewExamAttemptButton.propTypes = {
   submissionReason: PropTypes.string,
 };
 
-ReviewExamAttemptButton.defaultProps = {
+ReviewExamAttemptModal.defaultProps = {
   severity: null,
   submissionReason: null,
 };
 
-export default ReviewExamAttemptButton;
+export default ReviewExamAttemptModal;