PR-Grading-Screen Frontend

[bfire9989]

Description

Implements the /pr-grading-screen route as a fully functional admin-only weekly PR grading interface. The route previously did not exist — navigating to it returned a 404. This PR registers the route, wires it to live backend data, and implements the full grading workflow including team switching, week navigation, saving, reviewer management, and automatic reviewer syncing from live user data.

Implements: PR Grading Screen feature
Related backend PR: #2286 (required — this frontend PR depends on the backend changes in #2286 to function)

---

Related PRs

This frontend PR is related to backend PR #2286.
To test this frontend PR you must first check out backend PR #2286.

---

Main Changes Explained

• Create src/components/PRGradingScreen/index.jsx — full container rewrite: role gate (Owner/Administrator only), sync → config → grading load sequence, week selector (PST timezone), team dropdown, save/delete handlers, bootstrap logic for fresh weeks

• Update src/components/PRGradingScreen/PRGradingScreen.jsx — replaced non-functional Done button with Save button wired to the API, added week and team dropdowns, add/remove reviewer UI, remove PR button, editable prsNeeded field, confirmation dialogs for save and delete, save status banner with dark mode support, dark mode fix for PR number input

• Update src/components/PRGradingScreen/PRGradingScreen.module.css — added team selector, week selector, and save banner styles with full dark mode variants

• Update src/actions/prGradingActions.js — added fetchWeeklyGrading (with weekStart param), saveWeeklyGrading, fetchPRGradingConfig, deleteWeeklyGradingReviewer, syncPRGradingReviewers

• Update src/utils/URL.js — added PR_GRADING_SYNC_REVIEWERS and WEEKLY_GRADING_DELETE_REVIEWER endpoint constants

• Update src/routes.jsx — registered /pr-grading-screen as a ProtectedRoute pointing to PRGradingScreenContainer

• Update src/components/PRGradingDashboard/PRGradingDashboard.jsx — removed hardcoded TEAM_CODE = 'TeamA', wired to config API for dynamic team selection, save payload now uses teamName instead of teamCode

• Update src/components/PRGradingScreen/mockData.js — added comment marking file as dev/testing only, not for production use

• Create src/actions/__tests__/prGradingActions.test.js — 25 tests covering all five actions

• Create src/components/PRGradingScreen/__tests__/PRGradingScreenContainer.test.jsx — container tests covering rendering paths, role gate, team switching, empty and error states

• Create docs/pr-grading-screen.md — developer handoff documentation covering all changes, API reference, and outstanding items

---

How to Test

1. Check out this branch and check out backend PR #2286 in the backend repo

2. Install dependencies and start both servers:

   npm install
   npm run start:local
   

3. Clear site data and cache in your browser (DevTools → Application → Clear Site Data)

4. Log in as a user with Owner or Administrator role

5. Navigate to /pr-grading-screen

6. Verify the page loads without errors and shows:

   • A team dropdown populated with teams from GET /api/pr-grading-config
   • A week dropdown showing the current week and 3 prior weeks with date ranges (e.g. "This week (Jun 21 – Jun 27)")
   • Reviewer rows either from GET /api/weekly-grading (if data exists for this week) or bootstrapped from reviewerNames in the config (fresh week)

7. Verify team switching: select a different team from the dropdown and confirm the reviewer rows update

8. Verify week switching: select a prior week and confirm the data changes (or shows "No grading data for this team yet." if no records exist for that week)

9. Verify Save:

   • Edit a prsNeeded value, add a PR number to a reviewer, change a grade in the modal
   • Click Save — confirm the confirmation dialog appears asking "Are you sure you want to save?"
   • Click Save in the dialog — confirm a green success banner appears and the data is persisted (refresh the page and verify the changes are still there)

10. Verify Remove reviewer:

    • Click Remove on a reviewer row
    • Confirm the dialog appears: "Are you sure you want to delete reviewer X?"
    • Click Delete — confirm the reviewer is removed from the table and does not reappear on refresh

11. Verify Add reviewer:

    • Click "+ Add Reviewer"
    • Enter a name and click Add
    • Confirm the reviewer appears in the table
    • Click Save to persist

12. Verify role gate: log in as a non-admin user (Volunteer or Manager) and navigate to /pr-grading-screen — confirm you see "You do not have permission to access this page." and the table is not shown

13. Verify dark mode: toggle dark mode and check:

    • PR number input field is dark (was previously white/invisible in dark mode)
    • Save success/error banner uses muted dark-mode-appropriate colors, not harsh green/red
    • All dropdowns, inputs, and modals are readable

14. Verify error state: disconnect your backend and navigate to the page — confirm the error message "Failed to load grading data. Please try again." is shown, not a blank screen or mock data

---

Screenshots or Videos of Changes

---

Note

• Full documentation of all changes, DB migration commands, and outstanding items is in a separate doc that can be obtained on request from the Owner.

[netlify]

❌ Deploy Preview for highestgoodnetwork-dev failed.

Name	Link
🔨 Latest commit	6b3ffcb
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a63ee7066f1d600089f5518

[sonarqubecloud]

Quality Gate passed

Issues
10 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud