fix: adding attempt validation before edit/remove allowance (#200)

Author: jacobo-dominguez-wgu

src/specialExams/components/Allowances.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import Allowances from '@src/specialExams/components/Allowances';
 import { renderWithAlertAndIntl } from '@src/testUtils';
 import messages from '@src/specialExams/messages';
-import { useAddAllowance, useAllowances, useSpecialExams } from '@src/specialExams/data/apiHook';
+import { useAddAllowance, useAllowances, useAttempts, useSpecialExams } from '@src/specialExams/data/apiHook';
 import { useLearner } from '@src/data/apiHook';
 
 const mockLearnerData = {
@@ -15,13 +15,16 @@ const mockLearnerData = {
 };
 
 const mockAllowance = {
+  id: 1,
   user: {
     username: 'john_doe',
     email: 'john.doe@hotmail.com',
+    id: 5,
   },
   proctoredExam: {
     examName: 'Midterm Exam',
     examType: 'proctored',
+    id: 101,
   },
   value: '30 minutes',
   key: 'additional_time_granted',
@@ -47,14 +50,17 @@ jest.mock('@src/specialExams/data/apiHook', () => ({
   useAddAllowance: jest.fn(),
   useSpecialExams: jest.fn(),
   useDeleteAllowance: jest.fn().mockReturnValue({ mutate: jest.fn() }),
+  useAttempts: jest.fn(),
 }));
 
 describe('Allowances', () => {
   let mockAddAllowance: jest.Mock;
+  let mockRefetchAttempts: jest.Mock;
 
   beforeEach(() => {
     jest.clearAllMocks();
     mockAddAllowance = jest.fn();
+    mockRefetchAttempts = jest.fn();
     (useLearner as jest.Mock).mockReturnValue({
       data: mockLearnerData,
       refetch: jest.fn().mockResolvedValue({ data: mockLearnerData }),
@@ -69,6 +75,10 @@ describe('Allowances', () => {
       data: mockSpecialExams,
       refetch: jest.fn().mockResolvedValue({ data: mockSpecialExams }),
     });
+    (useAttempts as jest.Mock).mockReturnValue({
+      data: { results: [], count: 0, numPages: 0 },
+      refetch: mockRefetchAttempts.mockResolvedValue({ data: { results: [], count: 0, numPages: 0 } }),
+    });
   });
 
   it('renders AllowancesList and AddAllowanceModal', () => {
@@ -273,4 +283,141 @@ describe('Allowances', () => {
     // DeleteAllowanceModal should not render without selectedAllowance
     expect(screen.queryByRole('dialog', { name: messages.deleteAllowance.defaultMessage })).not.toBeInTheDocument();
   });
+
+  describe('checkAttemptAndProceed', () => {
+    it('shows warning modal when user has already attempted the exam on edit', async () => {
+      const mockAttemptData = {
+        results: [
+          {
+            id: 1,
+            examId: 101,
+            user: { username: 'john_doe' },
+            examName: 'Midterm Exam',
+            allowedTimeLimitMins: 60,
+            type: 'proctored',
+            startTime: '2023-01-01T10:00:00Z',
+            endTime: '2023-01-01T11:00:00Z',
+            status: 'completed',
+          },
+        ],
+        count: 1,
+        numPages: 1,
+      };
+      (useAllowances as jest.Mock).mockReturnValue({
+        data: { results: [mockAllowance], count: 1, numPages: 1 },
+        isLoading: false,
+      });
+      (useAttempts as jest.Mock).mockReturnValue({
+        data: mockAttemptData,
+        refetch: jest.fn().mockResolvedValue({ data: mockAttemptData }),
+      });
+      const user = userEvent.setup();
+      renderWithAlertAndIntl(<Allowances />);
+      await user.click(screen.getByRole('button', { name: messages.actions.defaultMessage }));
+      const editBtn = await screen.findByRole('button', { name: /edit/i });
+      await user.click(editBtn);
+      await waitFor(() => {
+        expect(screen.getByText(/Cannot edit allowance: john_doe has already attempted the exam/i)).toBeInTheDocument();
+      });
+      expect(screen.queryByRole('dialog', { name: messages.editAllowance.defaultMessage })).not.toBeInTheDocument();
+    });
+
+    it('shows warning modal when user has already attempted the exam on delete', async () => {
+      const mockAttemptData = {
+        results: [
+          {
+            id: 1,
+            examId: 101,
+            user: { username: 'john_doe' },
+            examName: 'Midterm Exam',
+            allowedTimeLimitMins: 60,
+            type: 'proctored',
+            startTime: '2023-01-01T10:00:00Z',
+            endTime: '2023-01-01T11:00:00Z',
+            status: 'completed',
+          },
+        ],
+        count: 1,
+        numPages: 1,
+      };
+      (useAllowances as jest.Mock).mockReturnValue({
+        data: { results: [mockAllowance], count: 1, numPages: 1 },
+        isLoading: false,
+      });
+      (useAttempts as jest.Mock).mockReturnValue({
+        data: mockAttemptData,
+        refetch: jest.fn().mockResolvedValue({ data: mockAttemptData }),
+      });
+      const user = userEvent.setup();
+      renderWithAlertAndIntl(<Allowances />);
+      await user.click(screen.getByRole('button', { name: messages.actions.defaultMessage }));
+      const deleteBtn = await screen.findByRole('button', { name: /delete/i });
+      await user.click(deleteBtn);
+      await waitFor(() => {
+        expect(screen.getByText(/Cannot delete allowance: john_doe has already attempted the exam/i)).toBeInTheDocument();
+      });
+      expect(screen.queryByRole('dialog', { name: messages.deleteAllowance.defaultMessage })).not.toBeInTheDocument();
+    });
+
+    it('opens edit modal when user has not attempted the exam', async () => {
+      const mockAttemptData = {
+        results: [
+          {
+            id: 1,
+            examId: 999, // different exam, not the one in the allowance
+            user: { username: 'john_doe' },
+            examName: 'Other Exam',
+            allowedTimeLimitMins: 60,
+            type: 'proctored',
+            startTime: '2023-01-01T10:00:00Z',
+            endTime: '2023-01-01T11:00:00Z',
+            status: 'completed',
+          },
+        ],
+        count: 1,
+        numPages: 1,
+      };
+      (useAllowances as jest.Mock).mockReturnValue({
+        data: { results: [mockAllowance], count: 1, numPages: 1 },
+        isLoading: false,
+      });
+      (useAttempts as jest.Mock).mockReturnValue({
+        data: mockAttemptData,
+        refetch: jest.fn().mockResolvedValue({ data: mockAttemptData }),
+      });
+      const user = userEvent.setup();
+      renderWithAlertAndIntl(<Allowances />);
+      await user.click(screen.getByRole('button', { name: messages.actions.defaultMessage }));
+      const editBtn = await screen.findByRole('button', { name: /edit/i });
+      await user.click(editBtn);
+      await waitFor(() => {
+        expect(screen.getByRole('dialog', { name: messages.editAllowance.defaultMessage })).toBeInTheDocument();
+      });
+    });
+
+    it('opens delete modal when user has not attempted the exam', async () => {
+      const mockAttemptData = {
+        results: [], // no attempts
+        count: 0,
+        numPages: 0,
+      };
+
+      (useAllowances as jest.Mock).mockReturnValue({
+        data: { results: [mockAllowance], count: 1, numPages: 1 },
+        isLoading: false,
+      });
+      (useAttempts as jest.Mock).mockReturnValue({
+        data: mockAttemptData,
+        refetch: jest.fn().mockResolvedValue({ data: mockAttemptData }),
+      });
+      const user = userEvent.setup();
+      renderWithAlertAndIntl(<Allowances />);
+      await user.click(screen.getByRole('button', { name: messages.actions.defaultMessage }));
+      const deleteBtn = await screen.findByRole('button', { name: /delete/i });
+      await user.click(deleteBtn);
+      await waitFor(() => {
+        expect(screen.getByRole('dialog', { name: messages.deleteAllowance.defaultMessage })).toBeInTheDocument();
+      });
+    });
+  });
 });

src/specialExams/components/Allowances.tsx

@@ -1,34 +1,86 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@openedx/frontend-base';
 import { useToggle } from '@openedx/paragon';
 import AddAllowanceModal from '@src/specialExams/components/AddAllowanceModal';
 import AllowancesList from '@src/specialExams/components/AllowancesList';
 import EditAllowanceModal from '@src/specialExams/components/EditAllowanceModal';
 import DeleteAllowanceModal from '@src/specialExams/components/DeleteAllowanceModal';
+import { useAttempts } from '@src/specialExams/data/apiHook';
+import messages from '@src/specialExams/messages';
 import { Allowance } from '@src/specialExams/types';
+import { useAlert } from '@src/providers/AlertProvider';
 
 const Allowances = () => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams<{ courseId: string }>();
+  const { showModal } = useAlert();
   const [isAddModalOpen, openAddModal, closeAddModal] = useToggle(false);
   const [isEditModalOpen, openEditModal, closeEditModal] = useToggle(false);
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
   const [selectedAllowance, setSelectedAllowance] = useState<Allowance | null>(null);
+  const [pendingAction, setPendingAction] = useState<'edit' | 'delete' | null>(null);
+
+  const { refetch } = useAttempts(courseId, {
+    page: 0,
+    pageSize: 100,
+    emailOrUsername: selectedAllowance?.user.username ?? '',
+    ordering: '',
+  }, false); // disabled by default — only runs on refetch
+
+  // Handle the attempt check after selectedAllowance and pendingAction are set
+  useEffect(() => {
+    if (!selectedAllowance || !pendingAction) {
+      return;
+    }
+
+    const checkAttempt = async () => {
+      const { data } = await refetch();
+      const hasAttempt = data?.results.some(
+        (attempt) => attempt.examId === selectedAllowance.proctoredExam.id
+      );
+
+      if (hasAttempt) {
+        showModal({
+          message: intl.formatMessage(messages.cannotModifyAllowance, {
+            action: pendingAction,
+            username: selectedAllowance.user.username,
+          }),
+          variant: 'warning',
+        });
+        setSelectedAllowance(null);
+        setPendingAction(null);
+      } else if (pendingAction === 'edit') {
+        openEditModal();
+        setPendingAction(null);
+      } else {
+        openDeleteModal();
+        setPendingAction(null);
+      }
+    };
+
+    checkAttempt();
+  }, [selectedAllowance, pendingAction, refetch, showModal, intl, openEditModal, openDeleteModal]);
 
   const handleEditAllowance = (allowance: Allowance) => {
     setSelectedAllowance(allowance);
-    openEditModal();
+    setPendingAction('edit');
+  };
+
+  const handleDeleteAllowance = (allowance: Allowance) => {
+    setSelectedAllowance(allowance);
+    setPendingAction('delete');
   };
 
   const handleCloseEditModal = () => {
     setSelectedAllowance(null);
+    setPendingAction(null);
     closeEditModal();
   };
 
-  const handleDeleteAllowance = (allowance: Allowance) => {
-    setSelectedAllowance(allowance);
-    openDeleteModal();
-  };
-
   const handleCloseDeleteModal = () => {
     setSelectedAllowance(null);
+    setPendingAction(null);
     closeDeleteModal();
   };
 

src/specialExams/data/apiHook.test.tsx

@@ -241,6 +241,40 @@ describe('specialExams api hooks', () => {
 
       expect(mockGetAttempts).toHaveBeenLastCalledWith(newCourseId, params);
     });
+
+    it('does not fetch when enabled is false', () => {
+      const { result } = renderHook(() => useAttempts(courseId, params, false), {
+        wrapper: createWrapper(),
+      });
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.fetchStatus).toBe('idle');
+      expect(mockGetAttempts).not.toHaveBeenCalled();
+    });
+
+    it('fetches when enabled is true', async () => {
+      mockGetAttempts.mockResolvedValue(mockAttemptsData);
+      const { result } = renderHook(() => useAttempts(courseId, params, true), {
+        wrapper: createWrapper(),
+      });
+      expect(result.current.isLoading).toBe(true);
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true);
+      });
+      expect(mockGetAttempts).toHaveBeenCalledWith(courseId, params);
+      expect(result.current.data).toBe(mockAttemptsData);
+    });
+
+    it('can be manually refetched when enabled is false', async () => {
+      mockGetAttempts.mockResolvedValue(mockAttemptsData);
+      const { result } = renderHook(() => useAttempts(courseId, params, false), {
+        wrapper: createWrapper(),
+      });
+      expect(mockGetAttempts).not.toHaveBeenCalled();
+      expect(result.current.fetchStatus).toBe('idle');
+      const refetchResult = await result.current.refetch();
+      expect(mockGetAttempts).toHaveBeenCalledWith(courseId, params);
+      expect(refetchResult.data).toBe(mockAttemptsData);
+    });
   });
 
   describe('useAllowances', () => {

src/specialExams/data/apiHook.ts

@@ -3,11 +3,11 @@ import { addAllowance, deleteAllowance, getAllowances, getAttempts, getSpecialEx
 import { specialExamsQueryKeys } from './queryKeys';
 import { AddAllowanceParams, AttemptsParams, DeleteAllowanceParams } from '../types';
 
-export const useAttempts = (courseId: string, params: AttemptsParams) => (
+export const useAttempts = (courseId: string, params: AttemptsParams, enabled = true) => (
   useQuery({
     queryKey: specialExamsQueryKeys.attempts(courseId, params),
     queryFn: () => getAttempts(courseId, params),
-    enabled: !!courseId,
+    enabled: !!courseId && enabled,
   })
 );
 

src/specialExams/messages.ts

@@ -220,6 +220,11 @@ const messages = defineMessages({
     id: 'instruct.specialExams.editAllowanceError',
     defaultMessage: 'An error occurred while editing the allowance. Please try again.',
     description: 'Error message displayed when there is an issue editing an allowance'
+  },
+  cannotModifyAllowance: {
+    id: 'instruct.specialExams.cannotModifyAllowance',
+    defaultMessage: 'Cannot {action} allowance: {username} has already attempted the exam',
+    description: 'Warning message shown when trying to edit or delete an allowance for a student who has already attempted the exam'
   }
 });