[pull] master from supabase:master

apps/docs/content/guides/database/connection-management.mdx

@@ -15,7 +15,7 @@ You can change how many database connections Supavisor can manage by altering th
 
 ![Connection Info and Certificate.](/docs/img/database/pool-size.png)
 
-The general rule is that if you are heavily using the PostgREST database API, you should be conscientious about raising your pool size past 40%. Otherwise, you can commit 80% to the pool. This leaves adequate room for the Authentication server and other utilities.
+The general rule is that if you are heavily using the PostgREST database API, you should be conscientious about raising your pool size past 40% of the Database Max Connections. Otherwise, you can commit 80% to the pool. This leaves adequate room for the Authentication server and other utilities.
 
 These numbers are generalizations and depends on other Supabase products that you use and the extent of their usage. The actual values depend on your concurrent peak connection usage. For instance, if you were only using 80 connections in a week period and your database max connections is set to 500, then realistically you could allocate the difference of 420 (minus a reasonable buffer) to service more demand.
 

apps/docs/content/guides/storage/management/copy-move-objects.mdx

@@ -74,7 +74,11 @@ await supabase.storage.from('avatars').move('public/avatar1.png', 'private/avata
 
 ## Permissions
 
-For a user to move and copy objects, they need `select` permission on the source object and `insert` permission on the destination object. For example:
+To **copy** objects, users need `select` permission on the source object and `insert` permission on the destination object. If the user also has `update` permission, the copy can be performed as an upsert, which will overwrite the destination object if it already exists.
+
+To **move** objects, users need `select` and `update` permissions on the object.
+
+For example:
 
 ```sql
 create policy "User can select their own objects (in any buckets)"
@@ -85,11 +89,19 @@ using (
     owner_id = (select auth.uid())
 );
 
-create policy "User can upload in their own folders (in any buckets)"
+create policy "User can insert in their own folders (in any buckets)"
 on storage.objects
 for insert
 to authenticated
 with check (
     (storage.folder(name))[1] = (select auth.uid())
 );
+
+create policy "User can update their own objects (in any buckets)"
+on storage.objects
+for update
+to authenticated
+using (
+    owner_id = (select auth.uid())
+);
 ```

apps/docs/public/humans.txt

@@ -94,6 +94,7 @@ Ignacio Dobronich
 Illia Basalaiev
 Inian P
 Ivan Vasilov
+Jamie Boyd
 Jason Farber
 Jean-Paul Argudo
 Jeezy

apps/studio/components/grid/components/grid/Grid.tsx

@@ -250,7 +250,11 @@ export const Grid = memo(
                 <GenericSkeletonLoader className="w-full top-9 absolute p-2" />
               )}
 
