fix assignment participants integration flow#169
Open
Vishalreddy2020 wants to merge 7 commits intoexpertiza:mainfrom
Open
fix assignment participants integration flow#169Vishalreddy2020 wants to merge 7 commits intoexpertiza:mainfrom
Vishalreddy2020 wants to merge 7 commits intoexpertiza:mainfrom
Conversation
Use assignment participant API user role data for correct role rendering, keep role edits synchronized with backend updates, and align assignment participants UI behavior and icon usage with the expected manage participants workflow. Made-with: Cursor
efg
reviewed
Apr 15, 2026
| import { useEffect, useMemo, useState } from 'react'; | ||
| import EditParticipantModal from './EditParticipantModal'; | ||
| import ConfirmRemoveModal from './ConfirmRemoveModal'; | ||
| import ToastNotification from './ToastNotification'; |
Member
There was a problem hiding this comment.
Seems like a creative name, but will others understand it?
| import { HttpMethod } from 'utils/httpMethods'; | ||
| import { Form, Button } from 'react-bootstrap'; | ||
|
|
||
| const ROLE_NAME_TO_BACKEND: Record<string, string> = { |
Member
There was a problem hiding this comment.
What's the significance of "to backend"?
| @@ -0,0 +1,134 @@ | |||
| import { permissionIcon } from "./AssignmentParticipants"; | |||
Member
There was a problem hiding this comment.
If the back end communicates with the db, why do we need a Table method in the front end?
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughReplaces nested participants routing with a new AssignmentParticipants page and adds related components, types, utilities, and CSS to list, search, add, edit, and remove assignment participants; also introduces a shared publicUrl helper and updates several modules to use it, plus adds /dist to .gitignore. ChangesAssignment Participants feature
Public asset URL helper and asset path updates
Sequence DiagramsequenceDiagram
participant User as User
participant AP as AssignmentParticipants
participant API as API
participant Table as ParticipantTable
participant Modal as EditParticipantModal
User->>AP: Open participants page
AP->>API: GET assignment, participants, users, roles
API-->>AP: Return data
AP->>Table: Render normalized rows
User->>Table: Filter / Search
Table-->>AP: (client-side) request filtered rows
AP-->>Table: Provide filtered rows
User->>AP: Add participant (input + role)
AP->>API: POST /participants (user_id, assignment_id, role)
API-->>AP: Created
AP->>API: GET latest data
API-->>AP: Return updated data
AP->>Table: Refresh rows
User->>Table: Click edit
Table->>Modal: Open with participant
User->>Modal: Submit changes
Modal->>AP: onSave(updatedParticipant)
AP->>API: PATCH participant authorization
AP->>API: PATCH user profile
API-->>AP: Confirm
AP->>API: GET latest data
API-->>AP: Return updated data
AP->>Table: Refresh rows
User->>Table: Click delete
Table->>AP: Confirm delete
AP->>API: DELETE /participants/{id}
API-->>AP: Confirm
AP->>API: GET latest data
API-->>AP: Return updated data
AP->>Table: Refresh rows
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/utils/interfaces.ts (1)
61-69: Model the nesteduserpayload here as well.
AssignmentParticipants.tsxreadsparticipant.user.id,participant.user.email, andparticipant.user.role?.name, but this interface does not includeuser. That forces the new integration path back toany, which weakens the exact role-mapping behavior this PR is trying to fix.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/utils/interfaces.ts` around lines 61 - 69, The IAssignmentParticipantResponse interface is missing the nested user payload used by AssignmentParticipants.tsx (it accesses participant.user.id, participant.user.email, and participant.user.role?.name); update IAssignmentParticipantResponse to include a user field with a typed shape (e.g., user: { id: number; email: string; role?: { name?: string } | null } | null) or reference an existing IUser type so callers no longer fall back to any and role mapping retains proper typings.src/pages/AssignmentParticipants/ParticipantsTable.tsx (1)
1-3: Break the page/table import cycle.
ParticipantsTable.tsximportspermissionIconfromAssignmentParticipants.tsx, whileAssignmentParticipants.tsximports this table. That circular dependency is easy to avoid by movingpermissionIconintoAssignmentParticipantsUtil.tsxor a small shared helper.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/ParticipantsTable.tsx` around lines 1 - 3, ParticipantsTable.tsx currently imports permissionIcon from AssignmentParticipants.tsx creating a circular dependency; move the permissionIcon helper into AssignmentParticipantsUtil.tsx (or a new small shared helper) and update both ParticipantsTable.tsx and AssignmentParticipants.tsx to import permissionIcon from that util instead; specifically locate the permissionIcon export in AssignmentParticipants.tsx, cut it into AssignmentParticipantsUtil.tsx (or a new helper module), export it there, and change the import lines in ParticipantsTable.tsx and AssignmentParticipants.tsx to import { permissionIcon } from the new util to break the cycle.src/pages/AssignmentParticipants/AssignmentParticipants.css (1)
195-233: Wire up or remove the custom info tooltip styles.These rules never apply right now because
AssignmentParticipants.tsxrenders the help icon withclassName="ms-2", not.info-icon. That means the custom tooltip behavior here is dead, and Line 232 also uses deprecatedword-wrap. Either add the.info-iconclass in the JSX or delete this block and keep the nativetitletooltip only. Useoverflow-wrapif you keep the pseudo-element.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.css` around lines 195 - 233, The custom tooltip CSS in AssignmentParticipants.css (the .info-icon and its :hover::after rules) is dead because the help icon in AssignmentParticipants.tsx uses className="ms-2" instead of "info-icon"; either add the info-icon class to the rendered element in AssignmentParticipants.tsx (e.g., change className="ms-2" to className="ms-2 info-icon") to enable the custom tooltip, or remove this entire CSS block and rely on the native title tooltip; if you keep the CSS, replace the deprecated word-wrap with overflow-wrap for the pseudo-element.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 150-169: handleSave currently fires updateParticipant and
updateUser and immediately closes the modal; instead, validate that
resolveRoleId(updatedParticipant.role) returns a defined roleId and then perform
both backend updates (updateParticipant and updateUser) and await their
completion (e.g., via Promise.all or sequential awaits) inside a try/catch; only
call setModalShow({ edit: false, remove: false }) after both requests succeed,
and on failure keep the modal open and surface the error (do not silently omit
role_id when roleId is undefined). Ensure you update the code paths in
handleSave, referencing resolveRoleId, updateParticipant, updateUser, and
setModalShow.
- Around line 302-312: The permissionIcon function renders only images without
accessible text; update permissionIcon (in AssignmentParticipants.tsx) to
include meaningful accessible text by adding an alt and aria-label that reflect
the state (e.g., "Enabled" when permission === IsEnabled.Yes and "Disabled"
otherwise) so screen readers announce the permission state; if possible accept
an optional label parameter (e.g., permissionIcon(permission: IsEnabled, label?:
string)) to prepend context like "Review permission: Enabled" or fall back to
the generic "Enabled"/"Disabled" text.
---
Nitpick comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.css`:
- Around line 195-233: The custom tooltip CSS in AssignmentParticipants.css (the
.info-icon and its :hover::after rules) is dead because the help icon in
AssignmentParticipants.tsx uses className="ms-2" instead of "info-icon"; either
add the info-icon class to the rendered element in AssignmentParticipants.tsx
(e.g., change className="ms-2" to className="ms-2 info-icon") to enable the
custom tooltip, or remove this entire CSS block and rely on the native title
tooltip; if you keep the CSS, replace the deprecated word-wrap with
overflow-wrap for the pseudo-element.
In `@src/pages/AssignmentParticipants/ParticipantsTable.tsx`:
- Around line 1-3: ParticipantsTable.tsx currently imports permissionIcon from
AssignmentParticipants.tsx creating a circular dependency; move the
permissionIcon helper into AssignmentParticipantsUtil.tsx (or a new small shared
helper) and update both ParticipantsTable.tsx and AssignmentParticipants.tsx to
import permissionIcon from that util instead; specifically locate the
permissionIcon export in AssignmentParticipants.tsx, cut it into
AssignmentParticipantsUtil.tsx (or a new helper module), export it there, and
change the import lines in ParticipantsTable.tsx and AssignmentParticipants.tsx
to import { permissionIcon } from the new util to break the cycle.
In `@src/utils/interfaces.ts`:
- Around line 61-69: The IAssignmentParticipantResponse interface is missing the
nested user payload used by AssignmentParticipants.tsx (it accesses
participant.user.id, participant.user.email, and participant.user.role?.name);
update IAssignmentParticipantResponse to include a user field with a typed shape
(e.g., user: { id: number; email: string; role?: { name?: string } | null } |
null) or reference an existing IUser type so callers no longer fall back to any
and role mapping retains proper typings.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: fee84620-643b-4e7d-8f73-7565bfb1391f
⛔ Files ignored due to path filters (4)
public/assets/icons/Uncheck-icon.pngis excluded by!**/*.pngpublic/assets/icons/delete-icon-24.pngis excluded by!**/*.pngpublic/assets/icons/edit-icon-24.pngis excluded by!**/*.pngpublic/assets/icons/info.pngis excluded by!**/*.png
📒 Files selected for processing (7)
src/App.tsxsrc/pages/AssignmentParticipants/AssignmentParticipants.csssrc/pages/AssignmentParticipants/AssignmentParticipants.tsxsrc/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsxsrc/pages/AssignmentParticipants/EditParticipantModal.tsxsrc/pages/AssignmentParticipants/ParticipantsTable.tsxsrc/utils/interfaces.ts
Vishalreddy2020
force-pushed
the
ap-only-safe-pr
branch
from
c8fcd68 to
c18a4ef
Compare
… toast state - rename ROLE_NAME_TO_BACKEND -> UI_ROLE_TO_API_ROLE_NAME and BACKEND_ROLE_TO_UI -> API_ROLE_TO_UI_ROLE for clarity - add JSDoc method comments across AssignmentParticipants, AssignmentParticipantsUtil, and ParticipantsTable - remove unused toast and lastDeletedParticipant state and the corresponding ToastNotification render
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
src/pages/AssignmentParticipants/AssignmentParticipants.tsx (2)
302-312:⚠️ Potential issue | 🟠 MajorAdd accessible text to the permission icons.
These images still have no
alt/aria-label, so the permission cells are effectively silent to screen readers. Please expose the enabled/disabled state here and pass the column label fromParticipantsTableif you want the announcement to be specific.Suggested fix
-/** Returns the enabled/disabled permission icon for a permission cell. */ -export function permissionIcon(permission: IsEnabled) { - return permission === IsEnabled.Yes ? <img - src="/assets/icons/Check-icon.png" - width="20" - height="20" - /> : <img - src="/assets/icons/Uncheck-icon.png" - width="20" - height="20" - />; +/** Returns the enabled/disabled permission icon for a permission cell. */ +export function permissionIcon(permission: IsEnabled, label = 'Permission') { + const enabled = permission === IsEnabled.Yes; + const text = `${label}: ${enabled ? 'Enabled' : 'Disabled'}`; + + return ( + <img + src={enabled ? "/assets/icons/Check-icon.png" : "/assets/icons/Uncheck-icon.png"} + width="20" + height="20" + alt={text} + aria-label={text} + /> + ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 302 - 312, The permissionIcon function currently returns img elements without accessible text; update permissionIcon(permission: IsEnabled, columnLabel?: string) to include descriptive accessible text (either alt and/or aria-label) that announces enabled/disabled state (e.g., `${columnLabel || 'Permission'}: enabled` or `: disabled`) and update callers in ParticipantsTable to pass the column label into permissionIcon so screen readers receive a meaningful announcement; reference the IsEnabled enum to determine which label to use and ensure the img elements include the chosen alt/aria-label attribute.
149-168:⚠️ Potential issue | 🟠 MajorDon’t dismiss the editor before both updates have succeeded.
roleIdcan still resolve toundefinedhere, which silently skips the role update, and the modal closes before either PATCH call is confirmed. That breaks the “keep role edits synchronized with backend updates” goal and can hide partial failures from the user.Suggested fix
- const handleSave = (updatedParticipant: Participant) => { + const handleSave = async (updatedParticipant: Participant) => { const roleId = resolveRoleId(updatedParticipant.role); + if (roleId == null) { + setError(`Unsupported role: ${updatedParticipant.role}`); + return; + } - updateParticipant({ - url: `/participants/${updatedParticipant.id}/${updatedParticipant.participantRole}`, - method: HttpMethod.PATCH, - }); - - updateUser({ - url: `/users/${updatedParticipant.user_id}`, - method: HttpMethod.PATCH, - data: { - full_name: updatedParticipant.name, - email: updatedParticipant.email, - ...(roleId != null ? { role_id: roleId } : {}), - }, - }); - - setModalShow({ edit: false, remove: false }); + try { + await Promise.all([ + updateParticipant({ + url: `/participants/${updatedParticipant.id}/${updatedParticipant.participantRole}`, + method: HttpMethod.PATCH, + }), + updateUser({ + url: `/users/${updatedParticipant.user_id}`, + method: HttpMethod.PATCH, + data: { + full_name: updatedParticipant.name, + email: updatedParticipant.email, + role_id: roleId, + }, + }), + ]); + + setError(null); + setModalShow({ edit: false, remove: false }); + } catch { + setError('Failed to update participant.'); + } };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 149 - 168, handleSave currently fires updateParticipant and updateUser without awaiting results and may omit the role update when roleId is undefined, then closes the modal immediately; change handleSave to await both network calls (use Promise.all or sequential await) and only call setModalShow({ edit: false, remove: false }) after both succeed, and ensure you explicitly include a role update payload (e.g., send role_id: roleId or role_id: null as appropriate) instead of silently omitting it so backend changes aren’t skipped; wrap the awaits in try/catch and surface errors (do not close the modal on failure) so updateParticipant, updateUser, resolveRoleId and setModalShow are the places to modify.
🧹 Nitpick comments (1)
src/pages/AssignmentParticipants/ParticipantsTable.tsx (1)
1-3: MovepermissionIconinto a shared helper to break the import cycle.
AssignmentParticipants.tsximports this table, and this table imports back fromAssignmentParticipants.tsx. That cycle is avoidable and makes the table harder to reuse or test in isolation. PullpermissionIconintoAssignmentParticipantsUtil.tsxor a small icon helper module and import it from both places.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/ParticipantsTable.tsx` around lines 1 - 3, The import cycle is caused by permissionIcon being defined in AssignmentParticipants.tsx and imported back into ParticipantsTable.tsx; move the permissionIcon function (and any small related icon helpers) into the shared utility module (e.g., AssignmentParticipantsUtil.tsx or a new icons helper) and update both ParticipantsTable.tsx and AssignmentParticipants.tsx to import permissionIcon from that new module; ensure you export permissionIcon from the util, remove the original definition from AssignmentParticipants.tsx, and run the build/tests to confirm the cycle is resolved.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 141-146: The remove handler currently closes the modal
immediately; update the handleRemove function to wait for the deleteParticipant
operation to complete and only call setModalShow({ edit: false, remove: false })
after a successful response (or onSuccess callback), and show an error
notification or keep the modal open if the DELETE fails; locate the delete
invocation in handleRemove and convert it to use the promise/async result or the
deleteParticipant mutation's onSuccess/onError handlers to control modal state
and surface errors to the user.
In `@src/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsx`:
- Around line 38-42: The helper assignmentTableFlagsFromResponse currently uses
|| and thus shows the quiz column when quizzes exist even if not required;
update the quiz predicate to require both flags so it only shows when quizzes
are present and required by changing hasQuiz to use && (i.e., set hasQuiz =
Boolean(assignment.require_quiz) && Boolean(assignment.has_quizzes)) in
assignmentTableFlagsFromResponse.
- Around line 93-94: The getNestedValue function stops traversal on any falsy
intermediate because it uses `acc ? acc[key] : undefined`; update the check to
only bail on null/undefined (e.g., use `acc == null` or `acc === null || acc ===
undefined`) so valid falsy values (false, 0, "") continue to be traversed;
modify the reducer in getNestedValue to return `acc == null ? undefined :
acc[key as keyof typeof acc]` (preserving the return type) so nested lookups
behave correctly.
---
Duplicate comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 302-312: The permissionIcon function currently returns img
elements without accessible text; update permissionIcon(permission: IsEnabled,
columnLabel?: string) to include descriptive accessible text (either alt and/or
aria-label) that announces enabled/disabled state (e.g., `${columnLabel ||
'Permission'}: enabled` or `: disabled`) and update callers in ParticipantsTable
to pass the column label into permissionIcon so screen readers receive a
meaningful announcement; reference the IsEnabled enum to determine which label
to use and ensure the img elements include the chosen alt/aria-label attribute.
- Around line 149-168: handleSave currently fires updateParticipant and
updateUser without awaiting results and may omit the role update when roleId is
undefined, then closes the modal immediately; change handleSave to await both
network calls (use Promise.all or sequential await) and only call setModalShow({
edit: false, remove: false }) after both succeed, and ensure you explicitly
include a role update payload (e.g., send role_id: roleId or role_id: null as
appropriate) instead of silently omitting it so backend changes aren’t skipped;
wrap the awaits in try/catch and surface errors (do not close the modal on
failure) so updateParticipant, updateUser, resolveRoleId and setModalShow are
the places to modify.
---
Nitpick comments:
In `@src/pages/AssignmentParticipants/ParticipantsTable.tsx`:
- Around line 1-3: The import cycle is caused by permissionIcon being defined in
AssignmentParticipants.tsx and imported back into ParticipantsTable.tsx; move
the permissionIcon function (and any small related icon helpers) into the shared
utility module (e.g., AssignmentParticipantsUtil.tsx or a new icons helper) and
update both ParticipantsTable.tsx and AssignmentParticipants.tsx to import
permissionIcon from that new module; ensure you export permissionIcon from the
util, remove the original definition from AssignmentParticipants.tsx, and run
the build/tests to confirm the cycle is resolved.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 29f00a6a-d44a-4acc-bebe-102aa1f91901
📒 Files selected for processing (3)
src/pages/AssignmentParticipants/AssignmentParticipants.tsxsrc/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsxsrc/pages/AssignmentParticipants/ParticipantsTable.tsx
…odal - await both participant and user PATCH requests in handleSave with try/catch - treat unresolved role id as a save error instead of silently dropping role_id - keep the edit modal open and show inline error on save failure; close only on success - EditParticipantModal: accept errorMessage prop, render inline alert, and stop auto-closing on save click
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
src/pages/AssignmentParticipants/AssignmentParticipants.tsx (3)
329-340:⚠️ Potential issue | 🟡 MinorPermission icons lack accessible text for screen readers.
The
<img>elements have noaltattribute, so screen-reader users cannot determine whether a permission is enabled or disabled.Suggested fix
export function permissionIcon(permission: IsEnabled) { - return permission === IsEnabled.Yes ? <img - src="/assets/icons/Check-icon.png" - width="20" - height="20" - /> : <img - src="/assets/icons/Uncheck-icon.png" - width="20" - height="20" - />; + const enabled = permission === IsEnabled.Yes; + return ( + <img + src={enabled ? "/assets/icons/Check-icon.png" : "/assets/icons/Uncheck-icon.png"} + alt={enabled ? "Enabled" : "Disabled"} + width="20" + height="20" + /> + ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 329 - 340, The permissionIcon function renders <img> elements without accessible text; update permissionIcon (and references to IsEnabled) to include meaningful alt attributes that reflect the state (e.g., alt="Enabled" or alt="Disabled" or "Permission enabled"/"Permission disabled" based on permission === IsEnabled.Yes) so screen readers can announce the permission state; ensure both the check and uncheck images get the appropriate alt text and keep existing attributes (width/height) unchanged.
143-149:⚠️ Potential issue | 🟠 MajorModal closes before DELETE completes — user gets no feedback on failure.
handleRemovecloses the modal immediately after firingdeleteParticipant, without awaiting the result. If the request fails, the UI appears successful and the participant reappears only after a manual refresh.Suggested async handling
- const handleRemove = () => { - if (selectedParticipant) { - deleteParticipant({ url: `/participants/${selectedParticipant.id}`, method: 'DELETE' }); - setModalShow({ edit: false, remove: false }); - } + const handleRemove = async () => { + if (!selectedParticipant) return; + + try { + await deleteParticipant({ + url: `/participants/${selectedParticipant.id}`, + method: 'DELETE', + }); + setModalShow({ edit: false, remove: false }); + } catch { + setError('Failed to remove participant. Please try again.'); + } };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 143 - 149, The remove flow closes the modal immediately after calling deleteParticipant, so failures are hidden; make handleRemove async, await the deleteParticipant call (or its returned promise), and only call setModalShow({ edit: false, remove: false }) after a successful response; on error catch and keep the remove modal open while showing an error state/message (or re-enable the remove button) so users see the failure; update any UI loading state (e.g., disable the confirm button) during the pending delete to prevent duplicate requests.
194-225:⚠️ Potential issue | 🟠 Major
handleAddUserfires without awaiting — no feedback on add failure.Similar to
handleRemove, this handler clears the input and returns immediately after callingaddParticipant. If the request fails, the user has no indication that the participant wasn't added. Consider awaiting the result and surfacing errors via the existingerrorstate.Suggested async handling
- const handleAddUser = () => { + const handleAddUser = async () => { if (!newUserName.trim()) { setError('Name must not be empty.'); return; } const user = findUserByIdentifier(usersResponse?.data ?? [], newUserName); if (!user) { setError('User not found.'); return; } if (participants.some((p) => p.user_id === user.id)) { setError('This user is already a participant.'); 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), + }, + }); + setNewUserName(''); + } catch { + setError('Failed to add participant. Please try again.'); + } };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 194 - 225, handleAddUser currently calls addParticipant and immediately clears the input so failures are invisible; change handleAddUser to be async and await the addParticipant call (the one that sends POST to `/participants/${selectedRole}`), catch any errors and call setError(...) with the returned/throwable error message, only clear newUserName with setNewUserName('') on success, and ensure setError(null) is still used to clear previous errors before attempting the request; reference handleAddUser, addParticipant, setError, setNewUserName, participants, and findUserByIdentifier when making the change.
🧹 Nitpick comments (1)
src/pages/AssignmentParticipants/AssignmentParticipants.tsx (1)
74-88:modalShowis read but missing from the dependency array.The condition
!modalShow.edit && !modalShow.removeis evaluated inside the effect, butmodalShowis not listed in the dependency array. React's exhaustive-deps rule is violated, and the effect's behavior depends on the stale-closure value ofmodalShowat the time response objects change.This works today due to state batching (response updates and
setModalShoware processed in the same render), but is fragile. Consider addingmodalShow.editandmodalShow.removeto deps so the effect reliably re-evaluates when modals close.Suggested fix
}, [ assignmentId, addParticipantResponse, updateParticipantResponse, updateUserResponse, deleteParticipantResponse, + modalShow.edit, + modalShow.remove, ]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 74 - 88, The useEffect that refreshes data reads modalShow.edit and modalShow.remove but they are not included in the dependency array; update the dependency list for that useEffect (the effect that calls fetchParticipants, fetchUsers, fetchRoles, and fetchAssignment) to include modalShow.edit and modalShow.remove alongside assignmentId and the response flags so the effect re-runs when the modal state changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 262-269: The info icon currently uses the title attribute (see the
img rendering the info icon and the participantRoleInfo(role) tooltip text),
which is not accessible; replace this by rendering an accessible tooltip: add a
visually-hidden span containing participantRoleInfo(role) with a unique id, make
the icon keyboard-focusable (e.g., add tabIndex=0) and reference that span via
aria-describedby on the img (or use an existing Tooltip component that manages
focus and ARIA), so screen readers and keyboard users can access the same
description.
---
Duplicate comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 329-340: The permissionIcon function renders <img> elements
without accessible text; update permissionIcon (and references to IsEnabled) to
include meaningful alt attributes that reflect the state (e.g., alt="Enabled" or
alt="Disabled" or "Permission enabled"/"Permission disabled" based on permission
=== IsEnabled.Yes) so screen readers can announce the permission state; ensure
both the check and uncheck images get the appropriate alt text and keep existing
attributes (width/height) unchanged.
- Around line 143-149: The remove flow closes the modal immediately after
calling deleteParticipant, so failures are hidden; make handleRemove async,
await the deleteParticipant call (or its returned promise), and only call
setModalShow({ edit: false, remove: false }) after a successful response; on
error catch and keep the remove modal open while showing an error state/message
(or re-enable the remove button) so users see the failure; update any UI loading
state (e.g., disable the confirm button) during the pending delete to prevent
duplicate requests.
- Around line 194-225: handleAddUser currently calls addParticipant and
immediately clears the input so failures are invisible; change handleAddUser to
be async and await the addParticipant call (the one that sends POST to
`/participants/${selectedRole}`), catch any errors and call setError(...) with
the returned/throwable error message, only clear newUserName with
setNewUserName('') on success, and ensure setError(null) is still used to clear
previous errors before attempting the request; reference handleAddUser,
addParticipant, setError, setNewUserName, participants, and findUserByIdentifier
when making the change.
---
Nitpick comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 74-88: The useEffect that refreshes data reads modalShow.edit and
modalShow.remove but they are not included in the dependency array; update the
dependency list for that useEffect (the effect that calls fetchParticipants,
fetchUsers, fetchRoles, and fetchAssignment) to include modalShow.edit and
modalShow.remove alongside assignmentId and the response flags so the effect
re-runs when the modal state changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: afba6d9d-013b-4e9d-a6ea-419bbaa7dfb9
📒 Files selected for processing (2)
src/pages/AssignmentParticipants/AssignmentParticipants.tsxsrc/pages/AssignmentParticipants/EditParticipantModal.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/AssignmentParticipants/EditParticipantModal.tsx
- convert handleRemove to async and await the deleteParticipant DELETE call - close the remove confirmation modal only after the backend confirms success - on failure, keep the modal context and surface an error message via setError
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
src/pages/AssignmentParticipants/AssignmentParticipants.tsx (2)
345-354:⚠️ Potential issue | 🟠 MajorPermission icons still need accessible text.
At Lines 345-354, the rendered images have no state text (
alt/aria-label), so permission state is not announced to screen readers.Suggested fix
-export function permissionIcon(permission: IsEnabled) { - return permission === IsEnabled.Yes ? <img - src="/assets/icons/Check-icon.png" - width="20" - height="20" - /> : <img - src="/assets/icons/Uncheck-icon.png" - width="20" - height="20" - />; +export function permissionIcon(permission: IsEnabled, label?: string) { + const enabled = permission === IsEnabled.Yes; + const state = enabled ? 'Enabled' : 'Disabled'; + const text = label ? `${label}: ${state}` : state; + return ( + <img + src={enabled ? "/assets/icons/Check-icon.png" : "/assets/icons/Uncheck-icon.png"} + width="20" + height="20" + alt={text} + aria-label={text} + /> + ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 345 - 354, permissionIcon currently renders images without accessible text; update the permissionIcon(permission: IsEnabled) function to provide meaningful accessible labels on the rendered images (e.g., set alt and/or aria-label to "Enabled" when permission === IsEnabled.Yes and "Disabled" otherwise), referencing the IsEnabled enum so screen readers announce the state; ensure you do not use empty alt for these non-decorative images and keep icon sizing attributes unchanged.
277-284:⚠️ Potential issue | 🟡 MinorInfo tooltip is still not keyboard/screen-reader accessible.
At Lines 277-284, the info icon relies on
title, which is not reliably accessible for keyboard and assistive tech users.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx` around lines 277 - 284, The info icon currently uses an <img> with only a title (participantRoleInfo) which is not keyboard/screen-reader accessible; replace it with a focusable, semantic control (e.g., a <button> or <span role="button">) that has tabindex=0 and proper ARIA attributes (aria-label or aria-labelledby and aria-describedby pointing to the tooltip text produced by participantRoleInfo), ensure keyboard handlers (Enter/Space) toggle/show the tooltip, and make the tooltip element itself accessible (role="tooltip" and id matching aria-describedby) so screen readers and keyboard users can discover the info.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 209-240: handleAddUser should await the POST and only clear the
input on success: change the call to addParticipant inside handleAddUser (which
currently fires without awaiting) to await the promise returned by
addParticipant (using async/try-catch in handleAddUser), setError(null) only
after a successful response, clear newUserName only on success (call
setNewUserName('') after await), and on catch populate setError with the error
message; reference the handleAddUser function, addParticipant call,
selectedRole, assignmentId, setError, and setNewUserName to locate and update
the logic.
- Around line 75-89: The useEffect that refreshes data (using fetchParticipants,
fetchUsers, fetchRoles, fetchAssignment) is gated by
modalShow.edit/modalShow.remove but modalShow is not included in the dependency
array; add modalShow (or modalShow.edit and modalShow.remove) to the
dependencies of the useEffect that contains those fetch calls so the effect
reruns when the modal closes and prevents stale participant data (update the
dependency array where useEffect is declared around
fetchParticipants/fetchUsers/fetchRoles/fetchAssignment).
---
Duplicate comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipants.tsx`:
- Around line 345-354: permissionIcon currently renders images without
accessible text; update the permissionIcon(permission: IsEnabled) function to
provide meaningful accessible labels on the rendered images (e.g., set alt
and/or aria-label to "Enabled" when permission === IsEnabled.Yes and "Disabled"
otherwise), referencing the IsEnabled enum so screen readers announce the state;
ensure you do not use empty alt for these non-decorative images and keep icon
sizing attributes unchanged.
- Around line 277-284: The info icon currently uses an <img> with only a title
(participantRoleInfo) which is not keyboard/screen-reader accessible; replace it
with a focusable, semantic control (e.g., a <button> or <span role="button">)
that has tabindex=0 and proper ARIA attributes (aria-label or aria-labelledby
and aria-describedby pointing to the tooltip text produced by
participantRoleInfo), ensure keyboard handlers (Enter/Space) toggle/show the
tooltip, and make the tooltip element itself accessible (role="tooltip" and id
matching aria-describedby) so screen readers and keyboard users can discover the
info.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: dadb0cec-12db-4d5f-b491-1143d846dfa7
📒 Files selected for processing (1)
src/pages/AssignmentParticipants/AssignmentParticipants.tsx
… for permissions Co-authored-by: Cursor <cursoragent@cursor.com>
Vishalreddy2020
pushed a commit
to Vishalreddy2020/reimplementation-front-end
that referenced
this pull request
May 4, 2026
…, quiz flag, remove errors Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Users/userColumns.tsx (1)
127-144:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse
publicUrlfor the action icons too.Line 128 and Line 143 still use root-relative paths, so these icons can fail under a non-root
BASE_URLeven though the check icons were migrated.Suggested fix
<img - src={"/assets/images/edit-icon-24.png"} + src={publicUrl("assets/images/edit-icon-24.png")} alt="Edit" style={{ width: "20px", height: "20px" }} /> ... <img - src={"/assets/images/delete-icon-24.png"} + src={publicUrl("assets/images/delete-icon-24.png")} alt="Delete" style={{ width: "20px", height: "20px" }} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Users/userColumns.tsx` around lines 127 - 144, The delete and edit icon <img> elements in the action column still use root-relative paths; update their src attributes to use the same publicUrl base used for other assets (e.g. replace "/assets/images/edit-icon-24.png" and "/assets/images/delete-icon-24.png" with the publicUrl-prefixed paths) in the userColumns renderer so icons honor a non-root BASE_URL (locate the <img> tags inside the OverlayTrigger/Button blocks and change their src to use the existing publicUrl variable).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/AssignmentParticipants/AssignmentParticipantsTypes.ts`:
- Around line 6-19: The Role and ParticipantRole enums are too strict and
backend strings are currently being cast into them, which can produce invalid
values downstream (e.g., in Participant and resolveRoleId). Add an explicit
Unknown (or Other) member to both Role and ParticipantRole, then update the
mapper that transforms API data (where raw user.role?.name and authorization are
read in AssignmentParticipants/AssignmentParticipants.tsx and where
resolveRoleId is called) to map any unrecognized backend string to Role.Unknown
or ParticipantRole.Unknown instead of casting; ensure any places that currently
cast (e.g., direct casts of user.role?.name or authorization) use the
mapper/guarding function so resolveRoleId only ever receives known enum values
or the Unknown sentinel.
In `@src/pages/AssignmentParticipants/EditParticipantModal.css`:
- Around line 13-27: Scope the modal/form selectors by prefixing them with a
feature root class (e.g., .edit-participant-modal) so rules like ".modal-body
.form-group", ".form-label", ".form-control", and ".modal-footer button" only
apply inside the Edit Participant UI; update the ".form-control" rule to use
min-height instead of a fixed height to avoid forcing control sizing globally;
keep the same declarations but move them under the new root selector (e.g.,
.edit-participant-modal .modal-body .form-group, .edit-participant-modal
.form-label, .edit-participant-modal .form-control, .edit-participant-modal
.modal-footer button).
---
Outside diff comments:
In `@src/pages/Users/userColumns.tsx`:
- Around line 127-144: The delete and edit icon <img> elements in the action
column still use root-relative paths; update their src attributes to use the
same publicUrl base used for other assets (e.g. replace
"/assets/images/edit-icon-24.png" and "/assets/images/delete-icon-24.png" with
the publicUrl-prefixed paths) in the userColumns renderer so icons honor a
non-root BASE_URL (locate the <img> tags inside the OverlayTrigger/Button blocks
and change their src to use the existing publicUrl variable).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: c21467c5-18fe-4619-844e-32bbd96a337c
📒 Files selected for processing (15)
.gitignoresrc/components/Modals/ExportModal.tsxsrc/components/Modals/ImportModal.tsxsrc/pages/AssignmentParticipants/AssignmentParticipants.tsxsrc/pages/AssignmentParticipants/AssignmentParticipantsTypes.tssrc/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsxsrc/pages/AssignmentParticipants/ConfirmRemoveModal.tsxsrc/pages/AssignmentParticipants/EditParticipantModal.csssrc/pages/AssignmentParticipants/ParticipantsTable.csssrc/pages/AssignmentParticipants/ParticipantsTable.tsxsrc/pages/Assignments/CreateTeams.tsxsrc/pages/TA/TA.tsxsrc/pages/TA/TAColumns.tsxsrc/pages/Users/userColumns.tsxsrc/utils/publicUrl.ts
✅ Files skipped from review due to trivial changes (3)
- .gitignore
- src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx
- src/pages/TA/TAColumns.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/pages/AssignmentParticipants/AssignmentParticipants.tsx
- src/pages/AssignmentParticipants/AssignmentParticipantsUtil.tsx
- src/pages/AssignmentParticipants/ParticipantsTable.tsx
Vishalreddy2020
pushed a commit
to Vishalreddy2020/reimplementation-front-end
that referenced
this pull request
May 4, 2026
…, quiz flag, remove errors Co-authored-by: Cursor <cursoragent@cursor.com>
Vishalreddy2020
force-pushed
the
ap-only-safe-pr
branch
2 times, most recently
from
c03eff7 to
16d5539
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Use assignment participant API user role data for correct role rendering, keep role edits synchronized with backend updates, and align assignment participants UI behavior and icon usage with the expected manage participants workflow.
Summary by CodeRabbit
New Features
UI/Styling
Chores