fix: format date

Author: diana-villalvazo-wgu

src/dateExtensions/components/DateExtensionsList.test.tsx

@@ -11,7 +11,7 @@ const mockData = [
     fullName: 'Test User',
     email: 'test@example.com',
     unitTitle: 'Test Section',
-    extendedDueDate: '2024-01-01'
+    extendedDueDate: '2025-11-07T00:00:00Z'
   }
 ];
 
@@ -36,11 +36,11 @@ describe('DateExtensionsList', () => {
     (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('test@example.com')).toBeInTheDocument();
-    expect(screen.getByText('Test Section')).toBeInTheDocument();
-    expect(screen.getByText('2024-01-01')).toBeInTheDocument();
+    expect(screen.getByText(mockData[0].username)).toBeInTheDocument();
+    expect(screen.getByText(mockData[0].fullName)).toBeInTheDocument();
+    expect(screen.getByText(mockData[0].email)).toBeInTheDocument();
+    expect(screen.getByText(mockData[0].unitTitle)).toBeInTheDocument();
+    expect(screen.getByText('11/07/2025, 12:00 AM')).toBeInTheDocument();
     const resetExtensions = screen.getByRole('button', { name: /reset extensions/i });
     expect(resetExtensions).toBeInTheDocument();
     await user.click(resetExtensions);
@@ -50,7 +50,7 @@ describe('DateExtensionsList', () => {
   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.queryByText(mockData[0].username)).not.toBeInTheDocument();
     expect(screen.getByText('No results found')).toBeInTheDocument();
   });
 });

src/dateExtensions/components/DateExtensionsList.tsx

@@ -1,4 +1,4 @@
-import { useIntl } from '@openedx/frontend-base';
+import { FormattedDate, useIntl } from '@openedx/frontend-base';
 import { Button, DataTable } from '@openedx/paragon';
 import messages from '../messages';
 import { LearnerDateExtension } from '../types';
@@ -34,7 +34,13 @@ const DateExtensionsList = ({
     { accessor: 'fullName', Header: intl.formatMessage(messages.fullname) },
     { accessor: 'email', Header: intl.formatMessage(messages.email) },
     { accessor: 'unitTitle', Header: intl.formatMessage(messages.gradedSubsection) },
-    { accessor: 'extendedDueDate', Header: intl.formatMessage(messages.extendedDueDate) },
+    {
+      accessor: 'extendedDueDate',
+      Header: intl.formatMessage(messages.extendedDueDate),
+      Cell: ({ value }: { value: string }) => (
+        intl.formatDate(value, { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', timeZone: 'UTC' })
+      )
+    },
   ];
 
   const additionalColumns = [{

src/dateExtensions/data/apiHook.ts

@@ -16,7 +16,7 @@ export const useResetDateExtensionMutation = () => {
     mutationFn: ({ courseId, params }: { courseId: string, params: ResetDueDateParams }) =>
       resetDateExtension(courseId, params),
     onSuccess: ({ courseId }) => {
-      queryClient.invalidateQueries({ queryKey: dateExtensionsQueryKeys.byCourse(courseId), exact: false});
+      queryClient.invalidateQueries({ queryKey: dateExtensionsQueryKeys.byCourse(courseId), exact: false });
     },
   });
 };