Add webhooks page to project dashboard #7172
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
This was referenced May 27, 2025
|
|
""" WalkthroughThis update introduces a webhooks management feature to the project dashboard. It adds a sidebar link for webhooks, implements a full webhooks page with listing and creation UI, exports relevant API interfaces and functions, and adds reusable components for displaying and managing webhooks, including relative time formatting and deletion functionality. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant WebhooksPage
participant API
participant WebhooksTable
User->>Sidebar: Clicks "Webhooks"
Sidebar->>WebhooksPage: Navigate to webhooks page
WebhooksPage->>API: Fetch project and webhooks
API-->>WebhooksPage: Return project data and webhooks
WebhooksPage->>WebhooksTable: Provide webhooks data
WebhooksTable->>User: Display webhooks table
User->>WebhooksTable: Click "Delete" on webhook
WebhooksTable->>API: Call deleteWebhook
API-->>WebhooksTable: Confirm deletion
WebhooksTable->>WebhooksPage: Trigger data refresh
Possibly related PRs
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (6)
⏰ Context from checks skipped due to timeout of 90000ms (7)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
github-actions
bot
added
Dashboard
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7172 +/- ##
=======================================
Coverage 55.66% 55.66%
=======================================
Files 904 904
Lines 58400 58400
Branches 4116 4116
=======================================
Hits 32510 32510
Misses 25784 25784
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
AmineAfia
force-pushed
the
Add_webhooks_page_to_project_dashboard
branch
from
a63703d to
a1b14b4
Compare
AmineAfia
force-pushed
the
Add_webhook_API_functions_for_insight_dashboard
branch
from
0b15d5e to
c1575f6
Compare
AmineAfia
force-pushed
the
Add_webhooks_page_to_project_dashboard
branch
from
a1b14b4 to
f3355d5
Compare
Base automatically changed from
Add_webhook_API_functions_for_insight_dashboard
to
main
May 28, 2025 21:28
AmineAfia
force-pushed
the
Add_webhooks_page_to_project_dashboard
branch
from
ce3008e to
adf9cc1
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/@/api/insight/webhooks.ts (1)
7-20: Consider security implications of exposing webhook_secret in the interface.The
WebhookResponseinterface includeswebhook_secretwhich contains sensitive authentication data. Consider whether this secret should be exposed in API responses used by UI components, or if it should be omitted for security reasons.Consider creating separate interfaces for different use cases:
+export interface WebhookPublicResponse extends Omit<WebhookResponse, 'webhook_secret'> {} + +export interface WebhookPrivateResponse extends WebhookResponse {}This would allow UI components to use
WebhookPublicResponsewhile keeping the secret available only when specifically needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/dashboard/src/@/api/insight/webhooks.ts(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/RelativeTime.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/RelativeTime.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/dashboard/src/@/api/insight/webhooks.ts (2)
22-42: LGTM! Well-structured filtering interface.The
WebhookFiltersinterface is well-designed with proper optional typing and clear separation between event and transaction filters. The nested structure appropriately handles the complexity of webhook filtering requirements.
134-166: LGTM! Proper implementation of webhook deletion.The
deleteWebhookfunction follows good practices:
- Proper URL encoding of the webhook ID for security
- Consistent error handling pattern with other functions
- Appropriate HTTP DELETE method usage
- Proper authentication headers
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR introduces a new `CreateWebhookModal` component and enhances the `Webhooks` functionality in the dashboard. It implements a `WebhooksTable` for displaying webhooks and their details, along with error handling and user notifications for actions like deleting webhooks.
### Detailed summary
- Added `CreateWebhookModal` component for creating new webhooks.
- Updated `ProjectSidebarLayout` to include a link to webhooks with a new badge.
- Changed `WebhookResponse` and `WebhookFilters` interfaces to `export`.
- Modified `WebhooksPage` to handle project and webhook loading with error management.
- Introduced `WebhooksTable` for displaying webhooks with actions.
- Implemented `RelativeTime` component to show formatted timestamps.
- Added deletion functionality for webhooks with user notifications.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a "Webhooks" section in the project sidebar, highlighted with a "New" badge.
- Added a dedicated Webhooks page displaying a list of webhooks in a sortable table with options to copy URLs and delete entries.
- Included a "New Webhook" button and modal for future webhook creation.
- Implemented a component to display relative creation times for webhooks.
- **Bug Fixes**
- Improved error handling and user feedback for webhook-related actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
Add_webhooks_page_to_project_dashboard
branch
from
adf9cc1 to
dcb412f
Compare
This was referenced May 28, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR introduces a new
CreateWebhookModalcomponent, enhances theWebhooksPageto handle webhook management, and updates theWebhooksTableto display webhooks with various functionalities including deletion. It also exports previously private interfaces for broader use.Detailed summary
CreateWebhookModalcomponent inCreateWebhookModal.tsx.ProjectSidebarLayout.tsxto include a link to webhooks with aBadge.WebhookResponseandWebhookFiltersinterfaces to be exported inwebhooks.ts.deleteWebhookfunction to be exported for external use.RelativeTimecomponent for displaying formatted time.WebhooksPageto fetch and display webhooks with error handling.WebhooksTablecomponent to list webhooks with delete functionality.WebhooksTable.Summary by CodeRabbit