fix(studio): align rls confirmation dialogs (supabase#45961)

## What kind of change does this PR introduce?

Studio UI cleanup and docs update. Resolves FE-3217.

## What is the current behavior?

The table RLS confirmation dialogs differ across the Policies page and
Table Editor surfaces. The table editor disable flow also uses a verbose
confirmation modal with admonitions and repeated warning copy.

| Policies | Table Editor |
| --- | --- |
| <img width="852" height="448" alt="25125"
src="https://github.com/user-attachments/assets/baa9fafa-752c-4701-bf54-40da4e32030b"
/> | <img width="1108" height="1016" alt="57354"
src="https://github.com/user-attachments/assets/b1b88355-be39-49b9-aed2-a60f20c25104"
/> |
| <img width="866" height="434" alt="CleanShot 2026-05-15 at 18 01
15@2x"
src="https://github.com/user-attachments/assets/d67f69ee-0a49-4dbd-939e-ca968361fc33"
/> | <img width="840" height="426" alt="CleanShot 2026-05-15 at 18 01
52@2x"
src="https://github.com/user-attachments/assets/a0b5f390-abeb-453f-8636-ad097f22308b"
/> |

## What is the new behavior?

Table RLS enable and disable confirmations now use one shared concise
Alert Dialog treatment across the Policies page, Table Editor header,
and Table Editor side panel. The server-backed toggles use the async
Alert Dialog action behaviour from the stacked base branch, and the
design-system docs now clarify when to start with Alert Dialog versus
Confirmation Modal.

This PR is stacked on supabase#45960.

| Before | After |
| --- | --- |
| <img width="852" height="448" alt="25125"
src="https://github.com/user-attachments/assets/baa9fafa-752c-4701-bf54-40da4e32030b"
/> | <img width="864" height="518" alt="CleanShot 2026-05-15 at 18 07
21@2x"
src="https://github.com/user-attachments/assets/bda53246-164b-4d5b-81a1-25d3bc661eb3"
/> |
| <img width="1108" height="1016" alt="57354"
src="https://github.com/user-attachments/assets/b1b88355-be39-49b9-aed2-a60f20c25104"
/> | <img width="864" height="518" alt="CleanShot 2026-05-15 at 18 07
21@2x"
src="https://github.com/user-attachments/assets/bda53246-164b-4d5b-81a1-25d3bc661eb3"
/> |
| <img width="866" height="434" alt="CleanShot 2026-05-15 at 18 01
15@2x"
src="https://github.com/user-attachments/assets/d67f69ee-0a49-4dbd-939e-ca968361fc33"
/> | <img width="860" height="488" alt="CleanShot 2026-05-15 at 18 08
41@2x"
src="https://github.com/user-attachments/assets/4c67f797-e2cd-4d56-a49d-e6c6fc0edff3"
/> |
| <img width="840" height="426" alt="CleanShot 2026-05-15 at 18 01
52@2x"
src="https://github.com/user-attachments/assets/a0b5f390-abeb-453f-8636-ad097f22308b"
/> | <img width="860" height="488" alt="CleanShot 2026-05-15 at 18 08
41@2x"
src="https://github.com/user-attachments/assets/4c67f797-e2cd-4d56-a49d-e6c6fc0edff3"
/> |

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

* **Documentation**
* Refined guidance and wording for dialog usage, clarifying when to use
Alert Dialog, Confirmation Modal, and modal modality.

* **New Features**
* Reworked RLS confirmation flow with a streamlined toggle dialog,
clearer messaging, and a “Learn more” link to docs.

* **Tests**
* Updated end-to-end tests to cover the updated RLS dialog flows and
explanatory content.

<!-- 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/45961?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 -->

Author: dnywh

apps/design-system/content/docs/components/alert-dialog.mdx

@@ -12,7 +12,10 @@ source:
 
 Alert Dialog interrupts the user’s workflow to communicate critical information or confirm an action that cannot be taken lightly. It presents a short, focused message and requires the user to explicitly confirm or cancel before proceeding.
 
-Use Alert Dialog for actions such as deleting data, performing irreversible changes, or acknowledging important warnings where dismissal without a decision would be unsafe.
+Use Alert Dialog for actions such as deleting data, performing irreversible changes, or
+acknowledging important warnings where dismissal without a decision would be unsafe. It is the
+preferred starting point for critical confirmations when the decision can be explained in a short,
+focused message.
 
 <ComponentPreview name="alert-dialog-demo" peekCode wide />
 
@@ -108,7 +111,7 @@ inline error feedback.
 - **Use for dirty-form discard confirmation:** A short discard-confirmation step after a dirty form dismissal attempt (backdrop, Escape, or `Cancel`) is a valid Alert Dialog pattern. In Studio, prefer `DiscardChangesConfirmationDialog` for this flow.
 - **Always provide a cancel action:** Include AlertDialogCancel so users can safely back out, in addition to supporting the Escape key.
 - **Use AlertDialogBody for inline feedback:** If async actions can fail, render inline feedback such as an Admonition inside AlertDialogBody so spacing stays consistent.
-- **Avoid rich content:** If the dialog requires detailed explanations, callouts, or form inputs, use [Confirmation Modal](../fragments/confirmation-modal) or [Dialog](../components/dialog) instead.
+- **Avoid rich content:** If the decision requires detailed explanations, callouts, multiple paragraphs, or form inputs, move to [Confirmation Modal](../fragments/confirmation-modal) or [Dialog](../components/dialog) instead.
 
 See [Modality](../ui-patterns/modality) for guidance on choosing the appropriate dialog pattern.
 

apps/design-system/content/docs/fragments/confirmation-modal.mdx

@@ -4,11 +4,16 @@ description: A modal dialog for confirmations that require additional context or
 component: true
 ---
 
-Confirmation Modal is a convenience wrapper for confirmation flows that are more complex than a single paragraph but do not warrant a full custom dialog. It is built on top of [Dialog](../components/dialog) and provides a prop-based API for consistent confirmation patterns.
+Confirmation Modal is a convenience wrapper for confirmation flows that need more body structure
+than a concise Alert Dialog but do not warrant a full custom dialog. It is built on top of
+[Dialog](../components/dialog) and provides a prop-based API for consistent confirmation patterns.
 
 Use Confirmation Modal when the user needs extra context to make a decision, such as explanatory copy, callouts, or small form elements, and the action is not so destructive that it requires typed confirmation.
 
-If the confirmation can be expressed as a single short paragraph, use [Alert Dialog](../components/alert-dialog). If the action is highly destructive and requires explicit typed intent, use [Text Confirm Dialog](../fragments/text-confirm-dialog). See [Modality](../ui-patterns/modality) for broader guidance on choosing the appropriate pattern.
+If a critical confirmation can be expressed as a single short paragraph, start with
+[Alert Dialog](../components/alert-dialog). If the action is highly destructive and requires
+explicit typed intent, use [Text Confirm Dialog](../fragments/text-confirm-dialog). See
+[Modality](../ui-patterns/modality) for broader guidance on choosing the appropriate pattern.
 
 For dirty-form dismissal in dialogs/sheets, use the dedicated discard-confirmation pattern (`DiscardChangesConfirmationDialog` + `useConfirmOnClose`) instead of `ConfirmationModal`. Avoid creating custom wrapper components for this flow; wire `modalProps` from `useConfirmOnClose` directly into `DiscardChangesConfirmationDialog`.
 
@@ -55,7 +60,8 @@ export default function ConfirmationModalDemo() {
 
 ## Guidelines
 
-- **Use for moderate complexity:** Suitable when the confirmation requires more than a single sentence but does not need typed intent.
+- **Use for moderate complexity:** Suitable when the confirmation needs extra body content, such as multiple paragraphs, callouts, or simple supporting controls, but does not need typed intent.
+- **Do not use as the default critical confirmation:** Prefer [Alert Dialog](../components/alert-dialog) for short, critical confirmations with a clear confirm/cancel decision.
 - **Do not use for standard dirty-form dismissal:** Prefer `DiscardChangesConfirmationDialog` for unsaved-changes prompts so copy, behavior, and wiring stay consistent across dialogs/sheets.
 - **Avoid critical destruction:** Do not use for irreversible or high-risk actions that could benefit from stronger safeguards.
 - **Keep content focused:** Include only the context needed to make the decision. If the dialog becomes a full flow, use a custom [Dialog](../components/dialog) instead.

apps/design-system/content/docs/ui-patterns/modality.mdx

@@ -30,9 +30,9 @@ Dialogs are centered overlays used for short, focused tasks. All dialogs should
 
 There are quite a few dialog components, each suited to a different task or context:
 
-- [Alert Dialog](../components/alert-dialog) contains a single, short paragraph and an explicit action.
+- [Alert Dialog](../components/alert-dialog) is the preferred starting point for critical confirmations that can be explained in a single, short paragraph.
 - [Text Confirm Dialog](../fragments/text-confirm-dialog) requires a textual response before the action is enabled.
-- [Confirmation Modal](../fragments/confirmation-modal) provides more flexible dialog body contents.
+- [Confirmation Modal](../fragments/confirmation-modal) provides more flexible dialog body contents when a confirmation needs extra context, callouts, or simple supporting controls.
 - [Dialog](../components/dialog) is a generalized component for bespoke purposes.
 
 #### Alert Dialog
@@ -49,7 +49,7 @@ There are quite a few dialog components, each suited to a different task or cont
 
 #### Confirmation Modal
 
-[Confirmation Modal](../fragments/confirmation-modal) is a convenience wrapper for less-critical confirmations that require more than a single paragraph, such as additional context, callouts, or simple form elements.
+[Confirmation Modal](../fragments/confirmation-modal) is a convenience wrapper for confirmations that require more than a single paragraph, such as additional context, callouts, or simple form elements.
 
 <ComponentPreview name="confirmation-modal-demo" />
 

apps/studio/components/interfaces/Auth/Policies/Policies.tsx

@@ -12,6 +12,7 @@ import {
 } from '@/components/interfaces/Auth/Policies/PolicyTableRow'
 import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
 import { ProtectedSchemaWarning } from '@/components/interfaces/Database/ProtectedSchemaWarning'
+import { RLSToggleDialog } from '@/components/interfaces/Database/RLSToggleDialog'
 import { NoSearchResults } from '@/components/ui/NoSearchResults'
 import { useDatabasePolicyDeleteMutation } from '@/data/database-policies/database-policy-delete-mutation'
 import { useTableUpdateMutation } from '@/data/tables/table-update-mutation'
@@ -51,13 +52,10 @@ export const Policies = ({
   }>()
   const [selectedPolicyToDelete, setSelectedPolicyToDelete] = useState<any>({})
 
-  const { mutate: updateTable, isPending: isUpdatingTable } = useTableUpdateMutation({
+  const { mutateAsync: updateTable, isPending: isUpdatingTable } = useTableUpdateMutation({
     onError: (error) => {
       toast.error(`Failed to toggle RLS: ${error.message}`)
     },
-    onSettled: () => {
-      closeConfirmModal()
-    },
   })
 
   const { mutate: deleteDatabasePolicy, isPending: isDeletingPolicy } =
@@ -102,7 +100,7 @@ export const Policies = ({
       rls_enabled: !selectedTableToToggleRLS.rls_enabled,
     }
 
-    updateTable({
+    return updateTable({
       projectRef: project?.ref!,
       connectionString: project?.connectionString,
       id: selectedTableToToggleRLS.id,
@@ -193,17 +191,14 @@ export const Policies = ({
         onConfirm={onDeletePolicy}
       />
 
-      <ConfirmationModal
-        visible={selectedTableToToggleRLS !== undefined}
-        variant={selectedTableToToggleRLS?.rls_enabled ? 'destructive' : 'default'}
-        title={`${selectedTableToToggleRLS?.rls_enabled ? 'Disable' : 'Enable'} Row Level Security`}
-        description={`Are you sure you want to ${
-          selectedTableToToggleRLS?.rls_enabled ? 'disable' : 'enable'
-        } Row Level Security (RLS) for the table “${selectedTableToToggleRLS?.name}”?`}
-        confirmLabel={`${selectedTableToToggleRLS?.rls_enabled ? 'Disable' : 'Enable'} RLS`}
-        confirmLabelLoading={`${selectedTableToToggleRLS?.rls_enabled ? 'Disabling' : 'Enabling'} RLS`}
-        loading={isUpdatingTable}
-        onCancel={closeConfirmModal}
+      <RLSToggleDialog
+        open={selectedTableToToggleRLS !== undefined}
+        tableName={selectedTableToToggleRLS?.name}
+        isEnabled={selectedTableToToggleRLS?.rls_enabled ?? false}
+        isSubmitting={isUpdatingTable}
+        onOpenChange={(open) => {
+          if (!open) closeConfirmModal()
+        }}
         onConfirm={onToggleRLS}
       />
     </>

apps/studio/components/interfaces/Database/RLSToggleDialog.tsx

@@ -0,0 +1,64 @@
+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) {
+  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>
+          <AlertDialogDescription>
+            {description}{' '}
+            <InlineLink href={`${DOCS_URL}/guides/database/postgres/row-level-security`}>
+              Learn more
+            </InlineLink>
+            .
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant={confirmVariant}
+            loading={isSubmitting}
+            onClick={() => onConfirm()}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx

@@ -21,7 +21,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 import { EnableIndexAdvisorDialog } from '../QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
 import { RoleImpersonationPopover } from '../RoleImpersonationSelector/RoleImpersonationPopover'
@@ -31,6 +30,7 @@ import { SecurityDefinerViewPopover } from './SecurityDefinerViewPopover'
 import { ViewEntityAutofixSecurityModal } from './ViewEntityAutofixSecurityModal'
 import { RefreshButton } from '@/components/grid/components/header/RefreshButton'
 import { useTableIndexAdvisor } from '@/components/grid/context/TableIndexAdvisorContext'
+import { RLSToggleDialog } from '@/components/interfaces/Database/RLSToggleDialog'
 import {
   getEntityLintDetails,
   getTablePoliciesUrl,
@@ -98,13 +98,10 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
 
   const isRealtimeEnabled = useIsTableRealtimeEnabled({ id: table.id })
 
-  const { mutate: updateTable, isPending: isUpdatingTable } = useTableUpdateMutation({
+  const { mutateAsync: updateTable, isPending: isUpdatingTable } = useTableUpdateMutation({
     onError: (error) => {
       toast.error(`Failed to toggle RLS: ${error.message}`)
     },
-    onSettled: () => {
-      closeConfirmModal()
-    },
   })
 
   const showHeaderActions = snap.selectedRows.size === 0
@@ -155,10 +152,6 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
       table.schema
     )
 
-  const closeConfirmModal = () => {
-    setRlsConfirmModalOpen(false)
-  }
-
   const onViewAPIDocs = () => {
     appSnap.setActiveDocsSection(['entities', table.name])
     appSnap.setShowProjectApiDocs(true)
@@ -181,7 +174,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
       rls_enabled: !(isTable && table.rls_enabled),
     }
 
-    updateTable({
+    const updateTablePromise = updateTable({
       projectRef: project?.ref!,
       connectionString: project?.connectionString,
       id: table.id,
@@ -195,6 +188,8 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
       schema_name: table.schema,
       table_name: table.name,
     })
+
+    return updateTablePromise
   }
 
   return (
@@ -397,17 +392,12 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
       />
 
       {isTable && (
-        <ConfirmationModal
-          visible={rlsConfirmModalOpen}
-          variant={table.rls_enabled ? 'destructive' : 'default'}
-          title={`${table.rls_enabled ? 'Disable' : 'Enable'} Row Level Security`}
-          description={`Are you sure you want to ${
-            table.rls_enabled ? 'disable' : 'enable'
-          } Row Level Security for this table?`}
-          confirmLabel={`${table.rls_enabled ? 'Disable' : 'Enable'} RLS`}
-          confirmLabelLoading={`${table.rls_enabled ? 'Disabling' : 'Enabling'} RLS`}
-          loading={isUpdatingTable}
-          onCancel={closeConfirmModal}
+        <RLSToggleDialog
+          open={rlsConfirmModalOpen}
+          tableName={table.name}
+          isEnabled={table.rls_enabled}
+          isSubmitting={isUpdatingTable}
+          onOpenChange={setRlsConfirmModalOpen}
           onConfirm={onToggleRLS}
         />
       )}

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx

@@ -3,7 +3,6 @@ import { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import { Badge, Checkbox, Input, SidePanel } from 'ui'
 import { Admonition } from 'ui-patterns'
-import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { ActionBar } from '../ActionBar'
@@ -16,7 +15,6 @@ import { ApiAccessToggle, type TableApiAccessHandlerWithHistoryReturn } from './
 import { ColumnManagement } from './ColumnManagement'
 import { ForeignKeysManagement } from './ForeignKeysManagement/ForeignKeysManagement'
 import { HeaderTitle } from './HeaderTitle'
-import { RLSDisableModalContent } from './RLSDisableModal'
 import { DEFAULT_COLUMNS } from './TableEditor.constants'
 import type { ImportContent, TableField } from './TableEditor.types'
 import {
@@ -26,6 +24,7 @@ import {
   mergeForeignKeyMeta,
   validateFields,
 } from './TableEditor.utils'
+import { RLSToggleDialog } from '@/components/interfaces/Database/RLSToggleDialog'
 import { DocsButton } from '@/components/ui/DocsButton'
 import { useDatabasePublicationsQuery } from '@/data/database-publications/database-publications-query'
 import { CONSTRAINT_TYPE, useTableConstraintsQuery } from '@/data/database/constraints-query'
@@ -586,19 +585,16 @@ export const TableEditor = ({
           closePanel={() => setIsImportingSpreadsheet(false)}
         />
 
-        <ConfirmationModal
-          visible={rlsConfirmVisible}
-          title="Turn off Row Level Security"
-          confirmLabel="Confirm"
-          size="medium"
-          onCancel={() => setRlsConfirmVisible(false)}
+        <RLSToggleDialog
+          open={rlsConfirmVisible}
+          tableName={tableFields.name}
+          isEnabled={tableFields.isRLSEnabled}
+          onOpenChange={setRlsConfirmVisible}
           onConfirm={() => {
-            onUpdateField({ isRLSEnabled: !tableFields.isRLSEnabled })
+            onUpdateField({ isRLSEnabled: false })
             setRlsConfirmVisible(false)
           }}
-        >
-          <RLSDisableModalContent />
-        </ConfirmationModal>
+        />
       </SidePanel.Content>
 
       {!isDuplicating && (