Date extensions Action buttons

src/Main.tsx

@@ -1,10 +1,8 @@
 import { CurrentAppProvider, getAppConfig } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Outlet } from 'react-router-dom';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { appId } from './constants';
 import './main.scss';
 
 const queryClient = new QueryClient();

src/dateExtensions/DateExtensionsPage.test.tsx

@@ -0,0 +1,108 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@openedx/frontend-base';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DateExtensionsPage from './DateExtensionsPage';
+import { useDateExtensions, useResetDateExtensionMutation } from './data/apiHook';
+
+jest.mock('./data/apiHook', () => ({
+  useDateExtensions: jest.fn(),
+  useResetDateExtensionMutation: jest.fn(),
+}));
+
+const mockDateExtensions = [
+  {
+    id: 1,
+    username: 'edByun',
+    fullname: 'Ed Byun',
+    email: '[email protected]',
+    graded_subsection: 'Three body diagrams',
+    extended_due_date: '2026-07-15'
+  },
+];
+
+const mutateMock = jest.fn();
+
+describe('DateExtensionsPage', () => {
+  beforeEach(() => {
+    (useDateExtensions as jest.Mock).mockReturnValue({
+      data: { count: mockDateExtensions.length, results: mockDateExtensions },
+      isLoading: false,
+    });
+    (useResetDateExtensionMutation as jest.Mock).mockReturnValue({
+      mutate: mutateMock,
+    });
+  });
+
+  const RenderWithRouter = () => (
+    <IntlProvider messages={{}}>
+      <MemoryRouter initialEntries={['/course-v1:edX+DemoX+Demo_Course']}>
+        <Routes>
+          <Route path="/:courseId" element={<DateExtensionsPage />} />
+        </Routes>
+      </MemoryRouter>
+    </IntlProvider>
+  );
+
+  it('renders page title', () => {
+    render(<RenderWithRouter />);
+    expect(screen.getByRole('heading', { level: 3 })).toBeInTheDocument();
+  });
+
+  it('renders add extension button', () => {
+    render(<RenderWithRouter />);
+    expect(screen.getByRole('button', { name: /add individual extension/i })).toBeInTheDocument();
+  });
+
+  it('renders date extensions list', () => {
+    render(<RenderWithRouter />);
+    expect(screen.getByText('Ed Byun')).toBeInTheDocument();
+    expect(screen.getByText('Three body diagrams')).toBeInTheDocument();
+  });
+
+  it('shows loading state on table when fetching data', () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({
+      data: { count: 0, results: [] },
+      isLoading: true,
+    });
+    render(<RenderWithRouter />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders reset link for each row', () => {
+    render(<RenderWithRouter />);
+    const resetLinks = screen.getAllByRole('button', { name: 'Reset Extensions' });
+    expect(resetLinks).toHaveLength(mockDateExtensions.length);
+  });
+
+  it('opens reset modal when reset button is clicked', async () => {
+    render(<RenderWithRouter />);
+    const user = userEvent.setup();
+    const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
+    await user.click(resetButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(/reset extensions for/i)).toBeInTheDocument();
+    const confirmButton = screen.getByRole('button', { name: /reset due date/i });
+    expect(confirmButton).toBeInTheDocument();
+  });
+
+  it('calls reset mutation when confirm reset is clicked', async () => {
+    render(<RenderWithRouter />);
+    const user = userEvent.setup();
+    const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
+    await user.click(resetButton);
+    const confirmButton = screen.getByRole('button', { name: /reset due date/i });
+    await user.click(confirmButton);
+    expect(mutateMock).toHaveBeenCalled();
+  });
+
+  it('closes reset modal when cancel is clicked', async () => {
+    render(<RenderWithRouter />);
+    const user = userEvent.setup();
+    const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
+    await user.click(resetButton);
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});

src/dateExtensions/DateExtensionsPage.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@openedx/frontend-base';
+import { AlertModal, Button, Container, Toast } from '@openedx/paragon';
+import messages from './messages';
+import DateExtensionsList from './components/DateExtensionsList';
+import ResetExtensionsModal from './components/ResetExtensionsModal';
+import { LearnerDateExtension } from './types';
+import { useResetDateExtensionMutation } from './data/apiHook';
+
+// 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 { courseId } = useParams<{ courseId: string }>();
+  const { mutate: resetMutation } = useResetDateExtensionMutation();
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<LearnerDateExtension | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const handleResetExtensions = (user: LearnerDateExtension) => {
+    setIsResetModalOpen(true);
+    setSelectedUser(user);
+  };
+
+  const handleCloseModal = () => {
+    setIsResetModalOpen(false);
+    setSelectedUser(null);
+  };
+
+  const handleErrorOnReset = (error: any) => {
+    setErrorMessage(error.message);
+  };
+
+  const handleSuccessOnReset = (response: any) => {
+    const { message } = response;
+    setSuccessMessage(message);
+    handleCloseModal();
+  };
+
+  const handleConfirmReset = async () => {
+    if (selectedUser && courseId) {
+      resetMutation({
+        courseId,
+        userId: selectedUser.id
+      }, {
+        onError: handleErrorOnReset,
+        onSuccess: handleSuccessOnReset
+      });
+    }
+  };
+
+  return (
+    <Container className="mt-4.5 mb-4 mx-4" fluid="xl">
+      <h3>{intl.formatMessage(messages.dateExtensionsTitle)}</h3>
+      <div className="d-flex align-items-center justify-content-between mb-3.5">
+        <p>filters</p>
+        <Button>+ {intl.formatMessage(messages.addIndividualExtension)}</Button>
+      </div>
+      <DateExtensionsList onResetExtensions={handleResetExtensions} />
+      <ResetExtensionsModal
+        isOpen={isResetModalOpen}
+        message={intl.formatMessage(messages.resetConfirmationMessage)}
+        title={intl.formatMessage(messages.resetConfirmationHeader, { username: selectedUser?.username })}
+        onCancelReset={handleCloseModal}
+        onClose={handleCloseModal}
+        onConfirmReset={handleConfirmReset}
+      />
+      <Toast show={!!successMessage} onClose={() => {}} className="text-break">
+        {successMessage}
+      </Toast>
+      <AlertModal title={errorMessage} isOpen={!!errorMessage} footerNode={<Button onClick={() => setErrorMessage('')}>{intl.formatMessage(messages.close)}</Button>}>
+        {errorMessage}
+      </AlertModal>
+    </Container>
+  );
+};
+
+export default DateExtensionsPage;

src/dateExtensions/components/DateExtensionsList.test.tsx

@@ -0,0 +1,56 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DateExtensionsList, { DateExtensionListProps } from './DateExtensionsList';
+import { renderWithIntl } from '../../testUtils';
+import { useDateExtensions } from '../data/apiHook';
+
+const mockData = [
+  {
+    id: 1,
+    username: 'test_user',
+    fullname: 'Test User',
+    email: '[email protected]',
+    graded_subsection: 'Test Section',
+    extended_due_date: '2024-01-01'
+  }
+];
+
+jest.mock('../data/apiHook', () => ({
+  useDateExtensions: jest.fn(),
+}));
+
+const mockResetExtensions = jest.fn();
+
+describe('DateExtensionsList', () => {
+  const renderComponent = (props: DateExtensionListProps) => renderWithIntl(
+    <DateExtensionsList {...props} />
+  );
+
+  it('renders loading state on the table', () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({ isLoading: true, data: { count: 0, results: [] } });
+    renderComponent({});
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders table with data', async () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({ isLoading: false, data: { count: mockData.length, results: mockData } });
+    renderComponent({ onResetExtensions: mockResetExtensions });
+    const user = userEvent.setup();
+    expect(screen.getByText('test_user')).toBeInTheDocument();
+    expect(screen.getByText('Test User')).toBeInTheDocument();
+    expect(screen.getByText('[email protected]')).toBeInTheDocument();
+    expect(screen.getByText('Test Section')).toBeInTheDocument();
+    expect(screen.getByText('2024-01-01')).toBeInTheDocument();
+    const resetExtensions = screen.getByRole('button', { name: /reset extensions/i });
+    expect(resetExtensions).toBeInTheDocument();
+    await user.click(resetExtensions);
+    expect(mockResetExtensions).toHaveBeenCalledWith(mockData[0]);
+  });
+
+  it('renders empty table when no data provided', () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({ data: { count: 0, results: [] } });
+    renderComponent({});
+    expect(screen.queryByText('test_user')).not.toBeInTheDocument();
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+  });
+});

