Address CodeRabbit PR expertiza#169: modal deps, async add user, a11y, quiz flag, remove errors

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: vishalreddy2323

src/pages/AssignmentParticipants/AssignmentParticipants.tsx

@@ -16,7 +16,7 @@ import { useParams } from 'react-router-dom';
 import { IAssignmentResponse } from 'utils/interfaces';
 import { HttpMethod } from 'utils/httpMethods';
 import { FaCheck, FaInfoCircle, FaTimes } from 'react-icons/fa';
-import { Form, Button } from 'react-bootstrap';
+import { Form, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 const UI_ROLE_TO_API_ROLE_NAME: Record<string, string> = {
   admin: 'administrator',
@@ -50,6 +50,7 @@ function AssignmentParticipants() {
   const [selectedParticipant, setSelectedParticipant] = useState<Participant | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [saveError, setSaveError] = useState<string | null>(null);
+  const [removeError, setRemoveError] = useState<string | null>(null);
 
   const { assignmentId } = useParams();
 
@@ -82,6 +83,8 @@ function AssignmentParticipants() {
     }
   }, [
     assignmentId,
+    modalShow.edit,
+    modalShow.remove,
     addParticipantResponse,
     updateParticipantResponse,
     updateUserResponse,
@@ -153,14 +156,14 @@ function AssignmentParticipants() {
         url: `/participants/${selectedParticipant.id}`,
         method: 'DELETE',
       });
-      setError(null);
+      setRemoveError(null);
       setModalShow({ edit: false, remove: false });
     } catch (err: any) {
       const message =
         err?.response?.data?.message ??
         err?.message ??
         'Failed to remove participant. Please try again.';
-      setError(message);
+      setRemoveError(message);
     }
   };
 
@@ -208,7 +211,7 @@ function AssignmentParticipants() {
   };
 
   /** Validates lookup input and adds a matched user as an assignment participant. */
-  const handleAddUser = () => {
+  const handleAddUser = async () => {
     if (!newUserName.trim()) {
       setError('Name must not be empty.');
       return;
@@ -226,18 +229,24 @@ function AssignmentParticipants() {
       return;
     }
 
-    setError(null);
-
-    addParticipant({
-      url: `/participants/${selectedRole}`,
-      method: 'POST',
-      data: {
-        user_id: user.id,
-        assignment_id: Number(assignmentId),
-      }
-    });
-
-    setNewUserName('');
+    try {
+      await addParticipant({
+        url: `/participants/${selectedRole}`,
+        method: 'POST',
+        data: {
+          user_id: user.id,
+          assignment_id: Number(assignmentId),
+        },
+      });
+      setError(null);
+      setNewUserName('');
+    } catch (err: any) {
+      const message =
+        err?.response?.data?.message ??
+        err?.message ??
+        'Failed to add participant. Please try again.';
+      setError(message);
+    }
   };
 
   return (
@@ -275,12 +284,14 @@ function AssignmentParticipants() {
                 onChange={() => setSelectedRole(role as ParticipantRole)}
               />
               {role}
-              <FaInfoCircle
-                className="ms-2 text-secondary"
-                size={16}
-                aria-label={participantRoleInfo(role)}
-                title={participantRoleInfo(role)}
-              />
+              <OverlayTrigger
+                placement="top"
+                overlay={<Tooltip id={`role-help-${role}`}>{participantRoleInfo(role)}</Tooltip>}
+              >
+                <span className="ms-2 d-inline-flex" tabIndex={0} role="button" aria-label={participantRoleInfo(role)}>
+                  <FaInfoCircle className="text-secondary" size={16} aria-hidden />
+                </span>
+              </OverlayTrigger>
             </label>
           ))}
         </div>
@@ -333,19 +344,33 @@ function AssignmentParticipants() {
       )}
       <ConfirmRemoveModal
         show={modalShow.remove}
-        onHide={() => setModalShow({ ...modalShow, remove: false })}
+        errorMessage={removeError}
+        onHide={() => {
+          setRemoveError(null);
+          setModalShow({ ...modalShow, remove: false });
+        }}
         onConfirm={handleRemove}
       />
     </div>
   );
 }
 
