dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-13 21:29:08 +03:00
Code Issues Packages Projects Releases Wiki Activity
37,542 Commits 1,802 Branches 62 Tags
fix/docs-e2e-vercel-wait-commit-status
Commit Graph
5 Commits
Author SHA1 Message Date
Danny White e3d7267845 fix(studio): chip away explicit-tabindex ratchet debt (#48040) 
## What kind of change does this PR introduce?

A11y cleanup follow-up to #47984 /
[DEPR-626](https://linear.app/supabase/issue/DEPR-626).

## What is the current behavior?

Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations
(raw `<button>` / `role="button"` without explicit `tabIndex`).

## What is the new behavior?

- Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call
sites across nav, `components/ui`, Database, Storage, and the remainder
- Ratchet baseline cleared (**82 → 0**) and the rule **removed from the
Studio ratchet** (debt is gone; ratchet is temporary)
- Rule remains a shared **`warn`** for now — promoting to `error` (and
sweeping www/docs/design-system) is a follow-up
- Also fixed the learn/ui-library call sites that surfaced while
experimenting with error promotion
- Small follow-ups where making controls focusable exposed gaps:
accessible names, disabled/focus consistency, focus-ring polish on
To-test surfaces, home section `KeyboardSensor`, and an E2E locator
tightened after `aria-label="Remove column"`

Prefer migrating to `Button` from `ui` in future touch-ups; this PR
takes the minimal path so Studio debt can stay at zero.

## Additional context

Batches landed together so baseline conflicts stayed simple while
chipping away:

- Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column,
Tabs, …)
- `components/ui` shared
- Database + Storage
- Remainder

**Out of scope / intentional deferrals**

- Promoting `supabase/require-explicit-tabindex` to a lint **error**
(follow-up after www/docs/design-system sweeps)
- Tabs/Radio roving, tooltips, context menus, in-menu items
- Full keyboard-accessible tab-close UX (close stays hover +
`tabIndex={-1}`; context menu still closes tabs)
- Data API docs links (`/project/<ref>/api` redirect)

**Reviewer notes**

- Rule only flags raw `<button>` / `role="button"` without a `tabIndex`
prop. `Button` from `ui` already bakes this in
- `tabIndex={-1}` is intentional for disabled controls, in-menu /
roving-focus children, and hover-only tab close
- For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it
isn’t overwritten (TS2783)

### To test

Use **Safari** with macOS Keyboard navigation **off** (System Settings →
Keyboard). Chrome once for a sanity pass. For each surface below: Tab
until the control is focused, then activate with Enter/Space where
relevant.

1. **API Docs side panel** (Table Editor → open a table → **API docs**)
- Floating API Docs panel — **not** `/project/<ref>/api` (that redirects
to Data API docs; language ToggleGroup uses arrow keys; links are out of
scope)
- Left nav buttons — Tab through several and activate one; active
highlight / navigation still works

2. **Integrations → Marketplace**
- Enable **Integrations layout** feature preview first (avatar menu →
Feature previews)
   - `/org/<slug>/integrations` or project integrations marketplace
   - “Clear all”, grid/list toggles — Tab + activate

3. **Table Editor → create a table → Columns**
- Drag handles only appear while **creating** (not when editing an
existing table)
   - Tab to grip / remove (X) / sensitive-data eye if shown

4. **Project Home** — section drag handles
   - Tab to a grip (visible focus ring)
- Optional: Space to pick up, arrows to move, Space/Esc to drop
(KeyboardSensor added)
   - Mouse dnd still works

5. **Storage → Policies** — expand/collapse bucket list chevron
(design-system focus ring, no stuck grey open bg)

6. **Support form** (Help → Support) — attachment remove (×) and
add-attachment control when visible

Disabled controls should be **skipped** by Tab.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Accessibility Improvements**
* Improved keyboard navigation throughout Studio by explicitly managing
focus (`tabIndex`) across many interactive controls (menus, tabs,
tables, charts, dialogs, navigation, and form actions).
* Disabled or non-interactive controls are now removed from the tab
order (or made unfocusable), while available actions remain reachable.
* Ensured `type="button"` on relevant controls to prevent unintended
submissions, and refined keyboard focus behavior for various toggles and
copy/remove actions.
* **Chores**
* Updated the ESLint rule baseline configuration to match the new focus
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-21 08:22:43 +10:00
Danny White 805aee289e fix(studio): color regressions after theme update (#47794) 
## What kind of change does this PR introduce?

Bug fix + small shared component

## What is the current behavior?

After the recent colour system changes, several UI elements lost
contrast in light mode:

- `InfoIcon` with a background appeared as a flat grey circle (glyph
fill matched the background)
- Several buttons forced `text-white`, which no longer contrasts
correctly against the updated brand fills
- Selected / completed check badges were inconsistent between call sites

## What is the new behavior?

- `InfoIcon` uses `text-background` for the glyph fill so the "i" is
visible against the grey circle
- www primary buttons drop hardcoded `text-white` and use standard
`Button` colours
- New shared `SuccessCheck` in `ui` for selected state and completion
progress (green circle; white check in light mode, black check in dark
mode)
- Documented in the design system with selected + progress examples

Note on `InfoIcon`:
[#47933](https://github.com/supabase/supabase/pull/47933) landed a
related fix using `text-background-200` (`--card`). This PR keeps
`text-background` instead, to match `CheckIcon` / `EyeOffIcon` in the
same file and avoid the legacy alias.

| Before | After |
| --- | --- |
| <img width="688" height="268" alt="CleanShot 2026-07-10 at 11 30
25@2x"
src="https://github.com/user-attachments/assets/c0276b0c-1023-46c8-805c-35a22def1353"
/> | <img width="664" height="278" alt="CleanShot 2026-07-10 at 11 29
43@2x"
src="https://github.com/user-attachments/assets/3508cf37-1b48-4fb7-a939-83522feb44f1"
/> |
| <img width="468" height="550" alt="CleanShot 2026-07-10 at 11 31
04@2x"
src="https://github.com/user-attachments/assets/acd42273-15ce-4fb2-9d0c-5a43ac23073c"
/> | <img width="460" height="540" alt="CleanShot 2026-07-10 at 11 32
50@2x"
src="https://github.com/user-attachments/assets/f66fb4bc-81f7-4df1-95f5-63980c4e8537"
/> |

## To test

Use the staging preview link from this PR and check the following in
**light mode** (and spot-check dark mode):

**www**
- Visit `/404` — "Head back" button should have readable text (not
white-on-green)
- Visit `/company` — "Join the team" button in the Team section
- Visit a product page with a hero CTA (e.g. `/database`, `/realtime`) —
primary "Start for free" button

**studio**
- Database → Replication → deploy a read replica — footer `InfoIcon`
next to the pricing line should show a visible "i" inside the grey
circle
- `/redeem` — select an org; green `SuccessCheck` should match
light/dark contrast (white check / black check)
- Settings → API → service role key row — red "secret" tag text should
be readable

**design system**
- `/docs/components/success-check` — demo, selected-state, and progress
examples
 2026-07-15 14:09:08 +00:00
Joshen Lim fd0f2dd459 Scope last visited organization local storage to profile (#47071) 
## Context

If a user switches account without an explicit log out via the
dashboard, landing back on `/org` will redirect users to the last
visited organization as stored in local storage, in which it can result
in the following state if the last visited organization does not exist
in the current account
<img width="2538" height="1060" alt="image"
src="https://github.com/user-attachments/assets/270e482a-3515-48ef-898b-87e76fce80d6"
/>

## Changes involved
Am opting to scope the last visited organization to the user profile
instead - this would be a bit more cleaner than trying to actively clear
the last visited org slug from local storage with implicit account
changes as there's no deterministic way to track that (afaik) from FE
side of things

## To test
Can reproduce the problem as such
- Ensure that you have 2 accounts to log in with, and one account has an
org that the other is not a part of
- For the organization that has the "extra" org, ensure that you click
into it so that the last visited org slug is saved in local storage
- Mimic changing accounts by visiting
`/auth/v1/authorize?provider=github` (using the domain for the env that
you're testing on - e.g localhost:8000 for local, or green for staging
preview)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Unified “last visited organization” handling across the Studio UI with
a shared hook, improving consistency for home/dashboard return,
cancel/back navigation, and account routing.

* **Bug Fixes**
* Updated redirects to only route to an organization when a valid
last-visited value is available; otherwise users go to the general
organizations page.
* Kept MFA enrollment and factor delete/leave flows aligned to the
unified last-visited organization value.

* **Tests**
* Updated onboarding and layout tests to match the new last-visited
organization storage key format and hook/query success behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-18 17:42:18 +08:00
Danny WhiteandJoshen Lim a8720dee1f feat(studio): move AWS Marketplace to connect interstitial (#46058) 
## What kind of change does this PR introduce?

Feature. Resolves DEPR-556.

## What is the current behavior?

AWS Marketplace onboarding uses a separate scaffold and AWS-specific
organization selection UI, so it does not match the newer shared connect
interstitial pattern used by Redeem Credits.

## What is the new behavior?

- Moves `/aws-marketplace-onboarding` onto the shared connect
interstitial shell with AWS and Supabase branding
- Reuses the shared organization selector behaviour from Redeem Credits,
including last-visited organization promotion, selected organization
promotion, the create-organization card, and compact overflow disclosure
- Keeps the existing AWS data path for buyer eligibility, onboarding
info, organization linking, AWS-managed organization creation, and
success/error/ineligible states
- Removes the now-unused legacy AWS Marketplace layout/scaffold
components
- Removes the temporary reviewer mocks from the branch before merge

## Additional context

This PR preserves the current AWS-managed organization creation modal so
the AWS flow keeps working while adopting the shared connect sheet.
FE-3216 should move that creation path into the general organization
form later, likely replacing the AWS-specific modal with a preconfigured
`/new` flow that can still return to AWS Marketplace onboarding and link
automatically.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-05-22 13:59:05 +10:00
Danny WhiteandJoshen Lim e65da2c3e7 feat(studio): move redeem credits to connect interstitial (#45909) 
## What kind of change does this PR introduce?

Feature. Part of DEPR-556.

## What is the current behavior?

The `/redeem` credit redemption page uses the legacy redeem credits
layout and scaffolded two-column UI. It is visually separate from the
newer connect interstitial surfaces.

## What is the new behavior?

`/redeem` now uses the shared connect interstitial layout with a
Supabase logo, signed-in account row, organisation selector, and
full-width redeem action.

The existing `CreditCodeRedemption` modal still owns the actual code
entry, hCaptcha, permission checks, mutation, and success/error
handling. Creating a new organisation links to `/new` with a return URL,
and the returned organisation is preselected when present.

Temporary mock states are available on non-production and Vercel preview
environments:

- `/redeem?mock=loading`
- `/redeem?mock=ready`
- `/redeem?mock=redeeming`
- `/redeem?mock=redeemed`
- `/redeem?mock=already-redeemed`
- `/redeem?mock=invalid`
- `/redeem?mock=wrong-account`
- `/redeem?mock=error`

| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-66AF2C81-89A0-4F95-A591-3550AAD7112A"
src="https://github.com/user-attachments/assets/1e0dd7af-3168-4566-a7d9-0b889fe69d4e"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-7F9C59DD-73EC-4717-B2B7-3E6BB325273C"
src="https://github.com/user-attachments/assets/60e44213-d2ab-4b5c-b03e-38a3425dbd27"
/> |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-A77F2F93-98C3-42E9-B028-049E1AAC0CA3"
src="https://github.com/user-attachments/assets/25087b51-94cb-40c7-9dde-1fc957b7dd8e"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-4C4B7818-16A5-430E-B54F-E7FF34229CA0"
src="https://github.com/user-attachments/assets/4da11122-b547-4e1e-a953-8d2e4c478431"
/> |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-A77F2F93-98C3-42E9-B028-049E1AAC0CA3"
src="https://github.com/user-attachments/assets/25087b51-94cb-40c7-9dde-1fc957b7dd8e"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-4C4B7818-16A5-430E-B54F-E7FF34229CA0"
src="https://github.com/user-attachments/assets/4da11122-b547-4e1e-a953-8d2e4c478431"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-49FC982C-2605-41B3-8216-B8F270825247"
src="https://github.com/user-attachments/assets/8e5fc351-6e11-4fef-9d55-1a60fa34a89a"
/> |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-6AF18EF8-1699-4341-A900-34E3AEB59703"
src="https://github.com/user-attachments/assets/7adf3d15-73a7-4ef1-9d25-bfcb07b1b15c"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-4F8BBF66-6AF6-403F-B949-079F8E47200B"
src="https://github.com/user-attachments/assets/b05461de-1fd3-4251-9a22-9d1a4dea2b20"
/> |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-320E56E7-A291-426B-92B4-5CD4518C85B6"
src="https://github.com/user-attachments/assets/aa172303-0219-425d-9c8b-07044a9f5cac"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-7E55274C-E39E-443B-B636-63B597E11494"
src="https://github.com/user-attachments/assets/4a09d19e-a61c-4c1d-a0a2-e535e53aeee7"
/> |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-4D5A1985-D36B-48E1-8108-E95C10C52A12"
src="https://github.com/user-attachments/assets/e3baffe9-e0ac-4dff-8f4c-1b01d34fbfe4"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-B1296556-9DDF-48ED-A0DA-4BEFF5D20FBA"
src="https://github.com/user-attachments/assets/27ed8201-960b-45e3-a32f-115045d0443e"
/> |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-193C4266-29BC-4B03-A746-4C2CE3BD29EB"
src="https://github.com/user-attachments/assets/230fb7a0-4049-46b7-84d4-eb549099863b"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-751A900D-A8CF-425C-A745-1511B6DC81E3"
src="https://github.com/user-attachments/assets/55ab5719-a77c-486b-b2d0-5926a524a7b4"
/> |
| <img width="1024" height="759" alt="Redeem Credits
Supabase-29305C15-19B7-4015-9041-62B79E0C95A8"
src="https://github.com/user-attachments/assets/a1b2ba08-2d1a-4a95-a6ac-4d9e3faf9327"
/> | <img width="1024" height="759" alt="Redeem Credits
Supabase-A1628FDB-CFBE-47E7-83D7-3D3D426C3C1E"
src="https://github.com/user-attachments/assets/7fbbf75e-1f8e-478f-83ec-2ab06dff0545"
/> |


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

* **New Features**
  * Added organization selector to the credits redemption workflow.
* New "Create Organization" card for quick access to organization
creation.

* **Refactor**
* Streamlined the credits redemption page for improved user experience.
  * Enhanced organization card display with customizable descriptions.

* **Style**
  * Removed "Coming soon" beta indicators from action cards.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45909?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-05-18 19:02:51 +10:00