feat: add actions to attempts and fix missing attributes on table

Author: diana-villalvazo-wgu

src/specialExams/SpecialExamsPage.test.tsx

@@ -10,9 +10,9 @@ jest.mock('./components/Allowances', () => {
   }
   return MockedAllowances;
 });
-jest.mock('./components/AttemptsList', () => {
+jest.mock('./components/Attempts', () => {
   function MockedAttemptsList() {
-    return <div>AttemptsList Component</div>;
+    return <div>Attempts Component</div>;
   }
   return MockedAttemptsList;
 });
@@ -26,7 +26,7 @@ describe('SpecialExamsPage', () => {
   it('renders the attempts tab and its content by default', () => {
     renderWithIntl(<SpecialExamsPage />);
     expect(screen.getByText('Exam Attempts')).toBeInTheDocument();
-    expect(screen.getByText('AttemptsList Component')).toBeInTheDocument();
+    expect(screen.getByText('Attempts Component')).toBeInTheDocument();
     expect(screen.queryByText('Allowances Component')).not.toBeInTheDocument();
   });
 
@@ -43,7 +43,7 @@ describe('SpecialExamsPage', () => {
     const user = userEvent.setup();
     await user.click(screen.getByText('Allowances'));
     await user.click(screen.getByText('Exam Attempts'));
-    expect(screen.getByText('AttemptsList Component')).toBeInTheDocument();
+    expect(screen.getByText('Attempts Component')).toBeInTheDocument();
     expect(screen.queryByText('Allowances Component')).not.toBeInTheDocument();
   });
 

src/specialExams/SpecialExamsPage.tsx

@@ -3,7 +3,7 @@ import { useIntl } from '@openedx/frontend-base';
 import { Button, ButtonGroup, Card } from '@openedx/paragon';
 import messages from './messages';
 import Allowances from './components/Allowances';
-import AttemptsList from './components/AttemptsList';
+import Attempts from './components/Attempts';
 
 const SPECIAL_EXAMS_TAB = {
   ATTEMPTS: 'attempts',
@@ -31,7 +31,7 @@ const SpecialExamsPage = () => {
           </Button>
         </ButtonGroup>
         {
-          selectedTab === SPECIAL_EXAMS_TAB.ATTEMPTS ? <AttemptsList /> : <Allowances />
+          selectedTab === SPECIAL_EXAMS_TAB.ATTEMPTS ? <Attempts /> : <Allowances />
         }
       </Card>
     </>

src/specialExams/components/Attempts.test.tsx

@@ -0,0 +1,68 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Attempts from './Attempts';
+import { useAttempts, useResetAttempt } from '../data/apiHook';
+import { Attempt } from '../types';
+import { renderWithIntl } from '@src/testUtils';
+import messages from '../messages';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ courseId: 'course-v1:edX+Test+2024' }),
+}));
+
+jest.mock('../data/apiHook', () => ({
+  useAttempts: jest.fn(),
+  useResetAttempt: jest.fn(),
+}));
+
+const mockAttempt: Attempt = {
+  id: 1,
+  user: { username: 'testuser' },
+  examId: 42,
+  examName: 'Midterm Exam',
+  allowedTimeLimitMins: 60,
+  type: 'proctored',
+  startTime: '2024-01-01T00:00:00Z',
+  endTime: '2024-01-01T01:00:00Z',
+  status: 'started',
+  readyToResume: false,
+};
+
+describe('Attempts', () => {
+  const mockResetAttempt = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useResetAttempt as jest.Mock).mockReturnValue({ mutate: mockResetAttempt });
+    (useAttempts as jest.Mock).mockReturnValue({
+      data: { results: [mockAttempt] },
+      isLoading: false,
+      isError: false,
+    });
+  });
+
+  it('renders AttemptsList component', () => {
+    renderWithIntl(<Attempts />);
+    const usernameCell = screen.getByRole('cell', { name: mockAttempt.user.username });
+    expect(usernameCell).toBeInTheDocument();
+  });
+
+  it('calls useResetAttempt with courseId from route params', () => {
+    renderWithIntl(<Attempts />);
+    expect(useResetAttempt).toHaveBeenCalledWith('course-v1:edX+Test+2024');
+  });
+
+  it('calls resetAttempt with username and examId when onReset is triggered', async () => {
+    renderWithIntl(<Attempts />);
+    const actionsButton = screen.getByRole('button', { name: messages.actions.defaultMessage });
+    await userEvent.click(actionsButton);
+    const resetButton = screen.getByRole('button', { name: messages.reset.defaultMessage });
+    await userEvent.click(resetButton);
+
+    expect(mockResetAttempt).toHaveBeenCalledWith({
+      username: 'testuser',
+      examId: 42,
+    });
+  });
+});

