feat: add bulk certificate exceptions CSV upload

app.d.ts

@@ -8,3 +8,8 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}

site.config.dev.tsx

@@ -2,7 +2,7 @@ import { EnvironmentTypes, SiteConfig, footerApp, headerApp, shellApp } from '@o
 
 import { instructorDashboardApp } from './src';
 
-import '@openedx/frontend-base/shell/style';
+import '@openedx/frontend-base/shell/app.scss';
 
 const siteConfig: SiteConfig = {
   siteId: 'instructor-dev',

src/certificates/CertificatesPage.tsx

@@ -21,12 +21,13 @@ import {
   useRemoveException,
   useRemoveInvalidation,
   useToggleCertificateGeneration,
+  useUploadBulkExceptionsCsv,
 } from '@src/certificates/data/apiHook';
 import { CertificateFilter } from '@src/certificates/types';
 import { CERTIFICATES_PAGE_SIZE, TAB_KEYS, MODAL_TITLES, ALERT_VARIANTS } from '@src/certificates/constants';
 import { getErrorMessage } from '@src/certificates/utils/errorHandling';
 import messages from '@src/certificates/messages';
-import './CertificatesPage.scss';
+import '@src/certificates/CertificatesPage.scss';
 
 const CertificatesPage = () => {
   const intl = useIntl();
@@ -68,6 +69,7 @@ const CertificatesPage = () => {
   });
 
   const { mutate: grantExceptions, isPending: isGrantingExceptions } = useGrantBulkExceptions(courseId);
+  const { mutate: uploadCsvExceptions, isPending: isUploadingCsv } = useUploadBulkExceptionsCsv(courseId);
   const { mutate: invalidateCert, isPending: isInvalidating } = useInvalidateCertificate(courseId);
   const { mutate: removeExcept, isPending: isRemovingException } = useRemoveException(courseId);
   const { mutate: removeInval, isPending: isRemovingInvalidation } = useRemoveInvalidation(courseId);
@@ -103,6 +105,35 @@ const CertificatesPage = () => {
     );
   }, [grantExceptions, showToast, showModal, intl]);
 
