feat: adds pending tasks and close modal button (#205)

* feat: adds pending tasks and close modal button

* fix: tests

* feat: increase test coverage

* fix: linting

* feat: increase test coverage

Author: wgu-jesse-stewart

src/certificates/CertificatesPage.test.tsx

@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import CertificatesPage from '@src/certificates/CertificatesPage';
 import { renderWithAlertAndIntl } from '@src/testUtils';
-import { useCourseInfo } from '@src/data/apiHook';
+import { useCourseInfo, usePendingTasks } from '@src/data/apiHook';
 import {
   useCertificateGenerationHistory,
   useGrantBulkExceptions,
@@ -25,9 +25,22 @@ jest.mock('react-router-dom', () => ({
 jest.mock('@src/certificates/data/apiHook');
 jest.mock('@src/data/apiHook', () => ({
   useCourseInfo: jest.fn(),
+  usePendingTasks: jest.fn(),
+}));
+
+jest.mock('@src/components/PendingTasks', () => ({
+  PendingTasks: function MockPendingTasks({ onToggle }: { isOpen: boolean, onToggle: () => void }) {
+    return (
+      <div data-testid="pending-tasks">
+        Pending Tasks
+        <button onClick={onToggle}>Toggle</button>
+      </div>
+    );
+  },
 }));
 
 const mockUseCourseInfo = useCourseInfo as jest.MockedFunction<typeof useCourseInfo>;
+const mockUsePendingTasks = usePendingTasks as jest.MockedFunction<typeof usePendingTasks>;
 const mockUseCertificateGenerationHistory = useCertificateGenerationHistory as jest.MockedFunction<typeof useCertificateGenerationHistory>;
 const mockUseInstructorTasks = useInstructorTasks as jest.MockedFunction<typeof useInstructorTasks>;
 const mockUseIssuedCertificates = useIssuedCertificates as jest.MockedFunction<typeof useIssuedCertificates>;
@@ -56,6 +69,12 @@ describe('CertificatesPage', () => {
       error: null,
     } as any);
 
+    mockUsePendingTasks.mockReturnValue({
+      data: [],
+      isLoading: false,
+      refetch: jest.fn(),
+    } as any);
+
     mockUseCertificateGenerationHistory.mockReturnValue({
       data: {
         results: [],
@@ -181,6 +200,17 @@ describe('CertificatesPage', () => {
     expect(screen.getByText(messages.generationHistoryTab.defaultMessage)).toBeInTheDocument();
   });
 
+  it('renders pending tasks component', async () => {
+    renderWithAlertAndIntl(<CertificatesPage />);
+    const user = userEvent.setup();
+
+    expect(screen.getByTestId('pending-tasks')).toBeInTheDocument();
+
+    // Test toggle functionality
+    const toggleButton = screen.getByText('Toggle');
+    await user.click(toggleButton);
+  });
+
   it('renders issued certificates tab by default', () => {
     renderWithAlertAndIntl(<CertificatesPage />);
 

src/certificates/CertificatesPage.tsx

@@ -4,6 +4,7 @@ import { Card, Container, Button, ButtonGroup, Alert } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import { useAlert } from '@src/providers/AlertProvider';
 import { useCourseInfo } from '@src/data/apiHook';
+import { PendingTasks } from '@src/components/PendingTasks';
 import CertificatesPageHeader from '@src/certificates/components/CertificatesPageHeader';
 import IssuedCertificatesTab from '@src/certificates/components/IssuedCertificatesTab';
 import GenerationHistoryTable from '@src/certificates/components/GenerationHistoryTable';
@@ -53,6 +54,7 @@ const CertificatesPage = () => {
   const [isDisableCertificatesOpen, setIsDisableCertificatesOpen] = useState(false);
   const [isRegenerateModalOpen, setIsRegenerateModalOpen] = useState(false);
   const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
+  const [isPendingTasksOpen, setIsPendingTasksOpen] = useState(false);
 
   const {
     data: certificatesData,
@@ -150,6 +152,7 @@ const CertificatesPage = () => {
               title: intl.formatMessage(messages.errorModalTitle),
               message: `Some invalidations failed:\n${errorMessages}`,
               variant: ALERT_VARIANTS.WARNING,
+              confirmText: intl.formatMessage(messages.close),
             });
           }
           if (data.success && data.success.length > 0) {
@@ -504,6 +507,7 @@ const CertificatesPage = () => {
         isSubmitting={false}
         learnerCount={certificatesData?.count || 0}
       />
+      <PendingTasks isOpen={isPendingTasksOpen} onToggle={() => setIsPendingTasksOpen(prev => !prev)} />
     </Container>
   );
 };

src/providers/AlertProvider.tsx

@@ -229,7 +229,7 @@ export const AlertProvider: FC<AlertProviderProps> = ({ children }) => {
                 {modal.confirmText && (
                   <Button
                     variant={modal.variant === 'danger' ? 'danger' : 'primary'}
-                    onClick={() => confirmModal(modal.id)}
+                    onClick={() => modal.onConfirm ? confirmModal(modal.id) : closeModal(modal.id, false)}
                   >
                     {modal.confirmText}
                   </Button>