[linlin-husky]

Description

Fixes # 12 (PRIORITY URGENT) Yeshwanth: PR Review Team Analytics Dashboard - Finishing Follow up for PR #5164. Fix Main branch for Inline summary information to show below each reviewer.

PR #5164 previously merged backend integration and intended to introduce inline grading summaries, but the inline summary display beneath reviewer rows was either lost in recent branch merges or retained duplicate modal popups. This PR completes the follow-up by restoring the inline summary below each reviewer row, eliminating redundant modal popups in favor of pure in-place grading, maintaining visual tag consistency for paired versus single PRs, and scoping all component CSS classes.

Related PRS (if any):

• Follow-up for merged frontend PR #5164
• Related to merged backend PR #3826

Main changes explained:

• **Create src/components/PRGradingScreen/InlinePRSummary.jsx**: Introduces a modular subcomponent rendering the inline summary table below each reviewer. Provides interactive checkboxes for all four grading tiers (Exceptional, Okay, Unsatisfactory, and Cannot find image mapped to backend enum No Correct Image).
• **Update src/components/PRGradingScreen/PRGradingScreen.jsx**: Renders InlinePRSummary beneath each reviewer row using keyed React.Fragment blocks to ensure clean React reconciliation. Hooks checkbox changes directly to state updates without triggering disruptive popup modals.
• **Update src/components/PRGradingScreen/PRGradingScreen.module.css**: Adds scoped styling rules strictly prefixed with pr-grading-inline-* to adhere to project rules against generic CSS class names. Ensures full-stack paired PR tags (containing +) render with green backgrounds and single PR tags render with grey backgrounds across both light and dark themes without CSS specificity conflicts.

How to test:

1. Check into branch Linlin-fix-pr5164-inline-summary
2. Run npm install and npm run start:local to start the client locally
3. Clear site data/cache
4. Log in as an admin user
5. Navigate to http://localhost:5173/pr-grading-test (or the active local port shown in your terminal)
6. Select any team (e.g., 91NePRT) to load reviewer data
7. Verify that each reviewer row renders an inline summary card directly underneath
8. Verify that paired PR numbers (e.g., 3100 + 1410) display in green tags and single PR numbers (e.g., 2045) display in grey tags within both the main reviewer row and the inline summary table
9. Click any checkbox under Exceptional, Okay, Unsatisfactory, or Cannot find image and verify that the grade updates immediately in place without modal popups
10. Click + Add new, enter a new valid PR number (e.g., 1070 + 1256), and confirm that the new PR appends directly to both the parent row and the inline summary list
11. Toggle dark mode and confirm container borders, table headers, text contrast, and PR badge styles render properly

Screenshots or videos of changes:

Screen.Recording.2026-09-02.at.3.54.38.PM.mov

Note:

Testing this PR does not require running the backend service locally, as /pr-grading-test uses decoupled local mock data for UI testing. All CSS classes strictly adhere to the pr-grading-inline-* prefix convention to prevent collisions with other dashboard components.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1f1cf4b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6ab2f632214ea90008f36f68
😎 Deploy Preview	https://deploy-preview-5493--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[DeMoliT1on]

Tested locally for frontend PR changes branch Linlin-fix-pr5164-inline-summary and everything seems to be working correctly.

---

Overall Assessment

Verified Working

• Inline summary card rendering beneath reviewer rows
• PR badge color coding (green for paired PRs, grey for single PRs)
• Instant inline grade updates on checkbox selection
• Add new PR functionality reflecting in both parent row and summary card
• UI styling and contrast in both Light and Dark themes

The inline summary card, PR badge formatting, grade toggling, and dark mode styles all work as expected.

Approved!

[iAbhi001]

Tested locally on branch Linlin-fix-pr5164-inline-summary. Everything functions as expected.

Local Test Summary

• Inline Summary Rendering: Verified that the inline summary card properly renders beneath each reviewer row on /pr-grading-test without modal popups.
• Badge Styling: Paired PR numbers (3100 + 1410) consistently display with green tags, and single PR numbers (2045) display with grey tags across both the reviewer row and inline table.
• Grading Interaction: Checkboxes for all four tiers (Exceptional, Okay, Unsatisfactory, Cannot find image) update state immediately in place.
• Add New PR: Successfully appended new PR entries (e.g., 1070 + 1256), reflecting immediately in both the parent row and inline list.
• Theme Support: Verified UI layout, borders, and contrast in both Light and Dark themes without visual regressions.

LGTM! Approved.

[DeepighaJ]

• Verified the PR Grading Test page with reviewer data and confirmed that:
• Inline summary cards render correctly under each reviewer row.
• Paired and single PR numbers display with the expected tag styles.
• Grade selections update immediately without modal popups.
• New PR entries are added correctly to both the parent row and inline summary.
• Dark mode styling, borders, headers, text contrast, and PR badges display properly.

[AnshShah-18]

Tested locally on /pr-grading-test. Verified the inline summary renders under reviewers, grade changes update in place without popups, paired and single PR styling is correct, adding a paired PR updates both the main row and inline summary, Cannot find image grading works as expected, and dark mode remains readable.

Everything worked as expected. Approving this PR.

[devangsaraogi]

Hi @linlin-husky,

I tested PR #5493 locally as Admin and Volunteer both.

Overall, the new inline summary works well in several areas:

• Reviewer summaries render directly beneath each reviewer row.
• Paired PRs are displayed with green tags and single PRs with grey tags.
• Newly added PRs appear immediately in both the reviewer row and inline summary.
• Inline grade changes work correctly across Exceptional, Okay, Unsatisfactory and Cannot find image.
• Search/filtering continues to work with the inline summaries.
• Finalizing the page disables further grading and adding PRs as expected.
• Light/dark mode styling is readable.

I found two blocking issues:

