fix: Feedback fixes for the RLS Editor (#19469)

* Update the wording on few places.

* Update instructions for AI when generating policies.

* Format the SQL in the suggestion blocks to have uppercased keywords.

* Add padding before each code block.

* Word wrap the code in the diff editor.

* Remove unused component.

* Remove the added instruction.

* Add tab instructions.

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -5,13 +5,13 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { Button, IconExternalLink, IconEye, IconEyeOff, Modal, ScrollArea, cn } from 'ui'
 
+import { useFlag } from 'hooks'
 import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import Telemetry from 'lib/telemetry'
 import { useAppStateSnapshot } from 'state/app-state'
 import APISidePanelPreview from './APISidePanelPreview'
 import { useFeaturePreviewContext } from './FeaturePreviewContext'
 import RLSAIAssistantPreview from './RLSAIAssistantPreview'
-import { useFlag } from 'hooks'
 
 const FeaturePreviewModal = () => {
   const isAiAssistantEnabled = useFlag('policyEditorWithAi')
@@ -28,7 +28,7 @@ const FeaturePreviewModal = () => {
       ? [
           {
             key: LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_AI_ASSISTANT,
-            name: 'AI Assistant for RLS policies',
+            name: 'Supabase Assistant for RLS policies',
             content: <RLSAIAssistantPreview />,
             discussionsUrl: undefined,
           },

apps/studio/components/interfaces/App/FeaturePreview/RLSAIAssistantPreview.tsx

@@ -31,14 +31,13 @@ const RLSAIAssistantPreview = () => {
           <li>
             <Markdown
               className="text-foreground-light"
-              content={`Replace the existing wizard-like UI for creating/updating RLS policies [here](/project/${ref}/auth/policies) with a code
-              editor accompanied an AI assistant chat interface`}
+              content={`Replace the existing wizard-like UI for creating/updating RLS policies [here](/project/${ref}/auth/policies). Create policies in code with Supabase Assistant`}
             />
           </li>
           <li>
             <Markdown
               className="text-foreground-light"
-              content={`Freely explain the scopes of your intended policy, and the AI assistant will generate SQL snippets for you iteratively`}
+              content={`Supabase Assistant will iteratively generate SQL from your natural language prompts`}
             />
           </li>
         </ul>

apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/AIPolicyEditorPanel.utils.ts

@@ -26,6 +26,8 @@ export const generateThreadMessage = ({
 export const generatePlaceholder = (policy?: PostgresPolicy) => {
   if (policy === undefined) {
     return `
+-- Press tab to use this code\n
+ \n
 CREATE POLICY *name* ON *table_name*\n
 AS PERMISSIVE -- PERMISSIVE | RESTRICTIVE\n
 FOR ALL -- ALL | SELECT | INSERT | UPDATE | DELETE\n
@@ -45,6 +47,8 @@ WITH CHECK ( *check_expression* );
     }
 
     return `
+-- Press tab to use this code\n
+ \n
 BEGIN;\n
  \n
 -- To update your policy definition\n

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

@@ -6,19 +6,20 @@ import { Button, CodeBlock, cn } from 'ui'
 interface AAIPolicyPreProps {
   onDiff: (s: string) => void
   children: string[]
+  className?: string
 }
 
-export const AIPolicyPre = ({ onDiff, children }: AAIPolicyPreProps) => {
+export const AIPolicyPre = ({ onDiff, children, className }: AAIPolicyPreProps) => {
   let formatted = (children || [''])[0]
   try {
-    formatted = format(formatted, { language: 'postgresql' })
+    formatted = format(formatted, { language: 'postgresql', keywordCase: 'upper' })
   } catch {}
 
   if (formatted.length === 0) {
     return null
   }
   return (
-    <pre className="rounded-md relative group">
+    <pre className={cn('rounded-md relative group', className)}>
       <CodeBlock
         value={formatted}
         language="sql"

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

@@ -66,7 +66,11 @@ const Message = memo(function Message({
         components={{
           ...markdownComponents,
           pre: (props: any) => {
-            return <AIPolicyPre onDiff={onDiff}>{props.children[0].props.children}</AIPolicyPre>
+            return (
+              <AIPolicyPre onDiff={onDiff} className="pt-3">
+                {props.children[0].props.children}
+              </AIPolicyPre>
+            )
           },
         }}
       >

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

@@ -286,6 +286,7 @@ export const AIPolicyEditorPanel = memo(function ({
                   modified={incomingChange}
                   onMount={(editor) => (diffEditorRef.current = editor)}
                   options={{
+                    wordWrap: 'on',
                     renderSideBySide: false,
                     scrollBeyondLastLine: false,
                     renderOverviewRuler: false,

apps/studio/components/interfaces/SQLEditor/AISettingsModal.tsx

@@ -1,64 +0,0 @@
-import { ModalProps } from '@ui/components/Modal/Modal'
-import { useLocalStorageQuery, useSelectedOrganization, useStore } from 'hooks'
-import { IS_PLATFORM, OPT_IN_TAGS } from 'lib/constants'
-import Link from 'next/link'
-import { Alert, IconExternalLink, Modal, Toggle } from 'ui'
-export interface AISettingsModalProps {
-  visible: boolean
-}
-
-const AISettingsModal = (props: ModalProps) => {
-  const selectedOrganization = useSelectedOrganization()
-  const isOptedInToAI = selectedOrganization?.opt_in_tags?.includes(OPT_IN_TAGS.AI_SQL) ?? false
-  const [hasEnabledAISchema, setHasEnabledAISchema] = useLocalStorageQuery(
-    'supabase_sql-editor-ai-schema-enabled',
-    true
-  )
-  const { ui } = useStore()
-
-  const includeSchemaMetadata = (isOptedInToAI || !IS_PLATFORM) && hasEnabledAISchema
-
-  const handleOptInToggle = () => {
-    setHasEnabledAISchema((prev) => !prev)
-    ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
-  }
-
-  return (
-    <Modal header="SQL Editor AI Settings" hideFooter closable {...props}>
-      <div className="flex flex-col items-start justify-between gap-4 px-6 py-3">
-        {IS_PLATFORM && !isOptedInToAI && selectedOrganization && (
-          <Alert
-            variant="warning"
-            title="This option is only available if your organization has opted-in to sending anonymous data to OpenAI."
-          >
-            <Link
-              href={`/org/${selectedOrganization.slug}/general`}
-              className="flex flex-row gap-1 items-center"
-              target="_blank"
-              rel="noopener"
-            >
-              Go to your organization's settings to opt-in.
-              <IconExternalLink className="inline-block w-3 h-3" />
-            </Link>
-          </Alert>
-        )}
-        <div className="flex justify-between gap-8 mr-8 my-4">
-          <Toggle
-            disabled={IS_PLATFORM && !isOptedInToAI}
-            checked={includeSchemaMetadata}
-            onChange={handleOptInToggle}
-          />
-          <div className="grid gap-2">
-            <p className="text-sm">Include anonymous database metadata in AI queries</p>
-            <p className="text-sm text-foreground-light">
-              Includes table names, column names and their corresponding data types in the request.
-              This will generate queries that are more relevant to your project.
-            </p>
-          </div>
-        </div>
-      </div>
-    </Modal>
-  )
-}
-
-export default AISettingsModal

apps/studio/components/ui/AISettingsModal.tsx

@@ -56,8 +56,8 @@ const AISettingsModal = () => {
           <div className="grid gap-2">
             <p className="text-sm">Include anonymous database metadata in AI queries</p>
             <p className="text-sm text-foreground-light">
-              Includes table names, column names and their corresponding data types in the request.
-              This will generate queries that are more relevant to your project.
+              Metadata includes table names, column names and their corresponding data types in the
+              request. This will generate queries that are more relevant to your project.
             </p>
           </div>
         </div>