feat(connections): set up provider webhooks automatically or by hand

Aperta
#426 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
28/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nextjs, playwright, react, typescript

Direzione di ricerca

Start by reading the webhook contract from #28 and the Permission type (with access: "full" and fullAccessReason) in src/lib/adapters/types.ts, then the existing connection code under src/lib/connections/ and the connection page under src/app/. Build the adapter declaration first, then the setup panel with its two paths, and finish with the Playwright spec for a simulated provider plus an axe and keyboard pass. Done means every acceptance criterion holds, including the write-access warning shown before consent and the last delivery time announced via aria-live="polite"; also update docs/adapters.md and the provider pages. Note this depends on #28 landing first, and provider-specific create/delete calls are separate issues.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

area: connections blocked enhancement impact: high priority: P1 size: M

Context

Eddie's decision on #424 (2026-11-14): for providers where the user has to create the webhook (Resend, GitLab, Polar, Better Stack, Render), the user chooses between automatic setup and setup by hand. Where automatic setup needs write access because the platform has no read-only way to create a webhook, DevMacro says so before asking, and tells the user to set the webhook up by hand if they want DevMacro to stay read-only.

GitHub, Sentry, Vercel, and Stripe need none of this: their webhook URL is on DevMacro's own app registration (#62, #421, #422, #423).

Plan

  1. Adapter declaration. Using the webhook contract from #28, an adapter that needs a user-created webhook declares: whether it supports automatic setup, the extra scope automatic setup needs (none for Resend), whether the provider generates the signing secret (so the user pastes it back), and the steps for setup by hand.
  2. Setup panel on the connection page, shown after a provider connects and from the connection's settings later. A fieldset with a legend and two radio choices, each with its explanation (copy below), then a button for the chosen path.
  3. Automatic setup with write access. A second OAuth consent for the extra scope. The write-scoped grant replaces the stored credential for that connection, so DevMacro can delete the webhook on disconnect. The connect screen and the connection page show the scope with access: "full" and its fullAccessReason (Permission in src/lib/adapters/types.ts), so the write access is visible for as long as it is held.
  4. Setup by hand. Show the per-connection webhook URL and secret (copy buttons, secret shown once, regenerate to rotate), the provider's steps, and a field for the provider's signing secret where the provider generates it. Show when the last delivery arrived, so the user can see it works.
  5. Disconnect. Automatic: delete the webhook through the provider's API, then revoke. By hand: show the steps to remove the webhook in the provider. Either way, deliveries for a removed connection are dropped.
  6. Switching. Moving from automatic to by hand means disconnecting and reconnecting read-only; the panel says so. No in-place downgrade.
  7. Docs: docs/adapters.md (the read-only rule now has one exception: automatic webhook setup the user opts into), and each affected provider page.
Copy

Panel heading: "Get events as they happen"

When automatic setup needs write access (shown with the provider's name):

  • Set up automatically: "DevMacro asks {Provider} for write access, because {Provider} has no read-only access that can create a webhook. With write access, DevMacro's connection can change your {Provider} account, not only read it. If you want DevMacro to stay read-only, set up the webhook by hand instead."
  • Set up by hand: "DevMacro stays read-only. You add the webhook in {Provider} yourself, using the address and secret below."

When automatic setup needs no new access (Resend):

  • Set up automatically: "DevMacro adds a webhook to your {Provider} team, using the access you already granted. You can see it in {Provider}, and DevMacro removes it when you disconnect."
  • Set up by hand: "You add the webhook in {Provider} yourself, using the address below."

Without a webhook: "Until a webhook is set up, DevMacro checks {Provider} for changes on a schedule."

Acceptance criteria

  • Each provider with a user-created webhook shows both choices, with the copy above, before anything is requested or changed.
  • Choosing automatic setup with write access shows the write access warning before the provider's consent screen, and the connection page shows the write access while it is held.
  • Setup by hand shows the URL, the secret, the provider's steps, and the last delivery time, and never requests a new scope.
  • Disconnect deletes an automatic webhook, or shows the steps to remove a manual one.
  • Keyboard only: the choices, copy buttons, and actions are reachable and operable, with visible focus. The last delivery time announces through aria-live="polite". Axe scan clean on the panel.
  • Playwright e2e: both paths for a simulated provider, including the write access warning.

Files and areas

  • src/lib/adapters/types.ts (declaration from #28), src/lib/connections/, the connection page under src/app/, docs/adapters.md, provider pages.
  • Non-goals: provider-specific create and delete calls (each provider's issue), in-place downgrade from write to read-only.

Verification

  • npm run lint, npm run typecheck, npm test
  • Playwright spec for the panel, plus the axe scan and a keyboard-only pass.

Depends on

  • #28 Ingest provider webhooks (contract, route, per-connection secrets)

Branch: <issue-number>-webhook-setup-panel
Closes with a Closes #<issue-number> footer on the commit or pull request.

Model: anthropic/claude-opus-5-5 | Reasoning effort: unknown

Lingua principale
TypeScript
Stelle
1
Fork
1
Merge medio
6h 56m
PR unite (30g)
136

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di eddiejaoude/StackDash

Tutte le issue di eddiejaoude/StackDash

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.