[pull] master from supabase:master

apps/design-system/README.md

@@ -20,6 +20,16 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
+### Watching for MDX changes
+
+If you would like to watch for changes to MDX files with hot reload, you can run the following command in a separate Terminal shell:
+
+```
+pnpm content:dev
+```
+
+This runs Contentlayer concurrently and watches for any changes.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

apps/design-system/package.json

@@ -10,6 +10,7 @@
     "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --log-level silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
     "start": "next start",
     "lint": "next lint",
+    "content:dev": "contentlayer2 dev",
     "content:build": "contentlayer2 build",
     "clean": "rimraf node_modules .next .turbo",
     "typecheck": "contentlayer2 build && tsc --noEmit -p tsconfig.json"

apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx

@@ -78,7 +78,7 @@ hideToc: true
   <StepHikeCompact.Step step={5}>
     <StepHikeCompact.Details title="Query data from the app">
 
-    In `App.jsx`, add a `getInstruments` function to fetch the data and display the query result to the page using a Supabase client.
+    Replace the contents of `App.jsx` to add a `getInstruments` function to fetch the data and display the query result to the page using a Supabase client.
 
     </StepHikeCompact.Details>
     <StepHikeCompact.Code>
@@ -120,7 +120,7 @@ hideToc: true
   <StepHikeCompact.Step step={6}>
     <StepHikeCompact.Details title="Start the app">
 
-    Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should see the list of instruments.
+    Run the development server, go to http://localhost:5173 in a browser and you should see the list of instruments.
 
     </StepHikeCompact.Details>
 

apps/docs/content/guides/platform/credits.mdx

@@ -35,7 +35,7 @@ You may want to consider this option to avoid issues with recurring payments, ga
 
 <Admonition type="note">
 
