Add a feedback button to the user menu #31

New issue

Open

opened 2026-10-03 19:44:36 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:36 +00:00

Member

Goal
Give users an easy way to tell us what is broken or missing. Add "Send feedback" to the account menu. It opens a small form and saves the feedback to a new table that we review at retros.

What you'll learn
A controlled React form, a POST route in Flask, and an Alembic migration.

Resources

Where to start

web/src/app/components/UserMenu.tsx: add a "Send feedback" item next to "Sign out".
web/src/app/components/Modal.tsx: reuse it for the form (textarea, Send, Cancel).
api/app/models/models.py: add a Feedback model (id, user_id FK to users, message text, page text, created_at).
api/migrations/versions/: add a migration with down_revision = "c7a2e91d4b3f" (the current head). Follow b41f7c2d9e10_add_users_oidc_sub.py for the docstring and the upgrade/downgrade style.
api/app/api/users.py: add POST /api/users/feedback. These routes require sign-in, and current_user() gives the author.

Done when

Submitting saves a row with the user, message, and current page path, then shows "Thanks!" and closes
Empty messages are rejected in the form and by the API (400), and messages over 2000 characters are rejected
The Send button is disabled while the request is in flight, and errors are shown
A pytest covers success and the empty-message case
Works in light and dark mode

Notes
Everyone shares one dev database (see docs/getting-started.md). Keep the migration purely additive, and check with the tech lead before running alembic upgrade head.

**Goal** Give users an easy way to tell us what is broken or missing. Add "Send feedback" to the account menu. It opens a small form and saves the feedback to a new table that we review at retros. **What you'll learn** A controlled React form, a POST route in Flask, and an Alembic migration. **Resources** - [Reacting to input with state](https://react.dev/learn/reacting-to-input-with-state) - [Alembic tutorial](https://alembic.sqlalchemy.org/en/latest/tutorial.html) **Where to start** - `web/src/app/components/UserMenu.tsx`: add a "Send feedback" item next to "Sign out". - `web/src/app/components/Modal.tsx`: reuse it for the form (textarea, Send, Cancel). - `api/app/models/models.py`: add a `Feedback` model (`id`, `user_id` FK to `users`, `message` text, `page` text, `created_at`). - `api/migrations/versions/`: add a migration with `down_revision = "c7a2e91d4b3f"` (the current head). Follow `b41f7c2d9e10_add_users_oidc_sub.py` for the docstring and the upgrade/downgrade style. - `api/app/api/users.py`: add `POST /api/users/feedback`. These routes require sign-in, and `current_user()` gives the author. **Done when** - [ ] Submitting saves a row with the user, message, and current page path, then shows "Thanks!" and closes - [ ] Empty messages are rejected in the form and by the API (400), and messages over 2000 characters are rejected - [ ] The Send button is disabled while the request is in flight, and errors are shown - [ ] A pytest covers success and the empty-message case - [ ] Works in light and dark mode **Notes** Everyone shares one dev database (see `docs/getting-started.md`). Keep the migration purely additive, and check with the tech lead before running `alembic upgrade head`.

jalenluorion added this to the Phase 2 milestone

2026-10-03 19:44:36 +00:00

jalenluorion added the

labels

2026-10-03 19:44:36 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00