docs: revise feedback implementation plan with enhancements
Adds: DB persistence, feedback type helper text, confirmation email to submitter, and TODO breadcrumbs for post-session prompt. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,11 +2,11 @@
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**Goal:** Add a feedback form page where logged-in users can submit feedback that gets emailed to a configurable address via the existing Resend infrastructure.
|
||||
**Goal:** Add a feedback form page where logged-in users can submit feedback that gets stored in the database and emailed to a configurable address via the existing Resend infrastructure. Includes confirmation email to the submitter, helper text on feedback types, and TODO breadcrumbs for future post-session contextual feedback.
|
||||
|
||||
**Architecture:** New `POST /feedback` backend endpoint validates input and sends an HTML email via the existing `EmailService`. Frontend is a single `FeedbackPage.tsx` form page accessible from the sidebar nav and account settings. No database storage — email-only.
|
||||
**Architecture:** New `POST /feedback` backend endpoint validates input, writes to a `feedback` table, sends an HTML notification email to the configured address, and fires a confirmation email back to the submitter. Email failures do NOT prevent the DB write from succeeding. Frontend is a single `FeedbackPage.tsx` form page with a custom feedback type selector (with descriptions) accessible from the sidebar nav and account settings.
|
||||
|
||||
**Tech Stack:** FastAPI + Pydantic (backend), React + TypeScript + Tailwind (frontend), Resend (email delivery), slowapi (rate limiting)
|
||||
**Tech Stack:** FastAPI + Pydantic + Alembic (backend), React + TypeScript + Tailwind (frontend), Resend (email delivery), slowapi (rate limiting)
|
||||
|
||||
**Design doc:** `docs/plans/2026-02-18-feedback-form-design.md`
|
||||
|
||||
@@ -52,7 +52,117 @@ git commit -m "feat: add feedback submission schema"
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Config — Add FEEDBACK_EMAIL
|
||||
## Task 2: Database Model & Migration
|
||||
|
||||
**Files:**
|
||||
- Create: `backend/app/models/feedback.py`
|
||||
- Modify: `backend/app/models/__init__.py`
|
||||
- Create: Alembic migration (manual)
|
||||
|
||||
**Step 1: Create the SQLAlchemy model**
|
||||
|
||||
Create `backend/app/models/feedback.py`:
|
||||
|
||||
```python
|
||||
import uuid
|
||||
from datetime import datetime, timezone
|
||||
from typing import Optional
|
||||
from sqlalchemy import String, Text, DateTime, ForeignKey
|
||||
from sqlalchemy.orm import Mapped, mapped_column
|
||||
from sqlalchemy.dialects.postgresql import UUID
|
||||
from app.core.database import Base
|
||||
|
||||
|
||||
class Feedback(Base):
|
||||
__tablename__ = "feedback"
|
||||
|
||||
id: Mapped[uuid.UUID] = mapped_column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
|
||||
account_id: Mapped[Optional[uuid.UUID]] = mapped_column(UUID(as_uuid=True), ForeignKey("accounts.id", ondelete="SET NULL"), nullable=True)
|
||||
user_id: Mapped[uuid.UUID] = mapped_column(UUID(as_uuid=True), ForeignKey("users.id", ondelete="SET NULL"), nullable=False)
|
||||
email: Mapped[str] = mapped_column(String(255), nullable=False)
|
||||
feedback_type: Mapped[str] = mapped_column(String(50), nullable=False)
|
||||
message: Mapped[str] = mapped_column(Text, nullable=False)
|
||||
created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=lambda: datetime.now(timezone.utc))
|
||||
```
|
||||
|
||||
**Step 2: Register the model**
|
||||
|
||||
In `backend/app/models/__init__.py`, add the import and export:
|
||||
|
||||
Add import:
|
||||
```python
|
||||
from .feedback import Feedback
|
||||
```
|
||||
|
||||
Add `"Feedback"` to the `__all__` list.
|
||||
|
||||
**Step 3: Create the migration manually**
|
||||
|
||||
Run:
|
||||
```bash
|
||||
cd backend && alembic revision -m "add feedback table"
|
||||
```
|
||||
|
||||
Then edit the generated migration file:
|
||||
|
||||
```python
|
||||
"""add feedback table
|
||||
|
||||
Revision ID: <auto-generated>
|
||||
Revises: 7e00fa3c75c9
|
||||
Create Date: 2026-02-18
|
||||
|
||||
"""
|
||||
from alembic import op
|
||||
import sqlalchemy as sa
|
||||
from sqlalchemy.dialects import postgresql
|
||||
|
||||
# revision identifiers, used by Alembic.
|
||||
revision = '<auto-generated>'
|
||||
down_revision = '7e00fa3c75c9'
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.create_table(
|
||||
'feedback',
|
||||
sa.Column('id', postgresql.UUID(as_uuid=True), primary_key=True),
|
||||
sa.Column('account_id', postgresql.UUID(as_uuid=True), sa.ForeignKey('accounts.id', ondelete='SET NULL'), nullable=True),
|
||||
sa.Column('user_id', postgresql.UUID(as_uuid=True), sa.ForeignKey('users.id', ondelete='SET NULL'), nullable=False),
|
||||
sa.Column('email', sa.String(255), nullable=False),
|
||||
sa.Column('feedback_type', sa.String(50), nullable=False),
|
||||
sa.Column('message', sa.Text(), nullable=False),
|
||||
sa.Column('created_at', sa.DateTime(timezone=True), server_default=sa.func.now()),
|
||||
)
|
||||
op.create_index('ix_feedback_account_id', 'feedback', ['account_id'])
|
||||
op.create_index('ix_feedback_user_id', 'feedback', ['user_id'])
|
||||
op.create_index('ix_feedback_created_at', 'feedback', ['created_at'])
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.drop_index('ix_feedback_created_at', table_name='feedback')
|
||||
op.drop_index('ix_feedback_user_id', table_name='feedback')
|
||||
op.drop_index('ix_feedback_account_id', table_name='feedback')
|
||||
op.drop_table('feedback')
|
||||
```
|
||||
|
||||
**Step 4: Run the migration**
|
||||
|
||||
```bash
|
||||
cd backend && alembic upgrade head
|
||||
```
|
||||
|
||||
**Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add backend/app/models/feedback.py backend/app/models/__init__.py backend/alembic/versions/*feedback*.py
|
||||
git commit -m "feat: add feedback database model and migration"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Config — Add FEEDBACK_EMAIL
|
||||
|
||||
**Files:**
|
||||
- Modify: `backend/app/core/config.py`
|
||||
@@ -74,12 +184,12 @@ git commit -m "feat: add FEEDBACK_EMAIL config setting"
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Email Service — Add send_feedback_email
|
||||
## Task 4: Email Service — Add feedback emails
|
||||
|
||||
**Files:**
|
||||
- Modify: `backend/app/core/email.py`
|
||||
|
||||
**Step 1: Add the send_feedback_email method**
|
||||
**Step 1: Add the send_feedback_email method (admin notification)**
|
||||
|
||||
Add this method to the `EmailService` class (after `send_account_invite_email`, before the helper functions):
|
||||
|
||||
@@ -133,9 +243,53 @@ Add this method to the `EmailService` class (after `send_account_invite_email`,
|
||||
return False
|
||||
```
|
||||
|
||||
**Step 2: Add the HTML renderer**
|
||||
**Step 2: Add the send_feedback_confirmation_email method (user confirmation)**
|
||||
|
||||
Add this function at the bottom of the file (after the other `_render_*` functions):
|
||||
Add this method right after `send_feedback_email`:
|
||||
|
||||
```python
|
||||
@staticmethod
|
||||
async def send_feedback_confirmation_email(
|
||||
to_email: str,
|
||||
feedback_type: str,
|
||||
message_preview: str,
|
||||
) -> bool:
|
||||
"""Send a thank-you confirmation to the feedback submitter. Fire-and-forget."""
|
||||
if not settings.email_enabled:
|
||||
logger.warning("Confirmation email not sent — RESEND_API_KEY not configured")
|
||||
return False
|
||||
|
||||
try:
|
||||
import resend
|
||||
|
||||
resend.api_key = settings.RESEND_API_KEY
|
||||
|
||||
subject = "Thanks for your feedback — ResolutionFlow"
|
||||
|
||||
html = _render_feedback_confirmation_html(
|
||||
feedback_type=feedback_type,
|
||||
message_preview=message_preview,
|
||||
)
|
||||
|
||||
resend.Emails.send(
|
||||
{
|
||||
"from": settings.FROM_EMAIL,
|
||||
"to": [to_email],
|
||||
"subject": subject,
|
||||
"html": html,
|
||||
}
|
||||
)
|
||||
logger.info("Feedback confirmation email sent to %s", to_email)
|
||||
return True
|
||||
|
||||
except Exception:
|
||||
logger.exception("Failed to send feedback confirmation to %s", to_email)
|
||||
return False
|
||||
```
|
||||
|
||||
**Step 3: Add the HTML renderers**
|
||||
|
||||
Add these functions at the bottom of the file (after the other `_render_*` functions):
|
||||
|
||||
```python
|
||||
def _render_feedback_html(
|
||||
@@ -199,18 +353,58 @@ def _render_feedback_html(
|
||||
</td></tr>
|
||||
</table>
|
||||
</body></html>"""
|
||||
|
||||
|
||||
def _render_feedback_confirmation_html(
|
||||
feedback_type: str,
|
||||
message_preview: str,
|
||||
) -> str:
|
||||
import html
|
||||
|
||||
safe_preview = html.escape(message_preview)
|
||||
|
||||
return f"""<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"></head>
|
||||
<body style="margin:0;padding:0;background:#000;font-family:'Inter',Helvetica,Arial,sans-serif;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:#000;padding:40px 0;">
|
||||
<tr><td align="center">
|
||||
<table width="560" cellpadding="0" cellspacing="0" style="background:#111;border:1px solid rgba(255,255,255,0.06);border-radius:16px;">
|
||||
<tr><td style="padding:40px 40px 24px;text-align:center;">
|
||||
<h1 style="margin:0;color:#fff;font-size:24px;font-weight:600;">ResolutionFlow</h1>
|
||||
<p style="margin:8px 0 0;color:#a0a0a0;font-size:14px;">Thanks for your feedback!</p>
|
||||
</td></tr>
|
||||
<tr><td style="padding:0 40px 24px;">
|
||||
<p style="margin:0;color:#e0e0e0;font-size:16px;line-height:1.6;">
|
||||
We've received your <strong style="color:#fff;">{html.escape(feedback_type)}</strong> and our team will review it shortly.
|
||||
</p>
|
||||
</td></tr>
|
||||
<tr><td style="padding:0 40px 24px;">
|
||||
<div style="background:#000;border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:16px 20px;">
|
||||
<p style="margin:0 0 4px;color:#a0a0a0;font-size:12px;text-transform:uppercase;letter-spacing:1px;">Your feedback</p>
|
||||
<p style="margin:0;color:#e0e0e0;font-size:14px;line-height:1.5;font-style:italic;">"{safe_preview}"</p>
|
||||
</div>
|
||||
</td></tr>
|
||||
<tr><td style="padding:0 40px 32px;">
|
||||
<p style="margin:0;color:#666;font-size:12px;text-align:center;">
|
||||
If we need more details, we'll reach out to you directly.
|
||||
</p>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</body></html>"""
|
||||
```
|
||||
|
||||
**Step 3: Commit**
|
||||
**Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add backend/app/core/email.py
|
||||
git commit -m "feat: add send_feedback_email to EmailService"
|
||||
git commit -m "feat: add feedback notification and confirmation emails to EmailService"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Backend Endpoint
|
||||
## Task 5: Backend Endpoint
|
||||
|
||||
**Files:**
|
||||
- Create: `backend/app/api/endpoints/feedback.py`
|
||||
@@ -235,12 +429,18 @@ from app.core.email import EmailService
|
||||
from app.core.rate_limit import limiter
|
||||
from app.models.user import User
|
||||
from app.models.account import Account
|
||||
from app.models.feedback import Feedback
|
||||
from app.schemas.feedback import FeedbackSubmission, FeedbackResponse
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
router = APIRouter(tags=["feedback"])
|
||||
|
||||
# TODO: Post-session contextual feedback prompt — when building the post-session
|
||||
# feedback flow, reuse this endpoint by adding optional session_id/tree_id fields
|
||||
# to FeedbackSubmission. The Feedback model and email infrastructure are already
|
||||
# in place. See design doc for details.
|
||||
|
||||
|
||||
@router.post("/feedback", response_model=FeedbackResponse)
|
||||
@limiter.limit("1/minute")
|
||||
@@ -250,7 +450,7 @@ async def submit_feedback(
|
||||
current_user: Annotated[User, Depends(get_current_active_user)],
|
||||
db: Annotated[AsyncSession, Depends(get_db)],
|
||||
):
|
||||
"""Submit user feedback via email."""
|
||||
"""Submit user feedback. Saves to DB and sends notification email."""
|
||||
if not settings.FEEDBACK_EMAIL:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
|
||||
@@ -269,6 +469,18 @@ async def submit_feedback(
|
||||
account_name = account.name
|
||||
account_code = account.display_code
|
||||
|
||||
# Always persist to DB first — email failure should not lose feedback
|
||||
feedback_record = Feedback(
|
||||
account_id=current_user.account_id,
|
||||
user_id=current_user.id,
|
||||
email=data.email,
|
||||
feedback_type=data.feedback_type.value,
|
||||
message=data.message,
|
||||
)
|
||||
db.add(feedback_record)
|
||||
await db.commit()
|
||||
|
||||
# Send notification email to admin (best-effort)
|
||||
sent = await EmailService.send_feedback_email(
|
||||
to_email=settings.FEEDBACK_EMAIL,
|
||||
reply_to_email=data.email,
|
||||
@@ -280,10 +492,15 @@ async def submit_feedback(
|
||||
)
|
||||
|
||||
if not sent:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
|
||||
detail="Failed to send feedback. Please try again later.",
|
||||
)
|
||||
logger.warning("Feedback saved to DB but notification email failed for user %s", current_user.email)
|
||||
|
||||
# Send confirmation email to submitter (fire-and-forget)
|
||||
message_preview = data.message[:100] + ("..." if len(data.message) > 100 else "")
|
||||
await EmailService.send_feedback_confirmation_email(
|
||||
to_email=data.email,
|
||||
feedback_type=data.feedback_type.value,
|
||||
message_preview=message_preview,
|
||||
)
|
||||
|
||||
return FeedbackResponse(success=True, message="Thank you! Your feedback has been submitted.")
|
||||
```
|
||||
@@ -292,7 +509,7 @@ async def submit_feedback(
|
||||
|
||||
In `backend/app/api/router.py`, add the import and include:
|
||||
|
||||
Add to imports (line 6, after the existing imports):
|
||||
Add to imports (after the existing import lines):
|
||||
```python
|
||||
from app.api.endpoints import feedback
|
||||
```
|
||||
@@ -306,17 +523,19 @@ api_router.include_router(feedback.router)
|
||||
|
||||
```bash
|
||||
git add backend/app/api/endpoints/feedback.py backend/app/api/router.py
|
||||
git commit -m "feat: add POST /feedback endpoint"
|
||||
git commit -m "feat: add POST /feedback endpoint with DB persistence and dual emails"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Backend Test
|
||||
## Task 6: Backend Tests
|
||||
|
||||
**Files:**
|
||||
- Create: `backend/tests/test_feedback.py`
|
||||
|
||||
**Step 1: Write the test**
|
||||
**Step 1: Write the tests**
|
||||
|
||||
These tests use the project's existing `client` and `auth_headers` fixtures from `conftest.py`.
|
||||
|
||||
```python
|
||||
import pytest
|
||||
@@ -324,26 +543,22 @@ from unittest.mock import patch, AsyncMock
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_submit_feedback(async_client, engineer_token, monkeypatch):
|
||||
"""Test successful feedback submission."""
|
||||
monkeypatch.setenv("FEEDBACK_EMAIL", "support@test.com")
|
||||
# Reload settings to pick up the env var
|
||||
from app.core.config import Settings
|
||||
test_settings = Settings()
|
||||
|
||||
async def test_submit_feedback(client, auth_headers):
|
||||
"""Test successful feedback submission — saves to DB and sends emails."""
|
||||
with patch("app.api.endpoints.feedback.settings") as mock_settings, \
|
||||
patch("app.api.endpoints.feedback.EmailService") as mock_email:
|
||||
mock_settings.FEEDBACK_EMAIL = "support@test.com"
|
||||
mock_email.send_feedback_email = AsyncMock(return_value=True)
|
||||
mock_email.send_feedback_confirmation_email = AsyncMock(return_value=True)
|
||||
|
||||
response = await async_client.post(
|
||||
response = await client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "engineer@resolutionflow.example.com",
|
||||
"email": "test@example.com",
|
||||
"feedback_type": "Bug Report",
|
||||
"message": "Something is broken in the tree editor when I try to save.",
|
||||
},
|
||||
headers={"Authorization": f"Bearer {engineer_token}"},
|
||||
headers=auth_headers,
|
||||
)
|
||||
|
||||
assert response.status_code == 200
|
||||
@@ -351,68 +566,98 @@ async def test_submit_feedback(async_client, engineer_token, monkeypatch):
|
||||
assert data["success"] is True
|
||||
assert "submitted" in data["message"].lower()
|
||||
|
||||
# Verify both emails were called
|
||||
mock_email.send_feedback_email.assert_called_once()
|
||||
mock_email.send_feedback_confirmation_email.assert_called_once()
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_submit_feedback_not_configured(async_client, engineer_token):
|
||||
async def test_submit_feedback_saves_to_db_even_if_email_fails(client, auth_headers, test_db):
|
||||
"""Test that feedback is persisted even when email sending fails."""
|
||||
from sqlalchemy import select, func
|
||||
from app.models.feedback import Feedback
|
||||
|
||||
with patch("app.api.endpoints.feedback.settings") as mock_settings, \
|
||||
patch("app.api.endpoints.feedback.EmailService") as mock_email:
|
||||
mock_settings.FEEDBACK_EMAIL = "support@test.com"
|
||||
mock_email.send_feedback_email = AsyncMock(return_value=False)
|
||||
mock_email.send_feedback_confirmation_email = AsyncMock(return_value=False)
|
||||
|
||||
response = await client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "test@example.com",
|
||||
"feedback_type": "Feature Request",
|
||||
"message": "Please add dark mode to the export preview screen.",
|
||||
},
|
||||
headers=auth_headers,
|
||||
)
|
||||
|
||||
# Should still succeed — DB write happened
|
||||
assert response.status_code == 200
|
||||
assert response.json()["success"] is True
|
||||
|
||||
# Verify it was saved to the database
|
||||
result = await test_db.execute(select(func.count()).select_from(Feedback))
|
||||
count = result.scalar()
|
||||
assert count >= 1
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_submit_feedback_not_configured(client, auth_headers):
|
||||
"""Test 503 when FEEDBACK_EMAIL is not set."""
|
||||
with patch("app.api.endpoints.feedback.settings") as mock_settings:
|
||||
mock_settings.FEEDBACK_EMAIL = None
|
||||
|
||||
response = await async_client.post(
|
||||
response = await client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "engineer@resolutionflow.example.com",
|
||||
"email": "test@example.com",
|
||||
"feedback_type": "General Feedback",
|
||||
"message": "This is a general feedback message for testing.",
|
||||
},
|
||||
headers={"Authorization": f"Bearer {engineer_token}"},
|
||||
headers=auth_headers,
|
||||
)
|
||||
|
||||
assert response.status_code == 503
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_submit_feedback_validation(async_client, engineer_token):
|
||||
async def test_submit_feedback_validation_message_too_short(client, auth_headers):
|
||||
"""Test validation — message too short."""
|
||||
with patch("app.api.endpoints.feedback.settings") as mock_settings:
|
||||
mock_settings.FEEDBACK_EMAIL = "support@test.com"
|
||||
|
||||
response = await async_client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "engineer@resolutionflow.example.com",
|
||||
"feedback_type": "Bug Report",
|
||||
"message": "short",
|
||||
},
|
||||
headers={"Authorization": f"Bearer {engineer_token}"},
|
||||
)
|
||||
response = await client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "test@example.com",
|
||||
"feedback_type": "Bug Report",
|
||||
"message": "short",
|
||||
},
|
||||
headers=auth_headers,
|
||||
)
|
||||
|
||||
assert response.status_code == 422
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_submit_feedback_invalid_type(async_client, engineer_token):
|
||||
async def test_submit_feedback_invalid_type(client, auth_headers):
|
||||
"""Test validation — invalid feedback type."""
|
||||
with patch("app.api.endpoints.feedback.settings") as mock_settings:
|
||||
mock_settings.FEEDBACK_EMAIL = "support@test.com"
|
||||
|
||||
response = await async_client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "engineer@resolutionflow.example.com",
|
||||
"feedback_type": "Invalid Type",
|
||||
"message": "This should fail because the type is invalid.",
|
||||
},
|
||||
headers={"Authorization": f"Bearer {engineer_token}"},
|
||||
)
|
||||
response = await client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "test@example.com",
|
||||
"feedback_type": "Invalid Type",
|
||||
"message": "This should fail because the type is invalid.",
|
||||
},
|
||||
headers=auth_headers,
|
||||
)
|
||||
|
||||
assert response.status_code == 422
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_submit_feedback_requires_auth(async_client):
|
||||
async def test_submit_feedback_requires_auth(client):
|
||||
"""Test that unauthenticated requests are rejected."""
|
||||
response = await async_client.post(
|
||||
response = await client.post(
|
||||
"/api/v1/feedback",
|
||||
json={
|
||||
"email": "anon@example.com",
|
||||
@@ -429,18 +674,18 @@ async def test_submit_feedback_requires_auth(async_client):
|
||||
cd backend && pytest tests/test_feedback.py -v --override-ini="addopts="
|
||||
```
|
||||
|
||||
Expected: All 5 tests pass. If any fail, debug and fix before proceeding.
|
||||
Expected: All 6 tests pass. If any fail, debug and fix before proceeding.
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add backend/tests/test_feedback.py
|
||||
git commit -m "test: add feedback endpoint tests"
|
||||
git commit -m "test: add feedback endpoint tests including DB persistence"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 6: Frontend API Client
|
||||
## Task 7: Frontend API Client
|
||||
|
||||
**Files:**
|
||||
- Create: `frontend/src/api/feedback.ts`
|
||||
@@ -491,27 +736,33 @@ git commit -m "feat: add feedback API client"
|
||||
|
||||
---
|
||||
|
||||
## Task 7: Frontend Page
|
||||
## Task 8: Frontend Page
|
||||
|
||||
**Files:**
|
||||
- Create: `frontend/src/pages/FeedbackPage.tsx`
|
||||
|
||||
**Step 1: Create the page component**
|
||||
|
||||
This version uses a custom feedback type selector with helper/description text instead of a plain `<select>`, so users can distinguish between types like "Usability Issue" vs "Bug Report."
|
||||
|
||||
```tsx
|
||||
import { useState } from 'react'
|
||||
import { MessageSquareText, Send, CheckCircle2 } from 'lucide-react'
|
||||
import { MessageSquareText, Send, CheckCircle2, ChevronDown } from 'lucide-react'
|
||||
import { useAuthStore } from '@/store/authStore'
|
||||
import { feedbackApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
|
||||
// TODO: Post-session contextual feedback prompt — after completing a troubleshooting
|
||||
// session, show a subtle inline prompt like "How was this flow? Quick feedback →"
|
||||
// that opens a lightweight version of this form pre-tagged with tree/session context.
|
||||
|
||||
const FEEDBACK_TYPES = [
|
||||
'Bug Report',
|
||||
'Feature Request',
|
||||
'Usability Issue',
|
||||
'Documentation',
|
||||
'General Feedback',
|
||||
{ value: 'Bug Report', description: 'Something is broken or not working as expected' },
|
||||
{ value: 'Feature Request', description: "An idea for something new you'd like to see" },
|
||||
{ value: 'Usability Issue', description: 'Something works but is confusing or hard to use' },
|
||||
{ value: 'Documentation', description: 'Feedback on help docs, tooltips, or in-app guidance' },
|
||||
{ value: 'General Feedback', description: 'Anything else — thoughts, impressions, suggestions' },
|
||||
] as const
|
||||
|
||||
export function FeedbackPage() {
|
||||
@@ -522,9 +773,17 @@ export function FeedbackPage() {
|
||||
const [message, setMessage] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [typeDropdownOpen, setTypeDropdownOpen] = useState(false)
|
||||
|
||||
const canSubmit = email.trim() && feedbackType && message.trim().length >= 10
|
||||
|
||||
const selectedType = FEEDBACK_TYPES.find(t => t.value === feedbackType)
|
||||
|
||||
const handleSelectType = (value: string) => {
|
||||
setFeedbackType(value)
|
||||
setTypeDropdownOpen(false)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!canSubmit || isSubmitting) return
|
||||
@@ -573,7 +832,7 @@ export function FeedbackPage() {
|
||||
<CheckCircle2 className="mx-auto h-12 w-12 text-green-500 mb-4" />
|
||||
<h2 className="text-xl font-semibold text-foreground mb-2">Thank you for your feedback!</h2>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
We've received your submission and will review it shortly.
|
||||
We've received your submission and will review it shortly. Check your email for a confirmation.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleNewFeedback}
|
||||
@@ -601,26 +860,42 @@ export function FeedbackPage() {
|
||||
<p className="mt-1 text-xs text-muted-foreground">We'll reply to this address if we need more details.</p>
|
||||
</div>
|
||||
|
||||
{/* Feedback Type */}
|
||||
{/* Feedback Type — custom selector with descriptions */}
|
||||
<div>
|
||||
<label htmlFor="feedback-type" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Feedback Type
|
||||
</label>
|
||||
<select
|
||||
id="feedback-type"
|
||||
value={feedbackType}
|
||||
onChange={e => setFeedbackType(e.target.value)}
|
||||
required
|
||||
className={cn(
|
||||
"w-full rounded-lg border border-border bg-card px-3 py-2 focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none",
|
||||
feedbackType ? "text-foreground" : "text-muted-foreground"
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTypeDropdownOpen(!typeDropdownOpen)}
|
||||
className={cn(
|
||||
"w-full rounded-lg border border-border bg-card px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none",
|
||||
feedbackType ? "text-foreground" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<span>{selectedType?.value ?? 'Select a type...'}</span>
|
||||
<ChevronDown size={16} className={cn("transition-transform", typeDropdownOpen && "rotate-180")} />
|
||||
</button>
|
||||
{typeDropdownOpen && (
|
||||
<div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-lg overflow-hidden">
|
||||
{FEEDBACK_TYPES.map(type => (
|
||||
<button
|
||||
key={type.value}
|
||||
type="button"
|
||||
onClick={() => handleSelectType(type.value)}
|
||||
className={cn(
|
||||
"w-full text-left px-3 py-2.5 hover:bg-accent transition-colors",
|
||||
feedbackType === type.value && "bg-accent"
|
||||
)}
|
||||
>
|
||||
<div className="text-sm font-medium text-foreground">{type.value}</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5">{type.description}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<option value="" disabled>Select a type...</option>
|
||||
{FEEDBACK_TYPES.map(type => (
|
||||
<option key={type} value={type}>{type}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
@@ -675,12 +950,12 @@ export default FeedbackPage
|
||||
|
||||
```bash
|
||||
git add frontend/src/pages/FeedbackPage.tsx
|
||||
git commit -m "feat: add FeedbackPage component"
|
||||
git commit -m "feat: add FeedbackPage with custom feedback type selector"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 8: Router & Navigation
|
||||
## Task 9: Router & Navigation
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/router.tsx`
|
||||
@@ -760,7 +1035,7 @@ git commit -m "feat: add feedback route, sidebar nav item, and account link card
|
||||
|
||||
---
|
||||
|
||||
## Task 9: Build Verification
|
||||
## Task 10: Build Verification
|
||||
|
||||
**Step 1: Run the frontend build**
|
||||
|
||||
@@ -776,7 +1051,7 @@ Expected: Build succeeds with no errors. TypeScript type-checking is stricter in
|
||||
cd backend && pytest tests/test_feedback.py -v --override-ini="addopts="
|
||||
```
|
||||
|
||||
Expected: All tests pass.
|
||||
Expected: All 6 tests pass.
|
||||
|
||||
**Step 3: Set FEEDBACK_EMAIL in .env for local testing**
|
||||
|
||||
@@ -792,13 +1067,15 @@ FEEDBACK_EMAIL=your-email@example.com
|
||||
3. Log in as any test user
|
||||
4. Navigate to `/feedback` via sidebar
|
||||
5. Verify form loads with email pre-filled
|
||||
6. Submit feedback — verify success state
|
||||
7. Check email inbox for the formatted feedback email
|
||||
8. Verify the account settings page shows the "Send Feedback" link card
|
||||
6. Click the feedback type dropdown — verify descriptions appear under each option
|
||||
7. Submit feedback — verify success state with confirmation email note
|
||||
8. Check email inbox for: (a) admin notification email, (b) user confirmation email
|
||||
9. Verify feedback row in DB: `docker exec -it patherly_postgres psql -U postgres -d patherly -c "SELECT * FROM feedback;"`
|
||||
10. Verify the account settings page shows the "Send Feedback" link card
|
||||
|
||||
---
|
||||
|
||||
## Task 10: Final Commit & Cleanup
|
||||
## Task 11: Final Verification
|
||||
|
||||
**Step 1: Run full backend test suite**
|
||||
|
||||
|
||||
Reference in New Issue
Block a user