Some problems with RLS editor (supabase#45662)

## Context

Addresses some issues found with the RLS editor from recent changes
- Creating a "SELECT" or "INSERT" policy via templates wasn't working
(might have been [this
PR](supabase#45560)) that introduced
the bug)
- SELECT -> SQL error as we were incorrectly adding a with check
statement in the query
- INSERT -> UI issue, there's a bit of complexity as we're using 1 code
editor for `using` and `check` statements
- Badge color for "UPDATE" based templates is off
<img width="446" height="114" alt="image"
src="https://github.com/user-attachments/assets/66fd0c1a-c20c-406d-983e-2c02680bb235"
/>
- Renaming a policy, the initial alter query statement shouldn't be
using the new name
<img width="596" height="288" alt="image"
src="https://github.com/user-attachments/assets/0b6822d5-e5f5-440e-8942-8e19bd7bf4c3"
/>

## To test
- [ ] Verify that you can create a policy for all templates in the Auth
policies page + Realtime policies page (as long as no SQL error - some
templates are using tables as examples that might not exist in the DB)
- [ ] Likewise, verify that you can manually create + update policies as
well

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

## Summary by CodeRabbit

* **Style**
* Updated UPDATE template badge styling to a darker blue color scheme
with reduced opacity.

* **Bug Fixes**
* Fixed policy name display logic to correctly show the selected
policy's existing name during renaming operations.
* Improved SQL fragment loading and check expression handling for INSERT
command policy templates.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: joshenlim

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

@@ -4,11 +4,13 @@ import { Lock } from 'lucide-react'
 interface LockedCreateQuerySection {
   schema: string
   selectedPolicy?: PostgresPolicy
+  isRenamingPolicy: boolean
   formFields: { name: string; table: string; behavior: string; command: string; roles: string }
 }
 
 export const LockedCreateQuerySection = ({
   schema,
+  isRenamingPolicy,
   selectedPolicy,
   formFields,
 }: LockedCreateQuerySection) => {
@@ -31,7 +33,7 @@ export const LockedCreateQuerySection = ({
         <p className="px-6 font-mono text-sm text-foreground-light select-none">1</p>
         <p className="font-mono tracking-tighter">
           <span className="text-[#569cd6]">{isEditing ? 'alter' : 'create'}</span> policy "
-          {name.length === 0 ? 'policy_name' : name}"
+          {isRenamingPolicy ? selectedPolicy?.name : name.length === 0 ? 'policy_name' : name}"
         </p>
       </div>
       <div className="flex items-start" style={{ fontSize: '14px' }}>

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

@@ -105,7 +105,7 @@ export const PolicyTemplates = ({
                         className={cn(
                           'rounded-sm! font-mono',
                           template.command === 'UPDATE'
-                            ? 'bg-blue-400 text-blue-900 border border-blue-800'
+                            ? 'bg-blue-900/50 text-blue-200 border border-blue-800'
                             : ''
                         )}
                         variant={

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

@@ -80,6 +80,8 @@ const defaultValues = {
 
 /**
  * Using memo for this component because everything rerenders on window focus because of outside fetches
+ * Note: For INSERT command, editor one holds the check expression (not using)
+   Whereas for others: editor one = using, editor two = optional check
  */
 export const PolicyEditorPanel = memo(function ({
   visible,
@@ -184,8 +186,7 @@ export const PolicyEditorPanel = memo(function ({
   const onSubmit = (data: z.infer<typeof FormSchema>) => {
     const { name, table, behavior, command, roles } = data
 
-    // For INSERT: editor one holds the check expression (not using)
-    // For others: editor one = using, editor two = optional check
+    // [Joshen] Refer to top note as to why we're using the "USING" section for INSERT
     const usingExpr = command !== 'insert' ? using : undefined
     const checkExpr = command === 'insert' ? using : check
 
@@ -280,14 +281,16 @@ export const PolicyEditorPanel = memo(function ({
           command: command.toLowerCase(),
           roles: roles.length === 1 && roles[0] === 'public' ? '' : roles.join(', '),
         })
-        if (selectedPolicy.definition) setUsing(safeSql`  ${selectedPolicy.definition}`)
-        if (selectedPolicy.check && selectedPolicy.command === 'INSERT')
-          setUsing(safeSql`  ${selectedPolicy.check}`)
-        if (selectedPolicy.check && selectedPolicy.command !== 'INSERT')
-          setCheck(safeSql`  ${selectedPolicy.check}`)
-        if (selectedPolicy.check && selectedPolicy.command !== 'INSERT') {
-          setShowCheckBlock(true)
+
+        // [Joshen] Refer to top note as to why we're using the "USING" section for INSERT
+        if (selectedPolicy.definition) {
+          setUsing(safeSql`  ${selectedPolicy.definition}`)
+        }
+        if (selectedPolicy.check) {
+          if (selectedPolicy.command === 'INSERT') setUsing(safeSql`  ${selectedPolicy.check}`)
+          else setCheck(safeSql`  ${selectedPolicy.check}`)
         }
+
         setRolesFragment(
           roles.length === 1 && roles[0] === 'public'
             ? safeSql`public`
@@ -356,6 +359,7 @@ export const PolicyEditorPanel = memo(function ({
                     <LockedCreateQuerySection
                       schema={schema}
                       selectedPolicy={selectedPolicy}
+                      isRenamingPolicy={isRenamingPolicy}
                       formFields={{ name, table, behavior, command, roles }}
                     />
 
@@ -578,7 +582,16 @@ export const PolicyEditorPanel = memo(function ({
                             form.setValue('roles', value.roles.join(', ') ?? '')
 
                             setUsing(safeSql`  ${value.definition}`)
-                            setCheck(safeSql`  ${value.check}`)
+
+                            // [Joshen] Refer to top note as to why we're using the "USING" section for INSERT
+                            if (value.check) {
+                              if (value.command === 'INSERT') {
+                                setUsing(safeSql`  ${value.check}`)
+                              } else {
+                                setCheck(safeSql`  ${value.check}`)
+                              }
+                            }
+
                             setRolesFragment(
                               value.roles.length === 0 ||
                                 (value.roles.length === 1 && value.roles[0] === 'public')