1. The legacy Grade PR popup is still accessible even though this PR is intended to move grading to the inline flow. I also reproduced inconsistent grade state between the inline summary and the popup.
2. The new inline grading table overflows at mobile widths around 420px, causing the right-side grading options to be clipped.

I left detailed inline comments with screenshots for both issues.

Non-blocking UX thoughts: making each reviewer’s summary collapsible could help reduce page length. I also noticed that invalid PR input has no visible validation feedback and accidentally added PRs cannot be removed, but those appear to be pre-existing behaviors rather than blockers for this PR.

Requesting changes for the two issues above. The rest of the functionality I tested looks good.

[linlin-husky]

Hi @devangsaraogi , @DeMoliT1on , @iAbhi001, @DeepighaJ, and @AnshShah-18,

I have pushed the updates addressing the feedback for PR #5493:

Fixed the state synchronization for the "Cannot find image" option.

Added mobile responsiveness and horizontal scrolling containment for the inline summary table.

Could you please take another look when you have a moment? Thank you!

[sonarqubecloud]

Quality Gate passed

Issues
0 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

[devangsaraogi]

Hi @linlin-husky,

I re-reviewed the latest version of PR #5493.

The issues from my previous review have been addressed:

• inline grading and the legacy grade PR modal are syncing both ways
• inline summary is usable at ~420px width with horizontal scrolling making all grading options accessible
• mobile layout remains readable and functional in dark mode.

I also rechecked the general inline grading flow. Did not find any new blocking issues.

Approving this PR. Great job!

[iAbhi001]

I've taken another look at PR #5493 and everything looks good to go. All previous feedback has been successfully resolved:
Two-way syncing between inline grading and the legacy modal is working.
The inline summary is fully accessible via horizontal scrolling down to ~420px.
The mobile layout is readable and works well in dark mode.
I also ran through the general inline grading flow again and didn't spot any new blockers. Approved—great work!

[AnshShah-18]

I've taken another look at PR #5493 and everything looks good to go. The inline reviewer summary is displaying correctly, grade updates work in place, paired and single PRs are styled as expected, and adding new PR entries works properly. I also checked the layout in dark mode and the interface remains readable and consistent. I ran through the main inline grading flow again and didn’t find any new issues. Approved—nice work!

[adit24dhaya]

Rechecked the latest fixes. All four grades now stay in sync between the inline summary and the modal, including Cannot find image. The inline table scrolls on narrow screens, and I could reach and click the last grade at 320px, 375px and 420px in both themes. The author clarified that keeping both grading interfaces is intentional, so I am not repeating the earlier request to remove the modal.

Validation: all 11 PR tests and 10 independent edge-case tests passed. Chromium passed 168 assertions across eight width/theme cases (1280/420/375/320px, light/dark): two-way grade changes, one selected grade, paired/single badge colors, scrolling to the last option, reviewer name/role filtering and clearing, adding a paired PR, and disabling grading/add controls after Done. Empty reviewer and empty-summary cases also pass. Build passed in 29.53s; changed-file ESLint, Stylelint and git diff --check passed.

These checks used the actual grading components with fixture data and blocked external requests. They do not verify authenticated routing, backend grade persistence or configuration creation/deletion; no shared database writes were made.

Commit audit (nonblocking): the two subjects are imperative with no ending periods; the first is 97 characters and the second 66. Neither has a body or ticket reference. Consider shortening the first and adding what/why and the related issue. Please also update the description to match the agreed dual-interface flow and current local grade value; it still says the modal is removed and references the backend enum. Approved for the reviewed frontend scope.

[beblicarl]

This functionality works as intended, and the code is great

[vidiyala99]

Tested 1f1cf4b as Administrator on /pr-grading-test (91NePRT configuration, mock data, nothing saved), in light and dark mode. This branch is 651 commits behind development, and all the approvals so far tested the old base, so I tested what a merge would produce: this PR's five files placed on top of current development (fbc42cd). development hasn't changed these components since the branch point (only file-mode changes), so the result matches the branch.

What works on current development:

• Tests: the PRGradingScreen suite passes (1 file, 11/11).
• Inline summary: every reviewer row has its graded PRs listed directly underneath, with paired PRs ("3100 + 1410") tagged green and single PRs grey, matching the chips in the PR Numbers column (screenshots 1 and 3).
• In-place grading: choosing Okay on "3100 + 1410" clears Exceptional (one grade per PR), and "Cannot find image" works the same way. No popups.
• Add new: typing 5555 and pressing Add appends it to the reviewer's chips and to the inline table, and "PR reviewed" goes from 4 to 5 (screenshot 2).
• Dark mode: the inline tables, tags and checkboxes are readable.

Suggestions, not blocking:

1. A grade can be changed but never cleared. Clicking the checked box again leaves it checked. Combined with new entries defaulting to grade: 'Okay' (that default already exists on development, but the inline table now shows it as a checked "Okay"), a PR that's added and never graded is recorded as Okay. Either start new entries ungraded, or let a second click clear the grade.
2. The grades are checkboxes that behave like radio buttons. Screen readers will announce four independent checkboxes per row. A radio group per PR (role="radiogroup" with radios, or native type="radio" sharing a name) would describe it correctly and adds arrow-key navigation.
3. Enter doesn't add. In the "1070 or 1070 + 1256" box, pressing Enter does nothing; only the Add button works. Submitting on Enter would speed up entering several PRs.
4. #5630 and #5414 also change PRGradingScreen.jsx and its CSS module, so whichever lands second will need a careful merge.

Approving.

Screenshot 1: inline summary under each reviewer (dark)

Screenshot 2: after adding 5555 (PR reviewed 4 to 5, defaults to Okay)

Screenshot 3: inline summary (light)

[one-community]

Thank you all, merging!