Files
supabase/apps/studio/components/interfaces/App/FeaturePreview/JitDbAccessPreview.tsx
Danny White bedb2efb87 chore(studio): JIT access UI improvements (#44161)
## What kind of change does this PR introduce?

UI and copywriting improvements for temporary access.

## What is the current behavior?

The temporary access UI still used older JIT/ephemeral naming in some
places, did not clearly explain the setup requirements, and had to infer
unavailable states from Platform error message text.

## What is the new behavior?

The settings UI now uses temporary access naming consistently, explains
that temporary access uses short-lived tokens for manual database
connections, and renders clearer unavailable states for projects that
require either a Postgres upgrade or a platform migration.

The Studio query now consumes Platform’s structured `unavailableReason`
contract instead of parsing human-readable error strings, so the UI owns
the copy while Platform owns the eligibility reason.

Validation:

- `pnpm eslint
components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx
data/jit-db-access/jit-db-access-query.ts`
- `pnpm tsc --noEmit --pretty false`

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

* **New Features**
* IP range input now supports one CIDR range per row with add/remove
rows and form integration.

* **Documentation**
* Replaced “JIT” wording with “Temporary” / “Ephemeral token-based”
access across UI, dialogs, toasts, and help links.
  * Added minimum PostgreSQL version requirement (17.6.1.081+).

* **Improvements**
  * Per-row CIDR validation with precise nested error messages.
* Refined layout spacing and moved the temporary-access configuration
earlier in Database settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Etienne Stalmans <etienne@supabase.io>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-28 17:26:59 +10:00

27 lines
1008 B
TypeScript

import { useParams } from 'common'
import { InlineLink } from '@/components/ui/InlineLink'
export const JitDbAccessPreview = () => {
const { ref = '_' } = useParams()
return (
<div className="space-y-4">
<p className="text-sm text-foreground-light">
Grant project members temporary database role access through short-lived tokens, controlled
in <InlineLink href={`/project/${ref}/database/settings`}>Database Settings</InlineLink>.
</p>
<div className="space-y-2">
<p className="text-sm">Enabling this preview will:</p>
<ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
<li>Show temporary access controls in Database Settings</li>
<li>Allow configuring role grants and member-level temporary access rules</li>
</ul>
</div>
<p className="text-sm text-foreground-light">
The minimum Postgres version needed for this feature is 17.6.1.081 (or higher).
</p>
</div>
)
}