From 239825e9a3dfb05dcdc8cc1e9c4aa2b5202543c7 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Tue, 26 May 2026 18:46:24 +1000
Subject: [PATCH] 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 -->
---
 .../interfaces/Database/RLSToggleDialog.tsx   | 27 +++++++++++--------
 e2e/studio/features/rls-policies.spec.ts      | 13 ++++++---
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/RLSToggleDialog.tsx b/apps/studio/components/interfaces/Database/RLSToggleDialog.tsx
index 9ad0b7e6ca1..25888e4ce34 100644
--- a/apps/studio/components/interfaces/Database/RLSToggleDialog.tsx
+++ b/apps/studio/components/interfaces/Database/RLSToggleDialog.tsx
@@ -28,20 +28,25 @@ export function RLSToggleDialog({
   onOpenChange,
   onConfirm,
 }: RLSToggleDialogProps) {
-  const title = isEnabled ? 'Disable Row Level Security' : 'Enable Row Level Security'
-  const description = isEnabled
-    ? 'This table will become publicly readable and writable. Anyone can view, add, update, or delete data in this table, 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.'
-  const confirmLabel = isEnabled ? 'Disable RLS' : 'Enable RLS'
-  const confirmVariant = isEnabled ? 'danger' : 'primary'
-
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogTitle>
+            {isEnabled ? 'Disable Row Level Security' : 'Enable Row Level Security'}
+          </AlertDialogTitle>
           <AlertDialogDescription>
-            {description}{' '}
+            {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>
@@ -51,11 +56,11 @@ export function RLSToggleDialog({
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction
-            variant={confirmVariant}
+            variant={isEnabled ? 'danger' : 'primary'}
             loading={isSubmitting}
             onClick={() => onConfirm()}
           >
-            {confirmLabel}
+            {isEnabled ? 'Disable RLS' : 'Enable RLS'}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/e2e/studio/features/rls-policies.spec.ts b/e2e/studio/features/rls-policies.spec.ts
index c7dfb6b3f7d..7b96a968f58 100644
--- a/e2e/studio/features/rls-policies.spec.ts
+++ b/e2e/studio/features/rls-policies.spec.ts
@@ -160,10 +160,17 @@ test.describe('RLS Policies', () => {
           'RLS disable confirmation modal should appear'
         ).toBeVisible({ timeout: 50000 })
         await expect(
-          page.getByText(
-            'This table will become publicly readable and writable. Anyone can view, add, update, or delete data in this table, and existing RLS policies will no longer apply.'
-          ),
+          page.getByRole('alertdialog'),
           'RLS disable confirmation should explain the access risk'
+        ).toContainText(
+          'This table will become publicly readable and writable. Anyone can view, add, update, or delete data in this table, and existing RLS policies will no longer apply.'
+        )
+        await expect(
+          page
+            .getByRole('alertdialog')
+            .locator('span.font-medium.text-foreground')
+            .filter({ hasText: 'Anyone can view, add, update, or delete data in this table' }),
+          'Key risk phrase should be visually emphasized'
         ).toBeVisible()
         await expect(
           page.getByRole('alertdialog').getByRole('link', { name: 'Learn more' })