-              {isError && <GridError error={error} />}
+              {isError && (
+                <div className="w-full top-9 absolute p-2 pointer-events-auto">
+                  <GridError error={error} />
+                </div>
+              )}
 
               {isSuccess && (
                 <>

apps/studio/components/interfaces/Auth/Users/UsersV2.tsx

@@ -4,8 +4,8 @@ import { keepPreviousData, useQueryClient } from '@tanstack/react-query'
 import AwesomeDebouncePromise from 'awesome-debounce-promise'
 import { LOCAL_STORAGE_KEYS, useFlag, useParams } from 'common'
 import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import { APIDocsButton } from 'components/ui/APIDocsButton'
 import { AlertError } from 'components/ui/AlertError'
+import { APIDocsButton } from 'components/ui/APIDocsButton'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FilterPopover } from 'components/ui/FilterPopover'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
@@ -39,23 +39,23 @@ import { UIEvent, useEffect, useMemo, useRef, useState } from 'react'
 import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
 import { toast } from 'sonner'
 import {
+  Alert_Shadcn_,
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
-  Alert_Shadcn_,
   Button,
+  cn,
   LoadingLine,
   ResizablePanel,
   ResizablePanelGroup,
+  Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
-  Select_Shadcn_,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  cn,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -482,10 +482,10 @@ export const UsersV2 = () => {
   return (
     <>
       <div className="h-full flex flex-col">
-        <FormHeader className="py-4 px-6 !mb-0" title="Users" />
+        <FormHeader className="py-4 px-6 !mb-0 border-b" title="Users" />
 
         {showImprovedSearchOptIn && (
-          <Alert_Shadcn_ className="rounded-none mb-0 border-0 border-t relative">
+          <Alert_Shadcn_ className="rounded-none mb-0 border-0 relative">
             <Tooltip>
               <TooltipTrigger
                 onClick={() => setImprovedSearchDismissed(true)}
@@ -535,7 +535,7 @@ export const UsersV2 = () => {
           </Alert_Shadcn_>
         )}
 
-        <div className="bg-surface-200 py-3 px-4 md:px-6 flex flex-col lg:flex-row lg:items-start justify-between gap-2 border-t">
+        <div className="bg-surface-200 py-3 px-4 md:px-6 flex flex-col lg:flex-row lg:items-start justify-between gap-2">
           {selectedUsers.size > 0 ? (
             <div className="flex items-center gap-x-2">
               <Button type="default" icon={<Trash />} onClick={() => setShowDeleteModal(true)}>

apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx

@@ -203,7 +203,7 @@ export const SchemaGraph = () => {
 
   return (
     <>
-      <div className="flex items-center justify-between p-4 border-b border-muted">
+      <div className="flex items-center justify-between p-4 border-b border-muted h-[var(--header-height)]">
         {isLoadingSchemas && (
           <div className="h-[34px] w-[260px] bg-foreground-lighter rounded shimmering-loader" />
         )}
@@ -328,10 +328,6 @@ export const SchemaGraph = () => {
                   type: 'smoothstep',
                   animated: true,
                   deletable: false,
-                  style: {
-                    stroke: 'hsl(var(--border-stronger))',
-                    strokeWidth: 1,
-                  },
                 }}
                 nodeTypes={nodeTypes}
                 fitView

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

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
 import { AiIconAnimation, Button, Card, cn } from 'ui'
+
 import { AnimatedCursors } from './AnimatedCursors'
 
 /**
@@ -22,7 +23,7 @@ export const EmptyRealtime = ({ projectRef }: { projectRef: string }) => {
   }
 
   return (
-    <div className="flex grow items-center justify-center p-12 border-t @container">
+    <div className="flex grow items-center justify-center p-12 @container">
       <div className="w-full max-w-4xl flex flex-col items-center gap-0">
         <div className="text-center mb-12">
           <AnimatedCursors />

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

@@ -1,13 +1,13 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { PlayCircle, StopCircle } from 'lucide-react'
-import { Dispatch, SetStateAction } from 'react'
-
 import { IS_PLATFORM, useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { getTemporaryAPIKey } from 'data/api-keys/temp-api-keys-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { PlayCircle, StopCircle } from 'lucide-react'
+import { Dispatch, SetStateAction } from 'react'
+
 import { ChooseChannelPopover } from './ChooseChannelPopover'
 import { RealtimeFilterPopover } from './RealtimeFilterPopover'
 import { RealtimeTokensPopover } from './RealtimeTokensPopover'
@@ -29,7 +29,7 @@ export const Header = ({ config, onChangeConfig }: HeaderProps) => {
   )
 
   return (
-    <div className="flex flex-row h-14 gap-2.5 items-center px-4">
+    <div className="flex flex-row min-h-14 md:min-h-[var(--header-height)] gap-2.5 items-center px-4 border-b ">
       <div className="flex flex-row">
         <ChooseChannelPopover config={config} onChangeConfig={onChangeConfig} />
         <RealtimeTokensPopover config={config} onChangeConfig={onChangeConfig} />

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

@@ -1,11 +1,11 @@
-import { X } from 'lucide-react'
-import { useMemo } from 'react'
-
 import { useParams } from 'common'
 import CopyButton from 'components/ui/CopyButton'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { X } from 'lucide-react'
+import { useMemo } from 'react'
 import { Button, cn } from 'ui'
+
 import type { LogData } from './Messages.types'
 import { SelectedRealtimeMessagePanel } from './SelectedRealtimeMessagePanel'
 
@@ -25,9 +25,7 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => {
 
   return (
     <div
-      className={cn(
-        'relative flex h-full flex-grow flex-col border-l border-t-2 overflow-y-scroll bg-200'
-      )}
+      className={cn('relative flex h-full flex-grow flex-col border-l overflow-y-scroll bg-200')}
     >
       <div
         className={cn(

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

@@ -1,10 +1,4 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { isEqual } from 'lodash'
-import { ExternalLink, Loader2, Megaphone } from 'lucide-react'
-import Link from 'next/link'
-import { useEffect, useState } from 'react'
-import DataGrid, { Row } from 'react-data-grid'
-
 import { useParams } from 'common'
 import { DocsButton } from 'components/ui/DocsButton'
 import NoPermission from 'components/ui/NoPermission'
@@ -13,10 +7,16 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { DOCS_URL } from 'lib/constants'
-import { Button, IconBroadcast, IconDatabaseChanges, IconPresence, cn } from 'ui'
+import { isEqual } from 'lodash'
+import { ExternalLink, Loader2, Megaphone } from 'lucide-react'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import DataGrid, { Row } from 'react-data-grid'
+import { Button, cn, IconBroadcast, IconDatabaseChanges, IconPresence } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
-import MessageSelection from './MessageSelection'
+
 import type { LogData } from './Messages.types'
+import MessageSelection from './MessageSelection'
 import NoChannelEmptyState from './NoChannelEmptyState'
 import { ColumnRenderer } from './RealtimeMessageColumnRenderer'
 
@@ -140,12 +140,12 @@ const MessagesTable = ({
 
   return (
     <>
-      <section className="flex w-full flex-col" style={{ maxHeight: 'calc(100vh - 42px - 3rem)' }}>
+      <section className="flex w-full flex-col md:max-h-[calc(100vh-var(--header-height)-3rem)]">
         <ShimmerLine active={enabled} />
         <div className={cn('flex h-full flex-row', enabled ? 'border-brand-400' : null)}>
           <div className="flex flex-grow flex-col">
             {enabled && (
-              <div className="w-full h-9 px-4 bg-surface-100 border-b items-center inline-flex justify-between text-foreground-light">
+              <div className="w-full h-9 px-4 bg-surface-100 items-center inline-flex justify-between text-foreground-light">
                 <div className="inline-flex gap-2.5 text-xs">
                   <Loader2 size="16" className="animate-spin" />
                   <div>Listening</div>

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

@@ -1,10 +1,10 @@
 import { useParams } from 'common'
-import { useEffect, useState } from 'react'
-
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { useEffect, useState } from 'react'
+
 import { EmptyRealtime } from './EmptyRealtime'
 import { Header } from './Header'
 import MessagesTable from './MessagesTable'

apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx

@@ -13,6 +13,7 @@ import {
   Separator,
 } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
+
 import { ErrorCodeDialog } from '../ErrorCodeDialog'
 import type { LogSearchCallback, PreviewLogData } from '../Logs.types'
 import { ResponseCodeFormatter } from '../LogsFormatters'
@@ -131,14 +132,14 @@ const PropertyRow = ({
         <DropdownMenuTrigger className="group w-full" data-testid={dataTestId}>
           <div className="rounded-md w-full overflow-hidden">
             <div
-              className={cn('flex h-10 w-full', {
+              className={cn('flex h-[var(--header-height)] w-full', {
                 'flex-col gap-1.5 h-auto': isExpanded,
                 'items-center group-hover:bg-surface-300 gap-4': !isExpanded,
               })}
             >
               <h3
                 className={cn('pl-3 text-foreground-lighter text-sm text-left', {
-                  'h-10 flex items-center': isExpanded,
+                  'h-[var(--header-height)] flex items-center': isExpanded,
                 })}
               >
                 {keyName}

apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx

@@ -1,33 +1,33 @@
-import dayjs from 'dayjs'
-import { Rewind } from 'lucide-react'
-import { useRouter } from 'next/router'
-import { PropsWithChildren, useEffect, useState } from 'react'
-
 import { useParams } from 'common'
 import PreviewFilterPanel from 'components/interfaces/Settings/Logs/PreviewFilterPanel'
 import LoadingOpacity from 'components/ui/LoadingOpacity'
 import ShimmerLine from 'components/ui/ShimmerLine'
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
+import dayjs from 'dayjs'
 import useLogsPreview from 'hooks/analytics/useLogsPreview'
 import { useLogsUrlState } from 'hooks/analytics/useLogsUrlState'
 import { useSelectedLog } from 'hooks/analytics/useSelectedLog'
 import useSingleLog from 'hooks/analytics/useSingleLog'
 import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
+import { Rewind } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect, useState } from 'react'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { Button } from 'ui'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
-import LogTable from './LogTable'
-import { DatePickerValue } from './Logs.DatePickers'
+
 import {
-  LOGS_TABLES,
   LOG_ROUTES_WITH_REPLICA_SUPPORT,
+  LOGS_TABLES,
   LogsTableName,
   PREVIEWER_DATEPICKER_HELPERS,
 } from './Logs.constants'
+import { DatePickerValue } from './Logs.DatePickers'
 import type { Filters, LogSearchCallback, LogTemplate, QueryType } from './Logs.types'
 import { maybeShowUpgradePromptIfNotEntitled } from './Logs.utils'
+import LogTable from './LogTable'
 import UpgradePrompt from './UpgradePrompt'
 
 /**

apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx

@@ -1,11 +1,10 @@
-import { BookOpen, Check, ChevronDown, Copy, ExternalLink, X } from 'lucide-react'
-import Link from 'next/link'
-import { ReactNode, useEffect, useState } from 'react'
-
 import { IS_PLATFORM } from 'common'
 import Table from 'components/to-be-cleaned/Table'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { DOCS_URL } from 'lib/constants'
+import { BookOpen, Check, ChevronDown, Copy, ExternalLink, X } from 'lucide-react'
+import Link from 'next/link'
+import { ReactNode, useEffect, useState } from 'react'
 import { logConstants } from 'shared-data'
 import {
   Badge,
@@ -21,6 +20,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+
 import {
   EXPLORER_DATEPICKER_HELPERS,
   LOGS_SOURCE_DESCRIPTION,
@@ -81,7 +81,7 @@ const LogsQueryPanel = ({
   }, [value.from, value.to, value.text, value.isHelper])
 
   return (
-    <div className="border-b bg-surface-100">
+    <div className="flex items-center border-b bg-surface-100 h-[var(--header-height)]">
       <div className="flex w-full items-center justify-between px-4 md:px-5 py-2 overflow-x-scroll no-scrollbar">
         <div className="flex w-full flex-row items-center justify-between gap-x-4">
           <div className="flex items-center gap-2">