Files
supabase/apps/studio/data/jit-db-access/jit-db-access-update-mutation.ts
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

55 lines
1.6 KiB
TypeScript

import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { jitDbAccessKeys } from './keys'
import { handleError, put } from '@/data/fetchers'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
type JitDbAccessUpdateVariables = {
projectRef: string
requestedConfig: { state: 'enabled' | 'disabled' }
}
async function updateJitDbAccess({ projectRef, requestedConfig }: JitDbAccessUpdateVariables) {
if (!projectRef) throw new Error('projectRef is required')
const { data, error } = await put(`/v1/projects/{ref}/jit-access`, {
params: { path: { ref: projectRef } },
body: requestedConfig,
})
if (error) handleError(error)
return data
}
type JitDbAccessUpdateData = Awaited<ReturnType<typeof updateJitDbAccess>>
export const useJitDbAccessUpdateMutation = ({
onSuccess,
onError,
...options
}: Omit<
UseCustomMutationOptions<JitDbAccessUpdateData, ResponseError, JitDbAccessUpdateVariables>,
'mutationFn'
> = {}) => {
const queryClient = useQueryClient()
return useMutation<JitDbAccessUpdateData, ResponseError, JitDbAccessUpdateVariables>({
mutationFn: (vars) => updateJitDbAccess(vars),
async onSuccess(data, variables, context) {
const { projectRef } = variables
await queryClient.invalidateQueries({ queryKey: jitDbAccessKeys.list(projectRef) })
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
if (onError === undefined) {
toast.error(`Failed to update temporary access: ${data.message}`)
} else {
onError(data, variables, context)
}
},
...options,
})
}