Shravya_Kudlu/bugfix/css-module.css-#3829 by ShravyaKudlu · Pull Request #3921 · OneCommunityGlobal/HighestGoodNetworkApp

ShravyaKudlu · 2025-08-19T18:41:32Z

Description

Fixes # (Bug from #3829)

Related PRS (if any):

This frontend PR is related to the development backend branch
…

Main changes explained:

Delete css file
Create module.css and follow the convention
…

How to test:

check into current branch
do npm install and ... to run this PR locally
Clear site data/cache
log as admin user
go to path /pr-team-analytics/reviewers-stacked-bar-chart
click on duration -> all and verify its shown in dark and light mode

Screenshots or videos of changes:

Note

netlify · 2025-08-19T18:41:37Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`79b36fe`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/698811a8c19ae10008b94492
😎 Deploy Preview	https://deploy-preview-3921--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

Copilot

Pull Request Overview

This PR converts a CSS component to use CSS modules following project conventions. The main changes involve deleting a regular CSS file and creating a module.css file with proper naming conventions, while also adding a new route for a PR reviewers analytics component.

Refactored CSS to use CSS modules pattern with scoped class names
Added new route for ReviewersStackedBarChart component
Created mock data file for the reviewers component

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
src/routes.jsx	Added new protected route for reviewers stacked bar chart component
src/components/HGNPRDashboard/ReviewersStackedBarChart/reviewersMockData.js	New mock data file containing reviewer analytics test data
src/components/HGNPRDashboard/ReviewersStackedBarChart/ReviewersStackedBarChart.module.css	CSS module file with scoped styles for the chart component
src/components/HGNPRDashboard/ReviewersStackedBarChart/ReviewersStackedBarChart.jsx	Main React component for displaying reviewer analytics in a stacked bar chart

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/components/HGNPRDashboard/ReviewersStackedBarChart/ReviewersStackedBarChart.module.css

src/components/HGNPRDashboard/ReviewersStackedBarChart/ReviewersStackedBarChart.jsx

ShravyaKudlu · 2025-08-20T02:07:45Z

src/components/HGNPRDashboard/ReviewersStackedBarChart/ReviewersStackedBarChart.jsx

