dima/supabase

0 Fork 0

mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00

Files

T

Miranda Limonczenko 91b7df64c2 fix(ui): report clipboard write failures instead of rejecting (#50292 )

Closes DOCS-1390

## Problem

Sentry [DOCS-AA](https://supabase.sentry.io/issues/7727380816/) reports
`NotAllowedError: Failed to execute 'write' on 'Clipboard': Write
permission denied.` as an unhandled promise rejection.

The error names `write`, not `writeText`, which places it in the
`ClipboardItem` branch of `copyToClipboard`. That branch has two
problems:

- The write runs inside a `setTimeout`, so the surrounding `try/catch`
has already returned by the time it executes. A denied write routes to
the promise's `reject`.
- No caller attaches a `catch`. All call sites either fire-and-forget or
`await` inside an async handler with no `try/catch`, so the rejection
surfaces as an unhandled rejection.

The user-visible effect is worse than the Sentry noise. On that branch
the copy fails with no feedback at all, because the `toast.error` in the
outer `catch` is unreachable from inside the `setTimeout`. The
`writeText` branch does show the toast, so the two paths disagree.

The issue is filed against auth docs, where it surfaced, but the fix
belongs in `packages/ui`. The same branch runs in Studio and www.

## Solution

- Handle the failure inside the `setTimeout`, where it happens: report
it and resolve.
- `copyToClipboard` no longer rejects on either path, matching what the
`writeText` branch already did. No caller relied on rejection.
- Add regression tests for a denied write on both branches.

## Manual testing

1. Run the unit tests. Four `copyToClipboard` cases pass, including the
two new denial cases.

   ```
pnpm --filter studio exec vitest run lib/helpers.test.ts -t
copyToClipboard
   ```

2. Confirm the new test is a real guard. Revert `clipboard.ts` and
rerun. The write case fails with `promise rejected ... instead of
resolving`.
3. Confirm the ratchet is unchanged.

   ```
   pnpm --filter studio run lint:ratchet
   ```

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

* **Bug Fixes**
* Clipboard write failures now display an error notification instead of
causing an unhandled rejection.
* Copy operations resolve consistently when clipboard access is denied
or unavailable, including Safari clipboard support.
* Failed copy attempts no longer trigger completion callbacks,
preventing misleading success behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

2026-09-16 19:01:21 +00:00

build/css

fix(ui): systematise control surface fills and hover borders (#48887 )

2026-08-18 16:54:25 +10:00

scripts

chore: Remove dead code and unused files from the packages/ui (#45169 )

2026-04-24 10:30:35 +02:00

src

fix(ui): report clipboard write failures instead of rejecting (#50292 )

2026-09-16 19:01:21 +00:00

.gitignore

remove Next/Link deps

2023-06-26 01:08:20 +08:00

components.json

chore: Expand prettier commands to also run on packages (#32550 )

2025-01-03 16:23:32 +01:00

index.tsx

fix(ui): tab component (#50183 )

2026-09-16 00:00:27 +03:00

package.json

chore(deps): upgrade vitest to v5 (#49994 )

2026-09-10 16:45:54 +08:00

README.md

chore: migrate from clsx + tailwind-merge to shadcn-ui/cn (#49938 )

2026-09-07 21:35:06 +08:00

tailwind.config.css

chore: Migrate the main Tailwind JS config to CSS (#45686 )

2026-05-13 13:14:58 +02:00

tsconfig.json

chore: Bump Typescript to v6 (#44204 )

2026-03-26 15:27:35 +01:00

vitest.config.ts

Add coveralls integration (#35424 )

2025-05-08 12:23:37 +02:00

vitest.setup.ts

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610 )

2026-02-05 13:54:10 +01:00

README.md

`packages/ui`

Supabase's shared React component library. Built on Radix UI primitives and shadcn/ui, styled with Tailwind CSS, and used across all Supabase apps.

Usage

Import from the 'ui' package alias:

import { Badge, Button, Input } from 'ui'

Some of the components have the _Shadcn_ suffix. These components should be preferred, they're in a process of replacing the other ones.

Utilities

// deep object merge (used for themes)
import { clipboard, cn, mergeDeep } from 'ui' // Tailwind class merging (shadcn-ui/cn)

// copy-to-clipboard helper

Styling conventions

Tailwind only — no inline styles or CSS modules.
Prefer shadcn semantic pairs (bg-card text-card-foreground, bg-muted text-muted-foreground, bg-tertiary text-tertiary-foreground) over hardcoded colors. Legacy utilities such as text-foreground-light and border-default are compatibility aliases only.
Control surface roles (bg-field, bg-control-raised, border-control-hover; CSS --control aliases raised) live in build/css/source/semantic.css. Prefer those over inventing fills. Legacy bg-control is still the accent wash alias.
Themes set the core --hue (or the split --surface-hue / --primary-hue), --chroma, --surface, --foreground-lightness, and --contrast inputs, plus their --muted-foreground-level and --tertiary-foreground-level hierarchy. Semantic colors are derived from them in OKLCH; --contrast: 1 is the baseline and the supported adjustment range is 0.75 to 1.25.
The workspace root owns the actual tailwind.config.js. The file in this package is a stub for IntelliSense only.