[pull] master from supabase:master

apps/studio/README.md

@@ -40,11 +40,11 @@ Project settings are managed outside of the Dashboard. If you use docker compose
 # You'll need to be on Node v20
 # in /studio
 
-npm i # install dependencies
-npm run dev:secrets:pull # Supabase internal use: if you are working on the platform version of the Studio
-npm run dev # start dev server
-npm run test # run tests
-npm run -- --watch # run tests in watch mode
+pnpmn install # install dependencies
+mise studio  # Supabase internal use: if you are working on the platform version of the Studio
+pnpm run dev # start dev server
+pnpm run test # run tests
+pnpm run test -- --watch # run tests in watch mode
 ```
 
 ## Running within a self-hosted environment

apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx

@@ -1,9 +1,10 @@
-import { ControllerRenderProps, UseFormReturn } from 'react-hook-form'
+import { ControllerRenderProps } from 'react-hook-form'
 
 import { useFlag, useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
 import { useDefaultRegionQuery } from 'data/misc/get-default-region-query'
 import { useOrganizationAvailableRegionsQuery } from 'data/organizations/organization-available-regions-query'
+import type { DesiredInstanceSize } from 'data/projects/new-project.constants'
 import { BASE_PATH, PROVIDERS } from 'lib/constants'
 import type { CloudProvider } from 'shared-data'
 import {
@@ -27,7 +28,7 @@ import { getAvailableRegions } from './ProjectCreation.utils'
 interface RegionSelectorProps {
   cloudProvider: CloudProvider
   field: ControllerRenderProps<any, 'dbRegion'>
-  form: UseFormReturn<any>
+  instanceSize?: DesiredInstanceSize
   layout?: 'vertical' | 'horizontal'
 }
 
@@ -38,6 +39,7 @@ interface RegionSelectorProps {
 export const RegionSelector = ({
   cloudProvider,
   field,
+  instanceSize,
   layout = 'horizontal',
 }: RegionSelectorProps) => {
   const { slug } = useParams()
@@ -54,7 +56,10 @@ export const RegionSelector = ({
     isLoading: isLoadingAvailableRegions,
     isError: isErrorAvailableRegions,
     error: errorAvailableRegions,
-  } = useOrganizationAvailableRegionsQuery({ slug, cloudProvider }, { enabled: smartRegionEnabled })
+  } = useOrganizationAvailableRegionsQuery(
+    { slug, cloudProvider, desiredInstanceSize: instanceSize },
+    { enabled: smartRegionEnabled, staleTime: 1000 * 60 * 5 } // 5 minutes
+  )
 
   const smartRegions = availableRegionsData?.all.smartGroup ?? []
   const allRegions = availableRegionsData?.all.specific ?? []

apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx

@@ -1,6 +1,6 @@
 import { PlusCircle } from 'lucide-react'
 import Link from 'next/link'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, SetStateAction, useState, useEffect } from 'react'
 
 import { useParams } from 'common'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -38,6 +38,11 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
   const { data: org } = useSelectedOrganizationQuery()
   const { mutate: sendEvent } = useSendEventMutation()
 
+  // Update tempConfig when config changes to ensure consistency
+  useEffect(() => {
+    setTempConfig(config)
+  }, [config])
+
   const onOpen = (v: boolean) => {
     // when opening, copy the outside config into the intermediate one
     if (v === true) {
@@ -127,27 +132,36 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
               <div className="flex gap-2.5 items-center">
                 <IconDatabaseChanges
                   size="xlarge"
-                  className="bg-foreground rounded text-background-muted"
+                  className={cn(
+                    'rounded text-background-muted',
+                    config.enableDbChanges ? 'bg-foreground' : 'bg-foreground-lighter'
+                  )}
                 />
-                <label htmlFor="toggle-db-changes" className="text-sm">
+                <label
+                  htmlFor="toggle-db-changes"
+                  className={cn('text-sm', !config.enableDbChanges && 'text-foreground-lighter')}
+                >
                   Database changes
                 </label>
               </div>
               <Toggle
                 id="toggle-db-changes"
                 size="tiny"
                 checked={tempConfig.enableDbChanges}
+                disabled={!config.enableDbChanges}
                 onChange={() =>
                   setTempConfig({ ...tempConfig, enableDbChanges: !tempConfig.enableDbChanges })
                 }
               />
             </div>
             <p className="text-xs text-foreground-light pt-1">
-              Listen for Database inserts, updates, deletes and more
+              {config.enableDbChanges
+                ? 'Listen for Database inserts, updates, deletes and more'
+                : 'Enable realtime publications to listen for database changes'}
             </p>
           </div>
 
-          {tempConfig.enableDbChanges && (
+          {tempConfig.enableDbChanges && config.enableDbChanges && (
             <>
               <div className="border-b border-overlay text-xs px-4 py-3 text-foreground">
                 Filter messages from database changes

apps/studio/components/interfaces/Realtime/Inspector/index.tsx

@@ -1,10 +1,10 @@
 import { useParams } from 'common'
 import { useState, useEffect } from 'react'
-import { motion } from 'framer-motion'
-import { MousePointer2 } from 'lucide-react'
 
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { Header } from './Header'
 import MessagesTable from './MessagesTable'
 import { SendMessageModal } from './SendMessageModal'
@@ -17,6 +17,19 @@ import { EmptyRealtime } from './EmptyRealtime'
 export const RealtimeInspector = () => {
   const { ref } = useParams()
   const { data: org } = useSelectedOrganizationQuery()
+  const { data: project } = useSelectedProjectQuery()
+
+  // Check if realtime publications are available
+  const { data: publications } = useDatabasePublicationsQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+  const realtimePublication = (publications ?? []).find(
+    (publication) => publication.name === 'supabase_realtime'
+  )
+  const isRealtimeAvailable =
+    !!realtimePublication &&
+    ((realtimePublication?.tables ?? []).length > 0 || realtimePublication?.tables === null)
 
   const [sendMessageShown, setSendMessageShown] = useState(false)
   const [realtimeConfig, setRealtimeConfig] = useState<RealtimeConfig>({
@@ -31,13 +44,18 @@ export const RealtimeInspector = () => {
     filter: undefined,
     bearer: null,
     enablePresence: true,
-    enableDbChanges: true,
+    enableDbChanges: isRealtimeAvailable, // Initialize based on publications availability
     enableBroadcast: true,
   })
 
   const { mutate: sendEvent } = useSendEventMutation()
   const { logData, sendMessage } = useRealtimeMessages(realtimeConfig, setRealtimeConfig)
 
+  // Update enableDbChanges when publications change
+  useEffect(() => {
+    setRealtimeConfig((prev) => ({ ...prev, enableDbChanges: isRealtimeAvailable }))
+  }, [isRealtimeAvailable])
+
   return (
     <div className="flex flex-col grow h-full">
       <Header config={realtimeConfig} onChangeConfig={setRealtimeConfig} />

apps/studio/components/interfaces/Realtime/Inspector/useRealtimeMessages.ts

@@ -168,7 +168,7 @@ export const useRealtimeMessages = (
     }
 
     // Finally, subscribe to the Channel we just setup
-    newChannel.subscribe(async (status) => {
+    newChannel.subscribe(async (status, err) => {
       if (status === 'SUBSCRIBED') {
         // Let LiveView know we connected so we can update the button text
         // pushMessageTo('#conn_info', 'broadcast_subscribed', { host: host })
@@ -192,9 +192,11 @@ export const useRealtimeMessages = (
           })
         }
       } else if (status === 'CHANNEL_ERROR') {
-        toast.error(
-          `Failed to connect to the channel ${channelName}: This may be due to restrictive RLS policies. Check your role and try again.`
-        )
+        if (err?.message) {
+          toast.error(`Failed to connect with the following error: ${err.message}`)
+        } else {
+          toast.error(`Failed to connect. Please check your RLS policies and try again.`)
+        }
 
         newChannel.unsubscribe()
         setChannel(undefined)

apps/studio/data/organizations/keys.ts

@@ -1,3 +1,5 @@
+import type { DesiredInstanceSizeForAvailableRegions } from './organization-available-regions-query'
+
 export const organizationKeys = {
   list: () => ['organizations'] as const,
   detail: (slug?: string) => ['organizations', slug] as const,
@@ -20,6 +22,9 @@ export const organizationKeys = {
     ['organizations', slug, 'validate-token', token] as const,
   projectClaim: (slug: string, token: string) =>
     ['organizations', slug, 'project-claim', token] as const,
-  availableRegions: (slug: string | undefined, cloudProvider: string) =>
-    ['organizations', slug, 'available-regions', cloudProvider] as const,
+  availableRegions: (
+    slug: string | undefined,
+    cloudProvider: string,
+    size?: DesiredInstanceSizeForAvailableRegions
+  ) => ['organizations', slug, 'available-regions', cloudProvider, size] as const,
 }

apps/studio/data/organizations/organization-available-regions-query.ts

@@ -1,16 +1,21 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
+import type { operations } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
 import { organizationKeys } from './keys'
 
+export type DesiredInstanceSizeForAvailableRegions =
+  operations['v1-get-available-regions']['parameters']['query']['desired_instance_size']
+
 export type OrganizationAvailableRegionsVariables = {
   slug?: string
   cloudProvider: 'AWS' | 'FLY' | 'AWS_K8S' | 'AWS_NIMBUS'
+  desiredInstanceSize?: DesiredInstanceSizeForAvailableRegions
 }
 
 export async function getOrganizationAvailableRegions(
-  { slug, cloudProvider }: OrganizationAvailableRegionsVariables,
+  { slug, cloudProvider, desiredInstanceSize }: OrganizationAvailableRegionsVariables,
   signal?: AbortSignal
 ) {
   if (!slug) throw new Error('slug is required')
@@ -20,6 +25,7 @@ export async function getOrganizationAvailableRegions(
       query: {
         cloud_provider: cloudProvider,
         organization_slug: slug,
+        desired_instance_size: desiredInstanceSize,
       },
     },
     signal,
@@ -34,7 +40,7 @@ export type OrganizationAvailableRegionsData = Awaited<
 export type OrganizationAvailableRegionsError = ResponseError
 
 export const useOrganizationAvailableRegionsQuery = <TData = OrganizationAvailableRegionsData>(
-  { slug, cloudProvider }: OrganizationAvailableRegionsVariables,
+  { slug, cloudProvider, desiredInstanceSize }: OrganizationAvailableRegionsVariables,
   {
     enabled = true,
     ...options
@@ -44,8 +50,10 @@ export const useOrganizationAvailableRegionsQuery = <TData = OrganizationAvailab
     TData
   > = {}
 ) =>
-  useQuery<OrganizationAvailableRegionsData, OrganizationAvailableRegionsError, TData>(
-    organizationKeys.availableRegions(slug, cloudProvider),
-    ({ signal }) => getOrganizationAvailableRegions({ slug, cloudProvider }, signal),
-    { enabled: enabled && typeof slug !== 'undefined', ...options }
-  )
+  useQuery<OrganizationAvailableRegionsData, OrganizationAvailableRegionsError, TData>({
+    queryKey: organizationKeys.availableRegions(slug, cloudProvider, desiredInstanceSize),
+    queryFn: ({ signal }) =>
+      getOrganizationAvailableRegions({ slug, cloudProvider, desiredInstanceSize }, signal),
+    enabled: enabled && typeof slug !== 'undefined',
+    ...options,
+  })