Skip to content

Conversation

@RemiBonnet
Copy link
Contributor

@RemiBonnet RemiBonnet commented Dec 4, 2025

📋 Summary

Related Issue: #8140

This PR adds the ability to filter webhook deliveries by HTTP status codes, allowing users to quickly find deliveries with specific response codes. Status codes are organized by category in the filter UI to make it easier to understand for users unfamiliar with HTTP status codes.

🎯 What

  • Added HTTP status code filtering to the webhook deliveries in the API
  • Users can filter by one or multiple HTTP status codes simultaneously
  • Status codes are organized by category (Success, Client Error, Server Error) in the filter UI

🤔 Why

When debugging webhook, users need to quickly identify failed deliveries or filter by specific HTTP status codes.

🔧 How

  • Added http_code query parameter to the list_webhook_deliveries API endpoint that accepts multiple status codes
  • Created WebhookStatusFilter component with a popover UI for selecting status codes

🧪 Testing

  • I have tested these changes locally
  • All existing tests pass (uv run task test for backend, pnpm test for frontend)
  • I have added new tests for new functionality
  • I have run linting and type checking (uv run task lint && uv run task lint_types for backend)

Test Instructions

  1. Navigate to a webhook endpoint's page in the dashboard
  2. Select a webhook or create new one
  3. Use the status code filter dropdown to select one or multiple HTTP status codes
  4. Verify that the deliveries table updates to show only deliveries matching the selected status codes
  5. Test the "Select All" / "Unselect All" functionality
  6. Test combining status code filter with date range filter
  7. Check light and dark mode for UI filter

🖼️ Screenshots/Recordings

polar-webhook-filter-status-dark.mov
polar-webhook-status-filter-light.mov

📝 Additional Notes

  • When no status codes are selected, no deliveries are shown (empty state)
  • The filter state is managed locally in the component and doesn't persist in URL parameters
  • Multi-select pattern: Button design follows existing select components. This popover-based approach establishes a reusable pattern since I don't see a dedicated multi-select component in the code-base.

✅ Pre-submission Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my code
  • I have commented my code where necessary
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have updated the relevant tests
  • All tests pass locally
  • AI/LLM Policy: If I used AI assistance, I have tested and executed the code locally (not just "vibe-coded")

@vercel
Copy link

vercel bot commented Dec 4, 2025

@RemiBonnet is attempting to deploy a commit to the polar-sh Team on Vercel.

A member of the Team first needs to authorize it.

@RemiBonnet RemiBonnet force-pushed the feat/webhook-status-filter branch from bf628bb to 6614227 Compare December 6, 2025 09:52
@RemiBonnet RemiBonnet force-pushed the feat/webhook-status-filter branch from 3ad1da6 to cf42569 Compare December 6, 2025 10:36
@RemiBonnet RemiBonnet force-pushed the feat/webhook-status-filter branch from cf42569 to 77ef5fd Compare December 6, 2025 10:38
@RemiBonnet RemiBonnet marked this pull request as ready for review December 6, 2025 10:47
@RemiBonnet RemiBonnet changed the title clients/apps/app: add webhook status filter feat/webhook: add HTTP status code filter for deliveries Dec 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant