Files
supabase/.github/copilot-instructions.md
Danny White a27487fe58 feat(studio): add keyboard shortcuts for platform webhooks (#46198)
## 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>
2026-05-22 02:37:12 +00:00

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.md for details

What TO Comment On (Priority Order)

  1. Logic errors and bugs — Off-by-one, null derefs, wrong conditional, unreachable code, incorrect early returns
  2. Security vulnerabilities — XSS, SQL injection, auth bypass, secrets in code, unsafe dangerouslySetInnerHTML
  3. Race conditions and async bugs — Missing await, unhandled promise rejections, stale closures, effect cleanup issues
  4. Data loss risks — Destructive operations without confirmation, missing error handling on writes
  5. 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 site
  • apps/docs/ — Documentation
  • packages/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, ErrorMatcher usage
  • 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.