[pull] master from supabase:master

apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx

@@ -1,40 +1,72 @@
-import { Toggle } from 'ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
+import * as z from 'zod'
+
 import { useConsentState } from 'common'
 import Panel from 'components/ui/Panel'
 import { useSendResetMutation } from 'data/telemetry/send-reset-mutation'
+import { FormControl_Shadcn_, FormField_Shadcn_, Form_Shadcn_, Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const AnalyticsSchema = z.object({
+  telemetryEnabled: z.boolean(),
+})
 
 export const AnalyticsSettings = () => {
   const { hasAccepted, acceptAll, denyAll, categories } = useConsentState()
   const hasLoaded = categories !== null
 
   const { mutate: sendReset } = useSendResetMutation()
 
-  const onToggleOptIn = () => {
+  const form = useForm<z.infer<typeof AnalyticsSchema>>({
+    resolver: zodResolver(AnalyticsSchema),
+    values: { telemetryEnabled: hasAccepted },
+  })
+
+  const handleToggle = (value: boolean) => {
     if (!hasLoaded) {
-      toast.error(
+      return toast.error(
         "We couldn't load the privacy settings due to an ad blocker or network error. Please disable any ad blockers and try again. If the problem persists, please contact support."
       )
-      return
     }
 
-    if (hasAccepted) {
+    if (value) {
+      acceptAll()
+    } else {
       denyAll()
       sendReset()
-    } else {
-      acceptAll()
     }
+
+    form.setValue('telemetryEnabled', value)
   }
 
   return (
     <Panel title={<h5 key="panel-title">Analytics and Marketing</h5>}>
       <Panel.Content>
-        <Toggle
-          checked={hasAccepted}
-          onChange={onToggleOptIn}
-          label="Send telemetry data from Supabase services"
-          descriptionText="By opting in to sharing telemetry data, Supabase can analyze usage patterns to enhance user experience and use it for marketing and advertising purposes"
-        />
+        <Form_Shadcn_ {...form}>
+          <FormField_Shadcn_
+            control={form.control}
+            name="telemetryEnabled"
+            render={({ field }) => (
+              <FormItemLayout
+                layout="flex-row-reverse"
+                label="Send telemetry data from Supabase services"
+                description="By opting in to sharing telemetry data, Supabase can analyze usage patterns to enhance user experience and use it for marketing and advertising purposes"
+              >
+                <FormControl_Shadcn_>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={(value) => {
+                      field.onChange(value)
+                      handleToggle(value)
+                    }}
+                  />
+                </FormControl_Shadcn_>
+              </FormItemLayout>
+            )}
+          />
+        </Form_Shadcn_>
       </Panel.Content>
     </Panel>
   )

apps/studio/components/interfaces/Account/Preferences/HotkeySettings.tsx

@@ -1,8 +1,19 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+
 import { LOCAL_STORAGE_KEYS } from 'common'
 import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import Panel from 'components/ui/Panel'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
-import { KeyboardShortcut, Toggle } from 'ui'
+import { FormControl_Shadcn_, FormField_Shadcn_, Form_Shadcn_, KeyboardShortcut, Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const HotkeySchema = z.object({
+  commandMenuEnabled: z.boolean(),
+  aiAssistantEnabled: z.boolean(),
+  inlineEditorEnabled: z.boolean(),
+})
 
 export const HotkeySettings = () => {
   const [inlineEditorEnabled, setInlineEditorEnabled] = useLocalStorageQuery(
@@ -18,6 +29,15 @@ export const HotkeySettings = () => {
     true
   )
 
+  const form = useForm<z.infer<typeof HotkeySchema>>({
+    resolver: zodResolver(HotkeySchema),
+    values: {
+      commandMenuEnabled: commandMenuEnabled ?? true,
+      aiAssistantEnabled: aiAssistantEnabled ?? true,
+      inlineEditorEnabled: inlineEditorEnabled ?? true,
+    },
+  })
+
   return (
     <Panel
       title={
@@ -29,38 +49,89 @@ export const HotkeySettings = () => {
         </div>
       }
     >
-      <Panel.Content className="space-y-2">
-        <Toggle
-          checked={commandMenuEnabled}
-          onChange={() => setCommandMenuEnabled(!commandMenuEnabled)}
-          label={
-            <div className="flex items-center gap-x-3">
-              <KeyboardShortcut keys={['Meta', 'k']} />
-              <span>Command menu</span>
-            </div>
-          }
-        />
-        <Toggle
-          checked={aiAssistantEnabled}
-          onChange={() => setAiAssistantEnabled(!aiAssistantEnabled)}
-          label={
-            <div className="flex items-center gap-x-3">
-              <KeyboardShortcut keys={['Meta', 'i']} />
-              <span>AI Assistant Panel</span>
-            </div>
-          }
-        />
-        <Toggle
-          checked={inlineEditorEnabled}
-          onChange={() => setInlineEditorEnabled(!inlineEditorEnabled)}
-          label={
-            <div className="flex items-center gap-x-3">
-              <KeyboardShortcut keys={['Meta', 'e']} />
-              <span>Inline SQL Editor Panel</span>
-            </div>
-          }
-        />
-      </Panel.Content>
+      <Form_Shadcn_ {...form}>
+        <Panel.Content className="border-b">
+          <FormField_Shadcn_
+            control={form.control}
+            name="commandMenuEnabled"
+            render={({ field }) => (
+              <FormItemLayout
+                layout="flex-row-reverse"
+                label={
+                  <div className="flex items-center gap-x-3">
+                    <KeyboardShortcut keys={['Meta', 'k']} />
+                    <span>Command menu</span>
+                  </div>
+                }
+              >
+                <FormControl_Shadcn_>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={(value) => {
+                      field.onChange(value)
+                      setCommandMenuEnabled(value)
+                    }}
+                  />
+                </FormControl_Shadcn_>
+              </FormItemLayout>
+            )}
+          />
+        </Panel.Content>
+        <Panel.Content className="border-b">
+          <FormField_Shadcn_
+            control={form.control}
+            name="aiAssistantEnabled"
+            render={({ field }) => (
+              <FormItemLayout
+                layout="flex-row-reverse"
+                label={
+                  <div className="flex items-center gap-x-3">
+                    <KeyboardShortcut keys={['Meta', 'i']} />
+                    <span>AI Assistant Panel</span>
+                  </div>
+                }
+              >
+                <FormControl_Shadcn_>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={(value) => {
+                      field.onChange(value)
+                      setAiAssistantEnabled(value)
+                    }}
+                  />
+                </FormControl_Shadcn_>
+              </FormItemLayout>
+            )}
+          />
+        </Panel.Content>
+        <Panel.Content>
+          <FormField_Shadcn_
+            control={form.control}
+            name="inlineEditorEnabled"
+            render={({ field }) => (
+              <FormItemLayout
+                layout="flex-row-reverse"
+                label={
+                  <div className="flex items-center gap-x-3">
+                    <KeyboardShortcut keys={['Meta', 'e']} />
+                    <span>Inline SQL Editor Panel</span>
+                  </div>
+                }
+              >
+                <FormControl_Shadcn_>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={(value) => {
+                      field.onChange(value)
+                      setInlineEditorEnabled(value)
+                    }}
+                  />
+                </FormControl_Shadcn_>
+              </FormItemLayout>
+            )}
+          />
+        </Panel.Content>
+      </Form_Shadcn_>
     </Panel>
   )
 }

apps/studio/components/interfaces/Account/Preferences/InlineEditorSettings.tsx

@@ -0,0 +1,86 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+
+import { LOCAL_STORAGE_KEYS } from 'common'
+import Panel from 'components/ui/Panel'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { FormControl_Shadcn_, FormField_Shadcn_, Form_Shadcn_, Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const InlineEditorSchema = z.object({
+  inlineEditorEnabled: z.boolean(),
+})
+
+export const useIsInlineEditorEnabled = () => {
+  const [inlineEditorEnabled] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR,
+    false
+  )
+
+  return inlineEditorEnabled ?? false
+}
+
+export const InlineEditorSettings = () => {
+  const [inlineEditorEnabled, setInlineEditorEnabled] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR,
+    false
+  )
+  const { data: org } = useSelectedOrganizationQuery()
+
+  const { mutate: sendEvent } = useSendEventMutation()
+
+  const form = useForm<z.infer<typeof InlineEditorSchema>>({
+    resolver: zodResolver(InlineEditorSchema),
+    values: {
+      inlineEditorEnabled: inlineEditorEnabled ?? false,
+    },
+  })
+
+  const handleToggle = (value: boolean) => {
+    setInlineEditorEnabled(value)
+    form.setValue('inlineEditorEnabled', value)
+
+    sendEvent({
+      action: 'inline_editor_setting_clicked',
+      properties: {
+        enabled: value,
+      },
+      groups: {
+        organization: org?.slug,
+      },
+    })
+  }
+
+  return (
+    <Panel title={<h5 id="inline-editor">Dashboard</h5>}>
+      <Panel.Content>
+        <Form_Shadcn_ {...form}>
+          <FormField_Shadcn_
+            control={form.control}
+            name="inlineEditorEnabled"
+            render={({ field }) => (
+              <FormItemLayout
+                layout="flex-row-reverse"
+                label="Edit entities in SQL"
+                description="When enabled, view and edit policies, triggers, and functions directly in the SQL editor instead of a more beginner-friendly UI panel. Ideal for those comfortable with SQL."
+              >
+                <FormControl_Shadcn_>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={(value) => {
+                      field.onChange(value)
+                      handleToggle(value)
+                    }}
+                  />
+                </FormControl_Shadcn_>
+              </FormItemLayout>
+            )}
+          />
+        </Form_Shadcn_>
+      </Panel.Content>
+    </Panel>
+  )
+}

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

@@ -29,13 +29,6 @@ export const FEATURE_PREVIEWS = [
     isNew: true,
     isPlatformOnly: true,
   },
-  {
-    key: LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR,
-    name: 'Directly edit database entities',
-    discussionsUrl: 'https://github.com/orgs/supabase/discussions/33690',
-    isNew: false,
-    isPlatformOnly: false,
-  },
   {
     key: LOCAL_STORAGE_KEYS.UI_PREVIEW_API_SIDE_PANEL,
     name: 'Project API documentation',

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

@@ -84,11 +84,6 @@ export const useIsColumnLevelPrivilegesEnabled = () => {
   return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]
 }
 
-export const useIsInlineEditorEnabled = () => {
-  const { flags } = useFeaturePreviewContext()
-  return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR]
-}
-
 export const useUnifiedLogsPreview = () => {
   const { flags, onUpdateFlag } = useFeaturePreviewContext()
 

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

@@ -13,7 +13,6 @@ import { Branching2Preview } from './Branching2Preview'
 import { CLSPreview } from './CLSPreview'
 import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
 import { useFeaturePreviewContext, useFeaturePreviewModal } from './FeaturePreviewContext'
-import { InlineEditorPreview } from './InlineEditorPreview'
 import { SecurityNotificationsPreview } from './SecurityNotificationsPreview'
 import { UnifiedLogsPreview } from './UnifiedLogsPreview'
 
@@ -22,7 +21,6 @@ const FEATURE_PREVIEW_KEY_TO_CONTENT: {
 } = {
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]: <Branching2Preview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]: <AdvisorRulesPreview />,
-  [LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR]: <InlineEditorPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_API_SIDE_PANEL]: <APISidePanelPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]: <CLSPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]: <UnifiedLogsPreview />,

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

@@ -139,8 +139,9 @@ export const AuditLogsForm = () => {
                           <InlineLink
                             href={`/project/${projectRef}/logs/explorer?q=select%0A++cast(timestamp+as+datetime)+as+timestamp%2C%0A++event_message%2C+metadata+%0Afrom+auth_audit_logs+%0Alimit+10%0A`}
                           >
-                            Auth logs.
+                            Auth logs
                           </InlineLink>
+                          .
                         </p>
                       }
                     >