mirror of
https://github.com/supabase/supabase.git
synced 2026-06-09 03:22:27 +08:00
## What kind of change does this PR introduce? Feature. Resolves FE-3418 ## What is the current behaviour? Platform webhooks (org and project) have no keyboard shortcut coverage. Every action requires a mouse click. ## What is the new behaviour? Adds seven shortcuts across the four UI states of the platform webhooks pages: **List page** | Shortcut | Action | |---|---| | `Shift+F` | Focus search input | | `Shift+N` | Open "New endpoint" sheet | **Endpoint detail page** (when viewing a specific endpoint) | Shortcut | Action | |---|---| | `Shift+E` | Open the edit sheet | | `Shift+U` | Copy the endpoint URL | **Create / edit form sheet** | Shortcut | Action | |---|---| | `Mod+Enter` | Submit the form (create or save) | **Delivery details sheet** (when a delivery row is open) | Shortcut | Action | |---|---| | `Shift+R` | Retry the delivery (only active for non-success deliveries) | | `Shift+C` | Copy the active tab's payload (switches label between "Copy event payload" / "Copy response payload") | All shortcuts: - Are surfaced via `ShortcutTooltip` / `Shortcut` tooltips on their buttons - Appear in the keyboard shortcuts reference sheet (`Mod+/`) under a new **Platform Webhooks** group - Are gated so they only fire in the appropriate UI state (e.g. `Shift+E` is disabled while the edit sheet is already open) - Apply to both the org-level (`/org/[slug]/webhooks`) and project-level (`/project/[ref]/settings/webhooks`) pages as both use the same `PlatformWebhooksPage` component **Shared shortcuts reused** (no new IDs): `LIST_PAGE_FOCUS_SEARCH`, `LIST_PAGE_NEW_ITEM`, `ACTION_BAR_SAVE`. ## To test The platform webhooks UI is behind a feature flag for internal folks. Enable it in Studio via **Account → Feature Previews → Platform Webhooks**. The backend is not yet integrated, so you can test all the shortcuts on the 1–2 mock endpoints (and their deliveries) that appear. **List page** (`/org/[slug]/webhooks` or `/project/[ref]/settings/webhooks`): - [ ] `Shift+F` moves focus to the search input - [ ] `Shift+N` opens the "New endpoint" sheet (tooltip visible on hover of the button) **New endpoint sheet**: - [ ] Fill in a name and a valid URL, select at least one event type - [ ] `Mod+Enter` submits and creates the endpoint **Endpoint detail page**: - [ ] `Shift+E` opens the edit sheet (tooltip visible on the Edit button) - [ ] `Shift+U` copies the endpoint URL and shows a toast (tooltip visible on the copy icon next to the URL) **Edit sheet**: - [ ] `Mod+Enter` saves changes **Delivery details sheet** (click a delivery row to open): - [ ] `Shift+R` retries a failed/pending delivery (button and shortcut absent for successful deliveries) - [ ] On the **Event** tab: `Shift+C` copies the event payload, toast reads "Copied event payload" - [ ] On the **Response** tab: `Shift+C` copies the response payload, toast reads "Copied response payload" - [ ] Tooltip on both Copy buttons reflects the active tab label **Shortcuts reference sheet** (`Mod+/`): - [ ] A **Platform Webhooks** group appears when on an endpoint detail page or with the delivery sheet open with the relevant shortcuts listed - [ ] The basic shortcuts are shown under **List pages** when on the root Webhooks page --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
3.5 KiB
3.5 KiB
Copilot Code Review Instructions
Review Policy — Read This First
You are a code reviewer for a large TypeScript/Next.js/React monorepo. Your reviews must be low-noise and high-signal. The team acts on fewer than 20% of default Copilot suggestions, so every comment you leave must earn its place.
Confidence Threshold
Only comment when you are >85% confident the issue is a real bug, security vulnerability, or logic error. If you are unsure, do not comment. Silence is better than noise.
What NOT to Comment On
Our CI pipeline already validates the following. Never comment on these topics:
- Formatting or whitespace — Prettier runs on every PR
- Linting issues — ESLint with auto-fix runs on every PR
- Type errors — TypeScript strict-mode typecheck runs on every PR
- Typos or spelling — Automated typo detection runs on every PR
- Missing tests for trivial changes — Handled by topic-specific test instructions
- Import ordering or grouping — Handled by linter
- Naming style preferences (camelCase vs snake_case debates) — Follow existing file conventions
- Accessibility attributes on shadcn/Radix UI components — See
studio-shadcn-components.instructions.mdfor details
What TO Comment On (Priority Order)
- Logic errors and bugs — Off-by-one, null derefs, wrong conditional, unreachable code, incorrect early returns
- Security vulnerabilities — XSS, SQL injection, auth bypass, secrets in code, unsafe
dangerouslySetInnerHTML - Race conditions and async bugs — Missing
await, unhandled promise rejections, stale closures, effect cleanup issues - Data loss risks — Destructive operations without confirmation, missing error handling on writes
- API contract violations — Wrong HTTP method, missing auth headers, incorrect request/response shapes
Comment Style
- Be advisory, not prescriptive. Use "Consider..." or "This may..." — never demand changes.
- One comment per distinct issue. Do not leave multiple comments about the same underlying problem.
- No self-contradictions. If you suggest a change, do not then flag a problem with your own suggestion.
- Do not comment on individual commits. Review the final state of the PR diff only.
Repo Context
This is a TypeScript/Next.js/React monorepo:
apps/studio/— Supabase Dashboard (primary review target)apps/www/— Marketing siteapps/docs/— Documentationpackages/common/— Shared code including telemetry definitions
Topic-Specific Guidelines
Path-specific rules in .github/instructions/:
- Telemetry:
studio-telemetry.instructions.md— event naming, property conventions, feature flag measurement - Testing:
studio-testing.instructions.md— test strategy, extraction patterns, coverage expectations - Error Handling:
studio-error-handling.instructions.md— error classification,ErrorMatcherusage - E2E Tests:
studio-e2e-tests.instructions.md— selector priority, anti-patterns (waitForTimeout,force: true) - Composition Patterns:
studio-composition-patterns.instructions.md— avoid boolean props, use compound components - shadcn/Radix Components:
studio-shadcn-components.instructions.md— accessibility handled by primitives, do not flag - Keyboard Shortcuts:
studio-shortcuts.instructions.md— shortcut registry pattern, search-input escape handler, when to flag missing coverage
These files are scoped to apps/studio/ and applied automatically during reviews.