feat: reset extensions modal

Author: diana-villalvazo-wgu

src/data/api.ts

@@ -29,3 +29,8 @@ export const getDateExtensions = async (
   );
   return camelCaseObject(data);
 };
+
+export const resetDateExtension = async (courseId, userId) => {
+  const { data } = await getAuthenticatedHttpClient().post(`${getApiBaseUrl()}/api/instructor/v1/courses/${courseId}/date-extensions/${userId}/reset`);
+  return camelCaseObject(data);
+};

src/data/apiHook.ts

@@ -1,5 +1,5 @@
-import { useQuery } from '@tanstack/react-query';
-import { getCourseInfo, getDateExtensions, PaginationQueryKeys } from './api';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { getCourseInfo, getDateExtensions, resetDateExtension, PaginationQueryKeys } from './api';
 import { appId } from '../constants';
 
 const COURSE_INFO_QUERY_KEY = ['courseInfo'];
@@ -23,3 +23,10 @@ export const useDateExtensions = (courseId: string, pagination: PaginationQueryK
     queryFn: () => getDateExtensions(courseId, pagination),
   })
 );
+
+export const useResetDateExtensionMutation = () => {
+  return useMutation({
+    mutationFn: ({ courseId, userId }: { courseId: string, userId: number }) =>
+      resetDateExtension(courseId, userId),
+  });
+};

src/dateExtensions/DateExtensionsPage.tsx

@@ -1,17 +1,35 @@
+import { useState } from 'react';
 import { useIntl } from '@openedx/frontend-base';
+import { Button, Container } from '@openedx/paragon';
 import messages from './messages';
 import DateExtensionsList from './components/DateExtensionsList';
-import { Button, Container } from '@openedx/paragon';
+import ResetExtensionsModal from './components/ResetExtensionsModal';
 import { LearnerDateExtension } from './types';
 
 // const successMessage = 'Successfully reset due date for student Phu Nguyen for A subsection with two units (block-v1:SchemaAximWGU+WGU101+1+type@sequential+block@3984030755104708a86592cf23fb1ae4) to 2025-08-21 00:00';
 
 const DateExtensionsPage = () => {
   const intl = useIntl();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<LearnerDateExtension | null>(null);
 
   const handleResetExtensions = (user: LearnerDateExtension) => {
-    // Implementation for resetting extensions will go here
-    console.log(user);
+    setIsModalOpen(true);
+    setSelectedUser(user);
+  };
+
+  const handleConfirmReset = () => {
+    if (selectedUser) {
+      // Call the API to reset the extensions for the selected user
+      console.log(`Resetting extensions for user: ${selectedUser.username}`);
+    }
+    setIsModalOpen(false);
+    setSelectedUser(null);
+  };
+
+  const handleCancelReset = () => {
+    setIsModalOpen(false);
+    setSelectedUser(null);
   };
 
   return (
@@ -22,6 +40,14 @@ const DateExtensionsPage = () => {
         <Button>+ {intl.formatMessage(messages.addIndividualExtension)}</Button>
       </div>
       <DateExtensionsList onResetExtensions={handleResetExtensions} />
+      <ResetExtensionsModal
+        isOpen={isModalOpen}
+        message={intl.formatMessage(messages.resetConfirmationMessage)}
+        title={intl.formatMessage(messages.resetConfirmationHeader, { username: selectedUser?.username })}
+        onCancelReset={handleCancelReset}
+        onClose={handleCancelReset}
+        onConfirmReset={handleConfirmReset}
+      />
     </Container>
   );
 };

src/dateExtensions/components/ResetExtensionsModal.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ResetExtensionsModal from './ResetExtensionsModal';
+import { renderWithIntl } from '../../testUtils';
+import messages from '../messages';
+
+describe('ResetExtensionsModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    message: 'Test message',
+    title: 'Test title',
+    onCancelReset: jest.fn(),
+    onClose: jest.fn(),
+    onConfirmReset: jest.fn(),
+  };
+
+  const renderModal = (props = {}) => renderWithIntl(
+    <ResetExtensionsModal {...defaultProps} {...props} />
+  );
+
+  it('renders modal with correct title and message', () => {
+    renderModal();
+    expect(screen.getByText('Test title')).toBeInTheDocument();
+    expect(screen.getByText('Test message')).toBeInTheDocument();
+  });
+
+  it('calls onCancelReset when cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    renderModal();
+    await user.click(screen.getByRole('button', { name: messages.cancel.defaultMessage }));
+    expect(defaultProps.onCancelReset).toHaveBeenCalled();
+  });
+
+  it('calls onConfirmReset when confirm button is clicked', async () => {
+    const user = userEvent.setup();
+    renderModal();
+    await user.click(screen.getByRole('button', { name: messages.confirm.defaultMessage }));
+    expect(defaultProps.onConfirmReset).toHaveBeenCalled();
+  });
+
+  it('does not render when isOpen is false', () => {
+    renderModal({ isOpen: false });
+    expect(screen.queryByText('Test title')).not.toBeInTheDocument();
+  });
+});

src/dateExtensions/components/ResetExtensionsModal.tsx

@@ -0,0 +1,35 @@
+import { useIntl } from '@openedx/frontend-base';
+import { ModalDialog, ActionRow, Button } from '@openedx/paragon';
+import messages from '../messages';
+
+interface ResetExtensionsModalProps {
+  isOpen: boolean,
+  message: string,
+  title: string,
+  onCancelReset: () => void,
+  onClose: () => void,
+  onConfirmReset: () => void,
+}
+
+const ResetExtensionsModal = ({
+  isOpen,
+  message,
+  title,
+  onCancelReset,
+  onClose,
+  onConfirmReset,
+}: ResetExtensionsModalProps) => {
+  const intl = useIntl();
+  return (
+    <ModalDialog isOpen={isOpen} onClose={onClose} hasCloseButton={false} title={title} isOverflowVisible={false} className="p-4">
+      <h4 className="mb-2.5">{title}</h4>
+      <p className="mb-2.5">{message}</p>
+      <ActionRow>
+        <Button variant="tertiary" onClick={onCancelReset}>{intl.formatMessage(messages.cancel)}</Button>
+        <Button variant="primary" onClick={onConfirmReset}>{intl.formatMessage(messages.confirm)}</Button>
+      </ActionRow>
+    </ModalDialog>
+  );
+};
+
+export default ResetExtensionsModal;

src/dateExtensions/messages.ts

@@ -41,6 +41,26 @@ const messages = defineMessages({
     defaultMessage: 'Reset',
     description: 'Label for the reset column in the date extensions table',
   },
+  resetConfirmationHeader: {
+    id: 'instruct.dateExtensions.page.resetModal.confirmationHeader',
+    defaultMessage: 'Reset extensions for {username}?',
+    description: 'Header for the reset confirmation modal',
+  },
+  resetConfirmationMessage: {
+    id: 'instruct.dateExtensions.page.resetModal.confirmationMessage',
+    defaultMessage: 'Resetting a problem\'s due date rescinds a due date extension for a student on a particular subsection. This will revert the due date for the student back to the problem\'s original due date.',
+    description: 'Confirmation message for resetting extensions in the reset modal',
+  },
+  cancel: {
+    id: 'instruct.dateExtensions.page.resetModal.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Label for the cancel button in the reset modal',
+  },
+  confirm: {
+    id: 'instruct.dateExtensions.page.resetModal.confirm',
+    defaultMessage: 'Reset Due Date for Student',
+    description: 'Label for the confirm button in the reset modal',
+  },
 });
 
 export default messages;