+  const handleUploadCsvExceptions = useCallback((file: File) => {
+    uploadCsvExceptions(
+      file,
+      {
+        onSuccess: (data) => {
+          setIsGrantExceptionsOpen(false);
+          if (data.errors && data.errors.length > 0) {
+            const errorMessages = data.errors.map(err => `${err.learner}: ${err.message}`).join('\n');
+            showModal({
+              title: MODAL_TITLES.ERROR,
+              message: `Some exceptions failed:\n${errorMessages}`,
+              variant: ALERT_VARIANTS.WARNING,
+            });
+          }
+          if (data.success && data.success.length > 0) {
+            showToast(intl.formatMessage(messages.exceptionsGrantedToast, { count: data.success.length }));
+          }
+        },
+        onError: (error) => {
+          showModal({
+            title: MODAL_TITLES.ERROR,
+            message: getErrorMessage(error, intl.formatMessage(messages.errorGrantException)),
+            variant: ALERT_VARIANTS.DANGER,
+          });
+        },
+      },
+    );
+  }, [uploadCsvExceptions, showToast, showModal, intl]);
+
   const handleInvalidateCertificate = useCallback((learners: string[], notes: string) => {
     invalidateCert(
       { learners, notes },
@@ -263,7 +294,7 @@ const CertificatesPage = () => {
       <CertificatesPageHeader
         onGrantExceptions={() => setIsGrantExceptionsOpen(true)}
         onInvalidateCertificate={() => setIsInvalidateCertificateOpen(true)}
-        onDisableCertificates={() => setIsDisableCertificatesOpen(true)}
+        onStudentGeneratedCertificates={() => setIsDisableCertificatesOpen(true)}
       />
 
       <Card variant="muted" className="pt-3 pt-md-4 pb-4 pb-md-6 certificates-card">
@@ -309,7 +340,8 @@ const CertificatesPage = () => {
         isOpen={isGrantExceptionsOpen}
         onClose={() => setIsGrantExceptionsOpen(false)}
         onSubmit={handleGrantExceptions}
-        isSubmitting={isGrantingExceptions}
+        onUploadCsv={handleUploadCsvExceptions}
+        isSubmitting={isGrantingExceptions || isUploadingCsv}
       />
       <InvalidateCertificateModal
         isOpen={isInvalidateCertificateOpen}

src/certificates/components/CertificatesPageHeader.tsx

@@ -1,18 +1,18 @@
 import { Button, Dropdown, IconButton, Stack } from '@openedx/paragon';
-import { Add, Close, MoreVert } from '@openedx/paragon/icons';
+import { Add, Cancel, MoreVert } from '@openedx/paragon/icons';
 import { useIntl } from '@openedx/frontend-base';
 import messages from '@src/certificates/messages';
 
 interface CertificatesPageHeaderProps {
   onGrantExceptions: () => void,
   onInvalidateCertificate: () => void,
-  onDisableCertificates: () => void,
+  onStudentGeneratedCertificates?: () => void,
 }
 
 const CertificatesPageHeader = ({
   onGrantExceptions,
   onInvalidateCertificate,
-  onDisableCertificates,
+  onStudentGeneratedCertificates,
 }: CertificatesPageHeaderProps) => {
   const intl = useIntl();
 
@@ -24,18 +24,20 @@ const CertificatesPageHeader = ({
           <Dropdown.Toggle
             as={IconButton}
             src={MoreVert}
-            alt={intl.formatMessage(messages.disableCertificatesButton)}
+            alt="More actions"
             id="certificates-more-menu"
           />
           <Dropdown.Menu>
-            <Dropdown.Item onClick={onDisableCertificates}>
-              {intl.formatMessage(messages.disableCertificatesButton)}
-            </Dropdown.Item>
+            {onStudentGeneratedCertificates && (
+              <Dropdown.Item onClick={onStudentGeneratedCertificates}>
+                {intl.formatMessage(messages.studentGeneratedCertificatesMenuItem)}
+              </Dropdown.Item>
+            )}
           </Dropdown.Menu>
         </Dropdown>
         <Button
           variant="outline-primary"
-          iconBefore={Close}
+          iconBefore={Cancel}
           onClick={onInvalidateCertificate}
           className="text-nowrap"
         >

src/certificates/components/CertificatesToolbar.tsx

@@ -4,7 +4,7 @@ import { useIntl } from '@openedx/frontend-base';
 import FilterDropdown from '@src/certificates/components/FilterDropdown';
 import { CertificateFilter } from '@src/certificates/types';
 import messages from '@src/certificates/messages';
-import '../CertificatesPage.scss';
+import '@src/certificates/CertificatesPage.scss';
 
 interface CertificatesToolbarProps {
   search: string,

src/certificates/components/DisableCertificatesModal.test.tsx

@@ -33,47 +33,57 @@ describe('DisableCertificatesModal', () => {
     expect(screen.getByRole('dialog')).toBeInTheDocument();
   });
 
-  it('renders confirm and cancel buttons', () => {
+  it('renders save and close buttons', () => {
     renderWithIntl(<DisableCertificatesModal {...defaultProps} />);
 
-    expect(screen.getByRole('button', { name: messages.confirm.defaultMessage })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: messages.cancel.defaultMessage })).toBeInTheDocument();
+    const buttons = screen.getAllByRole('button');
+    const saveButton = buttons.find(btn => btn.textContent === messages.save.defaultMessage);
+    const closeButton = buttons.find(btn => btn.textContent === messages.close.defaultMessage);
+
+    expect(saveButton).toBeInTheDocument();
+    expect(closeButton).toBeInTheDocument();
   });
 
-  it('calls onConfirm when confirm button is clicked', async () => {
-    renderWithIntl(<DisableCertificatesModal {...defaultProps} />);
+  it('calls onConfirm when save button is clicked and checkbox state changed', async () => {
+    renderWithIntl(<DisableCertificatesModal {...defaultProps} isEnabled={true} />);
     const user = userEvent.setup();
 
-    const confirmButton = screen.getByRole('button', { name: messages.confirm.defaultMessage });
-    await user.click(confirmButton);
+    // Change the checkbox state
+    const checkbox = screen.getByRole('checkbox');
+    await user.click(checkbox);
+
+    const saveButton = screen.getByRole('button', { name: messages.save.defaultMessage });
+    await user.click(saveButton);
 
     expect(mockOnConfirm).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onClose when cancel button is clicked', async () => {
+  it('calls onClose when close button is clicked', async () => {
     renderWithIntl(<DisableCertificatesModal {...defaultProps} />);
     const user = userEvent.setup();
 
-    const cancelButton = screen.getByRole('button', { name: messages.cancel.defaultMessage });
-    await user.click(cancelButton);
+    const buttons = screen.getAllByRole('button');
+    const closeButton = buttons.find(btn => btn.textContent === messages.close.defaultMessage);
+    await user.click(closeButton);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
 
   it('disables buttons when isSubmitting is true', () => {
     renderWithIntl(<DisableCertificatesModal {...defaultProps} isSubmitting={true} />);
 
-    const confirmButton = screen.getByRole('button', { name: messages.confirm.defaultMessage });
-    const cancelButton = screen.getByRole('button', { name: messages.cancel.defaultMessage });
+    const buttons = screen.getAllByRole('button');
+    const saveButton = buttons.find(btn => btn.textContent === messages.save.defaultMessage);
+    const closeButton = buttons.find(btn => btn.textContent === messages.close.defaultMessage);
 
-    expect(confirmButton).toBeDisabled();
-    expect(cancelButton).toBeDisabled();
+    expect(saveButton).toBeDisabled();
+    expect(closeButton).toBeDisabled();
   });
 
   it('does not render when isOpen is false', () => {
     renderWithIntl(<DisableCertificatesModal {...defaultProps} isOpen={false} />);
 
-    expect(screen.queryByText(messages.disableCertificatesModalTitle.defaultMessage)).not.toBeInTheDocument();
+    expect(screen.queryByText(messages.studentGeneratedCertificatesModalTitle.defaultMessage)).not.toBeInTheDocument();
   });
 
   it('switches title and message based on isEnabled prop', () => {
@@ -95,11 +105,12 @@ describe('DisableCertificatesModal', () => {
   it('enables buttons when not submitting', () => {
     renderWithIntl(<DisableCertificatesModal {...defaultProps} isSubmitting={false} />);
 
-    const confirmButton = screen.getByRole('button', { name: messages.confirm.defaultMessage });
-    const cancelButton = screen.getByRole('button', { name: messages.cancel.defaultMessage });
+    const buttons = screen.getAllByRole('button');
+    const saveButton = buttons.find(btn => btn.textContent === messages.save.defaultMessage);
+    const closeButton = buttons.find(btn => btn.textContent === messages.close.defaultMessage);
 
-    expect(confirmButton).not.toBeDisabled();
-    expect(cancelButton).not.toBeDisabled();
+    expect(saveButton).not.toBeDisabled();
+    expect(closeButton).not.toBeDisabled();
   });
 
   it('renders with small size modal', () => {
@@ -109,11 +120,11 @@ describe('DisableCertificatesModal', () => {
     expect(modal).toBeInTheDocument();
   });
 
-  it('does not have close button in header', () => {
+  it('has close button in header', () => {
     renderWithIntl(<DisableCertificatesModal {...defaultProps} />);
 
-    // Modal should not have the default close button (X) in header
+    // Modal should have the default close button (X) in header
     const closeButtons = screen.queryAllByLabelText('Close');
-    expect(closeButtons.length).toBe(0);
+    expect(closeButtons.length).toBeGreaterThan(0);
   });
 });

src/certificates/components/DisableCertificatesModal.tsx

@@ -1,4 +1,5 @@
-import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
+import { useState } from 'react';
+import { ActionRow, Button, Form, ModalDialog } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import messages from '@src/certificates/messages';
 
@@ -18,34 +19,55 @@ const DisableCertificatesModal = ({
   isSubmitting,
 }: DisableCertificatesModalProps) => {
   const intl = useIntl();
+  const [enabled, setEnabled] = useState(isEnabled);
 
-  const title = isEnabled
-    ? intl.formatMessage(messages.disableCertificatesModalTitle)
-    : intl.formatMessage(messages.enableCertificatesModalTitle);
+  const handleSave = () => {
+    if (enabled !== isEnabled) {
+      onConfirm();
+    } else {
+      onClose();
+    }
+  };
 
-  const message = isEnabled
-    ? intl.formatMessage(messages.disableCertificatesModalMessage)
-    : intl.formatMessage(messages.enableCertificatesModalMessage);
+  const handleClose = () => {
+    setEnabled(isEnabled); // Reset to original value
+    onClose();
+  };
 
   return (
     <ModalDialog
-      title={title}
-      onClose={onClose}
+      title={intl.formatMessage(messages.studentGeneratedCertificatesModalTitle)}
+      onClose={handleClose}
       isOpen={isOpen}
-      size="sm"
-      hasCloseButton={false}
+      size="md"
+      hasCloseButton
       isOverflowVisible={false}
     >
-      <div className="mx-4 mt-4 mb-2.5">
-        <p>{message}</p>
-      </div>
+      <ModalDialog.Header className="border-bottom">
+        <ModalDialog.Title>
+          {intl.formatMessage(messages.studentGeneratedCertificatesModalTitle)}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="px-4 py-3">
+        <Form.Group>
+          <Form.Checkbox
+            checked={enabled}
+            onChange={(e) => setEnabled(e.target.checked)}
+          >
+            {intl.formatMessage(messages.enableStudentGeneratedCertificates)}
+          </Form.Checkbox>
+          <Form.Text className="text-muted">
+            {intl.formatMessage(messages.studentGeneratedCertificatesDescription)}
+          </Form.Text>
+        </Form.Group>
+      </ModalDialog.Body>
       <ModalDialog.Footer>
         <ActionRow>
-          <Button variant="tertiary" onClick={onClose} disabled={isSubmitting}>
-            {intl.formatMessage(messages.cancel)}
+          <Button variant="tertiary" onClick={handleClose} disabled={isSubmitting}>
+            {intl.formatMessage(messages.close)}
           </Button>
-          <Button variant="primary" onClick={onConfirm} disabled={isSubmitting}>
-            {intl.formatMessage(messages.confirm)}
+          <Button variant="primary" onClick={handleSave} disabled={isSubmitting}>
+            {intl.formatMessage(messages.save)}
           </Button>
         </ActionRow>
       </ModalDialog.Footer>