src/specialExams/components/Attempts.tsx

@@ -0,0 +1,25 @@
+import { useParams } from 'react-router-dom';
+import { Attempt } from '../types';
+import AttemptsList from './AttemptsList';
+import { useResetAttempt } from '../data/apiHook';
+
+const Attempts = () => {
+  const { courseId = '' } = useParams<{ courseId: string }>();
+  const { mutate: resetAttempt } = useResetAttempt(courseId);
+
+  const handleResume = (attempt: Attempt) => {
+    // Implement resume logic here
+    console.log('Resume attempt:', courseId, attempt);
+  };
+
+  const handleReset = (attempt: Attempt) => {
+    const { user, examId } = attempt;
+    resetAttempt({ username: user.username, examId });
+  };
+
+  return (
+    <AttemptsList onResume={handleResume} onReset={handleReset} />
+  );
+};
+
+export default Attempts;

src/specialExams/components/AttemptsList.test.tsx

@@ -21,7 +21,7 @@ const mockExamAttempts = {
       },
       examName: 'Midterm',
       allowedTimeLimitMins: 60,
-      type: 'proctored',
+      examType: 'proctored',
       startTime: '2024-01-01',
       endTime: '2024-01-02',
       status: 'completed',
@@ -35,14 +35,18 @@ describe('AttemptsList', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
+  const mockReset = jest.fn();
+  const mockResume = jest.fn();
+
+  const renderComponent = () => renderWithIntl(<AttemptsList onReset={mockReset} onResume={mockResume} />);
 
   it('renders DataTable with correct columns and empty data', () => {
     (useAttempts as jest.Mock).mockReturnValue({
       data: { results: [], count: 0, numPages: 0 },
       isLoading: false,
     });
 
-    renderWithIntl(<AttemptsList />);
+    renderComponent();
 
     expect(screen.getByText('No exam attempts found')).toBeInTheDocument();
     expect(screen.getByPlaceholderText('Search By Username or Email')).toBeInTheDocument();
@@ -54,7 +58,7 @@ describe('AttemptsList', () => {
       isLoading: true,
     });
 
-    renderWithIntl(<AttemptsList />);
+    renderComponent();
     expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
@@ -64,13 +68,13 @@ describe('AttemptsList', () => {
       isLoading: false,
     });
 
-    renderWithIntl(<AttemptsList />);
+    renderComponent();
     expect(screen.getByText(mockExamAttempts.results[0].user.username)).toBeInTheDocument();
     expect(screen.getByText(mockExamAttempts.results[0].examName)).toBeInTheDocument();
     expect(screen.getByText(mockExamAttempts.results[0].allowedTimeLimitMins.toString())).toBeInTheDocument();
-    expect(screen.getByText(mockExamAttempts.results[0].type)).toBeInTheDocument();
-    expect(screen.getByText(mockExamAttempts.results[0].startTime)).toBeInTheDocument();
-    expect(screen.getByText(mockExamAttempts.results[0].endTime)).toBeInTheDocument();
+    expect(screen.getByText(mockExamAttempts.results[0].examType)).toBeInTheDocument();
+    expect(screen.getByText(/01\/01\/2024.*UTC/)).toBeInTheDocument();
+    expect(screen.getByText(/01\/02\/2024.*UTC/)).toBeInTheDocument();
     expect(screen.getByText(mockExamAttempts.results[0].status)).toBeInTheDocument();
   });
 
@@ -80,7 +84,7 @@ describe('AttemptsList', () => {
       isLoading: false,
     });
 
-    renderWithIntl(<AttemptsList />);
+    renderComponent();
 
     const input = screen.getByRole('textbox');
     const user = userEvent.setup();
@@ -99,7 +103,7 @@ describe('AttemptsList', () => {
       isLoading: false,
     });
 
-    renderWithIntl(<AttemptsList />);
+    renderComponent();
     expect(useAttempts).toHaveBeenCalledWith('course-v1:edX+Test+2024', expect.any(Object));
   });
 });

src/specialExams/components/AttemptsList.tsx

@@ -1,15 +1,22 @@
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useIntl } from '@openedx/frontend-base';
-import { DataTable } from '@openedx/paragon';
+import { DataTable, IconButton, OverlayTrigger, Popover } from '@openedx/paragon';
+import { MoreVert } from '@openedx/paragon/icons';
 import UsernameFilter from '@src/components/UsernameFilter';
-import messages from '@src/specialExams/messages';
 import { useAttempts } from '@src/specialExams/data/apiHook';
-import { DataTableFetchDataProps } from '@src/types';
+import messages from '@src/specialExams/messages';
+import { Attempt } from '@src/specialExams/types';
+import { DataTableFetchDataProps, TableCellValue } from '@src/types';
 
 export const ATTEMPTS_PAGE_SIZE = 25;
 