src/dateExtensions/components/DateExtensionsList.tsx

@@ -0,0 +1,76 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Button, DataTable } from '@openedx/paragon';
+import messages from '../messages';
+import { LearnerDateExtension } from '../types';
+import { useDateExtensions } from '../data/apiHook';
+import { useParams } from 'react-router-dom';
+import { useState } from 'react';
+
+// For testing purposes, will be deleted once backend is ready
+// const mockDateExtensions = [
+//   { id: 1, username: 'edByun', fullname: 'Ed Byun', email: '[email protected]', graded_subsection: 'Three body diagrams', extended_due_date: '2026-07-15' },
+//   { id: 2, username: 'dianaSalas', fullname: 'Diana Villalvazo', email: '[email protected]', graded_subsection: 'Three body diagrams', extended_due_date: '2026-07-15' },
+// ];
+
+const DATE_EXTENSIONS_PAGE_SIZE = 25;
+
+export interface DateExtensionListProps {
+  onResetExtensions?: (user: LearnerDateExtension) => void,
+}
+
+interface DataTableFetchDataProps {
+  pageIndex: number,
+}
+
+const DateExtensionsList = ({
+  onResetExtensions = () => {},
+}: DateExtensionListProps) => {
+  const intl = useIntl();
+  const { courseId } = useParams();
+  const [page, setPage] = useState(0);
+  const { data = { count: 0, results: [] }, isLoading } = useDateExtensions(courseId ?? '', {
+    page,
+    pageSize: DATE_EXTENSIONS_PAGE_SIZE
+  });
+
+  const pageCount = Math.ceil(data.count / DATE_EXTENSIONS_PAGE_SIZE);
+
+  const tableColumns = [
+    { accessor: 'username', Header: intl.formatMessage(messages.username) },
+    { accessor: 'fullname', Header: intl.formatMessage(messages.fullname) },
+    { accessor: 'email', Header: intl.formatMessage(messages.email) },
+    { accessor: 'graded_subsection', Header: intl.formatMessage(messages.gradedSubsection) },
+    { accessor: 'extended_due_date', Header: intl.formatMessage(messages.extendedDueDate) },
+    { accessor: 'reset', Header: intl.formatMessage(messages.reset) },
+  ];
+
+  const tableData = data.results.map(item => ({
+    ...item,
+    reset: <Button variant="link" size="inline" onClick={() => onResetExtensions(item)}>Reset Extensions</Button>,
+  }));
+
+  const handleFetchData = (data: DataTableFetchDataProps) => {
+    setPage(data.pageIndex);
+  };
+
+  return (
+    <DataTable
+      columns={tableColumns}
+      data={tableData}
+      fetchData={handleFetchData}
+      initialState={{
+        pageIndex: page,
+        pageSize: DATE_EXTENSIONS_PAGE_SIZE,
+      }}
+      isLoading={isLoading}
+      isPaginated
+      itemCount={data.count}
+      manualFilters
+      manualPagination
+      pageSize={DATE_EXTENSIONS_PAGE_SIZE}
+      pageCount={pageCount}
+    />
+  );
+};
+
+export default DateExtensionsList;

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();
+  });
+});