Improve webhooks page #2729
Improve webhooks page #2729
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis set of changes restructures the webhooks settings pages. It introduces new components for layout and button control, centralizes plan-based permission logic for webhook creation, and removes duplicated UI and permission checks from the main webhooks page. The ability to create webhooks is now consistently gated by workspace plan capabilities. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebhooksPage
participant CreateWebhookButton
participant getPlanCapabilities
participant NewWebhookPageClient
User->>WebhooksPage: Navigates to /settings/webhooks
WebhooksPage->>CreateWebhookButton: Render control
CreateWebhookButton->>getPlanCapabilities: Check canCreateWebhooks
getPlanCapabilities-->>CreateWebhookButton: Returns capabilities
alt Eligible plan and correct path
CreateWebhookButton-->>User: Show "Create Webhook" button
User->>CreateWebhookButton: Clicks button
CreateWebhookButton->>NewWebhookPageClient: Navigate to /webhooks/new
NewWebhookPageClient->>getPlanCapabilities: Check plan
alt Plan not eligible
NewWebhookPageClient-->>User: Redirect to /settings/webhooks
else
NewWebhookPageClient-->>User: Show Add/Edit Webhook Form
end
else
CreateWebhookButton-->>User: Button not shown
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/new/page-client.tsx (1)
14-18: Consider using centralized plan capabilities and improve redirect timing.The plan check logic duplicates what's already available in
getPlanCapabilities. Consider using the centralized capability:+import { getPlanCapabilities } from "@/lib/plan-capabilities"; export default function NewWebhookPageClient({ newSecret, }: { newSecret: string; }) { const { slug, plan } = useWorkspace(); + const { canCreateWebhooks } = getPlanCapabilities(plan); - const needsHigherPlan = plan === "free" || plan === "pro"; - - if (needsHigherPlan) { + if (!canCreateWebhooks) { redirect(`/${slug}/settings/webhooks`); }Also, the client-side redirect may cause a brief flash of content before redirecting. Consider if server-side redirect would be more appropriate.
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/page-client.tsx (2)
15-30: Consider using centralized plan capabilities for consistency.The plan check logic is duplicated and inconsistent with the new
canCreateWebhookscapability. Consider using the centralized approach:+import { getPlanCapabilities } from "@/lib/plan-capabilities"; export default function WebhooksPageClient() { const { slug, plan } = useWorkspace(); + const { canCreateWebhooks } = getPlanCapabilities(plan); const { webhooks, isLoading } = useWebhooks(); - const needsHigherPlan = plan === "free" || plan === "pro"; - - if (needsHigherPlan) { + if (!canCreateWebhooks) {This ensures consistency across all webhook-related components and makes future plan changes easier to manage.
17-30: Consider moving upgrade empty state to layout level.Since the layout component now handles the overall webhook page structure, the upgrade empty state might be better placed there to avoid duplicating the plan check logic across multiple components.
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/create-webhook-button.tsx (1)
27-35: Consider disabling the button when there are permission errors.The button shows a tooltip for permission errors but remains clickable, which could lead to a confusing user experience where users can navigate to a page they can't use.
Consider disabling the button when there are permission errors:
return ( <Link href={`/${slug}/settings/webhooks/new`}> <Button className="flex h-10 items-center justify-center whitespace-nowrap rounded-lg border px-4 text-sm" text="Create Webhook" disabledTooltip={permissionsError} + disabled={!!permissionsError} /> </Link> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/(basic-layout)/webhooks/new/page-client.tsx(0 hunks)apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/create-webhook-button.tsx(1 hunks)apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/layout.tsx(1 hunks)apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/new/page-client.tsx(1 hunks)apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/page-client.tsx(1 hunks)apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/page.tsx(1 hunks)apps/web/lib/plan-capabilities.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/web/app/app.dub.co/(dashboard)/[slug]/settings/(basic-layout)/webhooks/new/page-client.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-06-19T01:46:45.723Z
Learnt from: steven-tey
PR: dubinc/dub#0
File: :0-0
Timestamp: 2025-06-19T01:46:45.723Z
Learning: PayPal webhook verification in the Dub codebase is handled at the route level in `apps/web/app/(ee)/api/paypal/webhook/route.ts` using the `verifySignature` function. Individual webhook handlers like `payoutsItemFailed` don't need to re-verify signatures since they're only called after successful verification.
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/page.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/page-client.tsx
📚 Learning: 2025-07-17T06:41:45.620Z
Learnt from: devkiran
PR: dubinc/dub#2637
File: apps/web/app/(ee)/api/singular/webhook/route.ts:0-0
Timestamp: 2025-07-17T06:41:45.620Z
Learning: In the Singular integration (apps/web/app/(ee)/api/singular/webhook/route.ts), the event names in the singularToDubEvent object have intentionally different casing: "Copy GAID" and "copy IDFA". This casing difference is valid and should not be changed, as these are the correct event names expected from Singular.
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/page.tsx
🔇 Additional comments (6)
apps/web/lib/plan-capabilities.ts (1)
11-11: LGTM! Consistent capability addition.The new
canCreateWebhookscapability follows the established pattern and correctly restricts webhook creation to higher-tier plans.apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/page.tsx (1)
3-5: LGTM! Clean simplification.Converting to a synchronous function is appropriate since no server-side logic is required. This aligns well with the overall restructuring to delegate functionality to dedicated components.
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/layout.tsx (1)
6-20: LGTM! Well-structured layout component.The layout component provides excellent separation of concerns by centralizing the page structure, title, documentation link, and controls. The integration with
CreateWebhookButtonmaintains consistency across webhook-related pages.apps/web/app/app.dub.co/(dashboard)/[slug]/settings/webhooks/create-webhook-button.tsx (3)
1-8: LGTM!The imports are well-organized and all necessary for the component's functionality. The "use client" directive is correctly placed for a component using client-side hooks.
22-25: LGTM!The conditional logic correctly prevents the button from showing when:
- The workspace plan doesn't support webhook creation
- The user is not on the main webhooks settings page
The
pathname.endsWith("/settings/webhooks")check is appropriate for the URL structure.
13-20: Add defensive checks for loading states.The component doesn't handle potential undefined values during initial loading. The
useWorkspacehook might return undefined values before the workspace data is loaded, which could cause issues.Consider adding loading state checks:
const { slug, plan, role } = useWorkspace(); + // Don't render during initial load + if (!slug || !plan || role === undefined) { + return null; + } const { canCreateWebhooks } = getPlanCapabilities(plan);⛔ Skipped due to learnings
Learnt from: TWilson023 PR: dubinc/dub#2538 File: apps/web/ui/partners/overview/blocks/commissions-block.tsx:16-27 Timestamp: 2025-06-18T20:26:25.177Z Learning: In the Dub codebase, components that use workspace data (workspaceId, defaultProgramId) are wrapped in `WorkspaceAuth` which ensures these values are always available, making non-null assertions safe. This is acknowledged as a common pattern in their codebase, though not ideal.Learnt from: devkiran PR: dubinc/dub#2433 File: apps/web/ui/modals/add-payment-method-modal.tsx:60-62 Timestamp: 2025-05-29T09:49:19.604Z Learning: The `/api/workspaces/${slug}/billing/payment-methods` POST endpoint in the billing API returns either an error (handled by response.ok check) or a response object containing a `url` property for successful requests.
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores