Skip to content

khushi - Phase 3 - Develop Feedback Form UI #3040

Open
khushijain03 wants to merge 26 commits intodevelopmentfrom
khushi_feedbackform_ui
Open

khushi - Phase 3 - Develop Feedback Form UI #3040
khushijain03 wants to merge 26 commits intodevelopmentfrom
khushi_feedbackform_ui

Conversation

@khushijain03
Copy link
Copy Markdown

@khushijain03 khushijain03 commented Jan 16, 2025 •
edited by one-community
Loading

#Description
image

Implemented the front end for the UI for the Feedback Form modal on the /communityportal/activity/:activityid/feedback page, enabling participants to leave feedback for activities. The form includes a 5-star rating system with an optional comment field a working cancel button, a close button, and a modal box that closes when clicked outside.

Key Features:

  • Feedback Modal UI: A modal form layout with the title, input fields, and buttons.
  • 5-Star Rating System: Clickable stars for selecting a rating from 1 to 5, with validation to ensure a rating is selected before submission.
  • Comment Field: A multiline comment field with a 300-character limit and a live character count.
  • Submit Feedback: A button to submit feedback, displaying a success message after successful submission. The form cannot be submitted without a rating.
  • Cancel and Close Functionality: Implemented a "Cancel" button and close button to exit the modal without saving any input. Additionally, clicking outside the modal will also close it.

Related PRS (if any):

No related PRs
…

## Main changes explained:
Updated the routes.js file to add the URL mapping for the feedback modal

  • Created Feedback Modal: Designed the modal layout for user feedback, including title, rating, comment field, and buttons.
  • Implemented Star Rating System: Developed interactive clickable stars to allow users to select a rating and highlighted the selected rating.
  • Added Optional Comment Field: Created a multiline text area with a character limit of 300 characters.
  • Submit Button Functionality: Implemented the submit button to collect form data, validate the rating, and display a success message.
  • Cancel and Close Buttons: Added a "Cancel" button to close the modal without saving input and a close button (X) in the top right corner. The modal also closes when the user clicks outside the modal box.

## How to test:

  • Checkout the current branch.
  • Run npm install and set up the environment to run this PR locally.
  • Clear site data/cache.
  • Log in as an admin user.
  • Navigate to Dashboard → Tasks → Task → /communityportal/activity/:activityid/feedback.
  • Verify the Feedback Modal displays correctly.
  • Test the 5-star rating system by selecting a rating and ensuring validation works.
  • Verify the comment field works as expected, including the live count.
  • Ensure the Submit Feedback button triggers submission and shows a success message.
  • Test the "Cancel" button functionality to close the modal without saving input.
  • Verify the close button (X) in the top-right corner functions to close the modal.
  • Click outside the modal box and confirm that the modal closes.

Screenshots or videos of changes:

Screen.Recording.2025-01-14.at.10.56.52.PM.mov

Note:

  • The 5-star rating system and comment field should function seamlessly, with the submit button only being active when a valid rating is selected.
  • The cancel and close buttons should work correctly, and the modal should close when clicking outside the modal box.
  • This PR does not yet include backend validation, so test functionality may vary based on the connected backend.

@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 16, 2025 •
edited
Loading

❌ Deploy Preview for highestgoodnetwork-dev failed.

Name Link
🔨 Latest commit d194034
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69461bd01c8e0f0008b579f7

mikelambo7
mikelambo7 approved these changes Feb 11, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@mikelambo7 mikelambo7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and verified that this feature works as expected

Screen.Recording.2025-02-11.at.1.42.34.PM.mov

@one-community one-community added Needs New Developer This is a PR that is partially developed but needs someone new to take it over and finish it. do not review Do not review or look at code without full context labels Aug 5, 2025
@one-community one-community changed the title khushi_feedbackform_UI khushi - Phase 3 - Develop Feedback Form UI Aug 5, 2025
@vamsidharpanithi
Add dependencies for feedback form functionality
12c62b7
@vamsidharpanithi
Integrate feedback modal with new routes.jsx structure from developme…
97819a7 
…nt branch
@vamsidharpanithi
Resolve package.json, jest.config.js, and workflow conflicts with dev…
73ae6b1 
…elopment branch
@vamsidharpanithi
Add yarn.lock and remove package-lock.json for dependency management
cfd7c73
@vamsidharpanithi
Merge development branch with feedback modal integration
a761553 
- Resolved all merge conflicts by accepting development branch changes
- Kept feedback modal implementation and route integration
- Updated to latest development branch structure and dependencies
- Feedback modal accessible at /communityportal/activity/:activityId/feedback
@vamsidharpanithi
Fix FeedbackModal naming conflict and CPHeader component export
5666bb6 
- Renamed CommunityPortal FeedbackModal to CommunityFeedbackModal to avoid conflict
- Fixed CPHeader component export to match import expectations
- Updated routes to use CommunityFeedbackModal component
@vamsidharpanithi
Fix CPHeader import issue and resolve build problems
2ab3e8a 
- Fixed CPHeader import by importing directly instead of through index
- Build now succeeds with only minor warnings
- Tests are running successfully (289 passed, 4 failed - unrelated to feedback modal)
- Ready for development server testing
@vamsidharpanithi
Complete feedback modal implementation with duplicate prevention and …
4140c56 
…test fixes
@vamsidharpanithi
Fix accessibility issues for activity list and feedback modal
fb3d779
@vamsidharpanithi
Fix prettier formatting issues
2d01226
@vamsidharpanithi
Fix accessibility and linting issues in feedback modal components
eccb7ab
@vamsidharpanithi
Fix remaining linting issues in test files
aaf7fce
@vamsidharpanithi
Updated Lint workflow to use Node 20
246e733
@vamsidharpanithi
Merge development branch and fix dark mode visibility issues in Activ…
eb1ecf3 
…ityList
@vamsidharpanithi
Fix import path for TeamReport CSS module
2b04e4e
@vamsidharpanithi
Fix dark mode text visibility in ActivityList component
68bbcfa
@vamsidharpanithi
Fix Teams test expectations to match component output
412fe4d
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Dec 20, 2025

Quality Gate Failed Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@mikelambo7 mikelambo7 mikelambo7 approved these changes

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

do not review Do not review or look at code without full context Needs New Developer This is a PR that is partially developed but needs someone new to take it over and finish it.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@khushijain03 @mikelambo7 @one-community @vamsidharpanithi