+  return (
+    <div
+      className={`${styles.reviewersChartContainer} ${darkMode ? styles.darkMode : ''}`}
+      style={{


For a consistent background color, I used this inline style. Since I couldn't find a way to import our darkTheme color within this route, I'm not sure if this is the best approach. Could you please review and let me know if there's a better way to handle this?

aseemdeshmukh

Everything works perfect in both light and dark mode!

sohamsharma08

Tested the PR successfully. The PR Quality Chart works well with dark mode as expected. Screenshots are attached below:

munishpatel

Pull Request Team Analytics stacked bar chart screen works properly in both light and dark mode:

RitzzzZ2021

The stacked bar chart looks great in both light mode and dark mode. Great work!

somramnani

I tested this PR as an admin user following the provided steps. The stacked bar chart renders correctly in both light and dark mode.

Additional checks:

Verified the Teams category across All, Alpha, Beta, Delta, and Gamma are all displayed as expected.
Confirmed that Ascending/Descending sorting works correctly.

Light Mode

Dark Mode

beblicarl · 2025-09-19T15:15:08Z

This feature works as intended on both light and dark screens

abhirambj

Tested the Reviewers Stacked Bar Chart on /pr-team-analytics/reviewers-stacked-bar-chart. All legacy CSS has been properly migrated to CSS modules, classNames are scoped, and there are no inline or global styles left. UI renders as expected with all filters and chart features working correctly in both dark and light modes.

No regressions, and the code is now much cleaner and more maintainable.

aryanrachala54

I’ve reviewed the changes and tested the /pr-team-analytics/reviewers-stacked-bar-chart route. The chart displays correctly when the duration is set to "All Time", but selecting other options like "Last Week", "Last 2 Weeks", or "Last Month" results in a "No PR data available" message, and no chart is shown.

Aside from this, everything else functions as expected such as filters, sorting, and team categories render correctly. The use of scoped styles and the transition to module.css significantly improve code clarity and maintainability.

deep3072

Verified the css bug fix changes of PR Quality reviewers chart. It works fine in both dark mode and light mode. Also the functions like Ascending and Descending works well along with the the team filters. Approve.

sonarqubecloud · 2025-10-26T00:11:31Z

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

rohanrastogi311

Hi Shravya,

Good job with this implementation, however, there's only data for "all time" duration.

Anusha-Gali

Hi Shravya,

I have reviewed your PR locally and it does work as per requirement. Though i would like to point out that the dropdown filters are in light mode which might get pointed out. Also the page does not support mobile responsiveness.

…-#3829

sonarqubecloud · 2026-02-08T04:32:32Z

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

ShravyaKudlu · 2026-02-08T04:34:10Z

Fixed responisive mentioned in the comments, and the filter in darkmode

one-community · 2026-02-09T02:14:16Z

Thank you all, merging!

Refactor of jsx and css complete

5cd70a9

ShravyaKudlu changed the title ~~WIP: Refactor of jsx and css~~ WIP: Shravya_Kudlu/bugfix/css-module.css-#3829 Aug 19, 2025

ShravyaKudlu added 2 commits August 19, 2025 16:43

Some bug fixes related to dark mode styling-needs some more work

b8c6076

Fixed UI

f1d942f

ShravyaKudlu changed the title ~~WIP: Shravya_Kudlu/bugfix/css-module.css-#3829~~ Shravya_Kudlu/bugfix/css-module.css-#3829 Aug 20, 2025

ShravyaKudlu marked this pull request as ready for review August 20, 2025 00:33

ShravyaKudlu requested a review from Copilot August 20, 2025 01:04

Copilot AI reviewed Aug 20, 2025

View reviewed changes

ShravyaKudlu commented Aug 20, 2025

View reviewed changes

ShravyaKudlu added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Aug 26, 2025

aseemdeshmukh previously approved these changes Aug 28, 2025

View reviewed changes

sohamsharma08 approved these changes Aug 28, 2025

View reviewed changes

munishpatel approved these changes Sep 12, 2025

View reviewed changes

RitzzzZ2021 previously approved these changes Sep 13, 2025

View reviewed changes

somramnani previously approved these changes Sep 18, 2025

View reviewed changes

beblicarl self-requested a review September 19, 2025 15:15

beblicarl previously approved these changes Sep 19, 2025

View reviewed changes

abhirambj previously approved these changes Sep 20, 2025

View reviewed changes

aryanrachala54 previously approved these changes Sep 21, 2025

View reviewed changes

deep3072 previously approved these changes Sep 21, 2025

View reviewed changes

ShravyaKudlu dismissed stale reviews from deep3072, abhirambj, beblicarl, somramnani, RitzzzZ2021, and aseemdeshmukh via ed9dfca October 22, 2025 20:52

ShravyaKudlu force-pushed the shravya_bugfix/css-modules-#3829 branch 2 times, most recently from 2d9b1b2 to f1d942f Compare October 25, 2025 22:14

ShravyaKudlu and others added 7 commits October 25, 2025 18:39

Fix: inline sonarcube

0b819d7

Fix: sonarcube issue fix

d34abdb

Fix: sonarcube validation issue

e2a161f

Fix: sonarcube remove unused imports and commented code

b497c89

Merge branch 'development' into shravya_bugfix/css-modules-#3829

a068247

Fix: Merge Conflicts

119a4f0

Revert yarn.lock to version from before merge conflict fix

8cc2b9b

ShravyaKudlu dismissed aryanrachala54’s stale review via 8cc2b9b November 13, 2025 03:55

rohanrastogi311 requested changes Jan 3, 2026

View reviewed changes

Anusha-Gali requested changes Jan 20, 2026

View reviewed changes

ShravyaKudlu added 2 commits February 7, 2026 21:47

Merge remote-tracking branch 'origin' into shravya_bugfix/css-modules…

9bf82a6

…-#3829

fix: responsiveness

79b36fe

one-community merged commit f888bc7 into development Feb 9, 2026
10 checks passed

one-community mentioned this pull request Feb 10, 2026

Frontend Release to Main [4.74] #4820

Merged

Uh oh!

Conversation

ShravyaKudlu commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Note

Uh oh!

netlify bot commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ShravyaKudlu Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

aseemdeshmukh left a comment

Choose a reason for hiding this comment

Uh oh!

sohamsharma08 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

munishpatel left a comment

Choose a reason for hiding this comment

Uh oh!

RitzzzZ2021 left a comment

Choose a reason for hiding this comment

Uh oh!

somramnani left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

beblicarl commented Sep 19, 2025

Uh oh!

abhirambj left a comment

Choose a reason for hiding this comment

Uh oh!

aryanrachala54 left a comment

Choose a reason for hiding this comment

Uh oh!

deep3072 left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Oct 26, 2025

Quality Gate passed

Uh oh!

rohanrastogi311 left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Feb 8, 2026

Quality Gate passed

Uh oh!

ShravyaKudlu commented Feb 8, 2026

Uh oh!

one-community commented Feb 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

13 participants

ShravyaKudlu commented Aug 19, 2025 •

edited

Loading

netlify bot commented Aug 19, 2025 •

edited

Loading

sohamsharma08 left a comment •

edited

Loading

somramnani left a comment •

edited

Loading