Files
supabase/apps/studio/components/interfaces/Database/RLSToggleDialog.tsx
Danny White 239825e9a3 fix(studio): clarify RLS disable destructiveness (#46357)
## What kind of change does this PR introduce?

UI fix

## What is the current behavior?

RLS disable dialog is just plain prose.

## What is the new behavior?

RLS disable dialog better communicates the high-risk action.

| Before | After |
| --- | --- |
| <img width="866" height="536" alt="CleanShot 2026-05-26 at 11 31
47@2x"
src="https://github.com/user-attachments/assets/9ae061aa-edf5-45e8-b866-4d59a035a597"
/> | <img width="860" height="534" alt="CleanShot 2026-05-26 at 11 29
42@2x-584E1768-6ACD-4873-9477-A8FA7D017C67"
src="https://github.com/user-attachments/assets/00b485dd-485a-4c28-825c-6c0460e3428d"
/> |

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

## Summary by CodeRabbit

* **Refactor**
  * Improved RLS toggle dialog component logic.

* **Tests**
  * Enhanced RLS policies test assertions for better accuracy.

<!-- 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/46357?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 -->
2026-05-26 18:46:24 +10:00

70 lines
2.1 KiB
TypeScript

import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from 'ui'
import { InlineLink } from '@/components/ui/InlineLink'
import { DOCS_URL } from '@/lib/constants'
interface RLSToggleDialogProps {
open: boolean
tableName?: string
isEnabled: boolean
isSubmitting?: boolean
onOpenChange: (open: boolean) => void
onConfirm: () => void | Promise<void>
}
export function RLSToggleDialog({
open,
isEnabled,
isSubmitting = false,
onOpenChange,
onConfirm,
}: RLSToggleDialogProps) {
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
{isEnabled ? 'Disable Row Level Security' : 'Enable Row Level Security'}
</AlertDialogTitle>
<AlertDialogDescription>
{isEnabled ? (
<>
This table will become publicly readable and writable.{' '}
<span className="font-medium text-foreground">
Anyone can view, add, update, or delete data in this table
</span>
, and existing RLS policies will no longer apply.
</>
) : (
'RLS restricts table access until policies allow a request. Existing queries may stop returning rows until policies are added.'
)}{' '}
<InlineLink href={`${DOCS_URL}/guides/database/postgres/row-level-security`}>
Learn more
</InlineLink>
.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
variant={isEnabled ? 'danger' : 'primary'}
loading={isSubmitting}
onClick={() => onConfirm()}
>
{isEnabled ? 'Disable RLS' : 'Enable RLS'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}