-/** Returns the enabled/disabled permission icon for a permission cell. */
-export function permissionIcon(permission: IsEnabled) {
-  return permission === IsEnabled.Yes ? (
-    <FaCheck size={20} className="text-success" aria-label="Yes" />
+/**
+ * Renders an accessible icon for a permission cell.
+ * @param permission Whether the permission is granted.
+ * @param permissionLabel Short column label for screen readers, e.g. "Review permission".
+ */
+export function permissionIcon(permission: IsEnabled, permissionLabel?: string) {
+  const yes = permission === IsEnabled.Yes;
+  const ariaLabel = permissionLabel
+    ? `${permissionLabel}: ${yes ? "Yes" : "No"}`
+    : yes
+      ? "Permission enabled"
+      : "Permission disabled";
+  return yes ? (
+    <FaCheck size={20} className="text-success" aria-label={ariaLabel} role="img" />
   ) : (
-    <FaTimes size={20} className="text-secondary" aria-label="No" />
+    <FaTimes size={20} className="text-secondary" aria-label={ariaLabel} role="img" />
   );
 }
 

src/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsx

@@ -37,7 +37,8 @@ export function findUserByIdentifier<T extends { id: number; name?: string | nul
 /** Table column visibility for quiz / mentor from GET /assignments/:id (snake_case from API). */
 export function assignmentTableFlagsFromResponse(assignment: IAssignmentResponse): AssignmentProperties {
   return {
-    hasQuiz: Boolean(assignment.require_quiz) || Boolean(assignment.has_quizzes),
+    // Require both flags so we do not show "Take quiz" when quizzes exist but are not required.
+    hasQuiz: Boolean(assignment.require_quiz) && Boolean(assignment.has_quizzes),
     hasMentor: Boolean(assignment.has_mentors),
   };
 }
@@ -61,9 +62,8 @@ export function classForRole(role: Role): string {
   }
 }
 
-export function iconForRole(role: Role): JSX.Element {
-  // Role icons are intentionally omitted to follow the project icon guidelines
-  // (use the standardized icon assets under public/assets/icons for actions).
+/** Intentionally empty: role row uses text styling only (project icon guidelines). */
+export function iconForRole(_role: Role): JSX.Element {
   return <></>;
 }
 
@@ -90,6 +90,7 @@ export function participantRoleInfo(role: ParticipantRole): string {
   }
 }
 
+/** Reads a dotted path from an object; only stops on null/undefined intermediates (not on false/0/""). */
 export function getNestedValue<T>(obj: T, path: string): any {
-  return path.split('.').reduce((acc: any, key: string) => (acc ? acc[key as keyof typeof acc] : undefined), obj);
+  return path.split(".").reduce((acc: any, key: string) => (acc == null ? undefined : acc[key]), obj);
 }

src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx

@@ -4,21 +4,29 @@ import Button from 'react-bootstrap/Button';
 interface ConfirmRemoveModalProps {
   show: boolean;
   onHide: () => void;
-  onConfirm: () => void;
+  onConfirm: () => void | Promise<void>;
+  errorMessage?: string | null;
 }
 
-{/* Changed the buttons for Cancel and Confirm according to the design standards */}
-function ConfirmRemoveModal({ show, onHide, onConfirm }: ConfirmRemoveModalProps) {
+function ConfirmRemoveModal({ show, onHide, onConfirm, errorMessage }: ConfirmRemoveModalProps) {
   return (
     <Modal show={show} onHide={onHide} centered>
       <Modal.Header closeButton>
         <Modal.Title>Confirm Removal</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        Are you sure you want to remove this participant?
+        <p className="mb-2">Are you sure you want to remove this participant?</p>
+        {errorMessage ? (
+          <div className="flash_note alert alert-danger error-message" role="alert">
+            {errorMessage}
+          </div>
+        ) : null}
       </Modal.Body>
       <Modal.Footer>
-        <Button className= "btn btn-md" variant="danger" onClick={onConfirm}>
+        <Button className="btn btn-md" variant="secondary" onClick={onHide}>
+          Cancel
+        </Button>
+        <Button className="btn btn-md" variant="danger" onClick={() => void onConfirm()}>
           Confirm
         </Button>
       </Modal.Footer>

src/pages/AssignmentParticipants/ParticipantsTable.tsx

@@ -45,7 +45,7 @@ function ParticipantTable({
       enableSorting: true,
       cell: ({ row }: { row: any }) => (
         <div className={`permission-column ${classForStatus(row.original.permissions.review)}`}>
-          {permissionIcon(row.original.permissions.review)}
+          {permissionIcon(row.original.permissions.review, "Review permission")}
         </div>
       ),
     },
@@ -56,7 +56,7 @@ function ParticipantTable({
       enableSorting: true,
       cell: ({ row }: { row: any }) => (
         <div className={`permission-column ${classForStatus(row.original.permissions.submit)}`}>
-          {permissionIcon(row.original.permissions.submit)}
+          {permissionIcon(row.original.permissions.submit, "Submit permission")}
         </div>
       ),
     },
@@ -78,7 +78,7 @@ function ParticipantTable({
       enableSorting: true,
       cell: ({ row }: { row: any }) => (
         <div className={`permission-column ${classForStatus(row.original.permissions.mentor)}`}>
-          {permissionIcon(row.original.permissions.mentor)}
+          {permissionIcon(row.original.permissions.mentor, "Mentor permission")}
         </div>
       ),
     },