diff --git a/src/certificates/CertificatesPage.test.tsx b/src/certificates/CertificatesPage.test.tsx
index 4b0d0a2e..f91bec44 100644
--- a/src/certificates/CertificatesPage.test.tsx
+++ b/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 (
+
+ Pending Tasks
+
+
+ );
+ },
}));
const mockUseCourseInfo = useCourseInfo as jest.MockedFunction;
+const mockUsePendingTasks = usePendingTasks as jest.MockedFunction;
const mockUseCertificateGenerationHistory = useCertificateGenerationHistory as jest.MockedFunction;
const mockUseInstructorTasks = useInstructorTasks as jest.MockedFunction;
const mockUseIssuedCertificates = useIssuedCertificates as jest.MockedFunction;
@@ -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();
+ 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();
diff --git a/src/certificates/CertificatesPage.tsx b/src/certificates/CertificatesPage.tsx
index 2e5527d7..d59d3cce 100644
--- a/src/certificates/CertificatesPage.tsx
+++ b/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}
/>
+ setIsPendingTasksOpen(prev => !prev)} />
);
};
diff --git a/src/providers/AlertProvider.tsx b/src/providers/AlertProvider.tsx
index f33b93f9..d9f09631 100644
--- a/src/providers/AlertProvider.tsx
+++ b/src/providers/AlertProvider.tsx
@@ -229,7 +229,7 @@ export const AlertProvider: FC = ({ children }) => {
{modal.confirmText && (