-const AttemptsList = () => {
+interface AttemptsListProps {
+  onResume: (attempt: Attempt) => void,
+  onReset: (attempt: Attempt) => void,
+}
+
+const AttemptsList = ({ onResume, onReset }: AttemptsListProps) => {
   const intl = useIntl();
   const { courseId = '' } = useParams();
   const [filters, setFilters] = useState({ page: 0, emailOrUsername: '', ordering: '' });
@@ -18,16 +25,107 @@ const AttemptsList = () => {
     pageSize: ATTEMPTS_PAGE_SIZE
   });
 
+  const ActionCustomCell = ({ row: { original } }: TableCellValue<Attempt>) => {
+    const popoverContent = (
+      <Popover
+        id={`popover-${original.user.username}-${original.examName}`}
+        className="border-0 shadow-sm"
+      >
+        <Popover.Content className="p-0 border-0">
+          <div className="dropdown-menu show position-static border shadow-sm">
+            <button
+              type="button"
+              className="dropdown-item"
+              onClick={() => original.readyToResume ? onResume(original) : onReset(original)}
+            >
+              {original.readyToResume ? intl.formatMessage(messages.resume) : intl.formatMessage(messages.reset)}
+            </button>
+          </div>
+        </Popover.Content>
+      </Popover>
+    );
+    return (
+      <>
+        <OverlayTrigger
+          trigger="click"
+          placement="bottom-end"
+          overlay={popoverContent}
+          rootClose
+        >
+          <IconButton
+            alt={intl.formatMessage(messages.actions)}
+            className="lead"
+            iconAs={MoreVert}
+          />
+        </OverlayTrigger>
+      </>
+    );
+  };
+
   const columns = useMemo(() => [
     { accessor: 'user.username', Header: intl.formatMessage(messages.username), Filter: UsernameFilter, },
     { accessor: 'examName', Header: intl.formatMessage(messages.examName), disableFilters: true, },
     { accessor: 'allowedTimeLimitMins', Header: intl.formatMessage(messages.timeLimit), disableFilters: true, },
-    { accessor: 'type', Header: intl.formatMessage(messages.type), disableFilters: true, },
-    { accessor: 'startTime', Header: intl.formatMessage(messages.startedAt), disableFilters: true, },
-    { accessor: 'endTime', Header: intl.formatMessage(messages.completedAt), disableFilters: true, },
-    { accessor: 'status', Header: intl.formatMessage(messages.status), disableFilters: true, },
+    {
+      accessor: 'examType',
+      Cell: ({ row }: TableCellValue<any>) => <span className="text-capitalize">{row.original.examType}</span>,
+      disableFilters: true,
+      Header: intl.formatMessage(messages.type),
+    },
+    {
+      accessor: 'startTime',
+      Cell: ({ row }: TableCellValue<any>) => (
+        <span>{ row.original.startTime ? `${intl.formatDate(new Date(row.original.startTime), {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          timeZone: 'UTC',
+        })} UTC` : ''}
+        </span>
+      ),
+      disableFilters: true,
+      Header: intl.formatMessage(messages.startedAt),
+    },
+    {
+      accessor: 'endTime',
+      Cell: ({ row }: TableCellValue<any>) => (
+        <span>{row.original.endTime ? `${intl.formatDate(new Date(row.original.endTime), {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          timeZone: 'UTC',
+        })} UTC` : ''}
+        </span>
+      ),
+      disableFilters: true,
+      Header: intl.formatMessage(messages.completedAt),
+    },
+    {
+      accessor: 'status',
+      Cell: ({ row }: TableCellValue<any>) => <span className="text-capitalize">{row.original.status}</span>,
+      disableFilters: true,
+      Header: intl.formatMessage(messages.status),
+    },
+    {
+      accessor: 'readyToResume',
+      Cell: ({ row }: TableCellValue<any>) => (
+        <span className="text-capitalize">{row.original.readyToResume ? intl.formatMessage(messages.true) : ''}</span>
+      ),
+      disableFilters: true,
+      Header: intl.formatMessage(messages.readyForResume),
+    }
   ], [intl]);
 
+  const additionalColumns = [{
+    id: 'actions',
+    Header: '',
+    Cell: ActionCustomCell,
+  }];
+
   const handleFetchData = (data: DataTableFetchDataProps) => {
     const emailOrUsernameFilter = data.filters?.find((f) => f.id === 'user.username');
     const newEmailOrUsername = emailOrUsernameFilter ? emailOrUsernameFilter.value : '';
@@ -44,6 +142,7 @@ const AttemptsList = () => {
 
   return (
     <DataTable
+      additionalColumns={additionalColumns}
       className="mt-3"
       columns={columns}
       data={data.results}