-If you are interested in larger (> <Price price="1" />,000) credit packages, [reach out](https://supabase.com/dashboard/support/new?subject=I%20would%20like%20to%20inquire%20about%20larger%20credit%20packages&category=Sales).
+If you are interested in larger (> <Price price="2000" />) credit packages, [reach out](https://supabase.com/dashboard/support/new?subject=I%20would%20like%20to%20inquire%20about%20larger%20credit%20packages&category=Sales).
 
 </Admonition>
 

apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx

@@ -9,6 +9,7 @@ import { useDatabaseExtensionEnableMutation } from 'data/database-extensions/dat
 import { useSchemasQuery } from 'data/database/schemas-query'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { useIsOrioleDb, useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { useProtectedSchemas } from 'hooks/useProtectedSchemas'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
@@ -43,6 +44,7 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM
     },
     { enabled: visible }
   )
+  const { data: protectedSchemas } = useProtectedSchemas({ excludeSchemas: ['extensions'] })
   const { mutate: enableExtension, isLoading: isEnabling } = useDatabaseExtensionEnableMutation({
     onSuccess: () => {
       toast.success(`Extension "${extension.name}" is now enabled`)
@@ -180,19 +182,26 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM
                       Create a new schema "{extension.name}"
                     </Listbox.Option>
                     <Modal.Separator />
-                    {schemas?.map((schema) => {
-                      return (
-                        <Listbox.Option
-                          key={schema.id}
-                          id={schema.name}
-                          label={schema.name}
-                          value={schema.name}
-                          addOnBefore={() => <Database size={16} strokeWidth={1.5} />}
-                        >
-                          {schema.name}
-                        </Listbox.Option>
+                    {schemas
+                      ?.filter(
+                        (schema) =>
+                          !protectedSchemas.some(
+                            (protectedSchema) => protectedSchema.name === schema.name
+                          )
                       )
-                    })}
+                      .map((schema) => {
+                        return (
+                          <Listbox.Option
+                            key={schema.id}
+                            id={schema.name}
+                            label={schema.name}
+                            value={schema.name}
+                            addOnBefore={() => <Database size={16} strokeWidth={1.5} />}
+                          >
+                            {schema.name}
+                          </Listbox.Option>
+                        )
+                      })}
                   </Listbox>
                 )}
               </Modal.Content>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.tsx

@@ -109,9 +109,8 @@ const SpreadsheetImport = ({
       const [file] = event.target.files || event.dataTransfer.files
       if (file && !flagInvalidFileImport(file)) {
         await processFile(file)
-      } else {
-        event.target.value = ''
       }
+      event.target.value = ''
     },
     [processFile]
   )

apps/studio/components/ui/Charts/StackedBarChart.tsx

@@ -80,7 +80,17 @@ const StackedBarChart: React.FC<Props> = ({
   const resolvedHighlightedValue =
     focusDataIndex !== null ? data[focusDataIndex]?.[yAxisKey] : highlightedValue
 
-  if (!data || data.length === 0) return <NoDataPlaceholder size={size} />
+  if (!data || data.length === 0) {
+    return (
+      <NoDataPlaceholder
+        description="It may take up to 24 hours for data to refresh"
+        size={size}
+        attribute={title}
+        format={format}
+      />
+    )
+  }
+
   const stackColorScales = genStackColorScales(stackColors)
   return (
     <div className="w-full">

apps/studio/data/analytics/functions-combined-stats-query.ts

@@ -0,0 +1,70 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { operations } from 'api-types'
+import { get, handleError } from 'data/fetchers'
+import { analyticsKeys } from './keys'
+
+export type FunctionsCombinedStatsVariables = {
+  projectRef?: string
+  functionId?: string
+  interval?: operations['FunctionsLogsController_getCombinedStats']['parameters']['query']['interval']
+}
+
+export type FunctionsCombinedStatsResponse = any
+
+export async function getFunctionsCombinedStats(
+  { projectRef, functionId, interval }: FunctionsCombinedStatsVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+  if (!functionId) {
+    throw new Error('functionId is required')
+  }
+  if (!interval) {
+    throw new Error('interval is required')
+  }
+
+  const { data, error } = await get(
+    '/platform/projects/{ref}/analytics/endpoints/functions.combined-stats',
+    {
+      params: {
+        path: {
+          ref: projectRef,
+        },
+        query: {
+          function_id: functionId,
+          interval,
+        },
+      },
+      signal,
+    }
+  )
+
+  if (error) handleError(error)
+
+  return data
+}
+
+export type FunctionsCombinedStatsData = Awaited<ReturnType<typeof getFunctionsCombinedStats>>
+export type FunctionsCombinedStatsError = unknown
+
+export const useFunctionsCombinedStatsQuery = <TData = FunctionsCombinedStatsData>(
+  { projectRef, functionId, interval }: FunctionsCombinedStatsVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<FunctionsCombinedStatsData, FunctionsCombinedStatsError, TData> = {}
+) =>
+  useQuery<FunctionsCombinedStatsData, FunctionsCombinedStatsError, TData>(
+    analyticsKeys.functionsCombinedStats(projectRef, { functionId, interval }),
+    ({ signal }) => getFunctionsCombinedStats({ projectRef, functionId, interval }, signal),
+    {
+      enabled:
+        enabled &&
+        typeof projectRef !== 'undefined' &&
+        typeof functionId !== 'undefined' &&
+        typeof interval !== 'undefined',
+      ...options,
+    }
+  )

apps/studio/data/analytics/keys.ts

@@ -1,5 +1,24 @@
 export const analyticsKeys = {
   // logs/reports endpoints
+  functionsCombinedStats: (
+    projectRef: string | undefined,
+    {
+      interval,
+      functionId,
+    }: {
+      functionId: string | undefined
+      interval: string | undefined
+    }
+  ) =>
+    [
+      'projects',
+      projectRef,
+      'functions-combined-stats',
+      {
+        interval,
+        functionId,
+      },
+    ] as const,
   functionsInvStats: (
     projectRef: string | undefined,
     {