Linlin - feat: implement inline summary below reviewers with interactive gradi… - #5493
Linlin - feat: implement inline summary below reviewers with interactive gradi…#5493linlin-husky wants to merge 2 commits into
Conversation
…ng checkboxes and scoped CSS
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
one-community
changed the title
one-community
added
the
High Priority - Please Review First
DeMoliT1on
left a comment
DeMoliT1on
left a comment
There was a problem hiding this comment.
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
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
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-testwithout 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.
…d related view components
8e4b3c9
|
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- 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
left a comment
AnshShah-18
left a comment
There was a problem hiding this comment.
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.
6 participants
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):
Main changes explained:
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, andCannot find imagemapped to backend enumNo Correct Image).src/components/PRGradingScreen/PRGradingScreen.jsx**: RendersInlinePRSummarybeneath each reviewer row using keyedReact.Fragmentblocks to ensure clean React reconciliation. Hooks checkbox changes directly to state updates without triggering disruptive popup modals.src/components/PRGradingScreen/PRGradingScreen.module.css**: Adds scoped styling rules strictly prefixed withpr-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:
Linlin-fix-pr5164-inline-summarynpm installandnpm run start:localto start the client locallyhttp://localhost:5173/pr-grading-test(or the active local port shown in your terminal)91NePRT) to load reviewer data3100 + 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 tableExceptional,Okay,Unsatisfactory, orCannot find imageand verify that the grade updates immediately in place without modal popups+ 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 listScreenshots 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-testuses decoupled local mock data for UI testing. All CSS classes strictly adhere to thepr-grading-inline-*prefix convention to prevent collisions with other dashboard components.