## What kind of change does this PR introduce?
Docs update, with supporting `ui` and Studio changes.
## What is the current behaviour?
Disabled buttons with tooltips use native `disabled`, which removes them
from the tab order. Keyboard users cannot focus the control or read the
tooltip explaining why an action is blocked.
The design system also lacked guidance on keeping disabled actions
discoverable and explaining why they are unavailable.
## What is the new behaviour?
- Adds a **Disabled controls** section to the accessibility docs, with
live examples for a focusable disabled button and visible page-level
context
- Adds `focusableWhenDisabled` to `Button`, keeping `disabled` as the
semantic state while using `aria-disabled`, retaining keyboard focus,
and guarding click handlers
- Updates Studio's `ButtonTooltip` to make disabled buttons with tooltip
text focusable automatically
Also includes earlier design-system fixes on this branch:
- Centralises `BASE_PATH` with a `/design-system` fallback so asset URLs
work without a local `.env` file
- Fixes sidebar hover and active tokens in design-system and ui-library,
aligned with Studio's `InnerSideMenuItem`
## To test
**Design system**
1. Open the [accessibility
preview](https://design-system-git-fix-design-system-docs-and-nav-fixes-supabase.vercel.app/design-system/docs/accessibility)
2. Scroll to **Disabled controls**
3. Tab to the **disabled-focusable** example. Confirm the button remains
focusable, looks disabled, and shows its tooltip on focus
4. Confirm the **disabled-unavailable-with-notice** example shows the
admonition and focusable disabled button pattern
**Studio (optional, requires a High Availability project)**
5. Go to Settings → General → **Pause project**. Tab to the button and
confirm it remains focusable, looks disabled, and shows the HA tooltip
on focus
6. Go to Database → Backups and find **Restore** on a scheduled backup
row. Confirm the same behaviour
Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the
handful of things v5 turned into hard errors, and drops the
`vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes
redundant.
**Changed:**
- `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog)
- `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies
moved to module scope (v5 throws on nested calls). Affects the Studio
and docs setup files and four Studio tests.
- `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()`
instead of assigning `global.navigator`, which now reaches jsdom's
getter-only property.
- `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used
to leak a throwing mock for the rest of the file, which v5's coverage
provider now trips over. A later test in the same file had been
asserting the leak's side effect (valid JSON reported as invalid) and
now asserts the correct behavior.
- `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation
resolves through a peer now, so it lands on each package's own `vitest`
instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type
errors in dev-tools after the reshuffle.
- `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range.
- `vite: catalog:` added to dev-tools, www, and common. Without it they
resolved a newer vite than the catalog pin, which forked a second vitest
instance in the lockfile. There's now one.
- ai-commands custom matcher types use v5's `Matchers<R, T>` form.
- 110 test files: `vi.clearAllMocks()` removed from
`beforeEach`/`afterEach` hooks, along with hooks that only did that and
the imports they left unused. Calls that also reset/restore mocks are
untouched. Second commit, mechanical.
**Added:**
- `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter
output there)
**Removed:**
- `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves
tsconfig paths itself.
Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `vitest` and `@vitest/*` while
5.0.0 was inside the workspace's 3-day `minimumReleaseAge` window. That
window has closed, so the exclusion is gone and nothing bypasses the
release-age gate.
**Perf** (local, medians of 3 runs, same machine):
| Suite | v4.1.4 | v5.0.0 |
|---|---|---|
| studio | 144.1s | 141.7s (-2%) |
| studio `--coverage` | 156.9s | 146.4s (-7%) |
| ui-patterns | 6.27s | 5.07s (-19%) |
| ui `--coverage` | 3.35s | 2.14s (-36%) |
| www | 0.89s | 0.47s (-47%) |
Studio is dominated by jsdom environment setup per file, which v5
doesn't change. `vitest doctor` recommends keeping the current pool
config: the vm pools and `isolate: false` all break tests.
## To test
- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for vitest.
- CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint
should all be green. The lint ratchet was checked locally: warning
counts on touched Studio files are identical to master.
- `pnpm test:studio` locally passes with coverage (588 files, 6240
tests).
- Open a Studio test that uses `toBeInTheDocument` in your editor and
confirm no type errors on jest-dom matchers, in Studio and in
`packages/dev-tools`.
- Known pre-existing failures unrelated to this PR: one dev-tools test
(`getEventCountBadge` capped pill) fails on master too.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Tests
- Improved test coverage for JSON validation and mobile navigation
behavior.
- Updated test setup, cleanup, environment configuration, and matcher
support across application and shared package suites.
- Removed obsolete coverage for alternate MCP transport selection.
## Chores
- Streamlined TypeScript path resolution and Vitest reporter output
handling.
- Updated testing libraries and Vitest tooling across documentation,
Studio, website, and shared packages.
- Added Vitest reporter output to ignored files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* wip
* add formatTimestamp for reports
* add tests for formatTimestamp
* fix type err
* rm old chart logic
* do not retry replication sources
* update report config schema
* use report config
* fix charts, simplify config
* sync charts
* rm comment
* usefilltimeseries
* move chart upsell to its own component
* cleanup v2 chart component
* fix chartheader function format bug
* make attributes dynamic
* move types to its own file
* update reportv2chart types
* update reportv2 chart type
* use new edgefn report
* rm mock
* rm old code
* fix type err
* fix type err
* rename hook
* return sql in dataprovider
* add button to open in log explorer in chart header
* fix type
* fix chart type toggle
* fix type error
* export data transformation for testing
* add tests for data transformation
* rm dupped code
* add report settings to edge fn report
* rm mocked data
* rename
* fix type err
* Apply suggestion from @joshenlim
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* rm unnecessary div
* rm unnecessary props from report upsell
* cleaner query keys
* move loadin/error/empty states to inside panel content to prevent layout shift
* use card instead of panel
* use buttontooltip in chartheader
* use buttontooltips in buttons with tooltips
* rm export default
* rm export defualt
* rm i from key
* fix status code transformation
* fix filltimeseries
* add tests for filltimeseries
* fix data transform
* pass xaxis key to chart
* refactor hover state to use timestamp not index
* fix tests
* fix areachart
* fix barchart
* fix chartheader
* fix composedchart
* fix stacked
* fix type missing xaxiskey
* type fix
* Revert "refactor hover state to use timestamp not index"
This reverts commit cfd7886460.
* undo charthover changes, fix data aggregation
* Revert "fix tests"
This reverts commit e5200a2035.
* move transforms to testable functions, add tests
* nit refactors and clean up
* feat: add aws nimbus cloud provider (#38312)
* feat: add aws nimbus cloud provider
* Fix return type of useCustomContent hook
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* add utc plugin to dayjs
* move plugins to vitest setup
* rm customparser plugin
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* chore: Refactor `NewAccessTokenButton` to use shadcn components
This brings `NewAccessTokenButton` into conformance with the latest UI patterns of using shadcn based components, zod schemas, and react-hook-form for form submission.
I based this refactor on the implementation of `CreateSecretAPIKeyDialog`, which already made use of the above.
* add success and failure toasts
* add smoke test for `NewAccessTokenButton`, fix vitest config
This adds a minimal test for `NewAccessTokenButton` but more importantly fixes a critical bug in the vitest configuration for `studio`.
Because `restoreMocks: true` was set in the config, this meant that the mock implementation for `window.matchMedia` defined in the `tests/vitestSetup.ts` file was being **reset** to an empty function before each test suite was run. While this didn't appear to be a problem before, that appears to be because none of the existing tests had `motion.div` in their component trees. Since `motion.div` calls `addListener` on a media query as part of it's lifecycle, that meant that any test which included it would fail as `addListener` would be undefined in this situation. Removing `restoreMocks: true` from the config results in the desired mocking behavior.
This change is necessary in order to test any component that has the `FormItemLayout` component, as it uses `framer-motion` to animate in error messages for input elements.
* add warning comment in case of future config regression
* update test cases, reset form on dialog close, testing setup fixes
This fixes an issue with the polyfills for the testing environment, where a call to `useMutation` would fail as a result of `TransformStream` being set to `null`.
Basic tests for access token creation and form resetting added. Adds `@faker-js/faker` to the studio app devDependencies to generate mock data for `msw` endpoint response.
Adds `shx` to the docs app devDependencies to ensure that the `codegen:examples` script runs cross-platform.
* ensure mocked date is a string
* update testing setup, pollyfills and add rich type support to addAPIMock
* Update studio testing setup files
Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components
* chore: Refactor `NewAccessTokenButton` to use shadcn components
This brings `NewAccessTokenButton` into conformance with the latest UI patterns of using shadcn based components, zod schemas, and react-hook-form for form submission.
I based this refactor on the implementation of `CreateSecretAPIKeyDialog`, which already made use of the above.
* add success and failure toasts
* add smoke test for `NewAccessTokenButton`, fix vitest config
This adds a minimal test for `NewAccessTokenButton` but more importantly fixes a critical bug in the vitest configuration for `studio`.
Because `restoreMocks: true` was set in the config, this meant that the mock implementation for `window.matchMedia` defined in the `tests/vitestSetup.ts` file was being **reset** to an empty function before each test suite was run. While this didn't appear to be a problem before, that appears to be because none of the existing tests had `motion.div` in their component trees. Since `motion.div` calls `addListener` on a media query as part of it's lifecycle, that meant that any test which included it would fail as `addListener` would be undefined in this situation. Removing `restoreMocks: true` from the config results in the desired mocking behavior.
This change is necessary in order to test any component that has the `FormItemLayout` component, as it uses `framer-motion` to animate in error messages for input elements.
* update test cases, reset form on dialog close, testing setup fixes
This fixes an issue with the polyfills for the testing environment, where a call to `useMutation` would fail as a result of `TransformStream` being set to `null`.
Basic tests for access token creation and form resetting added. Adds `@faker-js/faker` to the studio app devDependencies to generate mock data for `msw` endpoint response.
Adds `shx` to the docs app devDependencies to ensure that the `codegen:examples` script runs cross-platform.
* ensure mocked date is a string
* update testing setup, pollyfills and add rich type support to addAPIMock
* fix imports
* fix missing listen call for msw, resolve test type error
* fix imports
* Update studio testing setup files
Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components
* fix missing listen call for msw, resolve test type error
* fix imports
* Shift test file
* Smol fix
* Nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Update studio testing setup files
Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components
* fix missing listen call for msw, resolve test type error
* fix imports
* Update studio testing setup files
Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components
* fix missing listen call for msw, resolve test type error
* fix imports
* Move non-layout Storage related components to `components/interfaces`
* Fix paths
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Add next to pnpm catalog and use that next version from all apps and packages.
* Remove vite direct dependency.
* Set the @types/node to version 20.
* Stabilize supports-color by adding it in the main package.json. This will make it appear in all packages that have it as optional.
* Use built-in matchers for vitest in @testing-library/jest-dom.
* Add libpg-query as a dependency to docs.
* Remove nextjs-node-loader for the built-in external packages feature on nextjs.
* Clean up extra comment.
* Add all missing libraries in the packages/apps.
* Add all missing Vitest imports to the tests.
* Add some missing exports to ui.
* Fix the admonition export.
* Fix various minor bugs.
* Migrate the ui package to use vitest.
* Update pricing details in DeployNewReplicaPanel
* Update disk mgt review modal to consider RR pricing
* Update tests
* Hide utilization bar for read replicas in new disk mgt ui
* Add guard
* Update link to docs for deploy replica panel
* Address feedback
* Ensure IOPS and throughput prices are considered for replicas
* Prettier
* Attempt to fix tests
* Attempt to fix tests
* Fix calculateDiskSizePrice for replicas
* Fixes
* Prettier
* Add ternary
* Feeeex
* Various small updates from Kevin's feedback
* smol stuff
* fixes
* Update DiskManagementPanelSchema.ts
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
* Fix tests in tests/unit, tests/components and files under tests, looking into tests/pages
* Fix tests under pages/projects root
* Fix
* Comment out broken tests that im stuck with
* Fix api-report.test
* Fix storage-report-test
* chore: fix some tests
* chore: remove logging
* Fix LogsPreviewer.test.js
* Fix most of logs-query-test
* Skip broken tests instead of false positiving them
* Replace jest with vitest
* Rename all *.test.js to *.test.ts
* Configure vitest to work with jsx
* fix vitest issues, fix tests, skip broken tests, add msw, add next-router-mock
* uncomment file
* add tests for msw and nrm
* Fix failing tests
* fix tests in RowEditor
* fix datepicker tests
* fix type errors and comment out tests that need some refactoring
* leave 1 test so test script works
* rm clog and aaaaa
* rename script
* move msw to studio
* add pckg json which i forgot in last commit
* rm consolelog
* move vitest ui dep
* Move next-router-mock to studio.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: TzeYiing <ty@tzeyiing.com>
Co-authored-by: Kamil Ogórek <kamil.ogorek@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Danny White